jquery和JavaScript之间的联系和区别

编程知识行业动态更新时间:2024-06-13 00:17:20

文章目录

前言
一、本质区别
二、用法区别
- 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("")	从所有匹配的元素中移除指定的属性