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实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 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默认安装产生系统漏洞
2006/10/09 PHP
PHP 数组遍历顺序理解
2009/09/09 PHP
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
JS中的三个循环小结
2017/06/20 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
Vue组件库发布到npm详解
2018/02/17 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python设置检查点简单实现代码
2014/07/01 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
python PyTorch预训练示例
2018/02/11 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
HTML5进度条特效
2014/12/18 HTML / CSS
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
Android interview questions
2016/12/25 面试题
一份软件工程师的面试试题
2016/02/01 面试题
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
商场消防管理制度
2014/01/12 职场文书
小区文明倡议书
2014/05/16 职场文书
考试保密承诺书
2014/08/30 职场文书
大学生村官个人总结
2015/02/15 职场文书
vue实现滑动解锁功能
2022/03/03 Vue.js
Redis批量生成数据的实现
2022/06/05 Redis