jQuery 中一些细节知识点(本文会持续更新)

最新推荐文章于 2019-11-02 23:20:50 发布
最新推荐文章于 2019-11-02 23:20:50 发布
阅读量750 收藏 2
点赞数 1
分类专栏： JavaScript 文章标签： jquery 细节知识点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010533180/article/details/53513782
版权

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="http://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="http://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:undefined
text 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.

以下是2017-3-8更新

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"});//允许设置多个样式,也可以使用驼峰进行设置

以下是2017-3-15更新

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">元素

以下是2017-4-18更新
文章太长了,以增加新的篇幅,请查看
http://blog.csdn.net/u010533180/article/details/70226468

菜鸟葫芦娃
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery parseJSON()方法解析json字符串
u010100724的博客
08-01 2万+
在web项目开发中，前端经常需要接收后端传送来的json数据，解析json字符串，再对页面进行渲染。使用jquery解析json字符串通常需要将json字符串转化为javascript的json对象(如果使用getjson()方法则不用，得到到就是json对象)。通常使用$.parseJSON()方法解析json字符串，也可以使用eval()方法。两者的区别是，parseJSON()不会解析错误格式
JQuery使用与细节总结
tempsitegoogle
07-05 84
JQuery使用与细节 1，使用JQuery取对象属性 1、jQuery变量命名时不能使用“-”，可以使用下划线“_”， 例如var click-product；会报出“丢失分号”很奇怪的错误，var click_product;正确 2、选择器中含有"."，"#"，"("，"]"等特殊字符，根据W3C的规定，属性值中是不能含有这些特 殊字符的 但我们在开发过程中我们取值一般都...
jQuery细节
疯狂程序员
01-11 552
-
jquery 细节
08-01 284
jquery-1.11.3.min.js delay()函数使用其前后都必须是动画。也就是是show（1000）可以。但是show（），hide（） 不可以。不论写在一起 $('#foo').slideUp(300).delay(800).fadeIn(400); 还是分开写都会产生错。甚至导致后面语句无法解析。 js变量默认赋值 function msg (msg,tim
js&jQuery细节总结
人生主角
04-30 833
1.jQuery中ajax提交错误的细节：       在$.ajax()中，在data中以json形式存储时，key值为常量，就算是变量，不会把它当做变量来处理，直接把他的变量名看作一个字符串常量存储，当提交时发现未按自己认为的方式提交时，这可能是其中一个原因。而value值可以是变量，也可以是常量，当其中的变量是一个未定义的变量时，可能就会出问题了。如下代码，data中，上传时以test=te...
jQuery模糊知识点
黄彪博客
12-04 517
$("#msg").html();    //返回id为msg的元素节点的html内容。 $("#msg").html("new content");  //将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content   $("#msg").text();    //返回id为msg的元素节点的文本内容。 $("#msg").tex
jQuery 中一些细节知识点2(本文会持续更新)
菜鸟葫芦娃
04-18 2179
jQuery 细节知识点
前端知识点整理收集（不定时更新~）
理智lili的博客
11-02 2255
知识点都是搜集各种大佬们的，如有冒犯，请告知！ 目录 原型链 New关键字的执行过程 ES6——class constructor方法 类的实例对象 不存在变量提升 super 关键字 ES6——...（展开/收集）运算符 面向对象的理解 关于this对象 箭头函数 匿名函数 闭包 内存泄露 JavaScript垃圾回收机制 引用计数算法 循环引用...
jquery.superslide 参数分析
齐枫的博客
12-13 2837
插件中允许我们自定义的参数就下面这么多，但是，实现大多数功能都够了 ! function (a) { a.fn.slide = function (b) { return a.fn.slide.defaults = { type: "slide", effect: "fade", autoPlay:
关于jQuery EasyUI 中刷新Tab选项卡 后一个页面变形的问题的解决方法
菜鸟葫芦娃
11-29 7039
关于jQuery EasyUI 中刷新Tab选项卡 后一个页面变形的问题的解决方法
jQuery 性能优化
菜鸟葫芦娃
12-22 6787
jQuery性能优化
JavaScript中加号运算符"+" 运算过程理解
菜鸟葫芦娃
01-18 6158
JavaScript中加号运算符"+" 运算过程理解
JavaScript中对象转换为原始值的步骤
菜鸟葫芦娃
01-14 5094
JavaScript中对象转换为原始值的步骤
关于jQuery中isNumeric 方法判断数字的深刻理解
菜鸟葫芦娃
12-01 4815
关于jQuery中isNumeric 方法判断数字的深刻理解
使用JavaScript对常用浏览器的判断
菜鸟葫芦娃
05-24 3572
使用JavaScript对浏览器判断
jquery form表单序列化注意事项
菜鸟葫芦娃
07-31 3567
jquery form 表单序列化注意事项 disabled序列化的解决方案 readonly 和disabled的区别
js 实现超出固定高度后,文本使用省略号替代
菜鸟葫芦娃
09-27 2544
二话不说 ,先上效果图,这是楼主一贯的风格,有图有真相,不浪费青春,不浪费时间。 如果图片不清晰,建议放大浏览器的尺寸进行查看1.这里是配合jquery来进行替换的,所以jquery还是必备的,毕竟是轻量级,而且对各大的浏览器兼容性也好。所以开始页面引入jquery文件。 2.在页面添加样式。 <style type="text/css"> .text {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值