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的将桌面应用程序引入浏览器
Nov 19 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
javascript截取字符串小结
Apr 28 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
angular select 默认值设置方法
Jun 23 Javascript
js实现图片放大展示效果
Aug 30 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
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
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
jQuery live
2009/05/15 Javascript
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
vue+php实现的微博留言功能示例
2019/03/16 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
python 字典中取值的两种方法小结
2018/08/02 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
python新手学习使用库
2020/06/11 Python
python3将变量输入的简单实例
2020/08/19 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
工作证明范本(2篇)
2014/09/14 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS