jQuery_01 初识jQuery

1.JQuery简介

1.1JQuery是什么？

1. JavaScript库：封装了很多JS代码
2. JavaScript库：jQuery(90%)、Ext JS
3. 官方地址：http://jquery.com/

1.2 为什么要学习JQuery?

• 查看官方jQueryLOGO：write less，do more

• 为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件

1.3 JQuery在哪些情况下用？

• 中大型网站开发
• 一些前端框架的基础，比如EasyUI

1.4 JQuery怎么用？

1.4.1 工具：

HBuilderX

1.4.2 使用jQuery步骤

1. 下载jQuery库

• 开发版本：jquery-3.3.1.js
• 生产版本：jquery-3.3.1.min.js

2. 引入：将Query库复制到项目js文件中
3. 使用 script 标签调用

2.JQuery 选择器

2.1基本选择器

2.1.1常用选择器：

1. ID选择器：#ID
2. 类选择器：.class
3. 元素选择器:element
4. 通配符：*
5. 多个选择器(并集)：selector1，selector2
6. 多个选择器(交集)：selector1selector2
7. 案例: 分别使用基本选择器，改变元素

script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
			$(function(){
			// 1)、id选择器：将id为sa的span标签的背景设为黄色。
				// $("#sa").css({"background":"yellow"});
			// 2)、类选择器：将div标签里面class的值为sb的文本框标签的背景设为黄色。
				// $(".sb").css({"background":"yellow"});
			// 3)、标签选择器：将div里面input标签的背景设为黄色。
					// $("input").css({"background":"yellow"});
			// 4)、*选择器：将整个页面所有标签的背景设为绿色。
					// $("*").css({"background":"green"});
			// 5)、,选择器：将id为sa的div里面所有input、span标签的背景设为黄色。
					// $("input,span").css({"background":"yellow"});
			})
		</script>

2.1.2 层次选择器

• 查找所有元素，查询子元素
• 案例3：使用层次选择器，选择某个元素下面的所有元素和子元素

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
			$(function(){
		//  1)、空格选择器：将div标签里面的所有input元素背景设为绿色。
				// $("div input").css({"background":"green"});
		//  2)、>选择器：将div里面的input子元素背景设为绿色。
				// $("div>input").css({"background":"green"});
		//  3)、+选择器：将紧跟在div元素后面的第一个input元素背景设为绿色。
				// $("div+input").css({"background":"green"});
		//  4)、~选择器：将div元素之后的所有与div元素同辈的input元素背景设为绿色。
				// $("div~input").css({"background":"green"});
			})
		</script>

2.1.3 过滤选择器

• 参考jQuery文档

1. 获取第一个元素:first
2. 最后一个元素:last
3. 获取奇数元素:even
4. 获取偶数元素:odd
5. 获取某一范围元素
   :gt大于
   :lt小于

• 案例4：使用过滤选择器，选择li中的元素

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
			$(function(){  
			// 1)、:first选择器：将ul里面的第一个li背景设为绿色。
				$("ul li:first").css({"background":"pink"})
			// 2)、:last选择器：将ul里面的最后一个li背景设为蓝色。
				$("ul li:last").css({"background":"pink"})
			// 3)、:even选择器：将ul里面下标为偶数的li背景设为绿色。
				// $("ul li:even").css({"background":"pink"})
			// 4)、:odd选择器：将ul里面下标为奇数的li背景设为红色。
					// $("ul li:odd").css({"background":"pink"})
			// 5)、:lt选择器：将ul里面下标小于3的li元素的背景设为绿色。
					// $("ul li:lt(3)").css({"background":"pink"})
			// 6)、:gt选择器：将ul里面下标大于3的li元素背景设为绿色。
					// $("ul li:gt(3)").css({"background":"pink"})
					// 下标大于1 小于4
					// $("ul li:lt(4):gt(1)").css({"background":"pink"})
			// 7)、:eq选择器：将table表格里面的第二行的背景设为黄色。
					/* $("#mytable tr").eq(1).css({"background":"pink"}) */ 
			
			})
		</script>

• 案例5：表格隔行换色

<ul id="ua">
			<li>第一个li</li>
			<li>第二个li</li>
			<li>第三个li</li>
			<li>第四个li</li>
			<li>第五个li</li>
			<li>第六个li</li>
			<li>第7个li</li>
			<li>第8个li</li>
			<li>第9个li</li>
		</ul>
		<table id="mytable" border="1px" width="300" style="text-align: center;" height="200px">
			<tr>
				<td>一行一列</td>
				<td>一行二列</td>
				<td>一行三列</td>
			</tr>
			<tr>
				<td>二行一列</td>
				<td>二行二列</td>
				<td>二行三列</td>
			</tr>
			<tr>
				<td>三行一列</td>
				<td>三行二列</td>
				<td>三行三列</td>
			</tr>
		</table>
			<button type="button" id="os">偶数行(下标为奇数)</button>
			<button type="button" id="js">奇数行(下标为偶数)</button>
	</body>
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#odd").click(function(){
				$("#table1 tr:even").css({"background":"pink"})
			});
			$("#even").click(function(){
				$("#table1 tr:odd").css({"background":"yellow"})
			})
		})
	</script>

2.1.4 表单选择器

1. 参考jQuery文档
2. 获取选择单选框的值
3. 获取选择多选框的值
4. 获取选择下拉值
5. 案例6：获取表单中的单选、多选、下拉值

<script type="text/javascript">
			$(function(){
				// 获取所有单选按钮 
				// var da = $("#form1 :radio");
				// 获取选中的单选按钮
				// var da = $("#form1 :radio:checked");
				// console.info(da.val());
				// 获取所有复选框
				// var da = $("#form1 :checkbox");
				// 获取选中的复选框
				$("#ok").click(function(){
					// var da = $("#form1 :checkbox:checked");
					//循环遍历da
					// $.each(da,function(i,v){// i表示数组da的下标；v表示数组da 的值
					// 	console.info(v.value);
					// });
					
					// 获取选择的下拉框的值
					var da = $("#form1 option:selected");
					console.info(da.text())
				})
				
			})
		</script>