1. 程式人生 > >js操作對象

js操作對象

open 兄弟節點 下標 wid append 區別 tex parent second

技術分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Dom的分類</title>


    <!--
      xml  dom :針對於 xml文件的操作
      html dom :處理html頁面   document.forms[0]
      css  dom :操作css   element.style.屬性名

      dom core:核心!只要是支持dom編程語言都可以使用!
     javaSc對ript(jQuery)對上面的dom操作都提供了支持!
     jQueryjavaScript中的dom操作 進行了封裝!
    
--> </head> <body> </body> </html>
Dom的分類 技術分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>節點的操作</title>
</head>
<body>

  <ul>
  <li>大家辛苦了</li>
  <li>不交作業了</li>
  <li>就是不交</li>
  <li>氣死你</li>
  <li>傷害了誰?</li>
  </ul>

<button type="button" id="addLi">新增子節點</button>
<button type="button" id="addUl">新增同輩節點</button>
<button type="button" id="updateLi">替換下標為2節點</button>


<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">

    $(
function(){ $("#addLi").click(function(){ //創建一個節點li var $newLi=$("<li>新增的作業</li>"); //把新增的節點放置到 ul的最後 $("ul").append($newLi); $newLi.appendTo($("ul")); //把新增的節點放置到 ul的最前面 $("ul").prepend($newLi); //等同於 $newLi.prependTo($("ul"));
}) $("#addUl").click(function(){ //創建一個節點ul var $newUl=$("<ul><li>新增1</li><li>新增2</li></ul>") //把新增的ul放置在我們ul之後 $("ul").after($newUl); $newUl.insertAfter($("ul")); //把新增的ul放置在我們ul之前 $("ul").before($newUl); $newUl.insertBefore($("ul")); }) /** * 獲取li下標值是2的元素 替換 * $(節點1).replaceWith($(替換節點)) * 等同於 * $(替換節點).replaceAll($(節點1)) */ $("#updateLi").click(function(){ //創建替換的節點 var $updateLi=$("<li style=‘color: red‘>我是替換節點</li>"); //獲取下標是2的元素$("li:eq(2)").replaceWith($updateLi); //替換所有元素 $("li:eq(0)").replaceAll($("li:eq(4)")); }) //驗證 clone $("li:eq(2)").mouseover(function(){ $(this).css({"background":"red"}); }) //向ul中clone 節點3 $("li:eq(2)").clone().appendTo("ul"); // $("li:eq(2)").clone(true).appendTo("ul"); 會綁定事件,樣式 }) </script> </body> </html>
節點的操作 技術分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>刪除節點</title>
    <!--
      empty(), remove(), detach()三者的區別

      empty():只能清空節點的內容和子元素!節點本身不會被刪除!
      remove():
             01.刪除整個節點,包含自身和子元素!
             02.刪除了節點所對應的事件
      detach():
             01.刪除整個節點,包含自身和子元素!
             02.不會刪除節點所對應的事件
    -->

</head>
<body>
<div id="main">
    main
    <div id="first">first
       <div>裏面的子元素</div>
    </div>
</div>


<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">

$(function(){
   var $first=$("#first");

    $first.click(function(){
        alert("first");
    })
    // $first.empty();
    // $first.remove();
      $first.detach();
      $first.prependTo("body");

})


</script>
</body>
</html>
刪除節點 技術分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>attr屬性</title>
    <!--
     attr():
       01.如果只有一個參數 ,就是獲取對應屬性的值
       02.如果有兩個參數 ,就是設置對應屬性的值
     -->
</head>
<body>
  <img src="../images/cat.jpg">


  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript">

      $(function(){
            $("img").click(function(){
                //獲取元素指定的屬性值
               var $src= $(this).attr("src");
                alert($src);
                //增加鼠標懸停時的提示文字
                $(this).attr({"title":"這是一只可愛的小貓咪","width":"200px"});
                //清除對應的屬性值
                $(this).removeAttr("src");
            })

      })


  </script>
</body>
</html>
attr屬性 技術分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>獲取同輩和父輩元素</title>
</head>
<body>
body
<div id="main">
    main
    <div id="first1">
        first1
        <div id="second1">
            second1
            <div id="third1">
                third1
            </div>
        </div>
    </div>
    <div id="first2">
        first2
        <div id="second2">
            second2
        </div>
    </div>
    <div id="first3">
        first3
        <div id="second3">
            second3
        </div>
    </div>
</div>

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">

    $(function(){
         //獲取main的子元素個數
        alert("main的子元素個數"+$("#main").children().length);

     //設置first1之後的兄弟節點的樣式
      //  $("#first1").next().css({"color":"red"});
     //設置first2之前的兄弟節點的樣式
        //$("#first2").prev().css({"color":"red"});
      //所有同輩元素  之前和之後
        //$("#first2").siblings().css({"color":"red"});

        //設置first1的父級元素
       // $("#first1").parent().parent().css({"color":"red"});
        //設置third1的祖先元素
        $("#third1").parents().css({"color":"pink"});
    })
 </script>
</body>
</html>
獲取同輩和父輩元素

js操作對象