jQuery01(入门&选择器)-CSDN博客

本文链接：https://blog.csdn.net/weixin_65808248/article/details/123527298

本文详细介绍了jQuery的基础知识，包括它的作用、适用场景和使用方式。通过实例展示了如何使用jQuery简化JavaScript操作，如事件处理和元素操作。接着，深入探讨了jQuery的选择器，包括基本选择器、层次选择器、过滤选择器和表单选择器，并给出了多个实际应用案例。案例涵盖了元素颜色变换、表格隔行换色、表单数据获取等。最后，鼓励读者在评论区提问以深化理解。

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

你了解关于jQuery的3W1H嘛？

What?

jQuery是一个快速、简洁的script的框架（此乃官方地址：http://jquery.com/）

Why?

那么为什么要学习jQuery呢？目的就是为了简化JavaScript开发：选择器、CSS、HTML事件处理、js动画、浏览器兼容、丰富插件

Where?

在哪些情况下使用呢？一般都是在中大型网站开发，是一些前端框架的基础，比如EasyUI，Bootstrap

How?

我们一般是使用HBuilder这一款开发工具，那么接下来，在下将通过一些案例来为你们解答如何使用，让你们更加深入的去了解JQuery~~~

案例1：点击按钮获取输入框中的值（JS对比jQuery）


<script type="text/javascript">
			 window.onload=function(){//js的方法
				//拿到按钮
				var btn=document.getElementById("btna");
				//给按钮添加点击事件
				btn.onclick=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>
//页面载入函数  加载DOM  jQuery的方法
			$(function(){//相当于window.onload
			//案例1:
				 var b=$("#btnb");//拿到按钮
				b.click(function(){
					
				})
				b.click(function(){//添加点击事件
					var a=$("#aa").val();//拿到文本框的值
					alert(a);
				}) 
<script/>

<body>
		<h2>jQuery入门&选择器</h2>
		<h3>一、jQuery入门</h3>
		<h4>案例1：点击按钮弹出文本框的值</h4>
		<input type="text" id="aa" />
		<input id="btna" type="button" value="点击[js方式]" />
		<input id="btnb" type="button" value="点击[jQuery方式]" />
<body/>

紧接着呢，带你们了解一下jQuery的选择器，它分别有四种：基本选择器、层次选择器、过滤选择器、表单选择器。

给大家分享了一张思维导图，可以看一下它们的详细介绍，在下就直接给大家讲解案例啦~

案例2：分别使用基本选择器，改变元素的背景颜色和字体颜色（div、p、span）

案例3：使用层次选择器，选择某个元素下面的所有元素和子元素


<script>
//案例2、3：基本选择器-层次选择器
        $(function(){
				$("#xx").css("background","yellow");//id选择器
				$(".yy").css({"background":"yellow","color":"red"});
				$("div").css("background","pink");//标签选择器=元素选择器
				$("*").css("background","blue");//通配符:全部
				$("p,span").css("background","pink");//并集
				$("div span").css("background","pink");//交集  后代标签span
				$("div>span").css("background","pink");//父子关系
				$("p+span").css("background","pink");//兄弟关系 p标签后面紧跟着的span
})
</script>

<body>
<h3>二、jQuery选择器</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>
		
<body/>

案例4：使用过滤选择器，选择li中的元素

<script>

//案例4：2.3过滤选择器
            $(function(){
				$("ul>li:first").css("background","pink");//第一个
				$("ul>li:last").css("background","pink");//最后一个
				$("ul>li:even").css("background","pink");//偶数下标
				$("ul>li:odd").css("background","pink");//奇数下标
				$("ul>li:gt(0)").css("background","pink");//大于0
				$("ul>li:lt(4)").css("background","pink");//小于4
				// 0>想>4  先小于后大于
				$("ul>li:lt(4):gt(0)").css("background","pink");
})
</script>


<body>		
        <h4>2.3 过滤选择器</h4>
		<ul>
			<li>0-单身小强</li>
			<li>1-好男人朱哥</li>
			<li>2-高冷南翔</li>
			<li>3-逗比立波</li>
			<li>4-清高小刘</li>
		</ul>
<body/>

案例5：表格隔行换色

<script>
			//案例5
        $(function(){
			$("table tr:even").css("background","pink");
			$("table tr:odd").css("background","blue");
        })
</script>
<body>
<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>
			
		</table>
<body/>

案例6：表单选择器 获取表单中的单选、多选、下拉值

<script>
//给按钮添加点击事件
			$("#ok").click(function(){
// 				//拿性别 
  				var sex=$("#myFrom input:radio:checked").val();
 				console.info(sex);

//			拿爱好
 		$("#myFrom input:checkbox:checked").each(function(){
 			console.log($(this).val());
 		})
		
		//拿地址
		var address=$("#myFrom select option:selected").val();
				console.log(address)
		
			})
	})
</script>
<body>
<h4>2.4 表单选择器</h4>
		<form action="" id="myFrom">
			性别：<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/>

好啦~在下就暂时分享到这里啦，如有疑问可以在下方评论区提出，小编会努力改进哒~

我们下期继续~