原生js和jQuery常用方法對比

1、元素獲取

/*******************原生js**************************/
var ele = document.getElementById('idName');
var eleArr = document.getElementsByClassName('className');
var eleArr = document.getElementsByTagName('div');
var ele = document.querySelector('#idName');//('.className')//('tagName'); //取第一個滿足條件的元素
var eleArr = document.querySelectorAll('.className');//('tagName');
/*******************jQuery**************************/
var ele = $('#idName');
var ele = $('.className:eq(0)'); //取第一個元素
var eleArr = $('tagName');

2、class選擇器操作

/*******************原生js**************************/
//className 屬性
ele.className = 'newClassName';
//classList操作
ele.classList.contains('className'); //受否有該類
ele.classList.add('newClassName1,newClassName2...'); //添加類
ele.classList.remove('oldClassName1,newClassName2...'); //刪除類
ele.classList.toggle('className'); //如果元素中有該className，則刪除並返回false，否則添加並返回true

/*******************jQuery**************************/
ele.hasClass(className);
ele.addClass('newClassName1,newClassName2...');
ele.removeClass('newClassName1,newClassName2...');
ele.toggleClass('className');

3、元素節點操作

/*******************原生js**************************/
//創建節點
    var newNode = ele.createElement('<div>創建</div>');
//插入節點
    ele.appendChild(newNode); //在ele的子節點的末尾插入newNode
    ele.insertBefore(newNode,targetNode); //在ele的子節點targetNode前面插入newNode
//刪除節點
    ele.removeChild(ele.childNodes[i]); //刪除ele第i+1個子節點
//替換節點
    ele.replaceChild(newNode, oldNode); //替換ele中的子節點
//克隆節點
    var copyNode = ele.cloneNode(deep); //deep為true時，深拷貝（包括其子孫節點），為false時只復制本身節點

/*******************jQuery**************************/
//創建節點
    var newNode = $('<div>創建</div>');
//插入節點
    //在元素子節點末尾插入
    ele.append(newNode); //在ele的子節點的末尾插入newNode
    newNode.appendTo(ele); //在ele的子節點的末尾插入newNode
    //在元素子節點前端插入
    ele.prepend(newNode); //在ele的子節點的前端插入newNode
    newNode.prependTo(ele); //在ele的子節點的前端插入newNode

    //在元素后面添加
    ele.after(newNode);
    newNode.insertAfter(ele);
    //在元素前面添加
    ele.before(newNode);
    newNode.insertBefore(ele);

//刪除節點
    ele.remove(); //移除ele及其所有文本、子孫節點、數據和事件
    ele.detach(); //移除ele及其所有文本、子孫節點，但是保留數據和事件
    ele.empty(); //清除ele所有的內容和子孫元素，但是ele節點本身和其屬性事件等還在

//替換節點
    ele.replaceWith(newNode); //替換ele為新的內容(可以是html元素，dom元素，jQuery元素)
    newNode.replaceAll(ele); //替換ele為新的html元素
//克隆節點
    ele.clone(deep); //deep為true時，深拷貝（包括其事件處理函數），為false時只復制本身，默認false

4、元素節點遍歷

/*******************原生js**************************/
// 子節點
var eleArr = ele.childNodes; // 所有子節點
var eleArr = ele.children; //所有子節點數組，用得較多

var firstEle = ele.firstChild; //第一個子節點 低版本瀏覽器firstElementChild
var lastEle = ele.lastChild; //最后一個子節點 低版本瀏覽器lastElementChild
// 父節點
var parentEle = ele.parentNode;
// 兄弟節點
var nextEle = ele.nextSibling; //下一個節點
var previousEle = ele.previousSibling; //上一個節點

/*******************jQuery**************************/
// 子節點
var eleArr = ele.children(); //所有子節點數組

var firstEle = ele.first(); //第一個子節點
var lastEle = ele.last(); //最后一個子節點
// 父節點
var parentEle = ele.parent(); //直接父元素
var parentEleArr = ele.parents(); //所有祖先元素
var parentEle = ele.offsetParent(); // 第一個有定位的父元素
var parentEleArr = ele.parentsUntil(stop, filter); // 滿足條件之間的父節點

// 兄弟節點
var nextEle = ele.next(); //下一個節點
var nextEleArr = ele.nextAll(); //ele后面所有同級節點
var previousEle = ele.prev(); //上一個節點
var previousEle = ele.prevAll(); //ele之前所有同級節點
var siblingsArr = ele.siblings(); //所有同級元素節點

5、屬性操作

/*******************原生js**************************/
// 屬性數組
var attrArr = ele.attributes;
// 判斷屬性
var bool = ele.hasAttribute('attrName'); //是否有指定屬性
var bool = ele.hasAttributes(); //是否有屬性
// 獲取屬性值
var attrValue = ele.getAttribute('attrName');
// 設置屬性值
ele.setAttribute('attrName','attrValue');
// 刪除屬性
ele.removeAttribute('attrName');
/*******************jQuery**************************/
//在設置disabled、selected、checked等這些Boolean類型自帶屬性時，我們需要用prop()方法；
// 其他字符串類型自帶屬性時，我們使用attr()方法即可;DOM節點可見的自定義屬性我們也使用attr()方法。
// 獲取屬性值
var attrValue = ele.attr('attrName');
var propValue = ele.prop('propName');//
// 設置屬性值
ele.attr('attrName','attrValue'); //自定義的一些屬性
ele.prop('propName','propValue'); //disabled等一些屬性，HTML元素的固有屬性
// 刪除屬性
ele.removeAttr('attrName');

6、事件

/*******************原生js**************************/
//事件綁定及解綁
ele.addEventListener('click',func,false);
ele.removeEventListener('click',func,false);
ele.onclick = func;
ele.onclick = null;
ele.attachEvent('onclick',func); //ie8以下
ele.detachEvent('onclick',func); //ie8以下
/*******************jQuery**************************/
/*多種事件綁定和解綁方法*/
/**方法1
 * 1、直接綁定事件方法mouseenter()...等等
 * 2、這樣的方式，下面兩個事件不會被層疊，都會執行
 * 3、只能一個一個綁定
 */
$("div:eq(0)").click(function () {
    alert(1);
});
$("div:eq(0)").click(function () {
    alert(2);
});

/**方法2
 * 1、bind("event1 event2 ... eventx",fn)
 * 2、同時綁定多個事件觸發條件，執行同一個函數
 */
$("div:eq(1)").bind("click mouseenter",function () {
    alert("bind綁定法");
});
//解綁
$("div:eq(1)").unbind("click"); //解綁指定的
//$("div:eq(1)").unbind();  //解綁所有的

/**方法3
 * 1、delegate("selector","event1 event2 ... eventx",fn)
 * 2、可以綁定父盒子里的子盒子觸發事件，執行函數
 */
$("div:eq(2)").delegate("button","click mouseleave",function () {
    alert("delegate綁定法");
});
//解綁
$("div:eq(2)").undelegate();
/**方法4
 * 重點使用！！！
 * 1、on("event1 event2 ... eventx","selector",data,fn)
 * 2、可以綁定父盒子里的后代盒子觸發事件，執行函數
 * 3、參數data由event.data帶入函數中
 */

$("div:eq(3)").on("click mouseleave","button",{"name":"mjm","age":24},function (event) {
    alert("on綁定法"+event.data.name);

});
//解綁
$("div:eq(3)").off();