jQuery 知识点总结

Posted 2020-07-19

【文章根据 尚硅谷 教学材料 总结】

发博备查。

1.    
    . class选择器
    # id选择器
    : 选取

2. $(function(){})相当于 window.onload 方法.
    window.onload = function(){...}
    
3. 加载DOM的两种方式: jQuery 和 window.onload
    $(document).ready(function(){...})
    $(function(){...}

4. 选取button 并添加 onClick 响应函数. $("button").click(function(){}

5. jQuery 和 DOM 对象
    [1]. 由 jQuery 对象转为 DOM 对象.
        1). 获取一个 jQuery 对象.
            var $btn = $("button");
        2). jQuery 对象是一个数组.
            alert($btn.length);
        3). 可以通过数组下标转为 DOM 对象.
            alert($btn[1].firstChild.nodeValue);
    [2]. 由 DOM 对象转为 jQuery 对象.
        1). 选取一个 DOM 对象.
            var btn = document.getElementById("btn");
        2). 把 DOM 对象转为一个 jQuery 对象:使用 $() 进行包装.
            alert($(btn).text());

6. 使用 id 选择器选择 id=btn1 的元素, 并为选择的 jQuery 对象添加 onclick 响应函数.
        $("#btn1").click(function(){...});

7. jQuery 对象遍历的方式是 each , 在 each 内部的 this 是得到的 DOM 对象, 而不是一个jQuery 对象
    $("#btn5").click(function(){
        var leng = $(":checkbox[name=‘newsletter‘:checked]").each(function(){
            alert(this.value);
        });
    });

8. 选取子元素需要在选择器前添加空格.  div.one 同 .one .
        $(".one :nth-child(2)").css("backgroud" ,"#ffbbaa");

9. 选择的是一个数组, 当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选中第一个被选中的值了.

10. jQuery 对象可以进行隐式迭代:
        $("p").click(function(){...})
    为选取的所有的 p 节点都添加了 click 响应函数.
    jQuery 对象本身就是一个 DOM 对象的数组.
            
11. 在响应函数中, this 是一个 DOM 对象, 若想使用jQuery 对象的方法, 需要把其包装为 jQuery 对象:
    使用 $() 把 this 包起来.
            
12. text() 方法是一个读写的方法:
    不加任何参数, 读取文本值；
    加参数, 为属性节点添加文本值(文本节点).
    和 text() 方法类似的:attr() ,val().

13. 使用 jQuery 操作文本节点, 属性节点 及查找元素节点.
    1). 操作文本节点:通过 jQuery 对象的 text() 方法
        alert($("#bj").text());
        $("#bj").text("TEST");
        
    2). 操作属性节点:通过 jQuery 对象的 atter() 方法.
        注:直接操作 value 属性值可以使用共便捷的 val() 方法.
        alert($(":text[name=‘username‘]").attr("value"));
        $(":text[name=‘username‘]").attr("value","TEST");

14. 创建节点:
        使用 $(html) 方式即可, 元素节点, 文本节点, 属性节点可以一网打尽返回对应节点的 jQuery 对象 :
            $("<li id=‘TEST‘>测试</li>")
            
15. 添加节点:
        1). appendTo() 和 append():主语和宾语的位置不同:
                ("<li id=‘TEST‘>测试</li>").appendTo($("#city"));
                $("#city").append("<li id=‘TEST‘>测试</li>");
                
        2). prependTo() 和 prepend():主语和宾语位置不同:
                $("<li id=‘TEST‘>测试</li>").prependTo($("#city"));
                $("#city").prepend("<li id=‘TEST‘>测试</li>");

16. 同 JS 的响应函数一样, jQuery 对象的响应函数若返回 false 可以取消指定元素的默认行为,比如 submit , a 等.
        
17. val() 方法,相当于 attr("value"),获取表单元素的 value 属性值

18. $.trim(str) 可以去除 str 的前后空格.

19. jQuery 对象的 remove() 方法:
        将把jQuery 对象对应的DOM节点直接删除
            $("#bj").remove();

20. 清空 game 节点:
        jQuery 对象的 empty() 方法: 清空jQuery对象对应的 DOM 对象的所有的子节点.
            $("#game").empty();

21. jQuery 调用jQuery 提供的方法的返回值如果是一个对象的话那么这个对象一定是一个 jQuery 对象

22. find() 方法:查找子节点,返回值为子节点对应的 jQuery 对象.

23. jQuery clone 方法:复制节点.
    1). clone 节点时需要注意克隆后的节点的 id 属性.若原节点有 id 属性, 则克隆后,会在一个文档中出现两个相同 id 的节点的情况.
            
    2). clone(true):在克隆节点的同时,克隆节点包含的事件.
            
24. jQuery replaceWith (replaceAll) 方法:替换节点.
        1). repalceWith ,replaceAll 一对方法完成相同功能,只是主宾位置不同.
        2). 以上的两个方法还有移动的功能.
        3). 节点互换需要先克隆节点.
        4). var $rl = $("rl").replaceWith($bj2);  返回的是被替换的节点 rl .

25.
    1). 创建一个<li>测试</li> 节点,替换 #city 的最后一个 li 子节点.
            $("<li>测试</li>").repalceAll($("#citi li:last"));
    2). 创建一个<li>测试</li> 节点,替换 #city 的第二个 li 子节点.
            $("#city li:eq(1)").replaceWith($("<li>测试</li>"));
    3). 互换以下两个节点: #rl 和 #bj .(互换节点有移动的功能).
            var $bj2 = $("#bj").clone(true);
            var $rl = $("rl").replaceWith($bj2);
            $("#bj").replaceWith($rl);

26. 使用 jQuery wrap ,wrapAll ,wrapInner:
        1). 包装 li 本身.
            #("#game li").wrap("<font color=‘red‘></font>");
        2). 包装所有 li .
            $("#city li").wrapAll("<font color=‘red‘></font>");
        3). 包装 li 里边的文字.
            $("#language li").wrapInner("<font color=‘red‘></font>");

27. val 不能直接获取 checkbox 被选择的值.若直接获取, 只能得到第一个被选择的值.
    因为 $(":checkbox[name=‘c‘]:checked") 得到的是一个数组, 而使用val()方法只能获取数组元素的第一个值, 若希望打印被选择的所有值, 需使用 each 遍历

28. jQuery 样式相关的方法.
        1). hasClass():某元素是否有指定的样式.
                alert($("div").hasClass("SubCategoryBox"));//true
        2). 移除样式.
                $("div").removeClass("SubCategoryBox");
        3). 添加样式.
                $("div").addClass("SubCategoryBox");
        4). 切换样式:存在则去除；没有则添加.
                $(".showmore").click(function(){
                    $("div:first").toggleClass("SubCategoryBox");
                    return false;
                });
        5). 获取和设置元素透明度: opacity 属性.
                alert($("div:first").css("opacity"));
                $("div:first").css("opacity".0.5);
        6). width() & height() .
                alert($("div:first").width());
                alert($("div:first").height());
                $("div:first").width(400);
                $("div:first").height(80);
        7). 获取元素在当前视窗中的相对位移:offset() .
            其返回对象包含了两个属性: top ,left .该方法只对可见元素有效.
                alert($("div:first").offset().top);
                alert($("div:first").offset().left);

29. onclick 事件的另一种写法: bind: 为某 jQuery 对象绑定事件.
        $(".head").click(function(){...});
        $(".head").bind("click" ,function(){...})

30. 事件冒泡:什么是事件的冒泡.
        $("body").click(function(){
            alert("1");
        });
        
        $("#content").click(function(){
            alert("2");
        });
        
        $("span").click(function(){
            alert("3");
            //如何解决事件冒泡:通过在响应函数的结尾返回 false ,可以阻止冒泡.
            return false;
        });

31. toggle() 可以切换元素是否可见.
    slideToggle():通过高度变化来切换匹配元素的可见性.
    fadeToggle():通过透明度变化来切换匹配元素的可见性.
    fadeTo():把不透明度以渐进的方式调整为透明的值.

32. var $category = $("li:gt(5):lt(7)");
    此时的lt 是在 li:gt(5) 基础上运行的.

33. 总结:
    [1]. jQuery 是 javascript 的一个函数库,非常方便,非常主流
    [2]. 利用 jQuery 开发的步骤:
        1). 导入 jQuery 库
        2). 在 $(function(){}) 中编辑代码
    [3]. jQuery 对象 vs DOM 对象
        1). 两者不能使用对方的属性和方法
        2). jQuery 对象是一个 DOM 数组对象, 所以可以使用下标的方式转为DOM对象.
            var $btn = $("button");
            var btn = $btn[0];
        3). jQuery 对象是使用 $() 包装 DOM 对象后产生的对象。
            $("select :selected").each(function(){
                alert($(this).value);
            })
    [4]. jQuery 的选择器。
        1). 选取被选中的 select 的 option 需要使用选取子节点的方式
            $("select[name=‘test‘] :selected").each(funtion(){...})
        2). jQuery 选择器可以综合使用
        3). 如果选择器搞不定,可以调用方法实现
    [5]. jQuery 对象的几个方法:
        1). val():获取或设置表单元素的 value 属性值
            设置值
                $(":text:enable").val("TEST");
            获取值
                $(":text:enable".val())
        2).attr(): 和val()方法类似
            attr(name.val):为 name 属性赋值为 val
            attr(name):获取 name 属性值
        3).each():对 jQuery 对象进行遍历,其参数为 function, 函数内部的 this 是正在遍历的 DOM 对象
            $("select :selected").each(function(){
                alert(this.val);
            })
        4).text():和 val() 方法类似
            text():获取元素节点的文本子节点的值
            text(str):设置元素节点的文本子节点的值

    [6].使用jQuery进行DOM操作:
        1).新建（元素、属性、文本）节点:直接使用$()包装即可,返回值是一个jQuery对象。
            var $TEST = $("<li id=‘TEST‘>测试</li>");
        2).节点插入到文档中:
            ① append ,appendTo:把节点 A 插入为节点 B 的最后一个子节点

                $("<li id=‘TEST‘>测试</li>").appendTo($("#city"));
                $("#city").append("<li id=‘TEST‘>测试</li>");

            ② prepend ,prepenfTo

                $("<li id=‘TEST‘>测试</li>").prependTo($("#city"));
                $("#city").prepend("<li id=‘TEST‘>测试</li>");

            ③ before ,insertBefore

                $("<li id=‘DDD‘>屌屌的</li>").insertBefore($("#bj"));
                $("#bj").before("<li id=‘DDD‘>屌屌的</li>");

            ④ after ,insertAfter

                $("<li id=‘DDD‘>屌屌的</li>").insertAfter($("#bj"));
                $("#bj").after("<li id=‘DDD‘>屌屌的</li>");

        3).删除节点:

            $("#bj").remove();

        4).清空节点:

            $("#game").empty();

        5).克隆节点:

            $("#bj").clone(true);

        6).替换节点:

            $("<li>测试</li>").repalceAll($("#citi li:last"));
        
            $("#city li:eq(1)").replaceWith($("<li>测试</li>"));

        7).wrap ,wrapAll ,wrapInner:了解

        8).val() ,html() ,text() ,attr() ,width() ,height() 等兼具有读写功能的方法.

            //读取某个节点的html内容
            alert($("#city").html());
            
            //设置某个节点的html内容
            $("#city").html("<li id=‘DDD‘>屌屌的</li>")

    [7].技术点之外:

        1). jQuery 对象可以进行隐式迭代: $("p").click(function(){...})为选取的所有的 p
        节点都添加了 click 响应函数. jQuery 对象本身就是一个DOM对象的数组.
        
        2). 在jQuery 中显示迭代:使用 each() 方法:
            $(":checkbox[name=‘c‘]:checked").each(function(){
                alert(this.value);
            });

            可以在显示迭代的响应函数的参数中通过index属性获取到正在遍历的对象的索引.

        3).在响应函数中, this 是一个 DOM对象,若想使用jQuery对象的方法,需要把其包装为
        jQuery对象:使用 $() 把 this 包起来.
            
        4). defaultValue :DOM 对象的属性,可以获取表单元素的默认值.

        5).通过 val() 为 radio 赋值:即便是为一组 radio 赋值,val参数中也应该使用数组,
        使用一个值不起作用

        6).val 不能直接获取 checkbox 被选择的值.若直接获取,只能得到第一个被选择的值.因
        为 $(":checkbox[name=‘c‘]:checked")得到的是一个数组,而使用val()方法只能获取数组元素的第一个值,若希望打印被选择的所有值,需使用 each 遍历.
        而 radio 被选择的只有一个,所以可以直接使用 val() 方法获取被选择的值.

        7).1. 同 JS 的响应函数一样, jQuery 对象的响应函数若返回 false 可以取消指定元素
        的默认行为,比如 submit , a 等.
        
        8). $.trim(str) 可以去除 str 的前后空格.

        9).jQuery 对象的方法的连缀:调用一个方法的返回值还是调用的对象,于是可以在调用方法的后面依
        然调用先前那个对象的其他方法.

        10).find()方法:查找子节点,返回值为子节点对应的jQuery对象.

            var $trNode = $(aNode).parent().parent();
            //获取 $tr 的第一个 td 节点的文本节点的文本值.
            var textContent = $trNode.find("tr:first").text();

本文出自 “irvin” 博客，请务必保留此出处http://irvin.blog.51cto.com/9783109/1785637