常用原生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(){ 
    // 初始化内容 
}

  • 8
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值