摘要:毫无疑问,是一款非常优秀的库,它让我们开发项目变得更加便捷容易。不过,当你准备在一个项目特别是移动项目中使用时,你真的该好好思考一下,你会用到的哪些功能,是否真的需要。
毫无疑问,JQuery是一款非常优秀的JavaScript库,它让我们开发项目变得更加便捷容易。
不过,当你准备在一个项目(特别是移动项目)中使用JQuery时,你真的该好好思考一下,你会用到JQuery的哪些功能,是否真的需要jQuery。因为随着JavaScript的不断改善进化,现在它内置的功能已经非常强大,在很大程度上,已经可以实现以前需要在JQuery中才能实现的技术(如果你的项目需要在IE8之前的浏览器中使用,建议还是使用JQuery,这样可以省却很多兼容性问题)。
下面将列出一些可以使用JavaScript来实现JQuery功能的代码:
1、查找搜索选择器
按ID查找:
$("#test") => document.getElementById("test");
按class类名查找:
$(".test") => document.getElementsByClassName("test")
按标签名查找:
$("div") => document.getElementsByTagName("div")
当然,你也可以统一查找:
$("#test") document.querySelector("#test") $("#test div") => document.querySelectorAll("#test div") $("#test").find("span") => document.querySelectorAll("#test span");
获取单个元素:
$("#test div").eq(0)[0] => document.querySelectorAll("#test div")[0]
获取HTML、head、body:
$("html") => document.documentElement $("head") => document.head $("body") => document.body
判断节点是否存在
$("#test").length > 0 => document.getElementById("test") !== null $("div").length > 0 => document.querySelectorAll("div").length > 0
遍历节点:
$("div").each(function(i, elem) {}) function forEach(elems, callback) { if([].forEach) { [].forEach.call(elems, callback); } else { for(var i = 0; i < elems.length; i++) { callback(elems[i], i); } } } var div = document.querySelectorAll("div"); forEach(div, function(elem, i){ });
清空节点
$("#test").empty() => document.getElementById("test").innerHTML = "";
节点比较
$("div").is($("#test")) => document.querySelector("div") === document.getElementById("test")
2、获取/设置内容(值)
获取/设置元素内的内容
$("div").html() => document.querySelecotr("div").innerHTML $("div").text() => var t = document.querySelector("div"); t.textContent || t.innerText; $("div").html("abc"); => document.querySelecotr("div").innerHTML = "abc"; $("div;).text("abc") => document.querySelecotr("div").textContent = "abc"
获取包含元素本身的内容
$("").append($("#test").clone()).html() => document.getElementById("test").outerHTML $("").append($("#test").clone()).html("abc") => document.getElementById("test").outerHTML = "abc"获取表单值
$("input").val() => document.querySelector("input").value $("input").val("abc") => document.querySelector("input").value = "abc"3、class类名操作
类名新增
$("#test").addClass("a") function addClass(elem, className) { if(elem.classList) { elem.classList.add(className); } eles { elem.className += " " + className; } } addClass(document.getElementById("test"), "a");类名删除
$("#test").removeClass("a"); function removeClass(elem, className) { if(elem.classList) { elem.classList.remove(className); } else { elem.className = elem.className.replace(new RegExp("(^|)" + className.split(" ").join("|") + "(|$)", "gi"), " "); } } removeClass(document.getElementById("test"), "a");类名包含:
$("#test").hasClass("a") function hasClass(elem, className) { if(elem.classList) { return elem.classList.contains(className); } else { return new RegExp("(^| )" + className + "( |$)", "gi").test(elem.className); } } hasClass(document.getElementById("test"), "a");4、节点操作
创建节点
$("") => document.createElement("div")复制节点:
$("div").clone() => document.querySelector("div").cloneNode(true)插入节点:
$("div").append("") var span = document.createElement("span"); document.querySelector("div").appendChild(span);在指定节点之前插入新的子节点
$("").insertBefore("#test"); var t = document.getElementById("test"); var span = document.createElement("span"); t.parentNode.insertBefore(span, t); /*更简单的*/ t.insertAdjacentHTML("beforeBegin", "");
在指定节点后插入新的子节点:
$("").insertAfter("#test") function insertAfter(elem, newNode){ if(elem.nextElementSibling) { elem.parentNode.insertBefore(newNode, elem.nextElementSibling); } else { elem.parentNode.appendChild(newNode); } } var t = document.getElementById("test"); var span = document.createElement("span"); insertAfter(t, span); /*更简单的*/ t.insertAdjacentHTML("afterEnd", "");
获取父节点
$("#test").parent() => document.getElementById("test").parentNode删除节点
$("#test").remove() var t = document.getElementById("test"); t.parentNode.removeChild(t);获取Element子节点
$("#test").children() function children(elem) { if(elem.children) { return elem.children; } else { var children = []; for (var i = el.children.length; i--;) { if (el.children[i].nodeType != 8) children.unshift(el.children[i]); } return children; } } children(document.getElementById("test"));获取下一个兄弟节点:
$("#test").next() function nextElementSibling(elem) { if(elem.nextElementSibling) { return elem.nextElementSibling; } else { do { elem = elem.nextSibling; } while ( elem && elem.nodeType !== 1 ); return elem; } } nextElementSibling(document.getElementById("test"));获取上一个兄弟节点:
$("#test").prev() function previousElementSibling(elem) { if(elem.previousElementSibling) { return elem.previousElementSibling; } else { do { elem = elem.previousSibling; } while ( elem && elem.nodeType !== 1 ); return elem; } } previousElementSibling(document.getElementById("test"));5、属性操作
获取属性
$("#test").attr("class") => document.getElementById("test").getAttribute("class")删除属性
$("#test").removeAttr("class") => document.getElementById("test").removeAttribute("class")设置属性
$("#test").attr("class", "abc") => document.getElementById("test").setAttribute("class", "abc");6、CSS样式操作
设置样式
$("#test").css("height", "10px"); => document.getElementById("test").style.height = "10px";获取样式
$("#test").css("height") var getStyle = function(dom, attr) { return dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, false)[attr]; }; getStyle(document.getElementById("test"), "height");获取伪类的CSS样式
window.getComputedStyle(el , ":after")[attrName];注:IE是不支持获取伪类的
7、字符串操作
去除空格
$.trim(" abc ") function trim(str){ if(str.trim) { return str.trim(); } else { return str.replace(/^s+|s+$/g, ""); } } trim(" abc ");8、JSON操作
JSON序列化
$.stringify({name: "TG"}) => JSON.stringify({name: "TG"})JSON反序列化
$.parseJSON("{ "name": "TG" }") => JSON.parse("{ "name": "TG" }")原文链接:不要过度依赖JQuery(一)
如有错误,欢迎指正!如有更好建议,欢迎留言!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/81274.html
相关文章
不要过度依赖JQuery(三)
摘要:在这里先拜个年,祝大家新年快乐,阖家幸福,步步高升回归正题,在不要过度依赖一和不要过度依赖二两篇文章中已经列举了大量的使用原生替代的例子,在本文中将继续列举表单获取焦点失去焦点实时监控判断类型判断类型判断是否为一个函数判断是否为数字判断是 在这里先拜个年,祝大家新年快乐,阖家幸福,步步高升! 回归正题,在不要过度依赖JQuery(一)和不要过度依赖JQuery(二)两篇文章中已经列举了...
不要过度依赖JQuery(三)
摘要:在这里先拜个年,祝大家新年快乐,阖家幸福,步步高升回归正题,在不要过度依赖一和不要过度依赖二两篇文章中已经列举了大量的使用原生替代的例子,在本文中将继续列举表单获取焦点失去焦点实时监控判断类型判断类型判断是否为一个函数判断是否为数字判断是 在这里先拜个年,祝大家新年快乐,阖家幸福,步步高升! 回归正题,在不要过度依赖JQuery(一)和不要过度依赖JQuery(二)两篇文章中已经列举了...
H5 知识点 - 收藏集 - 掘金
摘要:目录不要过度依赖一前端掘金毫无疑问,是一款非常优秀的库,它让我们开发项目变得更加便捷容易。但是作为一个前端工作者,我们肯定也希望在我们的网页里也能看到这么酷分钟搞定常用基础知识前端掘金基础智商划重点在实际开发中,已经非常普及了。 跨域解决方案总结 - 前端 - 掘金为什么需要跨域? 就得先知道同源策略. 同源策略 同源策略是为了保证数据的安全性,一个域的脚本不能去操作另外一个域的脚本的...
不要过度依赖JQuery(二)
摘要:为什么说不要过度依赖呢从项目方面来讲,一些项目在开发中实际用到内置功能不多,这样会造成项目臃肿另一方面,目前的主流已经倾向于原生开发。而在之前一篇不要过度依赖一一文中已经介绍了部分使用原生实现功能的代码,这一章将继续列举。 为什么说不要过度依赖JQuery呢?从项目方面来讲,一些项目在开发中实际用到JQuery内置功能不多,这样会造成项目臃肿;另一方面,目前的主流已经倾向于原生开发。 ...
发表评论
0条评论
ckllj
男|高级讲师
TA的文章
阅读更多
LINUX:程序和进程
阅读 2335·2021-11-23 09:51
短信验证码平台有哪些比较好用?需从这3个方面来决定!
阅读 1137·2021-11-22 13:52
[11.11]CMIVPS年度大促VPS主机5折,香港大带宽/直连线路月付3.5美元起
阅读 3610·2021-11-10 11:35
Tmwhost,澳门VPS(7.5折优惠),$5.62/月,1核/1G内存/50G Raid5 SS
阅读 1187·2021-10-25 09:47
Resultful API的拦截(过滤器——Filter)
阅读 2994·2021-09-07 09:58
前端每日实战:145# 视频演示如何用纯 CSS 创作一个电源开关控件
阅读 1059·2019-08-30 15:54
PHP基于Thinkphp5的砍价活动相关设计
阅读 2817·2019-08-29 14:21
CSS形状之border-radius
阅读 3024·2019-08-29 12:20