2021-03-23

jQuery简介

什么是jQuery
jQuery是一个轻量级的"写的少，做的多"的JavaScript函数库。【独立的javascript文件】

jQuery库包含以下功能：
1.HTML元素选取
2.HTML元素操作
3.CSS操作
4.HTML事件函数
5.JavaScript特效和动画【元素的隐藏和显示】
6.HTML DOM遍历和修改
7.AJAX请求【获取后台处理程序返回的数据值】高级操作

Jquery下载
https://jquery.com/ 官网
Download the compressed, production jQuery 3.6.0—jquery-3.6.0.min.js
Download the uncompressed, development jQuery 3.6.0—jquery-3.6.0.js
Jquery是以“.js”结尾的，说明他是一个javascript文件。可以按照javascript
的用法使用。
jquery-3.6.0.min.js–jquery的发布版，它的特点小，节省内存。因为它里面的内容被压缩了。
jquery-3.6.0.js—jquery的开发版，它的特点有注释可以查看具体的内容。它是没有压缩的。

jQuery的使用
1.通过script标记导入本地jquery函数库文件到网页中。它是一个javascript文件。

适用于我们将 jquery函数库文件下载到本地计算机以后操作。
2.通过script标记利用网络地址导入jquery函数库到网页中

jQuery语法
通过jQuery，您可以选取HTML元素【标记】，并对它们执行"操作"（actions）。
基础语法：$(selector).action()
1.美元符号定义$–表示jQuery，jQuery表示$。我们可以使用$代替jQuery。
2.选择符（selector）–"查询"和"查找"需要被控制的HTML元素。可以将被控制的HTML元素转换成jQuery对象。【$(selector)–jQuery的构造器–创建jQuery对象】
3.actio()指对得到的jQuery对象调用的函数/属性

Javascript的页面初始事件
1.body中提供οnlοad=“函数”
2.window.οnlοad=function(){}

Jquery的初始化函数
例如：

	
		"utf-8">
		
		
		
		
	
	
	

实例：测试语法

	
		
		
		
		
		
	
	
		
"p1">测试jquery的语法
	

Jquery对象与javascript对象的转换
1.javascript对象----》Jquery对象-------【$(javascript对象)】
2.Jquery对象------》javascript对象-----【Jquery对象.get()】
例如：

	
		
		
		
		
		
	
	
		
"p1">测试jquery的语法
	

jquery的构造有常用的两种
$(selecter)—将被选中的html标记构造成Jquery对象
$(javascript对象)—将javascript对象构造成Jquery对象

jQuery选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
1.元素选择器
jQuery 元素选择器基于元素名选取元素。

	
		
		
		
		
		
	
	
		
测试jquery的元素选择器1
		
测试jquery的元素选择器2
		
测试jquery的元素选择器3
		
测试jquery的元素选择器4
	

2.#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
例如:

	
		
		
		
		
		
	
	
		
"p1">测试jquery的id选择器1
		
"p2">测试jquery的id选择器2
		
"p2">测试jquery的id选择器3
		
"p3">测试jquery的id选择器4
	

3.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。

	
		
		
		
		
		
	
	
		
"p1">测试jquery的class选择器1
		
"p2">测试jquery的class选择器2
		
"p2">测试jquery的class选择器3
		
"p3">测试jquery的class选择器4
	

	
		
		
		
		
	
	
		
测试jquery的基础语法1
		
"test1">测试jquery的基础语法2
		
测试jquery的基础语法3
		
"test2">测试jquery的基础语法4
		

			
name=zhangsan
			
age=23
			
address=xian
		
		

			
name=lisi
			
age=23
			
address=xian
		
		

			
"#">name=wangwu
			
"#">age=23
			
"#">address=xian
		
		"button" value="测试button1"/>
		"button" value="测试button2"/>
		"1px">
			
1001
zhangsan
23
西安
			
1003
王五
24
西安
			
1002
lisi
25
西安
			
1001
zhangsan
23
西安
			
1003
王五
24
西安
			
1002
lisi
25
西安