jQuery过滤选择器&&层次选择器&&表单选择器

首先引入jQuery的类库，代码如下，标出注释了的，不要在引入类库里写方法，我们需要重写一个script在继续写方法；下标是往0开始的

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <!-- 引入外部js=jQuery的类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){//相当于window.onload
				//过滤选择器
 				$("ul>li:first").css("background","yellow");//第一
 				$("ul>li:last").css("background","yellow");//最后
		        $("ul>li:even").css("background","yellow");//奇数
				$("ul>li:odd").css("background","yellow");//偶数
				$("ul>li:gt(0)").css("background","yellow");//大于
				$("ul>li:lt(4)").css("background","yellow");//小于
				//0>x<4
				$("ul>li:lt(4):gt(0)").css("background","yellow");//大于0小于4
            })
		</script>
	</head>
	<body>
        <ul>
			<li>0-单身</li>
			<li>1-好男人</li>
			<li>2-高冷男</li>
			<li>3-逗比</li>
			<li>4-清高</li>
		</ul>
	</body>
</html>

层次选择器和上面的代码差不多的不懂的我那写了有注释

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <!-- 引入外部js=jQuery的类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
        <!-- 另起一个script块 -->
		<script type="text/javascript">
            $(function(){//相当于window.onload
			//2.2层次选择器
				$("#xx").css("background","yellow")
				$(".yy").css({"background":"yellow","color":"red"});//类选择	器
				$("div").css("background","pink");//标签选择器=元素选择器
				$("*").css("background","yellow");//通配符:全部
				$("p,span").css("background","yellow");//并集
				$("div span").css("background","yellow");//交集 后代标签span
				$("div>span").css("background","yellow");//父子关系
				$("p+span").css("background","yellow");//兄弟关系 p后面紧跟着的span
            })
		</script>
	</head>
	<body>
        <div id="xx">
			<p>这是第一个div中的段落&nbsp;<span>单身强羡慕</span></p>
			<span>谢波和张成的内部爱情故事</span>
		</div>
		<div class="yy">
			这是第二个div
		</div>
		<p>这是第一个外面的段落</p>
		<span>蛤蟆和麻拐的内部爱情故事</span>
	</body>
</html>

接下来就是表单选择器

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <!-- 引入外部js=jQuery的类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
		<!-- 另起一个script块 -->
		<script type="text/javascript">
			$(function(){//相当于window.onload
                    //给按钮添加点击事件
                    $("#ok").click(function(){
					//拿性别
					var sex = $("#myForm input:radio:checked").val();
 					console.info(sex);
					//拿爱好
 					$("#myForm input:checkbox:checked").each(function(){
 						console.info($(this).val());
					})
					//拿地址
					var address=$("#myForm select option:selected").val();
					console.info(address);
				})
            })
		</script>
	</head>
	<body>
        <h4>2.4表单选择器</h4>
			<form action="" id="myForm">
				性别:<input type="radio" name="sex" value="男"/>男
					<input type="radio" name="sex" value="女"/>女<br>
				爱好：<input type="checkbox" value="看美女"/>看美女
				<input type="checkbox" value="看帅哥"/>看帅哥
				<input type="checkbox" value="打游戏"/>打游戏<br />
				地址:
				<select>
					<option value="湖南省">湖南省</option>
					<option value="海南省">海南省</option>
					<option value="湖北省">湖北省</option>
				</select><br />
				<input type="button" value="提交" id="ok"/>
			</form>
	</body>
</html>

以上呢就是三个选择器，有用的到小伙伴帮忙点个关注，第一次写博客，不好的还请指出

原文链接：https://blog.csdn.net/hmjcxy/article/details/123525836