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 相关文章推荐
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
基于javascript的异步编程实例详解
Apr 10 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
JS前端模块化原理与实现方法详解
Mar 17 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 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
Access数据库导入Mysql的方法之一
2006/10/09 PHP
PHP SEO优化之URL优化方法
2011/04/21 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
Python 音频生成器的实现示例
2019/12/24 Python
python是怎么被发明的
2020/06/15 Python
python实现代码审查自动回复消息
2021/02/01 Python
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
医学专业五年以上个人求职信
2013/12/03 职场文书
医学求职自荐信
2014/06/21 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
2016年学校招生广告语
2016/01/28 职场文书
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python