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 checkbox复选框全选功能简单实例
Oct 09 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
详解如何用babel转换es6的class语法
Apr 03 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
javascript实现日历效果
Jun 17 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
Vue实现多标签选择器
Nov 28 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实现递归的三种基本方式
2020/07/04 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
jquery中常用的SET和GET
2009/01/13 Javascript
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
jquery获取节点名称
2015/04/26 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
python中元类用法实例
2014/10/10 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
Django在win10下的安装并创建工程
2017/11/20 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
Python实现微信好友的数据分析
2019/12/16 Python
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
小学趣味运动会加油稿
2014/09/25 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
团代会邀请函
2015/02/02 职场文书
小学六一主持词开场白
2015/05/28 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书
Python基础知识之变量的详解
2021/04/14 Python
Python代码风格与编程习惯重要吗?
2021/06/03 Python