jquery 注意事项与常用语法小结

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

复制代码 代码如下:


<div>bb</div>
<div></div>


如果按照普通的方式来获取,例如:

复制代码 代码如下:


$("#id#b");
$("#id[1]");


以上代码不能正确获取到元素,正确的写法如下:

复制代码 代码如下:


$("#id\\#b");
$("#id\\[1\\]");


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

复制代码 代码如下:


<div>
<div>aa</div>
<div>bb</div>
<div>cc</div>
<div>dd</div>
</div>
<div>ee</div>
<div>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的边框。

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdxxjd.html