一. DOM 分為DOM核心，HTML-DOM和CSS-DOM 1.DOM核心 不專屬與javascript。 獲取對象：document.getElementsByTagName('div') 獲取屬性：elem.getAtrribute('title') 2.html-DOM document. ...
一. DOM
分為DOM核心，HTML-DOM和CSS-DOM1.DOM核心
不專屬與javascript。 獲取對象：document.getElementsByTagName('div') 獲取屬性：elem.getAtrribute('title')2.html-DOM
document.div elem.src3.CSS-DOM
elem.style.color='red'二. jQuery的DOM操作
1.查找節點
（1）元素節點
| 1 2 |
alert($('ul li:eq(1)').text);
//獲取ul中第2個li內文檔內容
|
（2）屬性節點：使用attr()方法
| 1 2 |
alert($('p').attr('title'));
//獲取p元素的title值（如果有的話）
|
2.創建節點
（1）元素節點
創建節點可以直接使用jQuery的工廠函數
$('HTML代碼');
添加節點使用
jq父親對象.append(jq子對象)
【例3.1】創建兩個li元素並添加到節點上
| 1 2 3 4 5 6 |
<ul id="list">
<h4>你喜歡的水果是</h4>
<li>蘋果</li>
<li>橘子</li>
<li>菠蘿</li>
</ul>
|
jq
| 1 2 3 4 5 6 7 8 |
$(document).ready(function(){
var $oLi1=$('<li>雪梨</li>');
var $oLi2=$('<li>柿子</li>');
//以上就直接創建了兩個對象
$('#list').append($oLi1);
$('#list').append($oLi2);
//添加到節點，也可以使用鏈式寫法
})
|
（2）創建文本節點
直接寫進去就行
$('HTML代碼');
（3）創建屬性節點
也是直接把屬性（比如title寫入到html中）
| 1 |
$("<li tilte='apple'>蘋果</li>")
|
3. 插入節點
| 方法 | 釋義 | 示例 | 備註 |
| append() | 在匹配元素的內部追加內容，在父元素內部最後面 | jq父對象.append(jq子對象) | 類似js里的appendChild()方法 |
| appendTo() | 顛倒了常規的append方法，在父元素內部最後面 | jq子對象.appendTo(jq父對象) | |
| preppend() | 向每個匹配元素內部前置內容，在父元素內部最前 | jq父對象.preppend(jq子對象) | |
| preppendTo() | 顛倒的preppend方法 | jq子對象.preppendTo(jq父對象) | |
| after() | 在每個匹配目標元素之後加入內容 | jq目標元素.after(jq操作對象) | |
| insertAfter() | 顛倒了after方法 | jq操作對象.insertAfter(jq目標對象) | |
| before | 在每個匹配目標元素之前加入內容 | jq目標元素.before(jq操作對象) | |
| insertBefore() | 顛倒的before方法 | jq操作對象insertBefore(jq目標對象) |
4.刪除節點
（1）remove()
$xxx.remove()——刪除xxx節點remove裡面可以跟選擇器
【例3.2】篩選搜索結果
| 1 2 3 4 5 6 7 |
<input id="btn1" type="button" value="搜索"/>
<ul id="list">
<li>蘋果</li>
<li>橘子</li>
<li title="菠蘿">菠蘿</li>
</ul>
|
js
| 1 2 3 4 5 6 |
$(document).ready(function(){
$('#btn1').click(function(){
$('ul li').remove("li[title!=菠蘿]")
})
})
|
（2）detach()方法
和remove類似，但萬一以後重新創建，相應綁定的方法和操作都會保留
（3）empty
清空元素里的內容，但不刪除節點
5.複製節點——clone()方法
被覆制的節點無任何行為，如果要具有同樣的功能可以調用clone方法的參數true
| 1 |
$(this).clone(true).appendTo('body');
|
6. 替換節點
通過重新給節點賦值的方法，似乎不能生效
（1）replaceWith()
| 1 |
|
以上案例把div下，p內的後代換成了新定義的html語句
（2）replaceAll()
| 1 |
$('<h1>你不喜歡的水果是？</h1>').replaceAll('p')
|
所有的p都會被換成新的html語句。
註意：替換後所有綁定的事件全部消失！
7. 包裹節點
把某個節點用一個標記包裹起來——wrap()
| 1 |
$('被標記對象的標簽').wrap('完整標記元素（包括閉合）')
|
所有被標記對象的標簽是單獨被一個標記元素所包裹——局限性還是有點大。
（1）wrapAll()方法
所有被標記對象的標簽是全部被一個標記元素所包裹。
（2）wrapInner
將每個匹配元素的子內容包括文本節點用設定的標記包裹
以上兩個方法格式和wrap方法相同
8.屬性操作
用attr獲取和設置屬性，removeAttr()來刪除屬性
（1）attr()方法
給所有p元素設置標題
| 1 |
$('p').attr('title','標題');
|
一次設置多個屬性：在每個屬性對中用逗號隔開，屬性對內改用冒號分隔。
| 1 |
$('選擇器').attr('屬性1':'值1','屬性2':'值2'....)
|
（2）removeAttr()方法
| 1 |
$('選擇器').removeAttr('屬性1')
|
9. 樣式操作
（1）獲取設置樣式
比如，我要把所有p元素的class設置為“para”
| 1 |
$('p').attr('class','para')
|
這裡沿用的是attr方法。註意，這裡的設置是覆蓋全部class的，修改後只有唯一的clas——para。這對於佈局來說是很不友好的。所以不常用。
（2）追加class樣式——addClass()
| 1 |
$('p').addClass('para')
|
p 標記原有的class會被保留。當兩個class樣式衝突時，後面覆蓋前面
（3）移除樣式——removClass()
| 1 |
$('p').removeClass('para class1')
|
上面例子中，p元素的兩個className（para class1）都被刪掉了。不帶參數時，刪除所有className。
（4）切換樣式——toggle()方法——1.8+版本已廢棄
貌似挺好用的方法——但是toggleClass能運行在1.11+版本中
| 1 2 |
<input id="btn1" type="button" value="切換"/>
<div id="div1" class="class1"></div>
|
存在兩個class樣式
| 1 2 3 4 5 6 7 8 9 10 11 12 |
#div1{
width: 200px;height: 200px;
}
.class1{
background: yellow;
}
.class2{
background: green;
}
|
點擊按鈕來回切換顏色
| 1 2 3 4 5 |
$(document).ready(function(){
$('#btn1').click(function(){
$('#div1').toggleClass('class2')
})
})
|
（5）判斷是否含有某種樣式——返回的是一個布爾值
hasClass方法
| 1 |
$('p').hasClass('para')
|
作為判斷，jquery實際是調用了is函數
| 1 |
$('p').is('.para');
|
10. 設置獲取HTML、文本的值
（1）html()方法
類似innerHTML方法
| 1 2 |
alert($('p').html());
//列印p標記內的html內容
|
在html()參數內設置html文本，可以改變p的內容
（2）text()方法
前面章節已經用過——類似innerText，不包含html結構內容。可以設置文本參數改變裡面的文本內容
（3）val()方法
相當於value。
【例3.3】登錄界面，滑鼠焦點移入時，value值消失，移除焦點時，value回覆。
提示：jq選擇器有$(':focus')方法——還有focus()事件——失去焦點：blur()
| 1 2 3 |
<input type="text" id="address" value="請輸入郵箱地址"/> <br/><br/>
<input type="text" id="password" value="請輸入郵箱密碼"/> <br/><br/>
<input type="button" value="登錄"/>
|
js：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
$(document).ready(function(){
$('#address').focus(function(){
if($(this).val()=='請輸入郵箱地址'){
$(this).val('');
}
})
$('#address').blur(function(){
if($(this).val()==''){
$(this).val('請輸入郵箱地址');
}
})
$('#password').focus(function(){
if($(this).val()=='請輸入郵箱密碼'){
$(this).val('');
}
})
$('#password').blur(function(){
if($(this).val()==''){
$(this).val('請輸入郵箱密碼');
}
})
})
|
11. 遍歷節點
每個遍歷節點都可以加參數進行篩選。
（1）獲取匹配元素的子元素集合——children()方法
取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。
可以通過可選的表達式來過濾所匹配的子元素。註意：parents()將查找所有祖輩元素，而children()只考慮子元素而不考慮所有後代元素。
可以用於遍歷
$aObj[i]
（2）next()方法
| 1 2 |
$('p').next()
//獲取緊鄰p元素的下一個同輩元素
|
（3）prev()方法
獲取匹配元素緊鄰的前一個同輩元素
（4）sibling()方法
獲取匹配元素後緊鄰的所有同輩元素
（5）closest
獲取最近的匹配元素
| 1 |
$('.para').closest('li')
|
如上，class為para的標記靠的最近的那個li元素——按輩分算。
【註意區別parent，parents和closest】
12. CSS-DOM操作
利用jq提取外部樣式的屬性，這是最大的優勢。因此隆重推出css()方法
無論外部樣式是怎樣關聯的，css()都可以獲取！
css()可以直接給元素設置樣式！
和attr方法一樣，css()可以直接一次性改變多個屬性！
| 1 |
$('p').css('background':'white','color':red,
|
註意
a. font-size之類的屬性可以不加引號——但是必須寫成fontSize。
b. opacity可以直接用，jq已經處理好了相容性。
c. css()也可以獲取高度，但是那隻是樣式所說的靜態高度。獲取計算後的高度是用xxx.height()，相對應的是width()方法。
佈局常用方法：
（1）offset()
返回的是top和left兩個屬性值。
| 1 2 |
$('p').offset().left
//獲取p元素的offsetLeft。
|
left，top僅僅是獲取。不帶參數
（2）position方法
返回的是相對於做了定位的先代元素的偏移——假如操作對象的定位為絕對。
| 1 2 |
$('p').position().left
//獲取p元素的left值
|
（3）scrollTop()和scrollLeft()方法
滾動條距離頂端和距離左側的長度
| 1 2 |
$('p').scrollTop(300).scrollLeft(300);
//p元素始終在滾動條滾動到指定位置時出現。
|
【久違的大案例】某網站超鏈接和圖片顯示效果
【1】超鏈接提示效果
現代瀏覽器中，可以通過title實現超鏈接懸停提示的效果。如
| 1 |
<a href="javascript:;" title="我是提示">提示demo</a>
|
這種提示效果相當慢。試著寫出一個js模擬這種效果
（1）滑鼠滑入超鏈接：創建一個div，內容為title值，追加到文檔中，設置位置跟隨滑鼠
（2）移出超鏈接，移除div。
難點
（1）完全跟隨滑鼠指針被遮擋可能觸發onmouseout，要設置一定的偏離
（2）消除瀏覽器自帶的顯示效果（已證明return false不行）。
佈局
| 1 2 3 4 |
<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>
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
position: relative;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
.tips{
position:absolute;
border:1px solid #333;
background:#f5f5f5;
padding:1px;
color:#333;
width: 100px;
}
|
我們把要產生div的樣式寫到一個tips里。
懂js是基礎，所以先考慮原生js的實現方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
  更多相關文章
一周排行
 所有分類
|