jquery中的选择器分类-Jquery-前端日记簿

首页 Jquery 正文

jquery中的选择器分类

2022-12-02 162

jquery中的选择器分类分为基本选择器、层级选择器、过滤选择器、筛选选择器

一,基本选择器

ID选择器 $("#id");
类选择器 $(".class");
标签选择器 $("标签");
并集选择器 $("div,p,li");
交集选择器 $("div.red"); 获取class为red的div元素

ID选择器 $("#tit1")

// 1.$("#tit1")  id选择器 
// html() 取得匹配元素的html内容
var tit1 = $("#tit1").html();
console.log(tit1);

// html() 设置匹配元素的html内容
$("#tit1").html('可爱的倪超群');
var tit2 = $("#tit1").html();
console.log(tit2);

预览：

元素选择器 $("ul") $("ul li") 抓取的是一个集合

css() 访问匹配元素的样式属性注意：样式属性当前这个元素身上有两个样式属性 color: orange; font-size:20px;

// 2. $("ul")  元素选择器   $("ul li") 抓取的是一个集合
// console.log($("ul"));
console.log($("ul li"));
$("ul li").css({
    'color': 'red',
    'background-color': 'blue'
});

预览：

类选择器 $('.msg')

// 3. $('.msg') 类选择器
var r1 = $('.msg').css('color');
console.log(r1);
var r2 = $('.msg').css('font-size');
console.log(r2);

预览：

群组选择器 $("#tit1, .msg, ul")

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/jquery.js"></script>
    <style>
      ul {
        width: 300px;
        height: 200px;
        list-style: none;
        color: red;
        float: left;
        margin-left: 20px;
      }
    </style>
  </head>
  <body>
    <div id="tit1">
      <div class="msg">
        <ul>
          你好啊
        </ul>
      </div>
    </div>
    <script src="js/jquery.js"></script>
    <script>
      // 2. $("ul")  元素选择器   $("ul li") 抓取的是一个集合
      // console.log($("ul"));
      // 3. $('.msg') 类选择器
      // 4. $("#tit1, .msg, ul") 群组选择器
      // 注意：群组选择器 的特点 对象和对象之间 用 ,逗号 间隔
      $("#tit1, .msg, ul").css({
        "font-size": "100px",
      });
    </script>
  </body>
</html>

预览：

:first获取第一个元素; :not() 筛选元素--去除所有与给定选择器匹配的元素

// 基本选择器--- $('元素:first')
$('li:first').css('color','red')

// 基本选择器---  :not() 筛选 元素，其中not里，你指定 不要的 元素！！
// :not(属性的值) --- $('li:not(#t1)')
$('li:not(#t1)').css('color','blue')

二，层级选择器

1.子代选择器 $("#parent>p");

2.后代选择器 $("#parent div p");用法:跟css选择器一样

 <div id="parent">
       	<div>我是儿子1</div>
        <p>我是儿子2</p>
        <div>
            <p>我是孙子</p>
            <p>我是孙子</p>
            <p>我是孙子</p>
        </div>
    </div>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
    $(function(){
         //子代选择器 在给定的父元素下匹配所有的子元素
         $("#parent>p").css("color","red")
        
        // 层级选择器，特点 中间用 空格间隔;  找到的是一个集合（一组元素）
        //后代选择器
        $('#parent div').css({'width':'100px', 'height':'100px','background-color':'blue'});
        $('#parent div p').css('color','red')
    })
    </script>

三 . 过滤选择器

:eq(index) $("li:eq(2)").css("color","red");获取到li元素中索引号为2的元素，下标从0开始

:odd $("li:odd").css("color","red");获取到的li元素中，索引号为奇数的元素

:even $("li:even").css("color","red");获取到的li元素中，索引号为偶数的元素

例如：

 
 :eq(index)  $("li:eq(2)").css("color","red");   获取到li元素中索引号为2的元素，下标从0开始
 
 :odd        $("li:odd").css("color","red");   获取到的li元素中，索引号为奇数的元素
 
 :even       $("li:even").css("color","red");   获取到的li元素中，索引号为偶数的元素

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=4

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。