jQuery在html有效在jsp无效的原因及解决方法


Posted in Javascript onAugust 02, 2013

最近用jQuery来写下拉框的选项值的左右移动,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$("input").hover(function(){ 
$(this).val("") 
}, 
function(){ 
$(this).val(this.defaultValue) 
} 
) 
}) jQuery(function(){ 
//左侧加到右侧 
jQuery("#add").click(function(){$("#select1 option:selected").appendTo("#select2")}) 
//右侧加到左边 
jQuery("#remove").click(function(){$("#select2 option:selected").appendTo("#select1")}) 
//全部加到右边 
jQuery("#add_all").click(function(){$("#select1 option").appendTo("#select2")}) 
//全部移动左边 
$("#remove_all").click(function(){$("#select2 option").appendTo("#select1")}) 
//双击加到右边 
$("#select1").dblclick(function(){$("option:selected",this).appendTo("#select2")}) 
//双击移动左边 
$("#select2").dblclick(function(){$("option:selected",this).appendTo("#select1")}) 
}) 
function len(){ 
var sel = document.getElementById("select2"); 
alert(sel.length); 
} 
</script> 
<style type="text/css"> 
*{ margin:0; padding:0;} 
input{ color:#ccc;} 
div.centent { 
float:left; 
text-align: center; 
margin: 10px; 
} 
span { 
display:block; 
margin:2px 2px; 
padding:4px 10px; 
background:#898989; 
cursor:pointer; 
font-size:12px; 
color:white; 
} 
</style> 
</head> 
<body> 
<input type="text" value="aaaaa" /><br /> 
<div class="centent"> 
<select multiple="multiple" id="select1" style="width:100px;height:160px;"> 
<option value="1">选项1</option> 
<option value="2">选项2</option> 
<option value="3">选项3</option> 
<option value="4">选项4</option> 
<option value="5">选项5</option> 
<option value="6">选项6</option> 
<option value="7">选项7</option> 
</select> 
<div> 
<img id="add" src='../img/content/arrowRight_disabled.gif' width="24" height="24" border='0' style="cursor:pointer; vertical-align:middle;" /> 
<span id="add_all" >全部添加到右边>></span> </div> 
</div> 
<div class="centent"> 
<select multiple="multiple" id="select2" style="width: 100px;height:160px;"> 
<option value="8">选项8</option> 
</select> 
<div> 
<img id="remove" src='../img/content/arrowLeft_disabled.gif' height="22" border='0' style="cursor:pointer; vertical-align:middle;" /> 
<span id="remove_all"><<全部删除到左边</span> 
</div> 
</div> 
<input name="sub" type="submit" onClick="len()" value="提交" /> 
</body> 
</html>

用这个文件浏览的时候是可以用的,但是放到jsp里面就不能用了。笨方法来解决,写个alert方法看看报什么错,发现了问题所在:
jQuery的function前面的$与JSP页面的JSTL的$冲突了,直接导致不认识此对象方法。
解决办法:
把jQuery代码里面的$全改成jQuery就可以正常使用了!
Javascript 相关文章推荐
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
javascript实现微信分享
Dec 23 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
Js的Array数组对象详解
Feb 22 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
vue axios用法教程详解
Jul 23 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 Javascript
原生js 实现表单验证功能
Feb 08 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 #Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 #Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 #Javascript
js动态给table添加/删除tr的方法
Aug 02 #Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 #Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 #Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 #Javascript
You might like
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
python实现合并两个数组的方法
2015/05/16 Python
python获取中文字符串长度的方法
2018/11/14 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
Julep官网:美容产品和指甲油
2017/02/25 全球购物
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
签约仪式策划方案
2014/06/02 职场文书
幼儿发展评估方案
2014/06/11 职场文书
2014年学前班工作总结
2014/12/08 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
比较几种Redis集群方案
2021/06/21 Redis
Python集合set()使用的方法详解
2022/03/18 Python