jQuery入门&选择器

秃头没秃头

已于 2022-03-15 22:56:32 修改

阅读量1.1k

点赞数 14

文章标签： jquery javascript ecmascript

于 2022-03-15 22:53:35 首次发布

本文链接：https://blog.csdn.net/weixin_66110079/article/details/123510041

版权

Hilo Everybody wellcometo my channel ！

今天Lion带大家初步认识一下 jQuery（jquery01）

首先第一个我们来聊聊 “3W1H ”

一、3W1H

什么是3W1H呢？他们分别是 What、 Why、 Where、How

1.1：What：jQuery是什么？

jQuery是一个快速的、简洁的JavaScript框架，简单来说就是JavaScript的一个类库，里面封装了很多常用的功能代码。

1.2：Why：为什么使用jQuery？

jQuery的设计宗旨是“Write Less Do More”，既提倡写更少的代码，做更多的事！所以我们使用jQuery会使我们的代码简便快捷更加适用于我们开发。

1.3：Where：jQuery什么时候用？

1.3.1中大型网站的开发。

1.3.2是一些前端框架的基础，比如说EasyUI、Bootstrap。

1.4：How：jQuery怎么使用？

案例1：对比js和jQuery

第一步：下载jQuery的库

Query的官网：http:/jquery.com —>doewnload—>选择合适的版本（推荐开发版本）注：本文章举例所用版本为jquery-3.3.1的开发版本

第二步：将下载的js文件引入你的开发工具HBuilder X里面的项目（注意引入外部js）

第三步：开始编码工作。

代码展示：

以上便是jQuery的基本入门了，了解到这些我们便开始再了解一下jQuery的选择器部分吧！

二、选择器

首先我们来认识一下在jQuery中都有哪些选择器呢？

选择器分类：

基本选择器
层次选择器
过滤选择器
表单选择器

2.1：基本选择器：

案例2：Div样式变化颜色

代码展示：

//2.1基本选择器
				$("#xx").css("background-color","yellow");//id选择器
				$(".yy").css({"background":"yellow","color":"pink"});//类选择器
				$("div").css("background","pink");//标签选择器
				$("*").css("background","yellow");//通配符：全部
				$("p,span").css("background","yellow");//并集

id选择器：$("#id")

类选择器：$(".类名")

标签选择器：$("标签名")

通配符=全部标签：$("*")

2.2：层次选择器：

同上案例变换代码展示：

//2.2层次选择器
				 $("div span").css("background","yellow");//交集  后代标签span
				 $("div>span").css("background","yellow");//父子关系
				 $("p+span").css("background","yellow");//兄弟关系 p后面紧跟着的span

交集选择器（第一个标签内的所有后代标签）例如：$("div span")代表div中的所有span标签。

父子关系（第一个标签的所有子标签）例如：$("div>span")代表div中的所有span的子标签。

兄弟关系（第一个标签的所有同级标签）例如 $("p+span")代表与p标签同级的所有span标签。

2.3：过滤选择器：

案例3：不同序列过滤变化背景颜色

代码展示：

//2.3过滤选择器
				$("ul>li:first").css("background","yellow");//第一个
				$("ul>li:last").css("background","yellow");//最后一个
				$("ul>li:even").css("background","yellow");//偶数下标
				$("ul>li:odd").css("background","yellow");//奇数下标
				
				$("ul>li:gt(0)").css("background","yellow");//大于0的
				$("ul>li:lt(5)").css("background","yellow");//小于5
				$("ul>li:lt(5):gt(0)").css("background","yellow");//大于0小于5

过滤选择器类似于找序列或者根据下标找到对应的对象。

找到第一个 ：first eg：$("ul>li:first")找到第一个li

找到最后一个    ：last         eg：$("ul>li:last")找到最后一个li
找到偶数下标 ：even       eg：$("ul>li:even")下标为偶数的li（用户角度为奇数）
找到奇数下标 ：odd   eg：$("ul>li:odd")下标为奇数的li（用户角度为偶数）
大于 :gt(下标)   eg：$("ul>li:gt(0)")下标大于0的li
小于 :lt(下标)   eg：$("ul>li:lt(5)")下标小于5的li
介于： 用lt()与gt()的组合    eg：$("ul>li:lt(5):gt(0)")下标介于0~5的里        注：一定要先小于再大于因为反过来的话会导致下标的移位，那时下标为1的对象就会变成下标为0从而导致达不到效果！！！

案例4：表格隔行换色

代码展示：

//案例5表格隔行换色
				$("table tr:even").css("background","yellow");//偶数下标为黄色
				$("table tr:odd").css("background","pink");//奇数下标为粉色

效果图：

2.4：表单选择器：

案例4：获取表单对象的值（单选、复选、下拉框）

代码展示：

//2.4表单选择器
				//给按钮添加点击事件
				$("#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);
				})

单选框radio、复选框checkbox判断是否选中用：checked

下拉框判断option是否选中用：selected

控制台打印：console.info（）