jQuery與Dom

時間 2019-12-11

標籤 jquery dom 欄目 JQuery 简体版

原文原文鏈接

上節講解了jQuery的選擇器，基本都掌握了，如今再講解一下jQuery的Dom操做。 javascript

1、查找節點 css

1.1 查找元素節點 html

[javascript] view plaincopyprint? java

var $li = $("ul li:eq(1)"); //獲取<ul>裏第二個<li>節點。
var li_txt = $li.text(); //獲取第二個<li>元素節點的文本內容。
alert(li_txt);

1.2查找屬性節點 jquery

jQuery選擇器找到所需元素以後，就可使用attr()方法來獲取它的各類屬性值。attr()的參數能夠是一個，能夠是兩個。一個表示取值，兩個表示賦值。 app

[javascript] view plaincopyprint? iphone

var $para = $("p"); //獲取<p>節點
var p_txt = $para.attr("title"); //獲取<p>元素節點屬性title
alert(p_txt);

2、建立節點 ide

2.1建立元素節點 函數

例如要建立兩個<li>元素節點，而且要把它們做爲<ul>元素節點的子節點添加到DOM節點樹上。完成這個任務須要兩個步驟。 this

(1)建立兩個<li>新元素

(2)將這兩個元素插入文檔中。

第(1)個步驟能夠用jQuery的工廠函數$()來完成，格式以下：

[javascript] view plaincopyprint?

$(html);
$(html)方法會根據傳入的html標記字符串，建立一個DOM對象，並將這個DOM對象包裝成一個jQuery對象後返回。
首先建立兩個<li>元素，以下：
var $li_1 = $("<li></li>");
var $li_2 = $("<li></li>");
插入元素：
$("ul").append($li_1);
$("ul").append($li_2);或者用以下寫法：$("ul").append($li_1).append($li_2);

2.2建立文本節點

[javascript] view plaincopyprint?

var $li_1 = $("<li>香蕉</li>");
var $li_2 = $("<li>雪梨</li>");

其餘的同2.1

2.3建立屬性節點

[javascript] view plaincopyprint?

var $li_1 = $("<li title='香蕉'>香蕉</li>");
var $li_2 = $("<li title='雪梨'>雪梨</li>");

其餘的同2.1

3、插入節點
動態的建立HTML元素並無什麼實際用處，還須要將新建立的元素插入到文檔中去，前面已經介紹了一種append(),其實還有不少插入方法。

主要有四對方法處理，其實都很簡單，很好記。以下：

append()和appendTo()：向每一個匹配元素的內部追加內容，指的是後部。

prepend()和prependTo()：向每一個匹配元素內部前置內容，指的是前部。

after()和insertAfter()：在每一個匹配元素後部插入內容，指的是同級後面。

before()和insertBefore()：在每一個匹配元素前部插入內容，指的是同級前面。

4、刪除節點

若是文檔中某一個元素多餘，那麼應該刪除。jQuery提供了兩種刪除節點的方法，及remove()和empty()。

4.1remove()方法

var $li = $("ul li:eq(1)").remove(); //獲取第二個<li>元素節點後，將它從網頁上刪除。

其返回值是一個指向已被刪除的節點的引用，所以能夠在之後繼續使用這些元素。

$li.appendTo("ul"); //把剛纔刪除的節點又從新添加到<ul>元素裏。

以上代碼能夠簡寫以下：

$("ul li:eq(1)").appendTo("ul"); //用來移動元素，移動元素首先刪除元素，而後再插入。

remove()還能夠添加參數,以下：

$("ul li").remove("li[title!=蘿蔔]");

4.2empty()方法

嚴格講，empty()並不刪除節點，只是清空節點，它能清空元素中的全部後代節點。

5、複製節點

clone()和clone(true)，複製節點後，被複制的新元素並不具備任何行爲。若是須要新元素有具備複製功能，則使用clone(true)

[javascript] view plaincopyprint?

$("ul li").click(function(){
$(this).clone().appendTo("ul");//複製當前節點，並將它追加到<ul>元素中。
});

6、替換節點

若是要替換某個節點，jQuery提供了相應的方法，即replaceWith()和replaceAll()。

$("p").repaceWith("<strong>你最不喜歡的水果是？</strong>"); //將全部匹配的元素都替換成指定的HTML或者DOM元素。

$("<strong>你最不喜歡的水果是？</strong>").repalceAll("p"); //和上面是一對操做。

7、包裹節點

使用wrap()和wrapAll()方法能夠實現：

[javascript] view plaincopyprint?

$("strong").wrap("<b></b>"); //把每個<strong>都用一個<b>包圍起來，有幾個包幾個
$("strong").wrapAll("<b></b>"); //總體包裹

warpInner()方法，包裹元素的子內容（包括文本節點）

8、屬性操做

在jQuery中，用attr()方法來獲取和設置元素屬性，removeAttr()方法來刪除元素屬性。

8.1獲取和設置屬性

attr()一個參數表示獲取屬性值，兩個參數表示設置屬性值，前面講過。

$("p").attr("title","your title");

還能夠設置多值，$("p").attr({"title":"your title","name":"test"})

jQuery中不少方法都是同一個函數實現獲取（getter）和設置（setter）的，例如上面的attr()方法，既能設置元素屬性的值，也能獲取元素屬性的值，相似的還有

html()、text()、height()、width()、val()和css()等方法。

8.2刪除屬性

$("p").removeAttr("title");

9、樣式操做

9.1獲取樣式和設置樣式

var p_class = $("p").attr("class"); //獲取<p>元素的class

也能夠用attr來設置<p>元素的class，jQuery代碼以下：

$("p").attr("class","high"); //此代碼的做用是將原來的class替換爲新的class，而不是在原有的基礎上追加新的class，追加的以下。

9.2追加樣式

使用addClass();

$("p").addClass("another"); //給<p>元素追加"another"類，此時一共有兩個樣式了。

9.3移除樣式

使用removeClass()來完成，當有參數時removeClass("another"),則移除指定的樣式，還有removeClass("high another");移除兩個樣式

當沒有參數時則代表移除該元素的全部樣式。

9.4切換樣式

以前有toggle()方法

[javascript] view plaincopyprint?

$toggleBtn.toggle(function(){
//show code
},function(){
//hide code
});

這裏有toggleClass方法，控制樣式的轉換。若是類名存在則刪除它，若是類名不存在則添加它。

$("p").toggleClass("another"); //重複切換類名"another"

9.5判斷是否含有某個樣式

hasClass("another"); 其實其內部是使用is(".another")來實現的，這樣作只是增長了可讀性。

10、設置和獲取HTML、文本和值

主要有以下方法：

html() 對應javaScript的innerHTML屬性

text() 對應javascript的innerText屬性，firefox不支持innerText屬性

val()方法focus()、blur()方法

val()除了取值和設置以外，還能夠給select checkbox 和radio選中值，jQuery的val()的原則是從最後一個往前讀，value和text值

this.defaultValue方法。

11、遍歷節點

11.1children()方法

遍歷全部的子節點。

11.2next(),pre(),siblings()

closest()取得最近的匹配元素。

12、CSS-DOM操做

$("p").css("color");//獲取顏色屬性

$("p").css("color","red");//設置顏色

$("p").css({"fontSize"："30px"，"backgroundColor"："#888888"});//同時設置多個樣式。

有兩個注意點：

(1)若是值是數字，將會被自動轉化爲像素值。

(2)在css()方法中，若是屬性中帶有"-"符號，例如font-size和background-color屬性，用駝峯式寫法。

hight().width();

offset() .left .top 獲取元素在當前視窗的偏移量，返回值對象包含兩個屬性left和top。

position() .left .top 獲取元素相對於最近的一個position樣式屬性設置爲relative或者absolute的祖父節點的偏移量。

scrollTop() 、scrollLeft()方法。分別獲取元素的滾動條距頂端的距離和距左側的距離。也能夠設置值。scrollTop(300)

下面是個經典的例子：鼠標移過圖片，圖片放大

[html] view plaincopyprint?

<html>
<head>
<title>jQuery DOM test</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
//alert("over");
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle ? "<br/>"+this.myTitle : "";
var tooltip = "<div id='tooltip'><img src='" + this.href +"' alt='產品預覽圖'/>"+imgTitle+"</div>";
$("body").append(tooltip);
$("#tooltip").css({"top":(e.pageY + y)+"px","left":(e.pageX + x)+"px"}).show("fast");
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove();
});
});
</script>
</head>
<body>
<div>
<ul style="list-style:none;">
<li style="display:inline"><a href="img/ipod.jpg" class="tooltip" title="蘋果ipod" ><img src="img/ipod.jpg" alt="蘋果ipod" style="width:150px; height:150px"/></a></li>
<li style="display:inline"><a href="img/iphone.jpg" class="tooltip" title="蘋果iphone"><img src="img/iphone.jpg" alt="蘋果iphone" style="width:150px; height:150px"/></a></li>
<li style="display:inline"><a href="img/ipad.jpg" class="tooltip" title="蘋果ipad"><img src="img/ipad.jpg" alt="蘋果ipad" style="width:150px; height:150px"/></a></li>
<li style="display:inline"><a href="img/air.jpg" class="tooltip" title="蘋果air"><img src="img/air.jpg" alt="蘋果air" style="width:150px; height:150px"/></a></li>
</ul>
</div>
</body>
</html>