白学的小知识[jQuery选择器中获取元素的十一种方式]

原创于 2023-12-25 11:44:36 发布 · 604 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端 #javascript

本文详细介绍了jQuery中的基础选择器如ID、类、标签选择器，以及筛选选择器如first、last、eq、odd和even，展示了如何使用这些选择器来选取HTML元素。

jQuery选择器：分为基础选择器和筛选选择器。

基础：

名称	用法	描述
ID选择器	$(“#id”)	获取指定ID的元素
全选选择器	*$(" ")**	匹配所有元素
类选择器	$(“.class”)	获取同一类名class的元素
标签选择器	$(“div”)	获取同一类标签的所有元素
并集选择器	$(“div,p,li”)	获取多个元素
交集选择器	$(“li.current”)	交集元素

用法：

    $("#box") //获取id名为box的元素 
    $("*")  //获取所有元素
    $(".box") //获取类名叫box的所有元素
    $("div") //获取所有div标签
    $("div,p,li") //获取div和p和li
    $("li.current")//获取类名叫current的li

筛选：

语法	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(1)”)	获取到的li元素中，选择索引号为1的元素，索引号从0开始
:odd	$(“li:odd”)	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”)	获取到的li元素中，选择索引号为偶数的元素

用法：

    // 获取第一个li
    $("li:first")
    // 获取最后一个li
    $("li:last")
    // 获取下标为1的li
    $("li:eq(1)")
    // 获取下标为奇数的li
    $("li:odd")
    // 获取下标为偶数的li
    $("li:even")