甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

jQuery知识点总结

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

成都创新互联作为成都网站建设公司，专注网站建设公司、网站设计，有关成都定制网站方案、改版、费用等问题，行业涉及成都阳台护栏等多个领域，已为上千家企业服务，得到了客户的尊重与认可。

发博备查。

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 对象 :
            $("

  • 测试
    • ")
                
    15. 添加节点:
            1). appendTo() 和 append():主语和宾语的位置不同:
                    ("
  • 测试
    • ").appendTo($("#city"));
                    $("#city").append("
  • 测试
    • ");
                    
            2). prependTo() 和 prepend():主语和宾语位置不同:
                    $("
  • 测试
    • ").prependTo($("#city"));
                    $("#city").prepend("
  • 测试
    • ");

    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). 创建一个
  • 测试
    • 节点,替换 #city 的最后一个 li 子节点.
                $("
  • 测试
    • ").repalceAll($("#citi li:last"));
        2). 创建一个
  • 测试
    • 节点,替换 #city 的第二个 li 子节点.
                $("#city li:eq(1)").replaceWith($("
  • 测试
    • "));
        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("");
            2). 包装所有 li .
                $("#city li").wrapAll("");
            3). 包装 li 里边的文字.
                $("#language li").wrapInner("");

    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 = $("
  • 测试
    • ");
            2).节点插入到文档中:
                ① append ,appendTo:把节点 A 插入为节点 B 的最后一个子节点

                    $("
  • 测试
    • ").appendTo($("#city"));
                    $("#city").append("
  • 测试
    • ");

                ② prepend ,prepenfTo

                    $("
  • 测试
    • ").prependTo($("#city"));
                    $("#city").prepend("
  • 测试
    • ");

                ③ before ,insertBefore

                    $("
  • 屌屌的
    • ").insertBefore($("#bj"));
                    $("#bj").before("
  • 屌屌的
    • ");

                ④ after ,insertAfter

                    $("
  • 屌屌的
    • ").insertAfter($("#bj"));
                    $("#bj").after("
  • 屌屌的
    • ");

            3).删除节点:

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

            4).清空节点:

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

            5).克隆节点:

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

            6).替换节点:

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

            7).wrap ,wrapAll ,wrapInner:了解

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

                //读取某个节点的html内容
                alert($("#city").html());
                
                //设置某个节点的html内容
                $("#city").html("
  • 屌屌的
    • ")

        [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();


    本文名称：jQuery知识点总结
    本文路径：http://chengdu.cdxwcx.cn/article/ggheog.html

    其他资讯