2、jQuery中的DOM操做
Dom操做的分類javascript
通常來講，Dom操做分爲3個方面，即DOM Core、HTML-DOM和CSS-DOM。css
jQuery中的DOM操做html
1、查找節點java
用jQuery在文檔樹上查找節點很是容易，能夠利用前面介紹的jQuery選擇器來完成。jquery
一、查找元素節點 利用jQuery選擇器數組
<script type="text/javascript">
$(function(){
//獲取第二個li元素
var $li=$('ul li:eq(1)');
var li_txt=$li.text();
alert(li_txt);
});
</script>
<p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
<ul>
<li title='蘋果'>蘋果</li>
<li title='橘子'>橘子</li>
<li title='菠蘿'>菠蘿</li>
</ul>
二、查找屬性節點app
利用jQuery選擇器查找到須要的元素以後，就可使用attr()方法來獲取它的各類屬性的值。attr()方法的參數能夠是一個，也能夠是兩個。當參數是一個時，則是要查詢的屬性的名字。dom
//獲取p元素
var $p=$('p');
var p_title=$p.attr('title'); //獲取<p>元素節點的屬性title
alert(p_title);
2、建立節點函數
一、建立元素節點：網站
使用jQuery的工廠函數$()來完成。$(html)
var $li_1=$('<li></li>');
var $li_2=$('<li></li>');
//而後將這兩個新建的元素插入到文檔中，使用jQuery中的append()方法
$('ul').append($li_1);
$('ul').append($li_2);
3、插入節點
動態建立的HTML元素並無實際用處，還須要將建立的元素插入文檔中，將新建立的節點插入文檔最簡單的方法是，讓它成爲這個文檔的某個節點的子節點。
插入節點的方法：
| 方法 | 描述 | 示例 |
| append() | 向每一個匹配的元素內部追加內容 | html: <p>我想說</p> $('p').append('<b>你好</b>'); 結果：<p>我想說<b>你好</b></p> |
| appendTo() | 將全部匹配的元素追加到指定的元素中，實際上，使用該方法是顛倒了常規的$(A).append(B)的操做， | <p>我想說</p> $('<b>你好</b>').appendTo('p') 結果：<p>我想說<b>你好</b></p> |
| prepend() | 向每一個匹配的元素內部前置內容 | <p>我想說</p> $('p').prepend('<b>你好</b>'); 結果：<p><b>你好</b>我想說</p> |
| prependTo() | 將全部匹配的元素前置到指定的元素中 | <p>我想說</p> $('<b>你好</b>').prependTo('p'); 結果：<p><b>你好</b>我想說</p> |
| after() | 在每一個匹配的元素以後插入內容 | <p>我想說：</p> $('p').after('<b>你好</b>'); 結果： <p>我想說：</p><b>你好</b> |
| insertAfter() | 將全部匹配的元素插入到指定元素的後面 | <p>我想說：</p> $('<b>你好</b>').insertAfter('p'); |
| before() | 在每一個匹配的元素以前插入內容 | <p>我想說：</p> $('p').befor('<b>你好</b>'); <b>你好</b><p>我想說:</p> |
| insertBefore() | 將全部匹配的元素插入到指定的元素的前面 | <p>我想說：</p> $('<b>你好</b>').insertBefore('p'); 結果：<b>你好</b><p>我想說:</p> |
示例：
$(function(){
var $li_1=$('<li title="香蕉">香蕉</li>'); //建立第一個<li>元素
var $li_2=$('<li title="雪梨">雪梨</li>');
var $li_3=$('<li title="其餘">其餘</li>');
//獲取<ul>節點
var $ul=$('ul');
//獲取ul的第二個li節點
var $two_li=$('ul li:eq(1)');
//將第一個建立的li元素插入到ul的後面
$ul.append($li_1);
//將第二個建立的li元素插入到ul的前面
$ul.prepend($li_2);
//講第三個建立的li元素插入到獲取到的第二個li節點
$li_3.insertAfter($two_li);
});
3、刪除節點
jQuery提供了兩種刪除節點的方法，remove()和empty()
一、remove()方法
做用是從dom中刪除全部匹配的元素。當某個節點用remove()方法刪除後，該節點所包含的全部後代節點將同時被刪除。這個方法的返回值是一個指向已被刪除的節點的引用，所以能夠在之後再使用這些元素。
var $li=$('ul li:eq(1)').remove();
$li.appendTo('ul');
//能夠簡化代碼直接使用appendTo()方法，也能夠用來移動元素
$('ul li:eq(1)').appendTo('ul');
remove()方法也能夠經過傳遞參數來選擇性刪除元素,
$('ul li').remove('li[title=菠蘿]')
二、empty()方法
empty()方法不是刪除節點，而是清空節點，它能清空元素中的全部後代節點。
4、複製節點
複製節點，例如某個購物網站的效果，用戶不只能夠經過單擊商品下方的"選擇"按鈕購買相應的產品，也能夠經過鼠標拖動商品並將其放到購物車中。這個商品拖動功能就是用的複製節點，將用戶選擇的商品所處的節點元素複製一次，並將其跟隨鼠標移動，從而達到購物效果。
$('ul li').click(function(){
$(this).clone().appendTo("ul");//複製當前單擊的節點，並將它追加到<ul>元素中。
});
複製節點後，被複制的元素並不具備任何行爲，若是須要新元素也具備複製功能，可使用
$(this).clone(true).appendTo("ul");
在clone()方法中傳遞了一個參數true，它的含義是複製元素的同時複製元素中所綁定的事件。
5、替換節點
若是要替換某個節點，jQuery提供了相應的方法，replaceWith()和replaceAll()
replaceWith()：方法的做用是將全部匹配的元素都替換成指定的html或者dom元素。若是在替換前，已經爲元素綁定事件，替換後原先綁定的事件將會與替換的元素一塊兒消失，須要在新元素上從新綁定事件。
6、包裹節點
一、jQuery提供了wrap()方法：該方法對於須要在文檔中插入額外的結構化標記很是有用，並且不會破壞原始文檔的語義。
$('strong').wrap('<b></b>');
結果：<b><strong>你最喜歡的水果</strong></b>
二、wrapAll()方法
該方法會將全部匹配的元素用一個元素來包裹。它不一樣於wrap()方法，wrap()方法是將全部的元素進行單獨的包裹。
html:
<strong>你最喜歡的水果？</strong> <strong>你最喜歡的水果？</strong>
使用wrap()方法：
$('strong').wrap('<b></b>')
結果：
<b><strong>你最喜歡的水果？</strong></b> <b><strong>你最喜歡的水果？</strong></b>
使用wrapAll()方法：
$('strong').wrapAll('<b></b>');
結果：
<b> <strong>你最喜歡的水果？</strong> <strong>你最喜歡的水果？</strong> </b>
三、wrapInner()方法
該方法將每個匹配的元素的子內容(包括文本節點)用其餘結構化的標記包裹起來。例如可使用它來包裝<strong>標籤的子內容，
$('strong').wrapInner('<b></b>');
運行代碼後，<strong>標籤內的內容被一對<b>標籤包裹了。
<strong><b>你最喜歡的水果？</b></strong>
7、屬性操做
在jQuery中，用attr()方法來獲取和設置元素屬性，removeAttr()方法來刪除元素屬性。
一、獲取屬性和設置屬性
var $p=$('p');
var p_title=$p.attr('title');//獲取p元素的title屬性
p.attr('title','這啥呢');//設置單個屬性的值
p.attr({"title":"your title","name":"tst"});
jQuery中不少方法都是同一個函數實現獲取和設置的，例如attr()、html()、text()、height()、width()、val()、css()
二、刪除屬性
使用removeAttr()方法
$('p').removeAttr('title') //刪除<p>元素的屬性title
8、樣式操做
一、獲取樣式和設置樣式
使用attr()方法獲取class和設置class。
var p_class=$('p').attr('class');
$('p').attr('class','test');//設置<p>元素的class爲test
大多數狀況下，它是將原來的class替換爲新的class，而不是在原來的基礎上追加新的class
二、追加樣式：
jQuery提供了專門的addClass()方法來追加樣式。
三、移除樣式
removeClass()
四、切換樣式
jQuery提供了一個toggleClass()方法控制樣式上的重複切換
$('p').toggleClass('another');//重複切換類名 another
五、判斷是否含有某個樣式
hasClass()用來判斷，若是有，則返回true，不然返回false
9、設置和獲取HTML、文本和值
一、html()方法：
相似於js中的innserHTML屬性，能夠用來讀取或者設置某個元素中的HTML內容。該方法也能夠設置HTML代碼，
var p_html=$('p').html(); //獲取<p>元素的HTML代碼
$('p').html('<strong>你好啊？</strong>');
二、text()方法：
相似於js中的InnerText屬性，能夠用來讀取或設置某個元素中的文本內容。
var p_text=$('p').text();//獲取<p>元素的文本內容
$('p').text('你最喜歡啥?');
三、val()方法
① 此方法相似於js中的value值，能夠用來設置和獲取元素的值。不管元素時文本框，下拉列表仍是單選框，它均可以返回元素的值。若是元素爲多選，則返回一個包含全部選擇的值的數組。
示例：郵箱登錄界面，郵箱地址文本框和郵箱密碼框內分別有"請輸入郵箱地址"和「請輸入郵箱密碼」的提示。當將鼠標聚焦到郵箱文本框時，文本框內的「請輸入郵箱地址」文字將被清空。
//當鼠標獲取焦點時
$('#address').focus(function(){
var address_val=$('#address').val(); //獲取address地址
if(address_val=='請輸入郵箱地址'){
$(this).val("");
}
});
//當鼠標失去焦點時
$('#address').blur(function(){
var address_val=$('#address').val(); //獲取address地址
if(address_val==""){
$(this).val("請輸入郵箱地址");
}
});
②val()方法不只能設置元素的值，同時也能獲取元素的值。另外，val()方法還有另一個用處，就是他能使select、checkbox和radio相應的選項被選中。
jQuery中的val()方法是從最後一個選項往前讀取，若是選項的value或text中任意一項符合就會被選中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
.test{
font-weight:bold;
color : red;
}
.add{
font-style:italic;
}
</style>
<script type="text/javascript">
$(function(){
//設置下拉框選擇 選擇2號
$("input:eq(0)").click(function(){
$("#single").val("選擇2號");
});
//設置下拉列表同時選擇 2 3項
$("input:eq(1)").click(function(){
$("#multiple").val(["選擇2號", "選擇3號"]);
});
//設置多選框 多選2
$("input:eq(2)").click(function(){
$(":checkbox").val(["check1"]);
$(":radio").val(["radio1"]);
});
});
</script>
</head>
<body>
<input type="button" value="設置單選下拉框選中"/>
<input type="button" value="設置多選下拉框選中"/>
<input type="button" value="設置單選框和多選框選中"/>
<br/><br/>
<select id="single">
<option>選擇1號</option>
<option>選擇2號</option>
<option>選擇3號</option>
</select>
<select id="multiple" multiple="multiple" style="height:120px;">
<option selected="selected">選擇1號</option>
<option>選擇2號</option>
<option>選擇3號</option>
<option>選擇4號</option>
<option selected="selected">選擇5號</option>
</select>
<br/><br/>
<input type="checkbox" value="check1"/> 多選1
<input type="checkbox" value="check2"/> 多選2
<input type="checkbox" value="check3"/> 多選3
<input type="checkbox" value="check4"/> 多選4
<br/>
<input type="radio" value="radio1"/> 單選1
<input type="radio" value="radio2"/> 單選2
<input type="radio" value="radio3"/> 單選3
</body>
</html>
上面的例子中，可使用val()方法，也可使用attr("selected",true)方法。
10、遍歷節點
一、children()方法
該方法用於取得匹配元素的子元素集合。只考慮子元素而不考慮任何後代元素。
var $body=$('body').children(); //獲取body下全部的孩子節點。
二、next()方法
該方法用於取得匹配元素後面相鄰的同輩元素
var $p1=$("p").next();//取得相鄰<p>元素後的同輩元素
三、prev()方法
該方法用於取得匹配元素前面緊鄰的同輩元素。
四、siblings()方法
該方法用於取得匹配元素先後全部的同輩元素。
五、closest()
它用來取得最近的匹配元素。首先檢查當前元素是否匹配，若是匹配則直接返回元素自己。若是不匹配則向上查找父元素，逐級向上直到找到匹配選擇器的元素。若是什麼都沒找到則返回一個空的jQuery對象。
除此以外，在jQuery中還有不少遍歷節點的方法，例如find()、filter()方法、nextAll()方法、prevAll()方法、parent()方法和parents()方法等。
11、CSS-DOM操做
CSS-DOM就是讀取和設置style對象的各類屬性。
一、利用css()方法獲取元素的樣式屬性
$("p").css("color"); //獲取<p>元素的樣式顏色
二、能夠直接利用css()方法設置某個元素的單個樣式
$("p").css("color","red"); //設置<p>元素的樣式顏色爲red
與attr()方法同樣，css()方法也能夠同時設置多個樣式屬性。
$("p").css({"font-size":"30px","background-color":"#999999"});
在css()方法中，若是屬性中帶有「-」符號，例如font-size和background-color屬性，若是在設置這些屬性的值的時候不帶引號，那麼就要用駝峯式寫法，例如
$("p").css(fontSize:"30px",background-color:"#8888");
若是帶上了引號，既能夠寫成"font-size"，也能夠寫成"fontSize"，總之建議你們加上引號，養成良好的習慣。
三、對透明度設置，可使用opacity屬性，
$("p").css("opacity","0.3");
四、獲取元素的高度
能夠經過css()方法獲取高度，也能夠經過height()方法獲取元素的高度。
$("p").css("height");
$("p").height();
height()方法也能用來設置元素的高度。
css()方法和Height()方法的區別：
css()方法獲取的高度值和樣式的設置有關，可能會獲得auto，也可能獲得10px之類的字符串，而height()方法獲取的高度值則是元素在頁面中的實際高度，與樣式的設置無關，而且不帶單位。
與height()對應的還有一個width()方法。
此外，在CSS-DOM中，還有如下幾個常用的方法：
五、offset()方法
它的做用是獲取元素在當前視窗的相對偏移，其中返回的對象包含兩個屬性，即top和left，它只對可見元素有效。
var offset=$("p").offset();
var left=offset.left();
var top=offset.top();
六、position()方法
它的做用是獲取元素相對於最近一個position樣式屬性設置爲relative或者absolute的祖父節點的相對偏移，與offset()同樣，它返回的對象也包括兩個屬性，top和left。
七、scrollTop()和scrollLeft()方法
這兩個方法的做用分別是獲取元素的滾動條距離頂端的距離和距左側的距離。
12、案例研究
一、超連接提示效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
*{margin:0px; padding:0px;}
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
/* tooltip */
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:1px;
color:#333;
display:none;
}
</style>
<script type="text/javascript">
$(function(){
//取消title屬性默認提示，設置x y座標，解決因爲自制的提示與鼠標距離太近而引發的提示問題。
var x=10;
var y=20;
$("a.tooltip").mouseover(function(e){
//鼠標通過
this.myTitle=this.title;
this.title=""; //設置默認的title屬性爲""
console.info(e.pageY+":"+e.pageX);
var $html=$("<div id='tooltip'>"+this.myTitle+"</div>"); //建立元素
$html.appendTo("body"); //插入文檔中
$("#tooltip").css({"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"}).show("fast"); //設置 x y座標 並顯示
}).mouseout(function(){
//鼠標移除
this.title=this.myTitle;
$("#tooltip").remove();
}).mousemove(function(e){
$("#tooltip").css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
});
});
});
</script>
</head>
<body>
<p><a href="#" class="tooltip" title="這是個人超連接提示1.">提示1.</a></p>
<p><a href="#" class="tooltip" title="這是個人超連接提示2.">提示2.</a></p>
<p><a href="#" title="這是自帶提示1.">自帶提示1.</a></p>
<p><a href="#" title="這是自帶提示2.">自帶提示2.</a></p>
</body>
</html>
二、圖片提示效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script type="text/javascript" src="file:///F|/html/jquery/jquery-1.7.2.min.js"></script>
<style type="text/css">
*{margin:0px; padding:0px;}
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
border:1px solid #AAAAAA;
}
/* tooltip */
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
</style>
<script type="text/javascript">
$(function(){
var x=10;
var y=20;
$("a.tooltip").mouseover(function(e){
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();
}).mousemove(function(e){
$("#tooltip").css({
"top" : (e.pageY+y) +"px",
"left" : (e.pageX+x) +"px"
});
});
});
</script>
</head>
<body>
<h3>有效果：</h3>
<ul>
<li><a href="images/apple_1_bigger.jpg" class="tooltip" title="蘋果 iPod"><img src="images/apple_1.jpg" alt="蘋果 iPod" /></a></li>
<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="蘋果 iPod nano"><img src="images/apple_2.jpg" alt="蘋果 iPod nano"/></a></li>
<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="蘋果 iPhone"><img src="images/apple_3.jpg" alt="蘋果 iPhone"/></a></li>
<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="蘋果 Mac"><img src="images/apple_4.jpg" alt="蘋果 Mac"/></a></li>
</ul>
<br/><br/><br/><br/>
<br/><br/><br/><br/>
<h3>無效果：</h3>
<ul>
<li><a href="images/apple_1_bigger.jpg" title="蘋果 iPod"><img src="images/apple_1.jpg" alt="蘋果 iPod" /></a></li>
<li><a href="images/apple_2_bigger.jpg" title="蘋果 iPod nano"><img src="images/apple_2.jpg" alt="蘋果 iPod nano"/></a></li>
<li><a href="images/apple_3_bigger.jpg" title="蘋果 iPhone"><img src="images/apple_3.jpg" alt="蘋果 iPhone"/></a></li>
<li><a href="images/apple_4_bigger.jpg" title="蘋果 Mac"><img src="images/apple_4.jpg" alt="蘋果 Mac"/></a></li>
</ul>
</body>
</html>
- 1. jQuery：基礎2---操做DOM
- 2. jQuery中的DOM操做
- 3. JQuery中的DOM操做
- 4. jQuery的DOM操做、
- 5. jquery的DOM操做
- 6. jQuery操做dom
- 7. jquery操做DOM
- 8. jquery DOM操做（一）
- 9. jQuery之DOM操做
- 10. 【jQuery】之DOM操做
- 更多相關文章...
- • Java 中操作 R - R 語言教程
- • Spring中Bean的作用域 - Spring教程
- • C# 中 foreach 遍歷的用法
- • Scala 中文亂碼解決
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. jQuery：基礎2---操做DOM
- 2. jQuery中的DOM操做
- 3. JQuery中的DOM操做
- 4. jQuery的DOM操做、
- 5. jquery的DOM操做
- 6. jQuery操做dom
- 7. jquery操做DOM
- 8. jquery DOM操做（一）
- 9. jQuery之DOM操做
- 10. 【jQuery】之DOM操做