常用原生js与jQuery对比总结

在前端开发中，我们经常会使用jQuery，因为jQuery简化了JavaScript编程，可以使我们的代码更加的简洁。
而jQuery是一个 JavaScript 库，了解JavaScript 可以帮助我们更好地了解jQuery和编写高性能的代码，所以了解并会使用这两者是有必要的。

一、DOM查询——选择器的使用

1、获取页面所有div**/* jQuery */$("div")/* js */document.getElementsByTagName("div")2、根据名称获取页面DOM/* jQuery */$("div[name='值']")/* js */document.getElementsByName(name)3、根据Id获取DOM节点/* jQuery */$("#idName")/* js */document.getElementById("idName")document.querySelectorAll("idName")4、根据类名获取DOM节点/* jQuery */$(".className")/* js */document.querySelectorAll(".className")document.getElementsByClassName(className)5、根据选择器返回第一个匹配的节点(selectors为CSS选择器)/* jQuery */$("selectors:first")/* js */document.querySelector("selectors")

二、操作class

1、为DOM元素添加类// jQuery$(selector).addClass(className);// jsel.classList.add(className);2、删除类// jQuery$el.removeClass(className);// jsel.classList.remove(className);3、判断是否有该类 /* jQuery */ if($(el).hasClass(classNames)) /* js */ if(el.classList.contains(classNames)) 

三、DOM更改

1、尾部追加DOM元素// jQuery$(parent).append($(child));//jsparent.appendChild(child)2、头部追加DOM元素// jQuery$(parent).prepend($(child));//jsparent.insertBefore(child, parent.childNodes[0])3、删除DOM元素// jQuery$(child).remove();//jschild.parentNode.removeChild(child)

四、添加样式或属性

1、添加css// jQuery$el.css("propertyname","value");  //设置单个属性值$el.css({"propertyname":"value","propertyname":"value",...});  //设置多个属性值//jsel.style.propertyname="propertyValue";2、获取css值// jQuery$el.css("propertyname");  //获取属性值//jsel.style.propertyname="propertyValue"; /*这个方法只能JS只能获取写在html标签中的写在style属性中的值（style=”…”），而无法获取定义在<style type="text/css">里面的属性*/3、添加样式// jQuery$el.css("propertyname","value");  //设置单个属性值$el.css({"propertyname":"value","propertyname":"value",...});  //设置多个属性值//jsel.style.propertyname="propertyValue";4、添加属性// jQuery$(selector).attr(attribute,value);  //设置单个属性值$(selector).attr({attribute:value, attribute:value ...});  //设置多个属性值$(selector).attr(attribute,function(index,oldvalue));//function为返回属性值的函数，该函数可接收并使用选择器的 index 值和当前属性值，返回的属性值为当前函数的新属性值//jsel.setAttribute(attributename,attributevalue);5、获取节点属性// jQuery$(selector).attr(attribute);  //获取节点属性值//jsel.getAttribute(attributename); //获取节点属性值6、移除节点属性// jQuery$(selector).removeAttr(attribute); //jselement.removeAttribute(attributename); 

五、Event事件

1、事件绑定// jQuery$(selector).on(eventName, eventHandler);//jsel.addEventListener(eventName, eventHandler);2、解绑事件// jQuery$(selector).on(eventName, eventHandler);//jsel.removeEventListener(eventName, eventHandler);

六、显示与隐藏

显示与隐藏// jQuery$(el).show();$(el).hide();//jsel.style.display = '';el.style.display = 'none';

七、页面加载初始化

显示与隐藏// jQuery//方法一$(function(){ // 初始化内容 })//方法二$(document).ready(function(){ // 初始化内容 })//jswindow.onload=function(){     // 初始化内容 }