jQuery入门以及选择器

ケイ907

已于 2022-03-18 09:52:24 修改

阅读量406

点赞数

文章标签： javascript jquery 前端

于 2022-03-18 09:44:29 首次发布

本文链接：https://blog.csdn.net/weixin_63667859/article/details/123566802

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery入门以及选择器</title>
		<!-- <script type="text/javascript">
			function $(id){
				return document.getElementById(id);
				
			}
			window.onload=function(){//页面加载函数
			//找到按钮
				var b=$("btna");
				//给按钮增加点击事件
				b.onclick=function(){
					var a=$("aa").value;
					alert(a);
				}
			}		
			
		</script> -->
		<!-- 引入外部js=jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 另起一个script块 -->
		<script type="text/javascript">
			//页面加载部分 相当于window.onloads
			$(function() {
				/* //案例一
				var b = $("#btnb"); //拿到按钮
				b.click(function() { //添加点击事件
					var a = $("#aa").val(); //获取文本框的值
					alert(a);
				}) */
				//二.选择器
				//2.1 基本选择器-层次选择器
				//$("#xx").css("background","yellow");//id选择器
				//$(".yy").css({"background":"yellow","color":"red"});//类选择器
				//$("div").css("background","yellow");//标签选择器
				//$("*").css("background","yellow");//通配符代表的是所有页面元素
				//$("p,span").css("background","yellow");//并级
				// $("div span").css("background","yellow");//交级 所有的后代
				//$("div>span").css("background","yellow");//找崽
				//$("div p+span").css("background","yellow");//找兄弟
				
				//$("div>span").css("background","yellow");
				//$("div p>span").css("background","yellow");
				
				//2.3过滤选择器
				//$("ul>li:first").css("background","yellow");//第一二个
				//$("ul>li:last").css("background","yellow");//最后一个
				//$("ul>li:eq(-2)").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(5)").css("background","yellow");//小于
				//先大于后小于
				//$("ul>li:lt(5):gt(0)").css("background","yellow");
				
				//案例5:表格隔行换色
 				//$("table tr:even").css("background","yellow");
 				//$("table tr:odd").css("background","pink");
				
				//2.4表单选择器
				$("#ok").click(function(){
					//拿性别的值
 					//var sex=$("#myForm input:radio:checked").val();
 					//alert(sex);
					//拿爱好
					var a=$("#myForm input:checkbox:checked").each(function(){
						alert($(this).val());
					});
					
					
				})
				
				
			})
			
			
			
			
		</script>
	</head>
	<body>
		<h2>jQuery入门以及选择器</h2>
		<h3>一，入门</h3>
		<h4>1.1点击按钮弹出文本框的值</h4>
		<input type="text" id="aa" />
		<input type="button" value="点击(纯js)" id="btna" />
		<input type="button" value="点击(jQuery方式)" id="btnb" />
		<h3>二，选择器</h3>
		<h4>2.1-2.2 基本选择器and层次选择器</h4>
		<div id="xx">
			<p>这是第一个div中的段落&nbsp;<span>无语到家了</span></p>
			<span>滚蛋</span>
		</div>
		<div class="yy">
			这是第二个段落
		</div>
		<p>这是外面的段落div</p>
		<span>嘎嘎嘎</span>
		
		<h4>2.3过滤选择器</h4>
		<ul>
			<li>0-大炮</li>
			<li>1-大炮</li>
			<li>2-大炮</li>
			<li>3-大炮</li>
			<li>4-大炮</li>
			<li>5-大炮</li>
		</ul>
		<h4>案例5</h4>
		<table border="1px" width="50%">
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr><tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
		</table>、
		
		<h4>2.4 表单选择器</h4>
		<form action="" id="myForm">
			性别：<input type="radio" value="男" name="aa" />男
			<input type="radio" value="女" name="aa" />女
			<input type="radio" value="妖" name="aa" />妖<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>
		
		
		<!-- 空格 -->
		<pre>
			
			
			
			
		</pre>
		
	</body>
</html>