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 相关文章推荐
js静态方法与实例方法分析
Jul 04 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 Javascript
Vue.js 2.0学习教程之从基础到组件详解
Apr 24 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
判断js数据类型的函数实例详解
May 23 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 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的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
python动态参数用法实例分析
2015/05/25 Python
python自动zip压缩目录的方法
2015/06/28 Python
Python代码实现KNN算法
2017/12/20 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
Django 自定义分页器的实现代码
2019/11/24 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
中学教师自我鉴定
2014/02/07 职场文书
企业晚会策划方案
2014/05/29 职场文书
承诺书模板
2014/08/30 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
社团招新宣传语
2015/07/13 职场文书
标准发言稿结尾
2019/07/18 职场文书