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 request函数 用来获取url参数
May 17 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
js实现文本框选中的方法
May 26 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 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设计模式 Command(命令模式)
2011/06/26 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
php提交post数组参数实例分析
2015/12/17 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
javascript下数值型比较难点说明
2010/06/07 Javascript
网页中CDATA标记的说明
2010/09/12 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
查看python下OpenCV版本的方法
2018/08/03 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
python中封包建立过程实例
2021/02/18 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
夜大毕业生自我鉴定
2013/10/31 职场文书
工作个人的自我评价
2014/01/14 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
作风年建设汇报材料
2014/08/14 职场文书
党员检讨书
2014/10/13 职场文书
初中信息技术教学反思
2016/02/16 职场文书
初中思想品德教学反思
2016/02/24 职场文书