jQuery.01(入门&选择器)

小阿飞_

已于 2023-02-05 16:58:47 修改

阅读量926

点赞数 7

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

于 2022-03-15 10:42:57 首次发布

本文链接：https://blog.csdn.net/yifei_345678/article/details/123493248

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言：

之前的文章系列的介绍了js的相关知识，实现了在js中拿元素和修改元素属性，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <style>
		        .container{
		            width: 100px;
		            height: 100px;
		            background: red;
					display: inline-block;
		        }
		    </style>
	</head>
	<body>
			<div class="container"></div>
		    <div class="container"></div>
		    <div class="container"></div>
		    <div class="container"></div>
		<button onclick="fn1()">点我改变一个div颜色</button>
		<button onclick="fn01()">点我改变所有div颜色</button>
		<script type="text/javascript">
			// 改变一个div颜色
			// 由于getElements是得到一个数组,要加上[0]才能拿到一个也就是第一个div
			function fn1(){
				let div=document.getElementsByClassName('container')[0]
				div.style.background='blue'
			}
			// 改变所有div颜色
			function fn01() {
				let ds=document.getElementsByClassName("container")
			    //遍历这个div数组
			    for(let d of ds){
			    d.style.background="blue"
			        }
			    }
		</script>
	</body>
</html>

上述代码就是js中获取元素，修改样式的写法，可以和下面的代码对比一下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <style>
		        .container{
		            width: 100px;
		            height: 100px;
		            background: red;
					display: inline-block;
		        }
		    </style>
	</head>
	<body>
			<div class="container"></div>
			<div class="container"></div>
		    <div class="container"></div>
		    <div class="container"></div>
		<button onclick="fn2()">点我改变所有div颜色</button>
		<script src="../js/jquery-3.5.1.js"></script>
		<script type="text/javascript">
			function fn2(){
				let div=$(".container")
				div.css("background","green")
			}
		</script>
	</body>
</html>

这两种写法的效果相同，但第二种修改元素的方法更加简洁，而且第二种写法可以实现不遍历元素就改变所有div元素的样式

点击后

没错，写法二就是小阿飞今天要讲的jQuery

什么是jQuery？

简单的来说：

jQuery不是一门语言，而是js的框架（js的升级+简化）:

直接使用已有的jquery框架,就可以在这个框架的基础上进行开发,并且代码相比于js更加简洁方便

JavaScript库：封装了很多JS代码，jQuery(90%)、Ext JS,如图：

. js 结尾的就是js文件

. html 网页文件 .css样式文件
. js: 脚本文件:占用内存较大,可以修改其中的代码
. min.js: min就是已经封装好的,不能修改,占用内存较小(项目上线时用,用户运行内存较小,加载更快)

jQuery官方地址：http://jquery.com/，官网封面如下：

可以注意到官方jQueryLOGO：write less，do more

为什么要学习jQuery？

为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件

哪些情况下用jQuery？

中大型网站开发
是一些前端框架的基础，比如EasyUI，Bootstrap

怎么使用jQuery？

其中一种写法如下（就是上面的方法二）：

1，引入：将js文件复制到项目中：

2，将后缀名为. js的脚本文件导入到html项目中，即使用$/jQuery之前一定要先引入jQuery，引入jQuery的代码：

<script src="js文件名.js"></script>

3，编写使用（$就代表jQuery）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <style>
		        .container{
		            width: 100px;
		            height: 100px;
		            background: red;
					display: inline-block;
		        }
		    </style>
	</head>
	<body>
		    <div class="container"></div>
		    <div class="container"></div>
		    <div class="container"></div>
		    <div class="container"></div>
		<button onclick="fn2()">点我改变所有div颜色</button>
		<!-- 一定要在使用$也就是使用jQuery之前将js文件复制到项目中 -->
		<script src="../js/jquery-3.5.1.js"></script>
		<script type="text/javascript">
			function fn2(){
				// $符号就是jQuery 获取div元素
				let div=$(".container")
				// 修改样式的方法：元素.css('要修改的样式','修改成什么')
				// div.小写css
	// 当div有多个时,也不用进行遍历就可以拿到所有div并修改它的样式图片：console.log(div)
				div.css("background","green")
			}
		</script>
	</body>
</html>

jQuery选择器

1，基本选择器

ID选择器： #ID
类选择器： . class
元素选择器: element
通配符：*

运用如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		        div{
		            width: 100px;
		            height: 100px;
		            display: inline-block;
		            background: red;
		        }
		</style>
	</head>
	<body>
			<div id="aa"></div>
		    <div class="bb"></div>
		    <div class="bb"></div>
			<!-- 在使用$之前记得一定要先引入jQuery -->
			<script src="../js/jquery-3.5.1.js"></script>
			<script type="text/javascript">
				//jquery本身支持css选择器
				// 图片:使用$拿到的是类似数组的元素集
				console.log($('#aa'))
				console.log($('.bb'))
			// 修改第二个div的样式(类似数组,根据下标i,拿到第[i]个)
			// $('.bb')[0].css('background','blue')报错:
			// $(...)[0].css is not a function
			//原因：
			//css是jquery的方法  只有jquery对象才能调用jquery的方法
			// $('.bb')[0]不是jquery对象,因为打印它时前面没带jquery：图片
			//  $(".bb")[0]拿出来的js(不是jquery)中的正常对象
			// 解决：将js对象变成jquery对象：$(js对象)
				 $($('.bb')[0]).css('background','blue')
			// 拿到网页上的所有元素
			 console.log($("*"))	
			</script>
	</body>
</html>

运行如下：

选择器：（拿到类似数组的元素集）

class选择器：

通配符 * 拿到页面所有元素：

2，层次选择器

（查找所有元素，查询子元素）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		        div{
		            width: 100px;
		            height: 100px;
		            display: inline-block;
		            background: red;
		        }
		</style>
	</head>
	<body>
            <!-- 在使用$之前记得一定要先引入jQuery -->
			<script src="../js/jquery-3.5.1.js"></script>
        <script type="text/javascript">
			 //层次选择器：jQuery的选择器和js的选择器类似
			 //1，选择后代:中所有的p标签
			  $('div p').css('color','green')
			 //div中的第一级p标签（子标签）如:
			 // <div id="aa">
			 //     <p>今天</p>：第一级子标签
				//  <a href=""><p>明天</p></a>
			 // </div>
			 //2，选择子代：
			 $("div>p").css("color","white")
		</script>
	</body>
</html>

运行如下：

3，过滤选择器

获取第一个元素: first
最后一个元素: last
获取偶数下标的元素: even
获取奇数下标的元素: odd
获取某一范围元素：
:gt 大于
:lt 小于

例：表格隔行换色

先使用jQuery将表格的每一行都添加class属性，方便修改其样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤选择器</title>
	<style>
        .aa{
            background: blue;
            color: white;
        }

        .bb{
            background: green;
            color: orange;
        }
    </style>
	<!-- 导入jQuery -->
    <script src="../js/jquery-3.5.1.js"></script>
</head>
<body>
    <table border>
        <tr>
            <td>商品名字</td>
            <td>商品价格</td>
            <td>商品编号</td>
            <td>商品描述</td>
        </tr>
        <tr>
            <td>🍍🍍🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃🍍🍍🍍</td>
        </tr>
            <tr>
            <td>🍍🍍🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃🍍🍍🍍</td>
        </tr>
            <tr>
            <td>🍍🍍🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃🍍🍍🍍</td>
        </tr>
		<tr>
            <td>🍍🍍🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃🍍🍍🍍</td>
        </tr>
            <tr>
            <td>🍍🍍🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃🍍🍍🍍</td>
        </tr>
            <tr>
            <td>🍍🍍🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃🍍🍍🍍</td>
        </tr>
    </table>
	<script type="text/javascript">
		// 	获取第一个元素:first
		// 	最后一个元素:last(同理)
		// 给第一行添加一个Class属性:$('元素').addClass('属性名')大写C！
		    $('tr:first').addClass('aa')
		    $('tr').first().addClass('aa')
		// 奇数
		    $('tr:odd').addClass('aa')
		// 偶数
		    $('tr:even').addClass('bb')
		//发现可以把第0行可以看作是偶数
	</script>
	</body>
</html>

可以把第0行可以看作是偶数

修改奇数行的颜色：

$('tr:odd').addClass('aa')

修改偶数行的颜色：

$('tr:even').addClass('bb')

不修改第一行的表格隔行换色：

        //大于0的奇数
		 $("tr:gt(0):odd").addClass("aa")
		//大于0的偶数
		 $("tr:gt(0):even").addClass("bb")

修改第3行以后的样式：

$('tr:gt(3)').addClass('bb')

修改第3行以前的样式：

$('tr:lt(3)').addClass('bb')

修改第2行到第5行的样式：

$('tr:gt(1):lt(4)').addClass('bb')

4，表单选择器

获取表单中的单选、多选、下拉值

$(":input")
$(":selected")

想自学jQuery，可以使用jQuery速查表，就是类似下面这种：

感谢阅读

小阿飞_

关注

7
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery.01(入门&选择器)

目录前言：什么是jQuery？为什么要学习jQuery？哪些情况下用jQuery？怎么使用jQuery？jQuery选择器1，基本选择器2，层次选择器3，过滤选择器4，表单选择器前言：之前的文章系列的介绍了js的相关知识，实现了在js中拿元素和修改元素属性，代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <ti...
复制链接

扫一扫