js和jq的联系和区别

我是一个从汽车行业转行IT的项目经理，我是Edward，如想了解更多，请关注我的公众号【转行项目经理的逆袭之路】。今天来聊聊js和jq。

以上两幅图可以表明两者之间的关系，用一句说来表示就是：
jq封装了DOM相关的操作，提高了兼容性，并且通过链式调用简化了js的操作，因此一切与DOM相关的操作，推荐用jq完成。

下面是两者的区别：

js和jquery的区别
1.入口函数不同js：window.onload = function(){内部放js}　　　实质就是一个事件，拥有事件的三要素，事件源，事件，事件处理程序。等到所有内容，以及我们的外部图片之类的文件加载完了之后，才会去执行。只能写一个入口函数。jQuery:$(function(){})或者$(document).ready(function(){})是在 html所有标签都加载之后，就回去执行。可以写多个。window.onload=function(){//js代码}等同于$(window).load(function(){//jquery代码});
2.创建DOM元素利用DOM方法创建元素节点，通常要将document.createElement()、document.createTextNode()、appendChild()配合使用，十分麻烦。而jQuery使用$就可以直接创建DOM元素var oNewP = $("<p>使用jQuery创建的内容</p>");以上代码等同于javascriptvar oNewP2 = document.createElement("p");var oText = document.createTextNode("这是使用javascript方法创建的内容");oNewP2.appendChild(oText);例：使用jQuery创建DOM<script type="text/javascript">$(function(){var oNewP = $("<p>使用jQuery创建的内容</p>");oNewP.insertAfter("#display"); //insertAfter方法})</script><div id="display"></div>
3.获取元素
jquery：通过id获取，jquery的语法更为简练$("#id").event;通过class获取，$(.“css”).event()通过属性html标签获取，$(“p”).event()是选中所有的p标签元素　　通过属性值获取，$(“div[csdn]”).event()是选中div的属性为csdn的元素event是对选中的元素的操作。$(“div.p1”)和 $(“div .p1”)的区别。$(“div.p1”)是对所有div进行筛选，选出class="p1"的div。$(“div .p1”)是选中div下面的class="p1"的元素，不是这个div
js：document.getElementById("elementId");//返回一个元素，按元素的ID名称来访问document.getElementsByName("elementName");返回一组元素，按元素的name名称来访问document.getElementsByTagName("tagName");返回一组元素，按标签来访问document.getElementsByClassName("classname");返回一组元素，按class来访问
4.操作属性节点
a.JavaScript使用object.getAttribute(attribute)　　获取元素属性object.setAttrbute(attribute，value)　　设置元素属性<body><ul><li id="first">哈哈</li></ul></body><script>document.getElementById("first").getAttribute("id");document.getElementById("first").setAttribute("name","nafirst");document.getElementById("first").removeAttribute("name");</script>
b.JQuery使用.attr()传入一个参数获取，传入两个参数设置.prop()prop和attr一样都可以对文本的属性进行读取和设置；两者的不同 在读取checked，disabled，等属性名=属性值的属性时attr返回属性值或者undefined，当读取的checked属性时不会根据是否选中而改变prop返回true和false 当读取的checked属性时会根据是否选中而改变也就是说attr要取到的属性必须是在标签上写明的属性，否则不能取到<body><ul><li id="first">哈哈</li></ul></body><script src="js/jquery.js"></script><script>$("#first").attr("id");$("#first").attr("name","nafirst");$("#first").removeAttr("name");$("#first").prop("id");$("#first").prop("name","nafirst");$("#first").removeProp("name");</script>
5.操作文本节点
a.JavaScript使用innerHTML：取到或设置一个节点的HTML代码,可以取到css，以文本的形式返回innerText：取到或设置一个节点的HTML代码，不能取到cssvalue:取到input[type='text']输入的文本<body><ul><li id="serven_times" ><span style="color: chartreuse">嘿嘿</span></li><li id="eight_times" ><span style="color: chartreuse">嘿嘿</span> </li></ul>姓名：<input type="text" id="input"></body><script>document.getElementById("serven_times").innerHTML;document.getElementById("serven_times").innerHTML = "<span style='color: #ff3a29'>呵呵</span>";document.getElementById("eight_times").innerText;document.getElementById("eight_times").innerText = "啦啦";document.getElementById("input").value;</script>
b.JQuery使用.html()取到或设置节点中的html代码
.　　text()取到或设置节点中的文本.val()取到或设置input的value属性值<body><ul><li id="serven_times" ><span style="color: chartreuse">嘿嘿</span></li><li id="eight_times" ><span style="color: chartreuse">嘿嘿</span> </li></ul>姓名：<input type="text" id="input"></body><script src="/js/jquery.min.js"></script><script>$("#serven_times").html();$("#serven_times").html("<span style='color: #ff3a29'>呵呵</span>");$("#eight_times").text();$("#eight_times").text("啦啦");$("#input").val();$("#input").val("哈哈");</script>6.操作css样式的时候
JavaScript:1.使用setAttribute设置class和styledocument.getElementById("first").setAttribute("style","color:red");2.使用.className添加一个class选择器document.getElementById("third").className = "san";3.使用.style.样式直接修改单个样式。注意样式名必须使用驼峰命名法document.getElementById("four_times").style.fontWeight = "900";4.使用.style或.style.cssText添加一串行级样式：document.getElementById("five_times").style = "color: blue;";//IE不兼容document.getElementById("six_times").style.cssText = "color: yellow;font-size : 60px;";
JQuery:$("#div2").css("color","yellow");$("#div2").css({"color" : "white","font-weight" : "bold","font-size" : "50px",});
7.操作层次节点
JavaScript:1.childNodes：获取当前节点的所有子节点（包括元素节点和文本节点）children：获取当前节点的所有元素子节点（不包括文本节点）2.parentNode:获取当前节点的父节点3.firstChild:获取第一个元素节点，包括回车等文本节点firstElementChild:获取第一个元素节点，不包括回车节点lastChild、lastElementChild 同理4.previousSibling：获取当前元素的前一个兄弟节点previousElementSibling：：获取当前元素的前一个兄弟节点nextSibling、nextElementSibling
8.js和jquery转换两种转换方式将一个jQuery对象转换成js对象：[index]和.get(index);(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的js对象。如：var $v =$("#v") ; //jQuery对象var v=$v[0]; //js对象alert(v.checked) //检测这个checkbox是否被选中(2)jQuery本身提供，通过.get(index)方法，得到相应的js对象如：var $v=$("#v"); //jQuery对象var v=$v.get(0); //js对象alert(v.checked) //检测这个checkbox是否被选中js对象转成jQuery对象:对于已经是一个js对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(js对象)如：var v=document.getElementById("v"); //js对象var $v=$(v); //jQuery对象转换后，就可以任意使用jQuery的方法了。

js和jq的联系和区别相关推荐

浅谈 -- ♡ ‧₊˚ JS 与JQ的区别 ‧₊˚ ♡
jQuery是一个Javascript库,是对于ECMAScript.dom.bom的一个浅封装,让用户更方便操作. 让我们简单谈谈JS与JQ的区别吧! ♡ ‧₊˚ 定义 ‧₊˚ ♡ js是网页的 ...
JS与JQ的对比与提高
来吧, 案例1:先上个例子js写的省市二级联动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
Js中的style,currentStyle,getComputedStyle()区别
Js中的style,currentStyle,getComputedStyle()区别样式表有三种方式: 1.内嵌样式(inline Style)-是写在Tag里面的,内嵌样式只对所有的Tag有效 ...
JS中 let 和var的区别
JS中let和var 的区别简单介绍let var的常见变量提升 ES6可以用let定义块级作用域变量 let配合for循环的独特应用 let没有变量提升与暂时性死区 let变量不能重复声明简单介 ...
Filter在Vue，JS，JQ中的使用
vue 中的filter的使用: 关键字filter,官方文档(https://cn.vuejs.org/v2/guide/filters.html#ad)说明在vue中过滤器可以用在两个地方:双花括 ...
uniapp 获取到js文件var一个变量怎么获取到这个变量值_浅析Js中const,let,var的区别及作用域...
理解:let变量的作用域只能在当前函数中 js中const,let,var的区别及作用域_lianzhang861的博客-CSDN博客blog.csdn.net 全局作用域中,用 const 和 l ...
js箭头函数和普通函数区别
js箭头函数和普通函数区别实验环境:nodejs v12.16.1 箭头函数不能作为构造函数,而普通函数可以箭头函数没有原型,而普通函数有箭头函数return可以省略语句块.(如果=>右边 ...
js中的extend的用法及其JS中substring与substr的区别
1. JS中substring与substr的区别之前在项目中用到substring方法,因为C#中也有字符串的截取方法Substring方法,当时也没有多想就误以为这两种方法的使用时一样的. ...
[js] json和对象有什么区别？
[js] json和对象有什么区别? JSON 是对象,但对象不一定是 JSON.对象是由属性和属性值组成,也就是 KEY->VALUE 对. 对象中的 value 可以是任意的数据类型,包括函 ...

js和jq的联系和区别

js和jq的联系和区别相关推荐

最新文章

热门文章