Jquery 對象轉(zhuǎn)換成 DOM 對象的二中方法
var $cr = $('#id');
var cr = $cr[0];
var cr2 = $cr.get(0);
DOM 元素轉(zhuǎn)換成 Jquery 對象的方法
var cr = document.getElementById('cr');
var $cr = $(cr);
Jquery 對象都是有 $() 方法制造而來，$() 函數(shù)就是一個 Jquery 對象的制造工廠
Jquery 判斷復選框是否被選中
HTML 結(jié)構(gòu)
<label><input type="checkbox" id="check"/>點我</label>
原生js
var $check = $('#check');
var check = $check[0];
$check.click(function(){
if (check.checked) {
console.log('已經(jīng)被選中了!')
} else {
console.log('沒有被選中!');
}
})
jQuery 方法
var $check = $('#check');
$check.click(function(){
if ($check.is(':checked')) {
console.log('已經(jīng)被選中了!')
} else {
console.log('沒有被選中!');
}
})
is(':checked')是jQuery中的方法，判斷 jQuery 對象是否被選中，返回Boolean。
jQuery 判斷元素是否存在
var $cur = $(cur);
if ($cur.length > 0) {
// do something
}
// 或者轉(zhuǎn)化為DOM對象
var cur = $cur[0];
if (cur) {
// do something
}
一些不常用到的選擇器
- ：hidden 選取所有不可見的元素
- ：visible 選取所有可見的元素
- ：contains(text) 選取文本中包含‘text’的元素
- ：empty 選取不包含子元素或者文本的空元素
- ：has(selector) 選取選擇器所匹配元素的元素
- ：parent 選取包含子元素或者文本的元素
- ：enabled 選取所有可用元素
- ：disabled 選取所有不可用元素
- ：checked 選取所有被選中的元素（包含單選框，和復選框）
- ：selected 選取所有被選中的選項元素
插入元素的方法
- append() 向匹配元素內(nèi)追加內(nèi)容
- appendTo() 把內(nèi)容追加到 參數(shù)元素中
- prepend() 向匹配元素內(nèi)添加前置內(nèi)容
- prependTo() 把內(nèi)容添加 到參數(shù)元素內(nèi)部（前）
- after() 向匹配元素之后添加內(nèi)容
- insertAfter() 把內(nèi)容添加到參數(shù)內(nèi)容之后
- before() 向匹配元素之前添加內(nèi)容
- insertBefore() 把內(nèi)容添加 到參數(shù)內(nèi)容之前
刪除元素
$('ul li').remove('li[title!=菠蘿]');
var $li = $('ul li:eq(0)').detach(); // 或者是remove()
$li.appendTo($('ul'));
detach() 刪除的元素之前綁定的事件還是會存在，而 remove 刪除的元素是不存在的
移動元素
$('ul li:eq(0)').appendTo($('ul'));
清空節(jié)點 empty()
$('body').empty(); // body 內(nèi)容被清空
復制元素 clone()
$('ul li').click(function () {
$(this).clone().appendTo($('ul')); // 復制當前元素 追加到 ul 列表中
});
當 clone(true) 的時候，復制的元素還可以保存其原有的事件，例如上邊的點擊事件。
替換元素
html 結(jié)構(gòu)
<body>
<p>你最喜歡的人!</p>
</body>
方法1
$('p').replaceWith('<strong>你最討厭的人</strong>');
方法2
$('<strong>你最討厭的人1</strong>').replaceAll('p');
被替換完成之后原有元素添加的事件也不復存在, 想要事件需要重新添加
包裹節(jié)點
以下原始 HMTL 結(jié)構(gòu)都是這樣的
<p>你最喜歡的人!</p>
<div>分割</div>
<p>你最討厭的人</p>
- wrap
$('p').wrap("<div></div>");
轉(zhuǎn)換后的HTML
<body>
<div><p>你最喜歡的人!</p></div>
<div>分割</div>
<div><p>你最討厭的人</p></div>
</body>
wrap 在匹配元素外包裹元素 （單獨）
- wrapAll
$('p').wrapAll("<div></div>");
轉(zhuǎn)換后的 HTML
<body>
<div><p>你最喜歡的人!</p><p>你最討厭的人</p></div>
<div>分割</div>
</body>
wrapAll 將匹配的元素外添加一層 （一起） 如果中間間隔其他元素，其他元素會放到包裹元素之后
- wrapInner
$('p').wrapInner("<b></b>");
轉(zhuǎn)換后的HTML
<body>
<p><b><span>你最喜歡的人</span>!</b></p>
<div>分割</div>
<p><b>你最討厭的人</b></p>
</body>
wrapInner 把匹配到的所有元素的內(nèi)容 添加一層!
遍歷元素
- children() 直接子元素合集
- next() 緊隨其后的同輩元素
- prev() 在其前面的同輩元素
- siblings() 所有同輩元素
- closest() 獲取最近的匹配元素
$('body').bind('click', function (e) {
$(e.target).closest('p').css('color','red');
});
// 當前元素如果匹配直接返回，如果不匹配向上級查找，如果沒有符合返回空jquery對象
- parent() 返回符合類型的直接父節(jié)點
- parents() 返回符合類型的所有父節(jié)點
CSS-DOM
- offset()
var offset = $('p').offset();
var top = offset.top; // 6
var left = offset.left; // 8
獲得當前元素在當前視窗的相對偏移， 返回兩個屬性，top/left
- position()
<p><span>你最喜歡的人</span>!</p>
<div style="position:absolute; left: 20px; top: 300px;">分割</div>
js
var position = $('div').position();
var top = position.top; // 300
var left = position.left; // 20
獲得相對于最近一個樣式為 position 樣式屬性設置為 relative 或者 absolute 的祖節(jié)點的偏移量 值包括 top/left
- scrollTop() scrollLeft()
var $body = $('body');
var $bodyLeft = $body.scrollLeft(); // 獲取左偏移
var $bodyTop = $body.scrollTop(); // 獲取上偏移
// 設置滾動到指定位置
$('div').scrollLeft(300);
$('p').scrollTop(200);
