jQuery-01

最新推荐文章于 2024-10-02 05:39:15 发布

巴枝子

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量63

点赞数 1

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/fddggghrr/article/details/123560448

版权

本文详细介绍了jQuery的选择器使用，包括基本选择器、层次选择器、过滤选择器以及表单选择器，同时展示了如何通过jQuery实现元素样式操作和事件监听。通过实例演示了如何在页面加载后获取文本框值、改变元素样式以及处理表单数据。此外，还探讨了jQuery中用于表格隔行换色和处理表单元素的各种技巧。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery入门以及选择器</title>
		<script type="text/javascript">
			/* window.οnlοad=function(){//页面加载函数
		//找到按钮
		var b=document.getElementById("btna");
		// 给按钮添加点击事件 匿名函数
		b.οnclick=function(){
		// 拿文本框  的值
		var a=document.getElementById("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.onload
			$(function() {
				// 案例1
				/* 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"});//id选择器
				// $("div").css("background","yellow");//标签选择器=元素选择器
				// $("*").css("background","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:lt(4):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:raido:checked");
					// 		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>
		<h2>jQuery入门以及选择器</h2>
		<h3>一、入门</h3>
		<h4>1.1点击按钮弹出文本框的值(js对比jQuery)</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基本选择器&层次选择器</h4>
		<div id="xx">
			<p> 这是第一个div中的段落&nbsp;<span>欧董:天下无敌</span></p>
			<span>大炮:睁开眼睛跟我说话</span>
		</div>
		<div class="yy">
			这是第二个div
		</div>
		<p> 这是外面的段落</p>
		<span>郑网红:我也想要被钓</span>
		<h4>2.3过滤选择器</h4>
		<ul>
			<li>0-席大炮好s</li>
			<li>1-郑网红bt</li>
			<li>2-建敏dm</li>
			<li>3-欧阳钦ds</li>
			<li>4-王俊nt</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>
		</table>
		<h4>2.5表单选择器</h4>
		<form action="" id="myForm">
			性别:<input type="radio" value="男" name="sex" />男
			<input type="radio" value="女" name="sex" />女<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" />
			<pre>


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