不可否认, jQuery 是一款非常优秀的 JavaScript 库, 极大的提高了前端开发效率.
有利就有弊, 过度的依赖 jQuery 可能会带来代码执行效率低等问题; 随着原生 JavaScript 版本的升级, 现在很多内置的功能也能够完美的实现 jQuery 的对应功能, 下面就简单做一下罗列, 需要的朋友可以做一下参考.
一. 元素查找:
(1). 通过 id 查找元素:
$("#ant")
jQuery 的 id 选择器完全可以使用原生方法替代:
document.getElementById("ant")
(2). 通过 class 属性来查找元素:
$(".ant")
document.querySelector() 和 document.querySelectorAll() 方法:
这两个方法可以实现强大的选择器功能, 下面是几个简单代码:
- // 获取 id 属性值为 ant 的元素对象
- document.querySelector("#ant");
- // 获取 id 属性值为 ant 下面的所有 div 元素集合
- document.querySelectorAll("#ant div");
二. 判断节点是否存在:
$("#ant").length> 0
上面的代码可以使用下面的代码替代:
document.getElementById("ant") !== null
三. 节点遍历:
- ("div").each(function (index, elem) {
- //code
- })
上面的代码可以采用下面的代码替代:
- function forEach(elems, callback) {
- if([].forEach) {
- [].forEach.call(elems, callback);
- } else {
- for (var index = 0; index <elems.length; index++) {
- callback(elems[index], index);
- }
- }
- }
- var div = document.querySelectorAll("div");
- forEach(div, function(elem, index){
- //code
- });
这里推荐一下我的前端学习交流圈: 731771211, 里面都是学习前端的从最基础的 html+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴. 最新技术, 与企业需求同步. 好友都在里面学习交流, 每天都会有大牛定时讲解前端技术!
点击: 加入 http://u6.gg/ek2NA
四. 清空节点内容:
上面的代码可以用如下代码替代:
document.getElementById('test').innerHTML =""
五. 设置节点的内容:
$("div").htm("前端开发")
上面的代码可以使用如下代码替代:
document.querySelecotr('div').innerHTML = "前端开发";
再来看设置 text 文本内容:
$("div").text("前端开发")
可以使用如下代码替代:
- var odiv = document.querySelector("div");
- odiv.textContent="前端开发";
六. 操作 class 属性:
(1). 新增 class 样式类:
$("#ant").addClass("class")
上面的代码可以用以下代码替代:
- function addClass(elem, className) {
- if(elem.classList) {
- elem.classList.add(className);
- } else {
- elem.className += ' ' + className;
- }
- }
- addClass(document.getElementById("ant"), "class");
(2). 删除指定样式类:
$("#ant").removeClass("class");
上面的代码可以使用如下代码替代:
- function removeClass(elem, className) {
- if(elem.classList) {
- elem.classList.remove(className);
- } else {
- elem.className=elem.className.replace(new RegExp('(^|\\b)'+className.split('').join('|')+'(\\b|$)','gi'),' ');
- }
- }
- removeClass(document.getElementById("ant"), "class");
(3). 判断是否包含指定的类:
$("#ant").hasClass("class");
上面的代码可以用以下代码替代:
- function hasClass(elem, className) {
- if(elem.classList) {
- return elem.classList.contains(className);
- } else {
- return new RegExp('(^| )' + className + '( |$)', 'gi').test(elem.className);
- }
- }
- hasClass(document.getElementById("ant"), "class");
七. 节点操作:
(1). 创建节点:
$("<div>")
上面的代码可以用以下代码替代:
document.createElement("div")
3). 插入节点:
$("div").append("<span></span>")
当然插入节点的方法有很多, 以上代码可以用如下代码替代:
- var span = document.createElement("span");
- document.querySelector("div").appendChild(span);
在指定节点之前插入新的子节点:
$("<span>").insertBefore("#ant");
上面的代码可以用如下代码替代:
- var t = document.getElementById("ant");
- var span = document.createElement("span");
- t.parentNode.insertBefore(span, t);
在指定节点后插入新的子节点:
$("<span>").insertAfter("#ant")
以上代码可以用下面的代码替代:
- function insertAfter(elem, newNode){
- if(elem.nextElementSibling) {
- elem.parentNode.insertBefore(newNode, elem.nextElementSibling);
- } else {
- elem.parentNode.appendChild(newNode);
- }
- }
- var t = document.getElementById("ant");
- var span = document.createElement("span");
- insertAfter(t, span);
(4). 获取父节点:
$("#ant").parent()
上面的代码可以用以下代码替代:
document.getElementById("ant").parentNode
来源: http://www.qdfuns.com/article/51769/fa6f433271599409bf0549032a01913b.html