文章目录
- 前言
- 一、本质区别
- 二、用法区别
- 1.获取内容
- 2.设置css样式
- 3.属性（增删查）
- 总结
前言
在学习jQuery的之前，就对JavaScript已经进行了深入的学习。但是，对jQuery的学习中有很大的迷惑。这篇文章将会总结jQuery和js的区别
一、本质区别
1.概念及功能（两者之间的联系）：
JavaScript是用于Web客户端开发的脚本语言jQuery是js的框架,基于js语言。功能：集合Ajax技术开发出来的js库，封装js和Ajax的功能，提供函数接口，简化js的操作。（注：在大多数的项目中，jquery 用的比较多）。
2.引用：
js代码需要写在中
jQuery需要在head标签中引用jQuery库：<script language="javascript" src="/js/jquery.min.js"></script>(本地引用)
二、用法区别
1.获取内容
- 在非表单元素中（定位元素）js使用的document.getElementById(“d”)等；jQuery则使用$().
- js获取元素，文本的方法是innerHTML和innerText方法；jQuery需要获取元素的文本（具体的HTML代码），则使用text方法（HTML方法).
注：使用这两种方法的时候：
1.无参数：取值
2.有参数：赋值
3.这两种方法只能使用在非表单元素中
代码如下：
$(function(){
//onload事件
console.log(" 我来了")
//获取标签对象
let p = $('#p') ;
//输出到控制台上
console.log(p.html())
console.log("----",p.text()) //取值
})
<body>
<p id= "p"><span>张无忌</span></p>
</body>结果如下：
- 在表单元素中：js取值：div.value；赋值：div.value= xx；jQuery：div.val() -----有参数是赋值，无参数是取值。
2.设置css样式
JavaScript中设置css样式：比如说，p.
style.backgroundColor = “green”,此处注意的是背景色的书写是驼峰式.
jQuery设置css样式：比如说，p.css(“color”,“deeppink”);其中两者所用到的css样式没有变化，但是就在书写的时候，需要注意一些。
重要：
1.js只能获取到内联样式，内嵌和外部的css样式获取不到。
2.jQuery既可以是内联的也可以是内嵌。
代码如下：
<style>
/* 省略css样式 */
</style>
window.onload = function info(){
//获取P标签对象
let p = document.getElementById("p") ;
//只能得到内联样式，内嵌和外部的css的不到
console.log("内联的color:",p.style.color);
console.log("内嵌，外部的css样式width：",p.style.width);
//jQuery获取css样式
console.log("jQuery能得到内嵌的:",$(p).css("width"));
}
<body>
<p id= "p" style="color: #FF0000;" ><span>西游记</span></p>
</body>3.属性（增删查）
方法（js） | 描述 |
setAttribute（“参数一”,“参数二”） | 设置属性，修改属性 ，只返回字符串 |
getAttribute("") | 只有一个参数，此参数是属性名，返回当前元素节点的指定属性 |
setAttribute(“参数一”,“参数二”) | 为当前元素节点 |
hasAttribute("") | 返回一个布尔值，表示当前元素节点是否包含指定属性 |
removeAttribute("") | 从当前元素节点移除属性 |
方法（jQuery） | 描述 |
attr() | 设置或返回匹配元素的属性和值 ， |
removeAttr("") | 从所有匹配的元素中移除指定的属性 |
总结
通过查资料和借鉴，从三个方面完成了这篇文章，如有错误或概括不全，希指正。
