元素操作
jQuery
$(el).addClass(className);
JS
if(el.classList) {
el.classList.add(className);
else
el.className += " " + className;
jQuery
$(el).after(htmlString);
JS
el.insertAdjacentHTML('afterend', htmlString);
jQuery
$(el).before(htmlString);
JS
el.insertAdjacentHTML('beforebegin', htmlString);
element.insertAdjacentHTML(position, text)
insertAdjacentHTML() 將指定的文本解析為HTML或XML述召,并將結(jié)果節(jié)點(diǎn)插入到DOM樹(shù)中的指定位置损痰。它不會(huì)重新解析它正在使用的元素签舞,因此它不會(huì)破壞元素內(nèi)的現(xiàn)有元素。這避免了額外的序列化步驟,使其比直接innerHTML操作更快。
position是相對(duì)于元素的位置,并且必須是一下字符串之一:
'beforebegin' 元素自身的前面
'afterbegin' 插入元素內(nèi)部的第一個(gè)子節(jié)點(diǎn)之前
'beforeend' 插入元素內(nèi)部的最后一個(gè)子節(jié)點(diǎn)之后
'afterend' 元素自身的后面
text是要被解析為HTML或XML堡称,并插入到DOM樹(shù)中的字符串
jQuery
$(el).find(selector).length;
JS
el.querySelector(selector) !== null
element = document.querySelector(selectors);
返回文檔中匹配指定的選擇器組的第一個(gè)元素(使用深度優(yōu)先先序遍歷文檔的節(jié)點(diǎn) | 并且通過(guò)文檔標(biāo)記中的第一個(gè)元素,并按照子節(jié)點(diǎn)數(shù)量的順序迭代順序節(jié)點(diǎn))艺演。
selectors是一個(gè)字符串却紧,包含一個(gè)或是多個(gè)CSS選擇器桐臊,多個(gè)則以逗號(hào)分隔。
jQuery
$(selector).each(function(i, el){
});
JS
var elements = document.querySelectorAll(selector);
Array.prototype.forEach.call(elements, function(el, i){
});
elementList = document.querySelectorAll(selectors);
以nodeList形式(object)返回文檔中匹配指定的選擇器組的所有元素晓殊。
jQuery
$(el).hasClass(className);
JS
if (el.classList)
el.classList.contains(className);
else
new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);