jQuery(一)：jQuery介绍以及jQuery如何定位寻找一个元素、查找筛选器、练习【左侧菜单】

最新推荐文章于 2024-05-15 16:01:44 发布

冷凝娇

最新推荐文章于 2024-05-15 16:01:44 发布

阅读量5.1k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/ak739105231/article/details/93328525

版权

前端专栏收录该内容

30 篇文章 1 订阅

订阅专栏

一、jQuery的基本语法：$(selector).action()

等同于：jQuery(selector).action();简单说明：在JS的jQuery库中，$就是jQuery;是代表jquery对象的；

简单举例：

<body>
<div>hello</div>

<script src="templates/jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
    $("div").css("color","red")
</script>

二、寻找元素（jQuery的选择器和筛选器）

1.基本选择器

$("*"):通用，表示找到所有的标签进行操作；
$("#id")：通过id寻找元素，进行之后的操作；
$(".class")：通过className寻找元素，进行之后的操作；可以一次性操作多个相同class的元素
$("element")：通过标签名字去寻找
$(".class,p,div")：多个标签同时被寻找；进行之后对这几个元素的操作

2.层级选择器

$(".outer div"):寻找class="outer"下的后代标签div标签；
$(".outer>div")：寻找class="outer"下的子标签div标签；
$(".outer+div"):寻找class="outer"的after毗邻标签div标签；
$(".outer~div"):寻找class="outer"的after不严格要求毗邻标签div标签；

同样的道理，基本选择器通过以上四种方式组合，可实现不同级的元素的选择；

3.基本筛选器

$("li:first"):在多个li标签中筛选第一个标签；
$(".class:last"):在多个class标签中筛选最后一个标签；
$("li:eq(0)"):在多个li标签中筛选出第一个标签；n表示标签的索引；
$("li:even"):在多个li标签中筛选索引等于偶数的标签；
$("li:odd"):在多个li标签中筛选索引等于奇数的标签；
$("li:gt(2)")在多个li标签中筛选索引大于2的索引标签
$("li:lt(2)")在多个li标签中筛选索引小于2的索引标签

总结：$(element/.class/组合选择：first/last/eq(n)/even/odd/gt/lt)

4.属性选择器

$('[id="div1"]'):寻找id="div1"的标签；
$('[iThing="sb"][class="sss"]')：选择属性iThing="sb"且class属性等于sss的标签；

属性选择器，非常实用！$('[属性名="值"]')

5.input选择器(只适用于input标签)

$('[type="text"]')-----等同于---->$(":text")简写

三、jQuery的筛选器（特殊）

上面讲述的基本筛选器：$("选择器：几种筛选")

下面这种就是，在你所筛选的元素的索引是一个变量的时候，推荐使用：

$("选择器").eq(n);

$("选择器").first();

……

四、查找筛选器

*******第一组：
$("div").children(".test")   # 找寻div标签下的儿子层class="test"的元素
$("div").find(".test")   # 找寻div标签下的所有层class="test"的元素

*******第二组：
$(".test").next()    # 找寻class="test"标签下的同级的下面一个元素
$(".test").nextAll()   # 找寻class="test"标签下的同级的下面所有元素
$(".test").nextUnitl("#id")  # 找寻class="test"标签下的同级下面的元素直到id="id"的元素（备注：即一个范围里面的元素；这里只举例写了#id,其实其余的选择器都可以；两边不包含）

*******第三组：
$("div").prev()    # 找寻div标签下的同级的上面一个元素，包含自己
$("div").prevAll()     # 找寻div标签下的同级的上面所有元素，包含自己
$("div").prevUntil("#id")    # 找寻div标签下的同级上面的元素直到id="id"的元素（备注：即一个范围里面的元素；这里只举例写了#id,其实其余的选择器都可以；包含自己，不包含上面边界）

*******第四组：
$(".test").parent()  #寻找class="test"标签的上一级元素
$(".test").parents() #寻找class="test"标签的上一级，上两级……直到最上级的所有元素；一般不用
$(".test").parentUnitl(#id) #寻找class="test"标签的上一级，上两级……直到id="id"的所有元素；


*******第五组：（重）
$("div").siblings() #找寻div标签的上、下的所有兄弟标签

5.hasclass（.class值）：判断一个元素是否有某一个class属性

冷凝娇

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery(一)：jQuery介绍以及jQuery如何定位寻找一个元素、查找筛选器、练习【左侧菜单】

一、jQuery的基本语法：$(selector).action()等同于：jQuery(selector).action();简单说明：在JS的jQuery库中，$就是jQuery;是代表jquery对象的；简单举例：<body><div>hello</div><script src="templates/jquery-3.4.1/j...
复制链接

扫一扫