jQuery 中一些你可能忽略的知识点(1)
沉沙 2018-07-18 来源 : 阅读 946 评论 0

摘要:本篇jQuery教程探讨了jQuery 中一些你可能忽略的知识点,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

  1. 可见性过滤选择器

: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知识!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程