jQuery (一)

歐陽。

已于 2022-03-16 17:33:11 修改

阅读量1.1k

点赞数 11

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

于 2022-03-16 17:24:58 首次发布

本文链接：https://blog.csdn.net/weixin_65211978/article/details/123526804

版权

jQuery 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

一、初识jQuery

简介：jQuery是一个快速。简介的JavaScript的轻量级框架。jQuery设计的宗旨是“write less，Do More”即提倡写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，它使 HTML 文档遍历和操作、事件处理、动画和 Ajax 之类的事情变得更加简单，它具有易于使用的 API，可在多种浏览器中工作。jQuery 结合了多功能性和可扩展性，改变了数百万人编写 JavaScript 的方式。兼容css3和各大浏览器。

1.1 是什么？：①、JavaScript库：封装了很多JS代码。②、JavaScript库：jQuery(90%)、Ext JS ③、官方地址：http://jquery.com/

1.2 为什么要学习？：①、查看官方jQueryLOGO：write less，do more。②、为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件

1.3 什么情况下用？：①、中大型网站开发。②、是一些前端框架的基础，比如EasyUI，Bootstrap

1.4 怎么用？：适用工具：HBuilder X

二、jQuery入门&如何使用

jQuery使用3部曲：

第一步：下载jQuery库(选择合适自己的)，列如：jquery-3.3.1js[开发者版本]、jquery-3.3.1.min.js[生产者版本]。

第二步：将jquery文件复制到js项目中

第三部：使用

1.1引入外部jQuery的类库引入后需另起一块

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
//里面写函数
</script>

1.1.2 $=jQuery

1.2页面载入函数

<script type="text/javascript">
			//页面载入函数	加载DOM
			$(function() { //相当于window.onload
						var b= $("#btnb");//拿到按钮
						b.click(function(){//添加点击事件
							var a=$("#aa").val();//拿到文本框的值
							alert(a);
						})
</script>

2 案例一：点击"提交"按钮获取文本框的值

三、jQuery选择器

1、基本选择器

常用选择器：

①ID选择器：#ID

②类选择器：.class

③元素选择器：element

④通配符：*

⑤多个选择器(并集)：selector1,selector2

⑥多个选择器(交集)：selector1,selector2

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

2.层次选择器

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

3、过滤选择器

第一个元素：first

最后一个元素：last

偶数下标的元素：even

奇数下标的元素：odd

获取某一范围的元素：

:gt大于...

:lt小于...

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部js=jQuery的类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 另起一个script块 -->
		<script type="text/javascript">
			//页面载入函数	加载DOM
			$(function() { //相当于window.onload
				//$("ul>li:first").css("background-color", "pink"); //第一个
				//$("ul>li:last").css("background-color", "pink"); //最后一个
				//$("ul>li:even").css("background-color", "pink"); //偶数下标
				//$("ul>li:odd").css("background-color", "pink"); //奇数下标
				//$("ul>li:gt(0)").css("background-color", "pink"); //大于0
				//$("ul>li:lt(4)").css("background-color", "pink"); //小于4
				//让下标大于0 小于4 的行变色
				$("ul>li:lt(4):gt(0)").css("background-color", "pink");
			})
		</script>
	</head>
	<body>
		<h4>过滤选择器</h4>
		<ul>
			<li>0-文质彬彬</li>
			<li>1-翩翩起舞</li>
			<li>2-水性杨花</li>
			<li>3-生机勃勃</li>
			<li>4-栩栩如生</li>
		</ul>
	</body>
</html>

案例二：使用过滤器让表格隔行变色

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		</style>
		<!-- 引入外部js=jQuery的类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 另起一个script块 -->
		<script type="text/javascript">
			//页面载入函数	加载DOM
			$(function() { //相当于window.onload
				$("table tr:even").css("background-color","gold");
				$("table tr:odd").css("background-color","aqua");
			})
		</script>
	</head>
	<body>
		<h4>表格隔行换色</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>
	</body>
</html>

结果：

4、表单选择器

获取选择单选框的值：

input:radio:checked

获取选择多选框的值：

input:checkbox:checked

获取选择下拉值：

select option:selected

案例一：获取表单中的单选、多选and下拉框的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		</style>
		<!-- 引入外部js=jQuery的类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 另起一个script块 -->
		<script type="text/javascript">
			//页面载入函数	加载DOM
			$(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 add=$("#myForm select option:selected").val();
						console.info(add);
					})
			})
		</script>
	</head>
	<body>
		<h4>表单选择器</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="敲代码" />敲代码
			<input type="checkbox" value="打游戏" />打游戏<br />
			地址：
			<select>
				<option value="湖南省">湖南省</option>
				<option value="广东省">广东省</option>
				<option value="江西省">江西省</option>
				<option value="江西省">浙江省</option>
			</select><br />
			<input type="button" value="提交" id="ok" />
		</form>
	</body>
</html>