jQuery01——入门~选择器

1.基本选择器

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

2.层级选择器

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

3.过滤选择器

<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":"yellow"});
				// 	2)、:last选择器：将ul里面的最后一个li背景设为蓝色。
				// $("ul li:last").css({"background":"yellow"});
				// 	3)、:even选择器：将ul里面下标为偶数的li背景设为绿色。
				// $("ul li:even").css({"background":"yellow"});
				// 	4)、:odd选择器：将ul里面下标为奇数的li背景设为红色。
				// $("ul li:odd").css({"background":"yellow"});
				// 	5)、:lt选择器：将ul里面下标小于3的li元素的背景设为绿色。
				// $("ul li:lt(3)").css({"background":"yellow"});
				// 	6)、:gt选择器：将ul里面下标大于3的li元素背景设为绿色。
				// $("ul li:gt(3)").css({"background":"yellow"});
				// 	7)、:eq选择器：将table表格里面的第二行的背景设为黄色。
				// $("table tr:eq(1)").css({"background":"yellow"});
			})
		</script>

4.表单选择器

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
			$(function(){
				//获取全部单选按钮
				//获取选中的单选按钮
				// var da = $("#form1 :radio:checked");
				// console.info(da.val());
				//获取复选框
				//获取选中的复选框
				// $("#ok").click(function(){
				// 	var dd = $("#fomr1 checkbox:checked");
				// 	//遍历
				// 	$.each(dd,function(i,v){
				// 		console.info(v.value);
				// 	})
				// })
				//获取选择的下拉框里面的值
				// var dd = $("#form1 option:selected")
				// console.info(dd.text())
			})
		</script>