Web前端——JQuery的进阶（测试使用 jQuery进行指定的操作）

   案例1： 

     需求描述：测试使用 jQuery 操作文本节点, 属性节点.。相关代码：

<script type="text/javascript">

      //测试使用 jQuery 操作文本节点, 属性节点.

      //及查找元素节点

      $(function () {

          //1. 操作文本节点: 通过 jQuery 对象的 text() 方法

          alert($("#bj").text());

          $("#bj").text("画骨峰");



          //2. 操作属性节点: 通过 jQuery 对象的 attr() 方法.

          //注: 直接操作 value 属性值可以使用更便捷的 val() 方法.

          alert($(":text[name='username']").attr("value"));

          $(":text[name='username']").attr("value", "画骨峰");

       })

</script>

       案例2： 

     需求描述：创建节点并插入节点到指定的节点中。相关代码：                                     

//测试使用 jQuery 创建节点并插入节点到指定的节点

1. 创建节点: 使用 $(html) 方式即可, 元素节点, 文本节点, 属性节点可以一网打尽

返回对应节点的 jQuery 对象:

$("<li id='atguigu'>画骨峰</li>")



2. 添加节点:

1). appendTo 和 append: 主语和宾语的位置不同: 

$("<li id='atguigu'>画骨峰</li>").appendTo($("#city"));   

$("#city").append("<li id='atguigu'>[画骨峰]</li>");



2). prependTo 和  prepend: 主语和宾语的位置不同:

$("<li id='atguigu'>画骨峰</li>").prependTo($("#city"));

$("#city").prepend("<li id='atguigu'>[画骨峰]</li>");

                     

$(function () {

    //1. 创建一个 <li id="atguigu">画骨峰</li>

    //2. 并把其加入到 #city 的子节点

    //$("<li id='atguigu'>画骨峰</li>").appendTo($("#city"));

    //$("#city").append("<li id='atguigu'>[画骨峰]</li>");

    //$("<li id='atguigu'>画骨峰</li>").prependTo($("#city"));

    $("#city").prepend("<li id='atguigu'>[画骨峰]</li>");

    alert($("#atguigu").text());

})


//测试使用 jQuery 插入节点

$(function () {

    //1. 创建一个 <li id="atguigu">画骨峰</li>

    //2. 并把其加入到 #bj 的后面

    //$("<li id='atguigu'>画骨峰</li>").insertAfter($("#bj"));

    //$("#bj").after("<li id='atguigu'>[画骨峰]</li>");

    //$("<li id='atguigu'>画骨峰</li>").insertBefore($("#bj"));

    $("#bj").before("<li id='atguigu'>[画骨峰]</li>");

})

     案例3： 

     需求描述：测试使用 jQuery 删除节点。相关代码：

<script type="text/javascript">

    //测试使用 jQuery 删除节点

    $(function(){

         //1. 为 #city 的每一个 li 添加 click 响应函数: 点击时, li 被删除
         
         //$("#city li").click(function(){
         
         //     $(this).remove();
         
         //});
         
                         
         
         //jQuery 对象的 remove() 方法: 将把 jQuery 对象对应的
         
         //DOM 节点直接删除.
         
         $("#bj").remove();
         
         $("#city > li").last().remove();            //id为city的里面的li的最后一个
         
                                
         
         //2. 清空 #game 节点
         
         //jQuery 对象的 empty() 方法: 清空 jQuery 对象对应的
         
         //DOM 对象的所有的子节点.
         
         alert("要清空了!");
         
         $("#game").empty();

    })

</script>

    案例4： 

     需求描述：测试使用 jQuery 克隆节点。相关代码：

    

<script type="text/javascript">

    //测试使用 jQuery clone 方法: 复制节点

    $(function(){

         $("li").click(function(){

             alert($(this).text());

         });

         //复制 #bj 节点, 并添加到 #rl 节点的后面

         /*

         1. clone 节点时需要注意克隆后的节点的 id 属性. 若原节点有 id

         属性, 则克隆后, 会出现在一个文档中有两个 id 相同的节点的情况.

         2. clone(true): 在克隆节点的同时, 克隆节点包含的事件.

         */

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

         .attr("id", "bj2")

         .insertAfter($("#rl"));

    })
</script>

     案例5： 

     需求描述：测试使用 jQuery 替换 节点。相关代码：

$(function () {

    //1. 创建一个 <li>画骨峰</li> 节点, 替换 #city 的最后一个 li 子节点

    $("<li>画骨峰</li>").replaceAll($("#city li:last"));



    //2. 创建一个 <li>[画骨峰]</li> 节点,

    //替换 #city 的第二个 li 子节点

    $("#city li:eq(1)").replaceWith($("<li>[画骨峰]</li>"));





    //3. 互换以下两个节点: #rl 和 #bj. 还有移动的功能.

    //$("#bj").replaceWith($("#rl"));



    //节点互换需要先克隆节点.

    alert(1);

    var $bj2 = $("#bj").clone(true);

    var $rl = $("#rl").replaceWith($bj2);



    alert(2);

    $("#bj").replaceWith($rl);

})

     案例6:

     需求描述：测试使用 jQuery 替换 节点。相关代码：

<script type="text/javascript">     

    //测试使用 jQuery wrap, wrapAll, wrapInner

    $(function(){

        //包装 li 本身

        $("#game li").wrap("<font color='red'></font>");

        //包装所有的 li

        $("#city li").wrapAll("<font color='red'></font>");

        //包装 li 里边的文字.

        $("#language li").wrapInner("<font color='red'></font>");

    })

</script>

    

$(function(){

    alert($("#city").html());

    $("#city").html("<li id='atguigu'>尚硅谷</li>");

})

     案例7： 

     需求描述：测试使用 jQuery 替换 节点。相关代码：

<script type="text/javascript">

    $(function(){

    //1. 点击所有的 p 节点, 能够弹出其对应的文本内容

    /*

      1. jQuery 对象可以进行隐式迭代: $("p").click(function(){...});

      为选取的所有的 p 节点都添加了 click 响应函数. jQuery 对象本身就是一个

      DOM 对象的数组

      2. 在响应函数中, this 是一个 DOM 对象. 若想使用 jQuery 对象的方法

      需要把其包装为 jQuery 对象: 使用 $() 把 this 包起来.

      3. text() 方法时一个读写的方法: 不加任何参数, 读取文本值; 加参数为

      属性节点添加文本值(文本节点) (和 text() 类似的方法: attr(), val())

      */

        $("p").click(function(){

             alert($(this).text());

             alert($(this).text("^^" + $(this).text());

             //alert(this.firstChild.nodeValue);

        });

                           

        //2. 使第一个 table 隔行变色

        $("table:first tr:even").css("background", "#ffaacc");

                               

        //3. 点击 button, 弹出 checkbox 被选中的个数

        $("button").click(function(){

            alert($(":checkbox:checked").length);

        });

    });

</script>

     共同进步。