jquery 注意事项与常用语法小结


Posted in Javascript onJune 07, 2010

1、关于选择器中含有特殊符号
选择器中含有".","#","(","]"等特殊字符,根据W3C的规定,属性值中是不能含有这些特殊字符的,例如:

<div id="id#b">bb</div> 
<div id="id[1]"></div>

如果按照普通的方式来获取,例如:
$("#id#b"); 
$("#id[1]");

以上代码不能正确获取到元素,正确的写法如下:
$("#id\\#b"); 
$("#id\\[1\\]");

2、关于选择器中含有空格的
看下面这个例子,它的HTML代码如下:
<div class="test"> 
<div style="display:none;">aa</div> 
<div style="display:none;">bb</div> 
<div style="display:none;">cc</div> 
<div class="test" style="display:none;">dd</div> 
</div> 
<div class="test" style="display:none;">ee</div> 
<div class="test" style="display:none;">ff</div>

使用jquery选择器分别获取它们:
alert($(".test :hidden").length);//输出4 
alert($(".test:hidden").length);//输出3

之所以会出现不同的结果,是因为后代选择器与过滤选择器的不同。
$(".test :hidden").length;//带空格的

以上代码是选取class为"test"的元素里面的隐藏元素。
$(".test:hidden").length;//不带空格的

而上面的代码则是选取隐藏的class为"test"的元素。
3、关于val()方法
在jquery中,val()方法是从最后一个选项往前读取,如果选项的value或者text中任意一项符合就会被选中,例如:
<option value="1号">2号</option> 
<option value="2号">1号</option>

无论使用val("1号")还是val("2号"),都会选中后面的那个option
4、关于css()方法
如果参数值是数字,将会被自动转换为像素值;如果属性中带有"-"符号,例如font-size、background-color等属性,如果在设置这些属性的值的时候不带引号,那么就要用驼峰式写法,例如:
$("p").css({fontSize:"30px", backgroundColor:"#888888"});

如果带上了引号,既可以写成"font-size",也可以写成"fontSize",建议大家加上引号,养成良好的习惯。
5、关于height()方法
(1)、在jQuery1.2版本以后的height()方法可以用来获取window和document的高度。
(2)、用css()方法获取高度值与height()方法的区别是: css()方法获取的高度值与样式的设置有关,可能会得到"auto",也可能得到"10px"之类的字符串;而height()方法获取的高度值则是元素在页面中的实际高度,与样式的设置无关,并且不带单位。
6、关于事件对象(event)的属性
jQuery对事件对象的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断。
(1)、event.type()方法
该方法的作用是可以获取到事件的类型。
$("a").click(function(event) { 
alert(event.type);//获取事件类型 
return false;//阻止链接跳转 
});

以上代码运行后会返回"click"。
(2)、event.preventDefault()方法
该方法的作用是阻止默认的事件行为。javascript中符合W3C规范的preventDefault()方法在IE浏览器中无效,jQuery对其进行了封装,使其能兼容各种浏览器。
(3)、event.stopPropagation()方法
该方法的作用是阻止事件冒泡。javascript中符合W3C规范的stopPropagation()方法在IE浏览器中无效,jQuery对其进行了封装,使其能兼容各种浏览器。
(4)、event.target()方法
该方法的作用是获取到触发事件的元素。jQuery对其封装后,避免了不同浏览器的差异。
$("a[href=http://baidu.com]").click(function(event) { 
alert(event.target.href);//获取触发事件的<a>元素的href属性值 
return false; 
});

以上代码运行后返回"http://baidu.com"。
(5)、event.relatedTarget()方法
在标准DOM中,mouseover和mouseout所发生的元素可以通过event.target()方法来访问,相关元素是通过event.relatedTarget()方法来访问的。event.relatedTarget()方法在mouseover中相当于IE浏览器的event.fromElement()方法,在mouseout中相当于IE浏览器的event.toElement()方法,jQuery对其进行了封装,使之能兼容各种浏览器。
(6)、event.pageX()方法 / event.pageY()方法
该方法的作用是获取到光标相对于页面的x坐标和y坐标。如果没有使用jquery时,那么IE浏览器中是用event.x()/event.y()方法,在firefox浏览器中是用event.pageX()/event.pageY()方法。如果页面上有滚动条,则还要加上滚动条的高度和宽度。在IE浏览器中还应该减去默认的2px的边框。
$("a").click(function(event) { 
alert("Current mouse position: "+event.pageX+", "+event.pageY);//获取鼠标当前相对于页面的坐标 
return false; 
});

(7)、event.which()方法
该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键;在键盘事件中获取键盘的按键。
$(function() { 
$("body").mousedown(function(e) { 
alert(e.which);//1=鼠标左键 left; 2=鼠标中键; 3=鼠标右键 
}); 
});

(8)、event.metaKey()方法
针对不同浏览器对键盘中的<ctrl>按键解释不同,jquery也进行了封装,并规定event.metaKey()方法为键盘事件中获取<ctrl>按键。
(9)、event.originalEvent()方法
该方法的作用是指向原始的事件对象。
7、关于bind()方法
(1)、绑定多个事件类型
$(function() { 
$("div").bind("mouseover mouseout", function() { 
$(this).toggleClass("over"); 
}); 
});

(2)、添加事件命名空间
$(function() { 
$("div").bind("click.plugin", function() { 
$("body").append("<p>click</p>"); 
}); 
$("div").bind("mouseover.plugin", function() { 
$("body").append("<p>mouseover</p>"); 
}); 
$("div").bind("dblclick", function() { 
$("body").append("<p>dblclick</p>"); 
}); 
$("button").click(function() { 
$("div").unbind(".plugin"); 
}); 
});

在所绑定的事件类型后面添加命名空间,这样在删除事件时只需要指定命名空间即可。单击<button>元素后,"plugin"的命名空间被删除,而不在"plugin"的命名空间的"dblclick"事件依然存在。
(3)、相同事件名称、不同命名空间执行方法
$(function() { 
$("div").bind("click", function() { 
$("body").append("<p>click</p>"); 
}); 
$("div").bind("click.plugin", function() { 
$("body").append("<p>click.plugin</p>"); 
}); 
$("button").click(function() { 
$("div").trigger("click!");//注意click后面的感叹号 
}); 
});

当单击<div>元素后,会同时触发click事件和click.plugin事件。如果只是单击<button>元素,则只触发click事件,而不触发click.plugin事件。注意,trigger("click!")后面的感叹号的作用是匹配所有不包含在命名空间中的click方法。如果需要两者都触发,只需要去掉感叹号即可。
8、关于jQuery中的动画
(1)、用jQuery做动画效果要求要在标准模式下,否则可能会引起动画抖动。标准模式即要求文件头部包含如下的DTD定义:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2)、jQuery中的任何动画效果,都可以指定3种速度参数,即"slow"、"normal"、"fast"(时间长度分别是0.6秒、0.4秒和0.2秒)。当使用速度关键字时要加引号,例如show("slow"),如果用数字作为时间参数时就不需要加引号,例如show(1000)。
(3)、在使用animate()方法使元素动起来之前,为了能影响该元素的"top"、"left"、"buttom"、"right"样式属性,必须先把元素的position样式设置为"relative"或者"absolute"。
9、关于load()方法
此方法通常用来从web服务器上获取静态的数据文件。
(1)、用load()筛选载入的HTML文档内容
这时load()方法的URL参数的语法结构为:"url selector",注意url和selector之间有一个空格。例如只需要加载test.html页面中class为"para"的内容,可以用$("#xxx").load("test.html .para");
(2)、load()方法的回调函数的参数
load()方法提供的回调函数有3个参数,分别代表请求返回的内容、请求状态和XMLHttpRequest对象,代码如下:
#("#resText").load("test.html", function(responseText, textStatus, XMLHttpRequest) { 
//responseText : 请求返回的内容 
//textStatus : 请求状态: success、error、notmodified、timeout 4种 
//XMLHttpRequest : XMLHttpRequest对象 
});

注意,在load()方法中,无论Ajax请求是否成功,只要当请求完成后(complete)后,回调函数(callback)就被触发。此对应$.ajax()方法中的complete回调函数。
10、关于$.get()方法
(1)、只有当response的返回状态是success时才调用此方法的回调函数。
(2)、此方法的回调函数有两个参数,分别是data即返回的内容(可以是XML文档、JSON文件、HTML片段等等)、textStatus即请求状态(success、error、notmodified、timeout这4种)
注意,$.post()方法与$.get()方法基本相同。
11、关于内容选择器
内容选择器:contains()选择符区分大小写。
12、关于插件的通常写法
(function ($) { 
$.fn.extend({ 
"resize" : function (userOptions) { 
var defaultOptions = {height:100, width:100}; 
var mergeOptions = $.extend({}, defaultOptions, userOptions); 
return this.each(function () { 
$(this).animate(mergeOptions, "slow", function () { 
$(this).fadeTo("slow", ".70") 
}); 
}); 
} 
}); 
})(jQuery);

注意:
1、插件函数中的this一般只的是jQuery对象,例如第六行的this。但this.each中的this指的是DOM对象。
Javascript 相关文章推荐
jQuery下的动画处理总结
Oct 10 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
jQuery中dequeue()方法用法实例
Dec 29 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
vue.js todolist实现代码
Oct 29 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
php上传图片并给图片打上透明水印的代码
Jun 07 #Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 #Javascript
JavaScript 异步方法队列链实现代码分析
Jun 05 #Javascript
js 全兼容可高亮二级缓冲折叠菜单
Jun 04 #Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 #Javascript
利用jquery操作select下拉列表框的代码
Jun 04 #Javascript
JavaScript 页面编码与浏览器类型判断代码
Jun 03 #Javascript
You might like
php防止伪造的数据从URL提交方法
2014/06/27 PHP
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
django使用图片延时加载引起后台404错误
2017/04/18 Python
python中对数据进行各种排序的方法
2019/07/02 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
struct与class的区别
2014/02/03 面试题
《王二小》教学反思
2014/02/27 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
租房安全协议书
2014/08/20 职场文书
公司授权委托书
2014/10/17 职场文书
会计师事务所实习证明
2014/11/16 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
国庆节主题班会
2015/08/15 职场文书
创业计划书之农家乐
2019/10/09 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python