摘要:本篇jQuery教程探讨了jQuery 中一些你可能忽略的知识点,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
可见性过滤选择器
:hidden 选取所有不可见的元素。例如:$(“:hidden”) 表示选取所有不可见的元素。包括:
<input type="hidden" /><div style="display:none;"></div><div style="visibity:hidden"></div>
html页面上的注释内容/**/、<head></head>、<meta></meta>(如果页面上由此标签)、<title></title>、<script src="*.js"></script>、<script type='text/javascript'></script>、 <style type="text/css"></style>等元素。如果只想去<input>元素,可以使用$(“input:hidden”) 注意input:hidden之间没有空格,稍后我们会讲解这个有无空格的区别;
验证如下:
验证页面代码:
<!DOCTYPE html><html xmlns="//www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试jQuery选择器</title> <script src="Scripts/jquery-1.7.1.js"></script> <style type="text/css"> .test { background-color: yellow; } </style></head><body> <input type="hidden" value="hidden"/> <div style="display:none"></div> <script type="text/javascript"> var $hidden1 = $(":hidden"); var $hidden2 = $("input:hidden"); var len1 = $hidden1.length; var len2 = $hidden2.length; console.log("$(':hidden').length:"+len1); console.log("$('input:hidden').lengh:" + len2); $.each($hidden1, function () { console.log(this.nodeName+":"+ this.innerHTML); }); $.each($hidden2, function () { console.log(this.nodeName + ":" + this.innerHTML); }); </script></body></html>输出结果如下:
$(':hidden').length:8 $('input:hidden').lengh:1 HEAD: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>测试jQuery选择器</title> <script src="Scripts/jquery-1.7.1.js"></script> <style type="text/css"> .test { background-color: yellow; } </style>
META:
TITLE:测试jQuery选择器
SCRIPT:
STYLE:
.test {
background-color: yellow;
}
INPUT:
DIV:
SCRIPT:
var $hidden1 = $(":hidden"); var $hidden2 = $("input:hidden"); var len1 = $hidden1.length; var len2 = $hidden2.length; console.log("$(':hidden').length:"+len1); console.log("$('input:hidden').lengh:" + len2); $.each($hidden1, function () { console.log(this.nodeName+":"+ this.innerHTML); }); $.each($hidden2, function () { console.log(this.nodeName + ":" + this.innerHTML); });
INPUT:
为什么会出现上面的情况呢?通过谷歌浏览的元素查看面板(直接按F12),可以很直观的看到 head、title等元素默认会继承样式 display:none.
head {
display: none;}
2. 选择器中有无空格在选择器中的空格用不能忽视,有无空格会得到不同的结果。 看下面的例子:
<!DOCTYPE html><html xmlns="//www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试jQuery选择器</title> <script src="Scripts/jquery-1.7.1.js"></script> <style type="text/css"> .test { background-color: yellow; } </style></head><body> <div class="test"> <div style="display:none">a</div> <div style="display:none">b</div> <div style="display:none">c</div> <div class="test" style="display:none">d</div> </div> <div class="test" style="display:none;">e</div> <div class="test" style="display:none">f</div> <script type="text/javascript"> var $t1 = $(".test :hidden");//带空格 var $t2 = $(".test:hidden");//不带空格 var len1 = $t1.length; var len2 = $t2.length; console.log("$('.test :hidden').length:" + len1); console.log("$('.test:hidden').length:" + len2); $.each($t1, function () { console.log(this.nodeName+":"+ this.innerHTML); }); console.log(); $.each($t2, function () { console.log(this.nodeName + ":" + this.innerHTML); }); </script></body></html>输出结果如下:
$('.test :hidden').length:4
$('.test:hidden').length:3
DIV:a
DIV:b
DIV:c
DIV:d
DIV:d
DIV:e
DIV:f
之所以有不同的结果,因为后代选择器和过滤选择器的不同。带空格的$(".test :hidden") 选取的是class为”test”的元素里面的隐藏元素,相当于就是.class *:hidden 和css的表述类似。
不带空格的$(".test:hidden") 选取的是隐藏的元素的class为”test”。
以下是2016-12-14更新
3. 属性获取attr 和prop, is()方法和prop方法的效率
在jQuery 版本中获取页面表单元素属性的时候使用的是方法attr,但是在访问某些属性的时候会有些问题。比如 input的disabled、readonly。在有些浏览器里,只要写了 disabled 属性就可以,有些必须写成disabled=”disabled”。所以在jQuery 1.6版本之后新增了方法prop,来获取这些属性,这个方法的返回值是标准属性:true/false.比如$("#checkbox").prop("disabled"),不会返回 “undefined”、”disabled”、”“,只会返回true或者false,在赋值的时候也是如此。但是$("#checkbox").attr("disabled") 可能会返回会返回 “undefined”、”disabled”、”“。
下面的例子来进行验证(我这里使用的是谷歌浏览器):
<div> <input type="text" id="txt" disabled readonly /> <input type="checkbox" id="ck" disabled readonly checked /> </div> <div> <input type="button" id="button1" value="测试" onclick="test();" /> </div> <script type="text/javascript"> function test() { var $txt = $("#txt"); console.log("text attr:"); console.log("readonly:" + $txt.attr("readonly")); console.log("disabled:" + $txt.attr("disabled")); console.log("text prop:"); console.log("readonly:" + $txt.prop("readonly")); console.log("disabled:" + $txt.prop("disabled")); var $ck = $("#ck"); console.log("checkbox attr:"); console.log("readonly:" + $ck.attr("readonly")); console.log("disabled:" + $ck.attr("disabled")); console.log("checkbox prop:"); console.log("readonly:" + $ck.prop("readonly")); console.log("disabled:" + $ck.prop("disabled")); } </script>输出结果:
text attr:
readonly:readonly
disabled:disabled
text prop:
readonly:true
disabled:true
checkbox attr:
readonly:readonly
disabled:disabled
checkbox prop:
readonly:true
disabled:true
<div> <input type="text" id="txt" /> <input type="checkbox" id="ck" /> </div> <div> <input type="button" id="button1" value="测试" onclick="test();" /> </div> <script type="text/javascript"> function test() { var $txt = $("#txt"); console.log("text attr:"); console.log("readonly:" + $txt.attr("readonly")); console.log("disabled:" + $txt.attr("disabled")); console.log("text prop:"); console.log("readonly:" + $txt.prop("readonly")); console.log("disabled:" + $txt.prop("disabled")); var $ck = $("#ck"); console.log("checkbox attr:"); console.log("readonly:" + $ck.attr("readonly")); console.log("disabled:" + $ck.attr("disabled")); console.log("checkbox prop:"); console.log("readonly:" + $ck.prop("readonly")); console.log("disabled:" + $ck.prop("disabled")); } </script>输出结果:
text attr:
readonly:undefined
disabled:undefinedtext prop:
readonly:false
disabled:false
checkbox attr:
readonly:undefined
disabled:undefined
checkbox prop:
readonly:false
disabled:false
通过上面的例子我们已经直观了解两者的区别了。那么那些属性应该使用attr 访问,那些应该使用prop 访问?1.只添加属性名称该属性就会生效的应该使用prop;比如:disabled、readonly等。
2.只存在true/false的属性应该使用prop。
按照jQuery 官方的说法如果设置disabled和checked这些属性,应该使用prop方法,而不是attr方法。
虽然高版本的jQuery中提供了is(“:checked”) 方法来判断checkbox是否选中,但是效率不如prop方法。
来简单验证一下:
<div> <input type="checkbox" id="ck" /> </div> <div> <input type="button" id="button1" value="测试" onclick="test();" /> </div> <script type="text/javascript"> function test() { var $ck = $("#ck"); var start = time(); var loopCnt = 10000; for (var i = 0; i < loopCnt; i++) { if ($ck.is(":checked")) { } } var end = time(); console.log(end - start); start = time(); for (var i = 0; i < loopCnt; i++) { if ($ck.prop(":checked")) { } } end = time(); console.log(end - start); } function time() { return new Date().getTime(); } </script>输出结果:
未选中状态:
13
4
选中状态:
11
2
当然网友可以更改测试用例的数量,来进行测试。可是为什么prop比is方法快呢?我们来看一下源码就明白了。is 还需要判断选择器之类的.is: function( selector ) {
return !!selector && ( typeof selector === "string" ? // If this is a positional selector, check membership in the returned set // so $("p:first").is("p:last") won't return true for a doc with two "p". POS.test( selector ) ? jQuery( selector, this.context ).index( this[0] ) >= 0 : jQuery.filter( selector, this ).length > 0 : this.filter( selector ).length > 0 ); }
prop:不需要直接进行遍历元素即可。
prop: function( name, value ) { return jQuery.access( this, name, value, true, jQuery.prop ); } access: function( elems, key, value, exec, fn, pass ) { var length = elems.length; // Setting many attributes if ( typeof key === "object" ) { for ( var k in key ) { jQuery.access( elems, k, key[k], exec, fn, value ); } return elems; } // Setting one attribute if ( value !== undefined ) { // Optionally, function values get executed if exec is true exec = !pass && exec && jQuery.isFunction(value); for ( var i = 0; i < length; i++ ) { fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass ); } return elems; }4.trigger 和triggerHandler
两个都是用来模拟方法的运行,但是trigger不仅触发元素绑定的事件,也会触发浏览器默认绑定的事件。而triggerHandler之后触发元素绑定的事件。
来举个例子查看一下效果:
<div> <input type="button" id="button1" value="测试" onclick="test()" /> trigger: <input type="text" id="txt" onfocus="getFocus()" /> triggerHandler: <input type="text" id="txt2" onfocus="getFocus2()" /> </div> <script type="text/javascript"> function test() { $("#txt").trigger("focus"); $("#txt2").triggerHandler("focus"); } function getFocus() { console.log("getFocus"); } function getFocus2() { console.log("getFocus2"); } </script>结果:
我们发现使用trigger 触发focus ,第一个文本框获得了焦点,并且在控制台的输出中有个 2,表示执行了2次 。获取有网友问 你是把trigger放到了前面,所以只有第一个获取了焦点,那么我们把两者的 顺序换一下。再验证一下:
<div> <input type="button" id="button1" value="测试" onclick="test()" /> trigger: <input type="text" id="txt" onfocus="getFocus()" /> triggerHandler: <input type="text" id="txt2" onfocus="getFocus2()" /> </div> <script type="text/javascript"> function test() { $("#txt2").triggerHandler("focus"); $("#txt").trigger("focus"); } function getFocus() { console.log("getFocus"); } function getFocus2() { console.log("getFocus2"); } </script>我们依旧发现获得焦点的是trigger.
5.获取和设置CSS属性
在jQuery中css方法用于获取和设置元素的CSS样式。在获取样式值时,css()返回的是元素的当前样式,返回值可能来自style属性也可能来自样式表。注意:不能获取复合样式的值,比如:font、margin等。应该单个样式的值,比如:font-weight、font-size、margin-top、margin-bottom等等。在设置css样式时,css()方法会将样式简单添加到该元素的style属性中。css()方法允许在css样式命中使用连接字符串(background-color)或者使用驼峰式JavaScript样式名(backgroudColor)。在获取样式值时,css()会把数值转换成带有单位后缀的字符串返回。而在设置样式时,则会将数值转化为成字符串,在必要时添加”px”(像素)后缀。
$("#divFont").css("font");//错误,不可能使用复合式$("#divFont").css("font-weigth");//正确$("#divFont").css("fontWeigth");//正确$("#divFont").css("border","solid back 1px");//设置符合样式时允许的$("#divFont").css({backgroundColor:"black",padding:"10px 2px 4px 20px"});//允许设置多个样式,也可以使用驼峰进行设置
6.jQuery.isFunction
当参数是原生Function对象时,返回true。在IE8以及之前的版本中,window.alert和window.attachEvent()等浏览器返回false.
7.jQuery.parseJSON
该函数会解析JSON格式的字符串,返回解析结果。当传入的格式有误时,它会抛异常。在定义它的浏览器中jQuery使用标准的JSON.parse()函数。注意jQuery只定义JSON解析函数,而没有定义JSON序列化函数。
8. :hidden
匹配所有在屏幕上不可见的元素,大体上可以认为这些元素的offsetWidth和offsetHeight为0。
9. :image
jQuery的扩展方法,匹配<input type="image">元素.不会匹配<img>元素。
10:button
jQuery的扩展方法,匹配<input type="button">和<button type="button">元素
本文由职坐标整理发布,欢迎关注职坐标WEB前端jQuery频道,获取更多jQuery知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号