码迷,mamicode.com
首页 > Web开发 > 详细

创建jQuery节点对象

时间:2017-11-07 00:22:11      阅读:330      评论:0      收藏:0      [点我收藏+]

标签:appendto   兄弟节点   循环   培训机构   img   function   url   tee   rip   

 

现在的年轻人,经历旺盛,每天都熬夜,今天又晚了,现在才更新博客,今天更新jquery入门之对节点的操作,内容简单好掌握。认真的燥再来吧。

1、$("<li class="li"></li>") 创建一个li标签

 //1、创建节点,$("标签") 类似js document.createElement("li")
    console.log($("<li clsass=‘li‘>我是li创建的标签</li>"))

2、$("ul").html("<li></li>")

//2、创建节点,$("ul").html("<li></li>") 类似js innerHTML 因为此属性,识别标签 会覆盖原来的内容
     console.log($("ul").html("<li>我是thml创建的li</li>"))
 //不会覆盖原来的内容
<script>
       $(document).ready(function(){
          var li= $("ul").html();
           li+="<li>ss</li>";
           $("ul").html(li);
       })
    </script>

 

添加节点
 
1、append():在父盒子最后添加一个元素
$("button").click(function(){
       //创建一个li标签对象
       var li= $("<li>我是刚创建出来的li对象</li>")
       // append 在盒子的末尾添加li新对象
       $("ul").append(li)
    })
}

    appendTo: 在父盒子最后添加一个元素 (用的少)

 li.appendTo($("ul"))

 

2、perpend 在父盒子最前面添加一个元素

$("ul").prepend(li)

   perpendTo 在父盒子最前面添加一个元素

li.prepend("ul")

3、after 操作兄弟元素,添加到兄弟元素最后面

$("li").after(li)

4、before 操作兄弟元素,添加到兄弟元素最前面

 

清空节点
 
1、$("元素").html("空字符") 全部清空
$("ul").html("")

2、$("元素").empty()全部清空

$("ul").empty()

3、删除指定元素 remove 获取的是兄弟节点

$("li").eq(0).remove()

 

复制节点
.clone深层复制
 $("button").click(function(){
      var jqul=$(".box ul").clone();
      $(".box").append(jqul)
   })

 

案例
动态添加表格
<script>
      $(function(){
          // 模拟从后台拿到的数据
          var data = [{
              name: "传智播客",
              url: "http://www.itcast.cn",
              type: "IT最强培训机构"
          }, {
              name: "黑马程序员",
              url: "http://www.itheima.com",
              type: "大学生IT培训机构"
          }, {
              name: "传智前端学院",
              url: "http://web.itcast.cn",
              type: "前端的黄埔军校"
          }];
          //需求:点击按钮,然后生成tr里面生成三个td 数组元素个数的tr 然后放入j_tbData肿
          //1、绑定事件
          $("input").click(function(){
              //写入到click事件肿,每次点击以后吧str清空
              var str="";
              //2、利用for循环,把数组中的所有数据组合成一个字符串
              for( var i=0; i<data.length; i++){
                  //data[i]=数字中的每一个json
                  //data[i].name=数组肿的每个json的name属性值
                  str+="<tr>" +
                        "<td>"+data[i].name+"</td>"+
                        "<td>"+data[i].url+"</td>"+
                        "<td>"+data[i].type+"</td>"+
                      "</tr>"
              }
              //3、把生成的字符串设置为html内容添加进TBODY肿
              $("#j_tbData").html(str)
          })
      })
    </script>
</head>
<body>
<input type="button" value="获取数据" id="j_btnGetData" />
<table>
    <thead>
    <tr>
        <th>标题</th>
        <th>地址</th>
        <th>说明</th>
    </tr>
    </thead>
    <tbody id="j_tbData">
    </tbody>
</table>
</body>
<script>
      $(function(){
          // 模拟从后台拿到的数据
          var data = [{
              name: "传智播客",
              url: "http://www.itcast.cn",
              type: "IT最强培训机构"
          }, {
              name: "黑马程序员",
              url: "http://www.itheima.com",
              type: "大学生IT培训机构"
          }, {
              name: "传智前端学院",
              url: "http://web.itcast.cn",
              type: "前端的黄埔军校"
          }];
          //需求:点击按钮,然后生成tr里面生成三个td 数组元素个数的tr 然后放入j_tbData肿
          //1、绑定事件
          $("input").click(function(){
              //写入到click事件肿,每次点击以后吧str清空
              var str="";
              //2、利用for循环,把数组中的所有数据组合成一个字符串
              for( var i=0; i<data.length; i++){
                  //data[i]=数字中的每一个json
                  //data[i].name=数组肿的每个json的name属性值
                  str+="<tr>" +
                        "<td>"+data[i].name+"</td>"+
                        "<td>"+data[i].url+"</td>"+
                        "<td>"+data[i].type+"</td>"+
                      "</tr>"
              }
              //3、把生成的字符串设置为html内容添加进TBODY肿
              $("#j_tbData").html(str)
          })
      })
    </script>
</head>
<body>
<input type="button" value="获取数据" id="j_btnGetData" />
<table>
    <thead>
    <tr>
        <th>标题</th>
        <th>地址</th>
        <th>说明</th>
    </tr>
    </thead>
    <tbody id="j_tbData">
    </tbody>
</table>
</body>

 

动态添加数据

<script>
        $(document).ready(function(){
            //需求 1、点击按钮显示遮罩层和添加数据表格
            $("#j_btnAddData").click(function(){
               $("#j_mask").show();
                $("#j_formAdd").show();
            })
            //需求 2、点击里面的关闭按钮隐藏遮罩层和添加数据表格
            $("#j_hideFormAdd").click(function(){
                $("#j_mask").hide();
                $("#j_formAdd").hide();
            });
            //需求 3、点击get所在的标签,删除所在的tr
            $("#j_tb .get").click(function(){
               $(this).parent("td").parent("tr").remove()
            });
            //需求 4、点击里面的添加内容,全部能容这个成嵌套td形式添加到tbody里面
            $("#j_btnAdd").click(function()
            //有点小错误 因为原来的内容会被覆盖掉
              /*var str=$("#j_tb").html();
                str+="<tr>" +
                        "<td>11</td>"
                    "</tr>"
                $("#j_tb").html(str);*/
                var srt=$("<tr></tr>");
                   //外单内双 因为里面用到了双引号
                srt.html(<td>+$("#j_txtLesson").val() +</td><td>+$("#j_ttxBelSch").val()+</td><td><a href="javascrip:;" class="get">GET</a></td>);
                //buy1 内容不能为空
                if($("#j_txtLesson").val()==="") {
                    alert("内容不能为空");
                    return;
                }
                $("#j_tb").append(srt);
                $("#j_mask").hide();
                $("#j_formAdd").hide();
                //buy2 之前填写的内容,在关闭后,清空
                $("#j_txtLesson").val("");
                //buy3 新添加的表格也可以删除
                srt.find("a").click(function(){
                    srt.remove()
                });
            })
        })
    </script>

技术分享

 

创建jQuery节点对象

标签:appendto   兄弟节点   循环   培训机构   img   function   url   tee   rip   

原文地址:http://www.cnblogs.com/wdz1/p/7795769.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!