导航：首页 > 开发技术 >

jquery和javascript在语法上有哪些差异

发表于：2024-10-22 作者：千家信息网编辑

千家信息网最后更新 2024年10月22日，这篇文章主要介绍"jquery和javascript在语法上有哪些差异"，在日常操作中，相信很多人在jquery和javascript在语法上有哪些差异问题上存在疑惑，小编查阅了各式资料，整理出简单好

千家信息网最后更新 2024年10月22日jquery和javascript在语法上有哪些差异

这篇文章主要介绍"jquery和javascript在语法上有哪些差异"，在日常操作中，相信很多人在jquery和javascript在语法上有哪些差异问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"jquery和javascript在语法上有哪些差异"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

jquery不是javascript。javascript是一种解释性脚本语言，而jquery是一个JavaScript函数库，是基于JavaScript语言写出来的一个框架；且两者在语法上有不少差异。

本教程操作环境：windows7系统、javascript1.8.5&&jquery1.10.2版、Dell G3电脑。

jquery不是javascript。

javascript是一种解释性脚本语言，而jquery是一个JavaScript函数库，是基于JavaScript语言写出来的一个框架

使用JQuery首先要在 HTML 代码最前面加上对 jQuery 库的引用，比如：

库文件既可以放在本地，也可以直接使用知名公司的 CDN，好处是这些大公司的 CDN 比较流行，用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了，所以能加快网站的打开速度。另外一个好处是显而易见的，节省了网站的流量带宽。例如：

　　//Google或者： 　　//jQuery 官方

jquery和javascript在语法上有不少差异

1.操作元素节点

a.JavaScript使用

getElement系列、query系列

b.JQuery使用

大量的选择器同时使用$()包裹选择器

2.操作属性节点

a.JavaScript使用

getAttribute("属性名") 、 setAttribute("属性名","属性值")

            哈哈

b.JQuery使用

.attr()传入一个参数获取，传入两个参数设置

.prop()

prop和attr一样都可以对文本的属性进行读取和设置；

两者的不同在读取checked，disabled，等属性名=属性值的属性时

attr返回属性值或者undefined，当读取的checked属性时不会根据是否选中而改变

prop返回true和false 当读取的checked属性时会根据是否选中而改变

也就是说attr要取到的属性必须是在标签上写明的属性，否则不能取到

            哈哈

3.操作文本节点

a.JavaScript使用

innerHTML：取到或设置一个节点的HTML代码,可以取到css，以文本的形式返回

innerText：取到或设置一个节点的HTML代码，不能取到css

value:取到input[type='text']输入的文本

b.JQuery使用

.html()取到或设置节点中的html代码
.text()取到或设置节点中的文本
.val()取到或设置input的value属性值

4.操作css样式的时候

_JavaScript:

1、使用setAttribute设置class和style

document.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:

$("#p2").css("color","yellow");$("#p2").css({    "color" : "white",    "font-weight" : "bold",    "font-size" : "50px",});

5.操作层次节点

_JavaScript:

*1.childNodes：获取当前节点的所有子节点（包括元素节点和文本节点）*  children：获取当前节点的所有元素子节点（不包括文本节点）*2[xss_clean]:获取当前节点的父节点*3.firstChild:获取第一个元素节点，包括回车等文本节点*  firstElementChild:获取第一个元素节点，不包括回车节点*  lastChild、lastElementChild 同理*4.previousSibling：获取当前元素的前一个兄弟节点*  previousElementSibling：：获取当前元素的前一个兄弟节点*  nextSibling、nextElementSibling

JQuery:

1.提供了大量的选择器：