创建jQuery节点对象

现在的年轻人，经历旺盛，每天都熬夜，今天又晚了，现在才更新博客，今天更新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().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=; 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=; 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>