【jQuery】(3)---Jquery操作Dom

              1 内部插入节点

 1 <body>
 2         <ul id="city">
 3             <li id="bj" name="beijing" >北京li>
 4             <li id="tj" name="tianjin"> 天津li>
 5              <li id="cq" name="chongqing">重庆li>
 6         ul>
 7     
 8         <ul id="love">
 9             <li id="fk" name="fankong" >反恐li>
10             <li id="xj" name="xingji">星际li>
11         ul>
12            
13     <script type="text/javascript">
14       // $("#city").append($("#fk"));    //将防恐标签位置移到了重庆下面    append向每个匹配的元素的内部的结尾处追加内容
15       // $("#fk").appendTo($("#city"));  //效果和上面一样                appendTo将每个匹配的元素追加到指定的元素中的内部结尾处
16       // $("#city").prepend($("#fk"));   //将将防恐标签位置移到了北京上面   prepend向每个匹配的元素的内部的开始处插入内容
17       // $("#fk").prependTo($("#city")); //效果和上面一样                prependTo将每个匹配的元素插入到指定的元素内部的开始处   
18     script>  
19   body>

             2.创建节点和删除节点

 1    <script type="text/javascript" src="../js/jquery-1.8.2.min.js">script>
 2   <body>
 3         <ul id="city">
 4             <li id="bj" name="beijing" >北京li>
 5             <li id="tj" name="tianjin"> 天津li>
 6              <li id="cq" name="chongqing">重庆li>
 7         ul>
 8             
 9         <script type="text/javascript">  
10           var $hz=$("
  • "); //创建
  • $("
  • "
    )代表创建元素
    11 $hz.attr("id","hz"); //添加属性
  • attr代表添加元素
    12 $hz.attr("name","hangzhou"); 13 $hz.text("杭州"); //添加文本 text代表添加文本 14 $("#city").append($hz); //把节点挂载到父节点下即可 15 16 //移除节点信息 17 var $cq=$("#cq").remove(); //可以获得移除节点 的元素 remove()代表删除节点 18 //移除属性信息 19 alert($cq.attr("name")); //移除属性信息 attr("name"),如果只有一个属性就代表通过name值得到属性名,这里得到chongqing 20 $("#city").empty(); ////清空节点 21 script> 22 body>

                     3.复制节点

     1  <script type="text/javascript" src="../js/jquery-1.8.2.min.js">script>
     2   <body>
     3   <button>保存button>
     4    <p>段落p> 
     5    <script type="text/javascript">
     6     $("button").click(function(){
     7        alert("点击按钮");
     8      });
     9        //克隆节点,不克隆事件
    10       $("button").clone().appendTo($("p"));     //相当于把第三行的button按钮复制到了p标签的后面 
    11        //克隆节点,克隆事件
    12        $("button").clone(true).appendTo($("p")); //clone(true)里面添加true代表也克隆事件,因为上面有两个button按钮,所以两个都会被复制
    13      script>
    14   body>

                    4.替换节点 

     1   <script type="text/javascript" src="../js/jquery-1.8.2.min.js">script>  
     2   <body>
     3 <p>段落p>
     4 <button>登陆button>
     5  <script type="text/javascript">
     6  //replaceWith和replaceAll的功能完全相反,
     7  // $("p").replaceWith("");  //把p标签换成button按钮
     8  // $("p").replaceAll("");   //按照道理是把button标签变成p标签,但没有实现功能
     9  script>
    10   body>

     

    转载于:https://www.cnblogs.com/qdhxhz/p/Jquery.html

    你可能感兴趣的:(【jQuery】(3)---Jquery操作Dom)