jQuery笔记：第一课

不想余生

已于 2022-03-17 20:41:12 修改

阅读量727

点赞数

分类专栏： jQuery 笔记文章标签： jquery javascript 前端

于 2022-03-17 20:32:51 首次发布

本文链接：https://blog.csdn.net/weixin_63692854/article/details/123559910

版权

笔记同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

jQuery

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />

		<title>jQuery入门以及选择器</title>
		<!--引入外部js=jQuery类库 -->
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<!-- 另起一个script块 -->
		<script type="text/javascript">
			//页面载入函数 相当于window.onload
			/* $(document).ready(function(){}) */
			//简写
			$(function() {
				/* var b=$("#bnb");//拿到按钮
				b.click(function(){
					var a=$("#aa").val();//获得文本框的值 val
					alert(a);
				}) */
				//二.选择器
				//2.1 基本选择器-层次选择器
				// $("#xx").css("background","yellow");//id选择器
				// $(".yy").css({"background":"yellow","color":"red"});//类选择器 元素选择器
				// $("*").css("background-color","yellow");//通配符;所有页面元素
				// $("p,span").css("background","yellow");//并集
				// $("div span").css("background","yellow");//交集 所有的后代
				// $("div>span").css("background","yellow");//父子关系
				// $(" 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(4)").css("background","yellow");
				// $("ul>li:gt(0):lt(4)").css("background","yellow");
				//注意：先小于后大于
				// $("ul>li:lt(4):gt(0)").css("background","yellow");
				//


				//案例5 表格隔着行换色
				// $("table tr:even").css("background","yellow");
				// $("table tr:odd").css("background","pink");
				//表单选择器
				$("#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>
		<!-- <p id="demo">这是文本框</p>
		<button type="button" onclick="hidess()">点击隐藏</button>
		<button type="button" onclick="show()">点击显示</button> -->
		<script>
			/* 	window.onload=function(){//页面加载函数
				var a=document.getElementById("bna");
				//给按钮添加点击事件 匿名函数
				a.onclick=function (){
					var b=document.getElementById("aa").value;
					alert(b);
				}
			} */

			// if (typeof jQuery == "undefined") {
			// 	window.alert("jQuery阴天");
			// } else {
			// 	window.alert("ssss");
			// }
			// //隐藏
			// function hidess() {
			// 	$("p").hide();
			// }
			// //显示
			// function show() {
			// 	$("#demo").show();
			// }
			// $(document).ready(function() {
			// 	$("div").click(function() {
			// 		$(this).css(
			// 		"width", function(index, value){
			// 			return parseFloat(value)*1.2;
			// 		});
			// 	});
			// });
		</script>
		<!-- 	<style type="text/css">
			div{width:100px;height: 50px;background-color: red;}
		</style> -->

	</head>
	<body>
		<h1>jQuery入门以及选择器</h1>
		<h2>一.入门</h2>
		<h4>1.1点击按钮弹出文本框的值 js对比jQuery</h2>

			<input type="text" name="" id="aa" value="" />
			<input type="button" name="" id="bna" value="点击(js方式)" />
			<input type="button" name="" id="bnb" value="点击(jQuery方式)" />
			<h3>二.选择器</h3>
			<h4>2.1 基本选择器&2.2 层次选择器</h4>
			<div id="xx">
				<p>这是第一个div中的段落&nbsp;<span>这是第一个div中的段落中的span</span></p>
				<span>这是第一个div中的span</span>
			</div>
			<div class="yy">
				这是第二个div
			</div>
			<p>这是div外的p</p>
			<span>这是div外的p后的span</span>
			<h4>2.3 过滤选择器</h4>
			<ul>
				<li>0-我</li>
				<li>1-你</li>
				<li>2-他</li>
				<li>3.她</li>
				<li>4-它</li>
			</ul>
			<h4>案例5</h4>
			<table border="1px" width="10px" height="10px">
				<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" method="post">
				性别：<input type="radio" id="" value="男" name="sex" />男
				<input type="radio" id="" value="女" name="sex" />女<br>
				爱好：
				<input type="checkbox" name="" id="" value="绘画" />绘画
				<input type="checkbox" name="" id="" value="运动" />运动
				<input type="checkbox" name="" id="" value="睡觉" />睡觉<br>
				地址：<select name="">
					<option value="湖南省">湖南省</option>
					<option value="湖北省">湖北省</option>
					<option value="福建省">福建省</option>
				</select><br>
				<input type="button" value="确定" id="ok" />
			</form>
			<!-- pre  -->
			<pre>






			</pre>
	</body>
</html>