jQuery01.入门&选择器

最新推荐文章于 2024-01-31 00:15:00 发布
最新推荐文章于 2024-01-31 00:15:00 发布
阅读量1.4k 收藏
点赞数 3
文章标签： javascript jquery 前端 html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_67177094/article/details/123493145
版权

jQuery入门

了解jQuery

jQuery.api速查表

jQuery选择器

1.基本选择器

元素选择器:element

类选择器:.class

ID选择器:#ID

通配符:*

2.层次选择器

打印标签下所有子标签

  打印标签下一级子标签

3.过滤选择器

获取第一个元素:first

获取最后一个元素:last

获取偶数下标的元素:even

获取奇数下标:odd

获取某一范围元素:  gt大于  lt小于

4.表单选择器

获取单选框  :radio

获取多选框  :checkbox

获取下拉框的值  :selected

jQuery入门

了解jQuery

jQuery官方地址:http://jquery.com/

Q:什么是jQuery?

A:jQuery不是一门语言,是javaScript的框架,封装了许多js代码,使用起来更方便

Q:为什么要学习jQuery?

A:为了简化JavaScript开发,包括选择器、css、HTML事件处理、js动画、浏览器兼容、丰富插件

Q:哪些情况下使用？

A:中大型网站开发,前端框架基础比如:EasyUI,Bootstrap

Q:怎么使用呢？

A:先下载jQuery库,再将jQuery文件复制到项目中,最后使用即可

jQuery.api速查表

 下载链接: https://pan.baidu.com/s/1Xdnl-LvcI_N6DLdFfKktWA?pwd=9rf9 提取码: 9rf9

jQuery选择器

1.基本选择器

元素选择器:element

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">  //引入jQuery库
		</script>
	</head>
	<body>
		<div>
		</div>
		<script type="text/javascript">
			console.log($('div'))  //通过jQuery在控制台打印div
		</script>
	</body>
</html>

类选择器:.class

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">  //引入jQuery库
		</script>
	</head>
	<body>
		<div class="d2">
		</div>
        <div class="d2">
		</div>
        <div class="d2">
		</div>
        <div class="d2">
		</div>
		<script type="text/javascript">
			console.log($('.d2'))  //通过jQuery在控制台打印所有class为d2的标签
		</script>
	</body>
</html>

ID选择器:#ID

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">  //引入jQuery库
		</script>
	</head>
	<body>
		<div id="d3">
		</div>
		<script type="text/javascript">
			console.log($('#d3'))  //通过jQuery在控制台打印d3
		</script>
	</body>
</html>

通配符:*

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">  //引入jQuery库
		</script>
	</head>
	<body>
		<div></div>
		<script type="text/javascript">
			console.log($('*'))  //通过jQuery在控制台打印所有标签
		</script>
	</body>
</html>

2.层次选择器

打印标签下所有子标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">  //引入jQuery库
		</script>
	</head>
	<body>
		<div class="d2">
             <div class="d2">
                <div class="d2">
                </div>
             </div>
        </div>
		<script type="text/javascript">
			console.log($('div p'))  //打印div标签下所有的div标签
		</script>
	</body>
</html>

  打印标签下一级子标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">  //引入jQuery库
		</script>
	</head>
	<body>
		<div class="d2">
		    <div class="d2">
		        <div class="d2">
                </div>
            </div>
        </div>
		<script type="text/javascript">
			console.log($('div>div'))  //打印div标签下一级div标签
		</script>
	</body>
</html>

3.过滤选择器

获取第一个元素:first

$('tr:first')
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>12￥</td>
            <td>100001</td>
            <td>非常好吃</td>
        </tr>
        <tr>
            <td>菠萝</td>
            <td>15￥</td>
            <td>100001</td>
            <td>一般好吃</td>
        </tr>
        <tr>
            <td>西瓜</td>
            <td>2￥</td>
            <td>100001</td>
            <td>无敌好吃</td>
        </tr>
    </table>
    <script>
       //console.log($('tr').first())  //这个方法同下
       console.log($('tr:first'))  //打印第一个tr标签
    </script>
</body>
</html>

获取最后一个元素:last

$('tr:last')
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>12￥</td>
            <td>100001</td>
            <td>非常好吃</td>
        </tr>
        <tr>
            <td>菠萝</td>
            <td>15￥</td>
            <td>100001</td>
            <td>一般好吃</td>
        </tr>
        <tr>
            <td>西瓜</td>
            <td>2￥</td>
            <td>100001</td>
            <td>无敌好吃</td>
        </tr>
    </table>
    <script>
       // console.log($('tr').last())这样打印也行
       console.log($('tr:last'))  //打印最后一个tr标签
    </script>
</body>
</html>

获取偶数下标的元素:even

$('tr:even')
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>12￥</td>
            <td>100001</td>
            <td>非常好吃</td>
        </tr>
        <tr>
            <td>菠萝</td>
            <td>15￥</td>
            <td>100001</td>
            <td>一般好吃</td>
        </tr>
        <tr>
            <td>西瓜</td>
            <td>2￥</td>
            <td>100001</td>
            <td>无敌好吃</td>
        </tr>
    </table>
    <script>
       console.log($('tr:even'))  //打印偶数下标的tr标签
    </script>
</body>
</html>

获取奇数下标:odd

$('tr:odd')
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>12￥</td>
            <td>100001</td>
            <td>非常好吃</td>
        </tr>
        <tr>
            <td>菠萝</td>
            <td>15￥</td>
            <td>100001</td>
            <td>一般好吃</td>
        </tr>
        <tr>
            <td>西瓜</td>
            <td>2￥</td>
            <td>100001</td>
            <td>无敌好吃</td>
        </tr>
    </table>
    <script>
       console.log($('tr:odd'))  //打印奇数下标的tr标签
    </script>
</body>
</html>

获取某一范围元素:  gt大于  lt小于

$('tr:gt(2)')  $('tr:lt(3)')
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>12￥</td>
            <td>100001</td>
            <td>非常好吃</td>
        </tr>
        <tr>
            <td>菠萝</td>
            <td>15￥</td>
            <td>100001</td>
            <td>一般好吃</td>
        </tr>
        <tr>
            <td>西瓜</td>
            <td>2￥</td>
            <td>100001</td>
            <td>无敌好吃</td>
        </tr>
    </table>
    <script>
       console.log($('tr:gt(1)'))  //打印下标大于1的tr标签
     //console.log($('tr:lt(2)'))  //打印下标小于2的tr标签
    </script>
</body>
</html>

4.表单选择器

获取单选框  :radio

$(":radio")

获取多选框  :checkbox

$(":checkbox")

获取下拉框的值  :selected

$(":selected")

你要尽全力保护你的梦想。那些嘲笑你梦想的人，他们注定失败，他们想把你变成和他们一样。我坚信，只要心中有梦想，我就会与众不同。你也是。

也跌
关注
JQuery入门&选择器
03-10
JQuery入门&选择器
jQuery选择器
m0_67901663的博客
04-13 6230
jQuery选择器
jQuery-选择器
weixin_45042311的博客
12-04 7061
jQuery
jQuery的选择器
weixin_44106237的博客
08-15 3601
jQuery的四种选择器，基本选择器，层级选择器，过滤选择器，筛选选择器（方法）
jQuery 选择器全部详细笔记
业精于勤，荒于嬉
04-23 2036
1. jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML,css,dom...2. 提供方法、events、选择器，并且方便地为网站提供 AJAX 交互3. 其宗旨是—WRITE LESS,DO MORE,写更少的代码,做更多的事情.4. jQuery 实现了浏览器的兼容问题1. jQuery 对象就是对 DOM 对象进行包装后产生的对象比如： $("#test").html() 意思是指：获取ID为test的元素内的html代码。
jquery的9大选择器
最新发布
qq_60504665的博客
01-31 2849
是JQuery最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名来查找DOM元素（在网页中id只能使用一次，class允许重复使用）。如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器。按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器。属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。（5）子元素过滤选择器。
jQuery选择器基础入门教程
10-22
jQuery选择器是jQuery库中非常重要...通过上述知识点的介绍，初学者可以快速入门并掌握基本的jQuery选择器使用方法，进阶用户则可以通过学习更多的操作技巧和相关专题，充分利用jQuery的强大功能来优化和丰富Web应用。
jQuery入门之层次选择器实例简析
10-23
在jQuery选择器中，层次选择器是非常重要的一类，它包括了用于匹配特定父子或祖先后代关系的元素的选择器。本文将详细解析jQuery层次选择器中的"ancestor descendant"和"parent>child"选择器之间的区别，并通过实例...
jQuery 选择器用法基础入门示例
10-15
例如《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》和《jquery选择器用法总结》等，这些专题可以进一步扩展开发者对jQuery的了解和应用...
四大常见的jQuery选择器+案例
ovocc的博客
03-17 6648
常见的jQuery选择器前言四大选择器一.jQuery基础选择器1.ID选择器2.全选选择器3.类选择器4.标签选择器5.并集选择器6.交集选择器二、使用步骤1.引入库2.读入数据总结 前言 jQuery唯一个javascrip库,里面封装了JavaScript常用的的功能代码，优化了DOM操作，事件处理，动画设计和Ajax交互。但因为jQuery对象有自己的封装，dom对象不能使用，所以需要选择器将对象选取出来使用 四大选择器 一.jQuery基础选择器 1.ID选择器 ID选择器可以选择指定id的
jquery的选择器（选择器的分类和作用）
weixin_67138897的博客
10-19 4004
基本选择器是jQuery中最常用也是最简单的选择器，它通过元素的id、class和标签名等来查找DOM元素。
jQuery系列之选择器
老__L的博客
08-27 6955
原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。根据给定的ID匹配一个元素。使用任何的元字符作为名称的文本部分， 它必须被两个反斜杠转义：。 1.1.2.1、参数 id：String 用于搜索的，通过元素的 id 属性中给定的值 1.1.3、示例 查找含有特殊字符的元素 1.2、全选选择器 1.2.1、概述 匹配所有元素多用于结合上下文来搜索。 1.2.3、示例 找到每一个元素 1.3、类选择器 1.3.1、概述 根据给定的 css
Jquery 选择器
飞奔的小强
05-15 701
jQuery 选择器简介 　　　　  jQuery 选择器允许对 HTML 元素组或单个元素进行操作。 　　　　jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。 　　　　jQuery 中所有选择器都以美元符号开头：$()。 1 .基本选择器   　　　　$("#te...
jQuery基础----常用的选择器
u011863822的博客
07-20 1378
本篇就是列举了一些常用的jQuery选择器而匹配元素，当然如果学习过css会更好理解的。
jQuery中的选择器
qq_56769697的博客
04-17 533
jQuery中的选择器
jQuery选择器（一）基本选择器、层次选择器及属性选择器的详细使用
Jin_Xiang123的博客
01-14 4061
本篇文章主要介绍在jQuery中基本选择器、层次选择器及属性选择器的详细使用以及部分理论知识 在jQuery中，基本选择器是一组简单而直接的选择器，用于选择DOM元素。它们是最常用和最基础的选择器，可以根据元素的标签名、类名、id等属性来选择元素。基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器。名称语法构成描述示例标的id匹配元素。
十分钟掌握JQuery选择器：快速入门指南
"这篇文档是关于JQuery选择器的快速学习指南，仅11页却能让你在10分钟内掌握其用法，包括基本选择器和层级选择器的详细解释，适合初学者和需要快速回顾JQuery选择器的开发者。" 在Web开发中，JQuery是一个强大的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值