jQuery

jQuery介绍

JavaScrip Query:
属于前端，作用和js一模一样，里面封装了很多js代码，是一个js代码库。
（并不是全部js代码）
封装的作用：减少代码量
举例：通过id获取组件
js方式：docunment.getElementByld(“id”);
jQuery方式：$("#id");
引入jQuery库：

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

jQuery选择器

1.基本选择器：

id选择器：将id为sa的span标签的背景设为黄色。
$("#sa").css({"background":"yellow"});
类选择器：将div标签里面class的值为sb的文本框标签的背景设为黄色。
$(".sb").css({"background":"yellow"});
标签选择器：将div里面input标签的背景设为黄色。
$("input").css({"background":"yellow"});
*选择器：将整个页面所有标签的背景设为绿色。
$("*").css({"background":"green"});
,选择器：将id为sa的div里面所有input、span标签的背景设为黄色。
$("input,span").css({"background":"yellow"});

2.层级选择器：

、空格选择器：将div标签里面的所有input元素背景设为绿色。
$("div input").css({"background":"green"});
>选择器：将div里面的input子元素背景设为绿色。
$("div>input").css({"background":"green"});
+选择器：将紧跟在div元素后面的第一个input元素背景设为绿色。
$("div+input").css({"background":"green"});
~选择器：将div元素之后的所有与div元素同辈的input元素背景设为绿色。
$("div~input").css({"background":"green"});

3.过滤选择器：

:first选择器：将ul里面的第一个li背景设为绿色。
$("ul li:first").css({"background":"pink"})
:last选择器：将ul里面的最后一个li背景设为蓝色。
$("ul li:last").css({"background":"pink"})
:even选择器：将ul里面下标为偶数的li背景设为绿色。
$("ul li:even").css({"background":"pink"})
:odd选择器：将ul里面下标为奇数的li背景设为红色。
$("ul li:odd").css({"background":"pink"})
:lt选择器：将ul里面下标小于3的li元素的背景设为绿色。
$("ul li:lt(3)").css({"background":"pink"})
:gt选择器：将ul里面下标大于3的li元素背景设为绿色。
$("ul li:gt(3)").css({"background":"pink"})
// 下标大于1 小于4(先小后大)
// $("ul li:lt(4):gt(1)").css({"background":"pink"})
// $("ul li:gt(1):lt(4)").css({"background":"pink"})
:eq选择器：将table表格里面的第二行的背景设为黄色。
$("#mytable tr").eq(1).css({"background":"pink"})

4.表单选择器：

				// 获取单选按钮
				// 获取所有单选按钮 
				// 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())

5.表格隔行换色案例：

// 给偶数行按钮添加事件
					$("#os").click(function(){
						$("#mytable tr:odd").css({"background":"pink"})
					});
					//　给奇数行按钮添加事件
					$("#js").click(function(){
						$("#mytable tr:even").css({"background":"green"})
					})