您的位置:首页 > Web前端 > JQuery

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

2015-09-09 20:45 781 查看
   案例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: 

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

<script type="text/javascript">                   

                     //测试使用 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());

                     })   

              </script>

  <script type="text/javascript">

       //测试使用 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>");

       })

  </script>

         案例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>

     案例4: 
     需求描述:测试使用 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);
                     })

     案例4: 
     需求描述:测试使用 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>");
                            })

    案例5: 
     需求描述:测试使用 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>
        共同进步。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  操作 jquery web前端