一、概述

1、jQuery是js库，库：相当于java的工具类，库是存放东西的， jQuery是存放js代码的地方，里面有很多function函数

2、作用：使用jQuery简化对dom的操作，执行事件处理，动画，ajax请求

二、dom对象和jQuery对象

1、dom对象，使用javascript的语法创建的对象叫做dom对象，也就是js对象。
var obj = document.getElementById(“txt1”); obj是dom对象，也叫做js对象
obj.value;

2、jquery对象：使用jquery语法表示对象叫做jquery对象，注意：jquery表示的对象都是数组。
例如 var jobj = $(“#txt1”), jobj就是使用jquery语法表示的对象。也就是jquery对象。它是一个数组。
现在数组中就一个值。

3、dom对象可以和jquery对象相互的转换。
dom对象可以转为jquery ，语法： $(dom对象)
jquery对象也可以转为dom对象，语法：从数组中获取第一个对象，第一个对象就是dom对象，使用[0]或者get{0).

4、为什么要进行dom和jquery的转换：目的是要使用对象的方法，或者方法。
当你使用dom对象时，可以使用dom对象的属性或者方法，如果你要想使用jquery提供的函数，必须是jquery对象才可以。

示例代码1：

<body>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			function btnClick(){
				//获取dom对象
				var obj = document.getElementById("btnClick");
				//使用dom对象的value属性,获取值
				alert(obj.value);
				
				//把dom对象转成jquery对象,使用jquery库中的函数
				var jobj = $(obj);
				//调用jquery中的函数,获取value的值
				alert(jobj.val());
			}
		</script>
		<input type="button" value="==我是按钮==" id="btnClick" onclick="btnClick()"/>
	</body>

示例代码2：

<body>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			function btnClick(){
				//使用jquery的语法,获取dom对象
				// var obj = $("#txt")[0];//从数据中获取下标是0的dom对象
				var obj = $("#txt").get(0);//从数组中获取下标是0的dom对象
				
				var num = obj.value;
				obj.value = num * num;
			}
		</script>
		<input type="button" value="计算平方" onclick="btnClick()" />
		<br>
		<input type="text" id="txt" />
	</body>

三、基本使用

1、获取jquery的js文件

2、在你的程序中加入js文件的地址

<script type="text/javascript" src="js/jquery-3.4.1.js

"></script>

3、获取jquery对象，调用它的函数

4、jquery3.4.1的压缩和非压缩版本的地址

链接：https://pan.baidu.com/s/1OoYRjPkM7DE_YAN8hDLMIA
提取码：acbk

四、选择器

就是一个字符串，用来定位dom对象的。定位了dom对象，就可以通过jquery的函数操作dom

1、基本选择器

（1）id选择器

语法： $(“#dom对象的id值”)
通过dom对象的id定位dom对象的。通过id找对象， id在当前页面中是唯一值。

（2）class选择器

语法： $(“.class样式名)
class表示css中的样式，使用样式的名称定位dom对象的。

（3）标签选择器

语法： $(“标签名称”)
使用标签名称定位dom对象的

（4）所有选择器

语法：$(“*”)

选择页面中所有的dom对象

（5）组合选择器

语法：$(“#id,class,标签名”)

使用id，class，标签的选择器，多个dom对象的定位

2、表单选择器

语法： $(“:type属性值”)

使用标签的type属性值，定位dom对象的方式。

例如，所有的单行文本，$(“:text”)

根据type属性值定位dom对象的，页面中的组件一定有type属性才可以使用
表单选择器和form标签无关

示例代码：

<body>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			function fun1(){
				//使用表单选择器$(:type的值"")
				var obj = $(":text");
				//获取value属性的值 val()是jquery中的函数,读取value属性值
				alert(obj.val());
			}
			function fun2(){
				//定位radio
				var obj = $(":radio");//数组,目前是两个对象,man,woman
				for(var i=0;i<obj.length;i++){
					//循环数组,数组中的成员是dom对象,可以使用dom的属性或者函数
					//从数组中获取成员,使用下标的方式
					var dom = obj[i];
					//使用dom对象的属性,获取value值
					alert(dom.value);
					/* var jobj = $(obj);
					alert(jobj.val()); */
				}
			}
			function fun3(){
				//定位checkbox
				var obj = $(":checkbox");//数组,有三个对象
				for(var i=0;i<obj.length;i++){
					var dom = obj[i];
					// alert(dom.value);
					//使用jquery的val函数,获取value的值
					//1.需要jquery对象
					var jobj = $(dom);
					//2.调用jquery函数
					alert(jobj.val());
  				}
			}
		</script>
		<input type="text" value="我是type=text" /><br>
		<input type="radio" value="man"  />男<br>
		<input type="radio" value="women" />女<br>
		<input type="checkbox" value="bike" />骑行<br>
		<input type="checkbox" value="football" />足球<br>
		<input type="checkbox" value="music" />音乐<br>

		<input type="button" value="我是type=text" onclick="fun1()" /><br>  
		<input type="button" value="获取radio属性值" onclick="fun2()" /><br>  
		<input type="button" value="获取checkbox属性值" onclick="fun3()" /><br>  
	</body>

五、过滤器

1、概念

在定位了dom对象后，根据一些条件筛选dom对象。
过滤器又是一个字符串，用来筛选dom对象的。
过滤器不能单独使用，必须和选择器一起使用。

2、基本过滤器

（1）$(“选择器:first”)

语法：$(“选择器:first”)

定位数组中的第一个dom对象

（2）$(“选择器:last”)

语法：$(“选择器:last”)

定位数组中的最后一个dom对象

（3）$(“选择器:eq(下标)”)

语法：$(“选择器:eq(数组的下标)”)

定位到制定下标的dom对象

（4）$(“选择器:lt(下标)”)

语法：$(“选择器:lt(下标)”)

定位小于指定下标的dom对象

（5）$(“选择器:gt(下标)”)

语法：$(“选择器:gt(下标)”)

定位大于指定下标的dom对象

示例代码：

<style type="text/css">
			div{
				background: gray;	
			}
		</style>
	</head>
	<body>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			//$(document).ready(函数):当页面中的dom对象加载成功后,会执行ready()
			//相当于是onload()
			$(function(){
				//当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了,才能使用
				$("#btn1").click(function(){
					//过滤器
					var obj = $("div:first");
					
					obj.css("background","red");
				})
			})
			
			//绑定btn2的事件
			$(function(){
				$("#btn2").click(function(){
					var obj = $("div:last");
					obj.css("background","green");
				})
			})
			
			//绑定btn3的事件
			$(function(){
				$("#btn3").click(function(){
					var obj = $("div:eq(3)");
					obj.css("background","blue");
				})
			})
			
			//绑定btn4的事件
			$(function(){
				$("#btn4").click(function(){
					var obj = $("div:lt(3)");
					obj.css("background","orange");
				})
			})
			
			//绑定btn5的事件
			$(function(){
				$("#btn5").click(function(){
					var obj = $("div:gt(3)");
					obj.css("background","yellow");
				})
			})
		</script>
		<div id="one">我是div-0</div>
		<div id="two">我是div-1</div>
		<div>我是div-2
		     <div>我是div-3</div>
		     <div>我是div-4</div>
		</div>
		<div>我是div-5</div>
		<br/>
		<span>我是sapn</span>
		<br/>
		<input type="button" value="获取第一个div" id="btn1"  /><br>  
		<input type="button" value="获取最后一个div" id="btn2"  /><br>  
		<input type="button" value="获取下标为3的div" id="btn3"  /><br>  
		<input type="button" value="获取下标3前面的div" id="btn4"  /><br>  
		<input type="button" value="获取下标3后面的div" id="btn5"  /><br>  
	</body>

3、表单属性过滤器

使用dom对象的状态作为筛选条件，定位dom对象

（1）$(“选择器:enabled”)

语法：$(“选择器:enabled”)

定位可用的dom对象

（2）$(“选择器:disabled”)

语法：$(“选择器:disabled”)

定位不可用的dom对象

（3）$(“选择器:checked”)

语法：$(“选择器:checked”)

定位选中的dom对象

（4）$(“选择器>option:selected“)

语法：$(“选择器:>option:selected”)

定位下拉列表框选中选中的值

示例代码：

<body>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function(){
					//获取所有可以使用的text
					var obj = $(":text:enabled");
					//获取jquery数组值所有dom对象的value值
					obj.val("Hello");
				})
				
				$("#btn2").click(function(){
					//获取选中的checkbox
					var obj = $(":checkbox:checked");
					for(var i=0;i<obj.length;i++){
					     // alert(obj[i].value);//第一种方式
						 var jobj = $(obj[i]);//第二种方式
						 alert(jobj.val());
					}
				})
				
				$("#btn3").click(function(){
					//获取select选中的值
					var obj = $("select>option:selected");
					for(var i=0;i<obj.length;i++){
						var dom = obj[i];
						var jobj = $(dom);
						alert(jobj.val());
					}
				})
				
			})
		</script>
		<input type="text" value="text1" id="txt1" /><br>
		<input type="text" value="text2" id="txt2" disabled="true"/><br>
		<input type="text" value="text3" id="txt3" /><br>
		<input type="text" value="text4" id="txt4" disabled="true"/><br>
		<br>
		<input type="checkbox" value="游泳" />游泳<br>
		<input type="checkbox" value="健身" checked />健身<br>
		<input type="checkbox" value="电子游戏" checked />电子游戏<br>
		<br>
		<select id="yuyan">
			<option value="java">java语言</option>
			<option value="go" select >go语言</option>
			<option value="python">python语言</option>
		</select>
		<br>
		<br>
		<input type="button" value="设置可以的text的value是hello" id="btn1"  /><br> 
		<button id="btn2">显示选中的复选框的值</button><br>
		<button id="btn3">获取select选中的值</button>
	</body>

六、函数

1、val()

操作对象的value属性值

2、text()

操作标签的文本内容

3、attr()

操作对象的value，文本以外的属性，例如：转换图片

4、remove()

删除dom对象和它的子对象，例如：删除多选框全部内容

5、empty()

删除dom的子对象

6、apppend()

添加dom对象

7、html()

操作文本标签，和JS中的innerHTML的作用一样

8、each()

循环函数，还可以循环数组，JSON对象，jquery对象

静态函数调用：$.each(要遍历的对象，function(index,element){处理程序})
使用jquery对象调用：jquery对象.each(function(index,element){处理程序})