天天看點
傳回

jquery 操作DOM

  1. DOM操作分類

DOM操作分為三類：

      • CSS-DOM：用于操作CSS，如element.style.color="green"
      • HTML-DOM：用于處理HTML文檔，如document.forms
      • DOM Core：任何一種支援DOM的程式設計語言都可以使用它，如getElementById()
    • jQuery中的DOM操作

jQuery對JavaScript中的DOM操作進行了封裝

jQuery中的DOM操作

    1. 樣式操作
    2. 内容及Value值操作
    3. 節點操作
    4. 節點屬性操作
    5. 節點周遊
  • 設定單個屬性

css(name,value) ;

或

  • 同時設定多個屬性

css({name:value, name:value,name:value…}) ;

示例；$(this).css("border","5px solid #f5f5f5");

或

$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});

  • 擷取屬性值

css(name)

<style>

        .dd{ border: 1px solid red; width: 50px; height: 70px;}

    </style>

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

    <script type="text/javascript">

        $(function(){

       //  $("div").css("border","1px solid red");

 //$("div").css({"border":"1px solid red","width":"50px","height":"70px"});

$("div").addClass("dd");

        });

function show(div1){

alert($(div1).css("border"));

}

    </script>

</head>

<body>

<div οnclick="show(this);">

    來打我把

</div>
  • 追加樣式

$(selector).addClass(class);

或   $(selector).addClass(class1 class2 … classN);//多個樣式之間是空格

示例:

$("h2").mouseover(function() {

     $("p").addClass("content border");

});

  • 移除樣式

$(selector).removeClass("class") ;

或   $(selector).removeClass("class1 class2 … classN ") ;

示例:

$("h2").mouseout(function() {

        $("p").removeClass("text content");

});

  • 切換樣式

toggleClass()

模拟了addClass()與removeClass()實作樣式切換的過程

文法:

$(selector).toggleClass(class) ;

示例:

$("h2").click(function() {

    $("p").toggleClass("content  border");

});

  • 判斷是否含指定的樣式

hasClass( )方法來判斷是否包含指定的樣式

文法:

$(selector). hasClass(class);

示例:

$("h2").mouseover(function() {

    if(!$("p").hasClass("content ")){

$("p").addClass("content ");

}

});

$("h2").mouseout(function() {

      if($("p").hasClass("content ")) {

$("p").removeClass("content ");

    }

});

  1. 内容操作

HTML代碼操作

标簽内容操作

屬性值操作

  • 擷取元素中的html代碼

$("div.left").html();

  • 設定元素中的html代碼

$("div.left").html("<div class='content'>…</div>");

  1. 标簽内容操作
  • 擷取元素中的文本内容

$("div.left").text();

  • 設定元素中的文本内容

$("div.left").text("<div class='content'>…</div>");

  • html( ) 和text( )方法的差別

html()設定可以包含文本和标簽

text() 設定隻能是文本

  1. 屬性值操作
  • 擷取元素的value屬性值

$(this).val();

  • 設定元素的value屬性值

$(this).val(value);

  1. 節點操作

jQuery中節點操作

查找節點（前面章節已講）

建立節點

插入節點

删除節點

替換節點

複制節點

  • 建立節點

  var uu="<ul><li>美女</li></ul>";

$("#love").html(uu);
  • 元素内部插入子節點
  1. append(content)

$(A).append(B)表示将B追加到A中

如：$("ul").append($newNode1);

  1. prepend(content)

$(A). prepend (B)表示将B前置插入到A中

如：$("ul"). prepend ($newNode1);

  • 元素外部插入同輩節點

after(content)

$(A).after (B)表示将B插入到A之後

如：$("ul").after($newNode1);

before(content)

$(A). before (B)表示将B插入至A之前

如：$("ul").before($newNode1);

  • 删除節點

remove()：删除整個節點  $(selector).remove([expr]);

empty()：清空節點内容  $(selector).empty();

  • 替換節點

replaceWith()

示例:

var $newNode1=$("<li>你喜歡哪些冬季運動項目？</li>");

$(".gameList li:eq(2)").replaceWith($newNode1);

  • clone()用于複制某個節點

$(selector).clone([includeEvents]) ;

參數ture或flase, true複制事件處理，flase時反之

  • 屬性操作

擷取與設定元素屬性

删除元素屬性

attr()用來擷取與設定元素屬性

擷取屬性值

$(selector).attr([name]) ;

設定多個屬性的值

$(selector).attr({[name1:value1]…[nameN:valueN]}) ;

示例:

$(".contain img").attr({width:"200",height:"80"});

删除元素屬性

removeAttr()用來删除元素的屬性

文法:$(selector).removeAttr(name) ;

示例  删除元素的alt屬性

$(".contain img").removeAttr("alt");

節點周遊 

children([expr]) 隻考慮子元素而不考慮所有後代元素

each

示例

查找DIV中的每個子元素。

HTML 代碼:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代碼:

$("div").children()

結果:

[ <span>Hello Again</span> ]

描述:

在每個div中查找 .selected 的類。

HTML 代碼:

<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>

jQuery 代碼:

$("div").children(".selected")

結果:

[ <p class="selected">Hello Again</p> ]

next([expr])傳回後面那個緊鄰的同輩元素

示例

描述:

找到每個段落的後面緊鄰的同輩元素。

HTML 代碼:

<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

jQuery 代碼:

$("p").next()

結果:

[ <p>Hello Again</p>, ]

描述:

找到每個段落的後面緊鄰的同輩元素中類名為selected的元素。

HTML 代碼:

<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>

jQuery 代碼:

$("p").next(".selected")

結果:

[ <p class="selected">Hello Again</p> ]

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

<script type="text/javascript">

    $(function(){

         // var love="<li>我兒子</li>";

        //内部插入

      //  $("ul").prepend(love);

        //外部插入

      //  var love1="<li>人民币</li>";

       // $("li:first").after(love1);

      //  $("li:eq(1)").remove();

       // $("li:eq(1)").empty();

        $("li:eq(1)").replaceWith("<li>紫霞仙子</li>");

        $("li").click(function(){

            alert("我是li");

        });

        var li=  $("li:eq(0)").clone(true);

        $("ul").append(li);

    });

   function  addLove(){

       $("img").attr("src","images/1.png");

   }

    function deleteLove(){

        $("img").removeAttr("src");

    }

</script>

</head>

<body>

<button οnclick="addLove();">添加的女神</button>

<button οnclick="deleteLove();">幹掉女神</button>

<div id="love"></div>

<ul>

    <li >朱茵</li>

    <li>珍珍</li>

    <li>人民币</li>

</ul>

<img >

</body>
html
上一篇: [置頂]       編寫自己的JQUERY插件
下一篇: 虛拟現實/增強現實中的三維草圖繪制前言一、目前存在的問題二、相關文獻三、定量分析四、定性分析總結

繼續閱讀