常用原生js与jQuery对比总结

#常用原生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);

// js
el.classList.add(className);

2、删除类
// jQuery
$el.removeClass(className);

// js
el.classList.remove(className);

3、判断是否有该类
 /* jQuery */ 
if($(el).hasClass(classNames)) 
  
/* js */ 
if(el.classList.contains(classNames)) 

三、DOM更改

1、尾部追加DOM元素
// jQuery
$(parent).append($(child));
//js
parent.appendChild(child)

2、头部追加DOM元素
// jQuery
$(parent).prepend($(child));
//js
parent.insertBefore(child, parent.childNodes[0])

3、删除DOM元素
// jQuery
$(child).remove();
//js
child.parentNode.removeChild(child)

四、添加样式或属性

1、添加css
// jQuery
$el.css("propertyname","value");  //设置单个属性值
$el.css({"propertyname":"value","propertyname":"value",...});  //设置多个属性值

//js
el.style.propertyname="propertyValue";

2、获取css值
// jQuery
$el.css("propertyname");  //获取属性值

//js
el.style.propertyname="propertyValue"; /*这个方法只能JS只能获取写在html标签中的写在style属性中的值（style=”…”），而无法获取定义在<style type="text/css">里面的属性*/

3、添加样式
// jQuery
$el.css("propertyname","value");  //设置单个属性值
$el.css({"propertyname":"value","propertyname":"value",...});  //设置多个属性值
//js
el.style.propertyname="propertyValue";

4、添加属性
// jQuery
$(selector).attr(attribute,value);  //设置单个属性值
$(selector).attr({attribute:value, attribute:value ...});  //设置多个属性值
$(selector).attr(attribute,function(index,oldvalue));//function为返回属性值的函数，该函数可接收并使用选择器的 index 值和当前属性值，返回的属性值为当前函数的新属性值
//js
el.setAttribute(attributename,attributevalue);

5、获取节点属性
// jQuery
$(selector).attr(attribute);  //获取节点属性值
//js
el.getAttribute(attributename); //获取节点属性值

6、移除节点属性
// jQuery
$(selector).removeAttr(attribute); 
//js
element.removeAttribute(attributename); 

五、Event事件

1、事件绑定
// jQuery
$(selector).on(eventName, eventHandler);
//js
el.addEventListener(eventName, eventHandler);

2、解绑事件
// jQuery
$(selector).off(eventName, eventHandler);
//js
el.removeEventListener(eventName, eventHandler);

六、显示与隐藏

显示与隐藏
// jQuery
$(el).show();
$(el).hide();

//js
el.style.display = '';
el.style.display = 'none';

七、页面加载初始化

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

//js
window.onload=function(){ 
    // 初始化内容 
}