JQuery选择器

最新推荐文章于 2024-07-08 16:22:29 发布

猫老九じ

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量212

点赞数

分类专栏： javascript基础文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_73686203/article/details/127319002

版权

javascript基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.JQuery选择器

原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此JQuery给我们做了封装，使获取元素统一标准。

$("选择器") //里面选择器直接写css选择器即可，但是要加引号

基础选择器

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

层级选择器（后代选择器与子代选择器）

名称	用法	描述
子代选择器	$("ul>li")	使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素
后代选择器	$("ul li")	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

基础选择器和层级选择器案例代码

<body>
  <div id="main">我是带id的div</div>
  <div class="nav">我是带class的div</div>
  <div>我是div标签</div>
  <ul>
     <li>我是ul的</li>
     <li>我是ul的</li>
     <li>我是ul的</li>
  </ul>
  <script>
     $(function(){
      console.log($("#main"))
      console.log($(".nav"))
      console.log($("djv"))
      console.log($("ul li"))
  })
  </script>
</body>

属性选择器

名称	用法	描述
属性名称选择器	$("A[属性名]")	包含指定属性的选择器
属性选择器	$("A[属性名=‘值’]")	包含指定属性等于指定值的选择器
复合属性选择器	$("A[属性名='值'] []...")	包含多个属性条件的选择器

代码案例

//含有属性titie 的div元素背景色为红色
    $("#b1”).click(function O) {
       $("dfv[tit7e]").css("backgroundcoTor","pink");});
//属性tit7e值等于test的div元素背景色为红色
    $(“#b2").click(function () {
       $("div[titlem"test']").css("backgroundcolor","pink");});
//属性tit1e值不等于test的div元素(没有属性title的也将被选中)背景色为红色 
    $("#b3").c1ick(function O {
       $("div[title!='test']").css("backgroundcolor",“pink");
//属性tit1e值以te开始的div元素背景色为红色
    $(“#b4").click(function () {
       $("div[titleAm'te"]").css("backgroundcolor","pink");});
//风性title值以est结束的div元素背景色为红色
    $("#b5").click(function O) {
       $("div[title$…'est']").css("backgroundcolor","pink");

L

过滤选择器

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

案例代码

<body>
    <ul>
         <li>多个里面筛选几个</li>
         <li>多个里面筛选几个</li>
         <li>多个里面筛选几个</li>
         <li>多个里面筛选几个</li>
         <li>多个里面筛选几个</li>
         <li>多个里面筛选几个</li>
    </ul>
    <ol>
         <li>多个里面筛选几个</li>
         <li>多个里面筛选几个</li>
         <li>多个里面筛选几个</li>
         <li>多个里面筛选几个</li>
         <li>多个里面筛选几个</li>
         <li>多个里面筛选几个</li>
    </ol>
</body>

猫老九じ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery选择器

原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此JQuery给我们做了封装，使获取元素统一标准。$("选择器") //里面选择器直接写css选择器即可，但是要加引号。层级选择器（后代选择器与子代选择器）获取到的li元素中，选择索引号位偶数的元素。基础选择器和层级选择器案例代码。1.JQuery选择器。获取最后一个li元素。
复制链接

扫一扫