1.创建节点并添加到页面$(“ul”).append(“$li_1”).append(“$li_2”)

 1 <!doctype html>
 2 <html lang="en">
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <meta charset="UTF-8">
 5 <head>
 6  <link href="css/animate.css" rel="stylesheet">
 7   <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
 8  <style>
 9  </style>
10 </head>
11 <body>
12 <p title="请选择你最喜欢的水果">你喜欢的水果是？</p>
13 <ul>
14 <li title="苹果">苹果</li>
15 <li title="橘子">橘子</li>
16 <li title="菠萝">菠萝</li>
17 </ul>
18 
19 <script type="text/javascript">
20 
21 var $li_1=$("<li>凤梨</li>");
22 var $li_2=$("<li>奇异果</li>");
23 $("ul").append($li_2).append($li_1)
24 </script>
25 </body>
26 </html>

2.获取属性元素var $a=$(“p”).attr(“title”); alert(“$a”)

注：这里既可以用jQuery对象，也可以用dom对象，嘻嘻，虽然我也不知道两者最大的区别在哪，因为我刚开始用。

<script type="text/javascript">
  var $para=$("p")
  var p_txt=$para.attr("title")
  alert(p_txt)

</script>

3.设置节点属性$(“p”).attr(“name”:”名称”,”title”:”你的名称是”)；

<script type="text/javascript">
  $("p").attr({"title":"your","name":"test"})
  </script>

4.移动节点

<script type="text/javascript">
//移动第2个LI到最后
$("ul li:eq(1)").appendTo("ul")

</script>

5.删除节点后，还可添加该节点

$(function () {
//删除节点
var $li=$("ul li:eq(1)").remove();
$("ul").append("$li");//$("ul").append("$li");这里添加的内容是“”里面的文字即文本节点，而非变量值
$("ul").append($li);//($li)指的是添加的jQuery对象
})

结果如下

6.删除带参数的节点

<script type="text/javascript">
//删除title为非菠萝的节点
$("ul li[title!=菠萝]").remove();
//$("ul li").remove("li[title!=\'菠萝\']");
//注意：菠萝不加引号，或者加单引号
//注意：remove（）括号里面加引号
</script>

7.复制节点clone（）$(“li”).clone().apeendTo(“ul”)

<script type="text/javascript">
 $(function(){
      $("ul li").click(function () {
         $(this).clone(true).appendTo("ul");
     })

 })

</script>

8.detach删除节点后，再添加到页面里，其绑定事件还在

<script type="text/javascript">
$(function(){

     $("ul li").click(function () {
         alert($(this).html());
     })

    var $li=$("ul li:eq(1)").detach();
    $("ul").append($li);
})


</script>

 

版权声明：本文为qfly原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/qfly/p/4729404.html