# 原生 js 和 jQuery 常用方法对比

//原生js
var eleId = document.getElementById('idName');
var eleClass = document.getElementsByClassName('className');
var odiv = document.getElementsByTagName('div');
var eleId = document.querySelector('#idName');
var eleClass = document.querySelectorAll('.className')
var odiv = document.querySelectorAll('div')


//jQuery
var eleId = $('#idName')
var eleClass = $('.className')
var odiv = $('div')

//原生js
/*className属性*/
ele.className = 'newName';
/*classList操作*/
ele.classList.add = ('newName1,newName2') ;
ele.classList.remove = ('newName1');
ele.classList.toggle= ('className'); //没有就添加 有就移除

//jQuery
ele.hasClassName('className');
ele.addClassName('className1,className2,className3');
ele.removeClassName('className2');
ele.toggleClassName('className');//没有就添加 有就移除

//原生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');

//原生js
    //创建元素节点
    var tag = document.createElement('div')
    //插入节点
    ele.appendChild(tag)//向子节点末尾插入 tag 元素
    ele.insertBefore(tag,targetNode)// 向指定的子节点前插一个
    //删除节点
    ele.removeChild(targetNode)//删除指定子节点
    //替换节点
    ele.replaceChild(newNode,oldNode)

//jQuery
    //创建元素节点
    var tag = $('div')
    //插入节点
        //向子节点末尾插入 tag 元素
        ele.append(tag)
        tag.appendTo(ele)
        // 向指定的子节点前插一个
        ele.prepend(tag) 
        tag.prependTo(ele)
        //在元素后面添加
        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)    

//原生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(); //所有同级元素节点

//原生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();