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 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
深入理解angularjs过滤器
May 25 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
vue中data里面的数据相互使用方式
Jun 05 Vue.js
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 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
jQuery最佳实践完整篇
2011/08/20 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
进一步探究Python中的正则表达式
2015/04/28 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
python简易远程控制单线程版
2018/06/20 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
tensorflow之并行读入数据详解
2020/02/05 Python
python实现批量修改文件名
2020/03/23 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
《大海那边》教学反思
2014/04/09 职场文书
教师考核表个人总结
2015/02/12 职场文书
召开会议通知范文
2015/04/15 职场文书
公司年会开场白
2015/06/01 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
教师师德承诺书2016
2016/03/25 职场文书