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 相关文章推荐
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
jQuery mobile 移动web(6)
Dec 20 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 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面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
Jquery Change与bind事件代码
2011/09/29 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
python中class的定义及使用教程
2019/09/18 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
pymysql模块使用简介与示例
2020/11/17 Python
python 6种方法实现单例模式
2020/12/15 Python
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
机械系大学毕业生推荐信
2013/11/27 职场文书
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
我为自己代言广告词
2014/03/18 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
红色影片观后感
2015/06/18 职场文书
繁星春水读书笔记
2015/06/30 职场文书
校运会通讯稿
2015/07/18 职场文书
培训后的感想
2015/08/07 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
如何写好活动总结
2019/06/21 职场文书
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis