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 添加/移除CSS类实现代码
Feb 11 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
Weex开发之地图篇的具体使用
Oct 16 Javascript
vue如何搭建多页面多系统应用
Jun 17 Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 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 echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
php通过文件流方式复制文件的方法
2015/03/13 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
Javascript 函数中的参数使用分析
2010/03/27 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
vue组件的写法汇总
2018/04/12 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
python清除字符串里非数字字符的方法
2015/07/02 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
Python实现多进程的四种方式
2019/02/22 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
python 操作excel表格的方法
2020/12/05 Python
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
2014年大班元旦活动方案
2014/02/26 职场文书
慈善晚会策划方案
2014/05/14 职场文书
百日安全生产活动总结
2014/07/05 职场文书
建筑工地文明标语
2014/10/09 职场文书
公司经营目标责任书
2015/01/29 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python