视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jquery注意事项与常用语法小结_jquery
2020-11-27 20:49:43 责编:小采
文档


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


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

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

2、关于选择器中含有空格的
看下面这个例子,它的HTML代码如下:
代码如下:

aa
bb
cc
dd

ee
ff

使用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中任意一项符合就会被选中,例如:
代码如下:



无论使用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);//获取触发事件的元素的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()方法
针对不同浏览器对键盘中的按键解释不同,jquery也进行了封装,并规定event.metaKey()方法为键盘事件中获取按键。
(9)、event.originalEvent()方法
该方法的作用是指向原始的事件对象。
7、关于bind()方法
(1)、绑定多个事件类型
代码如下:
$(function() {
$("div").bind("mouseover mouseout", function() {
$(this).toggleClass("over");
});
});

(2)、添加事件命名空间
代码如下:
$(function() {
$("div").bind("click.plugin", function() {
$("body").append("

click

");
});
$("div").bind("mouseover.plugin", function() {
$("body").append("

mouseover

");
});
$("div").bind("dblclick", function() {
$("body").append("

dblclick

");
});
$("button").click(function() {
$("div").unbind(".plugin");
});
});

在所绑定的事件类型后面添加命名空间,这样在删除事件时只需要指定命名空间即可。单击
显示全文
专题