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的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
Layui Form 自定义验证的实例代码
Sep 14 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 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
pw的一个放后门的方法分析
2007/10/08 PHP
PHP strtr() 函数使用说明
2008/11/21 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
php实现等比例压缩图片
2018/07/26 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
js命名空间写法示例
2015/12/18 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
vue小白入门教程
2018/04/02 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
Python实现的弹球小游戏示例
2017/08/01 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
股票投资建议书
2014/05/19 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技