關於dom
1.html 文件可以看成是一棵樹，其中的內容是這棵樹的節點
2.dom 樹上的節點之間有父子關係、兄弟關係
3.節點之間還有順序關係
4.可以通過對 dom 樹的操作來修改 html 文件
文件處理
1.內部插入
$('培訓
3）prepend(content) 向每個元素內部的前部新增
$('div').prepend('培訓
');4）prependto(content)
$('培訓
').prependto('div')
2.外部插入
1）after 在每個匹配元素之後插入
$('div').after('
培訓 ')
2）before 在每個匹配元素之前插入
$('div').bofore('
培訓 ')
3）insertafter 把所有匹配的元素插入另乙個元素之後
$('培訓
').insertafter('div') 4
）insertbefore 把所有匹配的元素插入另乙個元素之前
$('培訓 ').insertbefore('div')
3.包裹
1）wrap 將選中的標籤包含一層wrap
$('p').wrap('
')2）unwrap()
$('p').unwrap() 只能去除前面 wrap 的標籤，不能去除 標籤中包含的文字
3）wrapall 將所有的 標籤作為乙個整體包含一層 wrap
$('p').wrapall(''
) 4）wrapinner 將選擇的標籤的內部所有元素包含在一層 wrap 下
$('div').wrapinner(''
); 4.替換
1）replacewith() 選擇的標籤替換
$('p').replacewith('培訓
');2）replaceall() 效果跟 replacewith 一樣
$('培訓 '
).replaceall('p')
5.刪除
1）empty() 清空子節點
$('div').empty()
2）remove([expr]) 刪除整個選擇的標籤
$('div').remove()
var elem = $('.cc').remove() 此時相當於剪下的效果
$('div').after(elem)
3）detach([expr]) 與remove 不同的是，所有繫結的時間和附加的資料等都會被保留下來
var elem = $('.cc').
detach
() 此時相當於剪下的效果
$('div').after(elem)
$('.cc').click(function())
6.轉殖 1）
clone([even[,deepeven]])
$('.cc').clone(true).after('div') 將上 true 可以將原來的標籤的時間也轉殖乙份
篩選操作
1.過濾
1）eq(index)
$('p').eq(1).css('color','red');
2）first()
3）last()
4）filter() 篩選出指定匹配表示式的標籤
$('p').filter('.cc').css('color','red')
5）is(expr|obj|ele|fn) 返回 boolean 值
$('p').click(function()
}) 6）map(callback) 返回一組標籤的文字
var str = $('p').map(function()).get().join(', ');
7）slice(index,len) 選擇第 index 到 len 長度的標籤
$('p').slice(1,3).css('color','red')
2.查詢
1）find()
$('div').find('p').css('color','red')
2）parent()
$('.dd').parent().css('color','red')
3）parents() 除根元素以外的元素都找到
$('.dd').parents().css('color','red')
$('.dd').parents('#aa').css('color','red') 找到祖先元素為 #aa 的元素與其之間的元素
4）closest() 與 parents() 有區別，具體檢視手冊
$('.dd').
closest
('#aa').css('color','red')
3.串聯
1）end() 回到最近的乙個操作(具體的滿足的操作看手冊)之前
$('div').find('.cc').end().css('color','red')
屬性操作
1.屬性
1）attr(name|pro|key , val|fn)
$(':checkbox').eq(0).attr('value') 獲取屬性值
$(':checkbox').eq(0).attr('value':'zf') 更改屬性值
$(':checkbox').last().attr() 更改多個屬性值
2）removeattr(name)
$(':checkbox').eq(1).removeattr('value') 刪除屬性值
$(':checkbox').eq(1).removeattr('name value') 刪除多個屬性值
3）prop(n|p|k , v|f) 1.6+ 使用與 attr() 方法相似
區別：獲取 checked、selected、disabled 等屬性值時，如果使用 attr()
將 返回 undefined (字串) ,而使用 prop() 則返回 false(布林型)
4）removeprop(name) 1.6+
2.css 類
1）addclass(class|fn)
2）removeclass([class|fn])
3）toggleclass(class|fn[,sw])
3.html**/文字/值
1）html([val|fn]) 取得第乙個匹配的元素的 html **
2）text([val|fn]) 取得第乙個匹配的元素的內容的值
3）val([val|fn|arr]) 獲取匹配元素的當前值
css 操作
1.css
css(name|pro|[,val|fn]) 1.8*
$('span').css('display')
$('span').css('color','blue')
$('span').css()
2.位置
1）offset([coordinates])
var obj = $('button').offset() 獲取相對偏移
alert('top:'+obj.top+';left:'+obj.left);
2）position()
3）scrolltop([val])
4）scrollleft([val])
3.尺寸
1）height([val|fn])
2）width([val|fn])
3）innerheight()
4）innerwidth()
5）outerheight([soptions])
6）outerwidth([options])
附加內容：
1）建立節點物件的方法
$('jquery')
2）移動物件的常見實現方法
1）插入方式
$(':checkbox:first').before($(':checkbox:eq(1)'));
2）剪下方式
呼叫 remove() 或 detach() 方法時，會刪除當前節點，可以將
該節點賦值給變數，放到別的地方
在 jquery 中，有些方法既能返回值，又能設定值
DOM基本操作
獲取節點的屬性 1.獲取div的上乙個節點 div.previoussibling 2.獲取div的上乙個標籤節點 div.previouselementsibling 3.獲取div的下乙個節點 div.nextsibling 4.獲取div的下乙個標籤節點 div.nextelementsibl...
dom基本操作
document htmldocument.prototype document.prototype 封裝children方法 element.prototype.mychildren function return arr function retsibling e,n else n else e...
DOM的基本操作
dom是針對於html和xml文件的乙個api 應用程式程式設計介面 是w3c組織推薦的處理可擴充套件標誌語言的標準程式設計介面。在網頁上，組織頁面 或文件 的物件被組織在乙個樹形結構中，用來表示文件中物件的標準模型就稱為dom。當網頁被載入時，瀏覽器會建立頁面的文件物件模型 在dom中，可以將任何...