Jquery——选择器

最新推荐文章于 2022-12-15 16:10:34 发布

lhy_loveit

最新推荐文章于 2022-12-15 16:10:34 发布

阅读量384

点赞数

分类专栏： js jquery

本文链接：https://blog.csdn.net/lhy_loveit/article/details/78020244

版权

js 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

选择器是对DOM元素对象的选择和定位。

基本选择器
更具基本的元素信息过去元素对象,如ID,Class,标签等。

  //ID选择器：格式为：$("#ID");只会获取一个元素节点
$("#box").css("background-color","orange");

//标签元素选择器：可获取所有的元素节点//$("h2") 选择所有h2的元素
  $("p").css("color","green");

//类(class)选择器 $(".sp").css("color","yellow");

//全局选择器："*"选择全部
 $("*").css("font-size","40px");

//并集选择器：将每一个选择器匹配的元素合并后一起返回
//$("div,p,title");选取所有div、p和拥有class为title的元素相当于||
     $("p,.sp").css("color","#EEEEEE");

//交集选择器：匹配指定class或id的某元素或元素集合
//$("h2.title");选取所有拥有class为title的h2元素
 $("p.sp").css("color","black");

//html 代码
<style>
    // sp{} 即是给sp标签
    .sp{
        font-size:24px;
        color:red;
    }
  </style>
  <body>
    <center>
     <div id="box">
        I am a box
     </div>
     <div id="box">
        I am a box
     </div>
     <p> 我是一个p标签</p>
     <p class="sp"> 我是一个p标签</p>

      <span class="sp">
                  我是一个span 
      </span>

层次选择器
根据DOM元素节点之间的关系定位指定元素对象。

   //获取指定元素下所有的后代元素，格式：$("#box p").css.....constructor find('p');
     //$("#box2 div p").css("color","pink");     $("#box2").find("p").css("color","gray");
     //子代选择器
     //选取parent元素下的child（子）元素
     //同时JQuery也提供了一个children()方法
     //子代选择:用">"；后代用“空格”
     //$("#box2>p").css("color","red");
     //$("#box2").children("p").css("color","red");

     //相邻选择器：匹配所有紧接在指定元素后的 同级 的下一个元素
     //同时jQuery 也提供了一个next()方法
  //$("#p5").prev().css("color","blue"); //prev()指前一个    //$("#p5").next().css("color","green");//next()指下一个

 //格式:$(" h2+d1 ");选取紧邻<h2>元素之后的同辈元素<d1>     //$("#p5+p").css("color","orange");

 //找到与Id p5同级的Id p       $("#p5~p").css("color","yellow");  
 //同时JQuery也提供了一个nextAll()方法
 $("#box2").nextAll("p").css("color","blue");

//html 代码块
<style>
    // sp{} 即是给sp标签
    .sp{
        font-size:24px;
        color:red;
    }
  </style>
  <body>
    <center>
     <div id="box">
        I am a box
     </div>
     <div id="box">
        I am a box
     </div>
     <p> 我是一个p标签</p>
     <p class="sp"> 我是一个p标签</p>

      <span class="sp">
                  我是一个span 
      </span>
      <hr size="5"/>
      <h1>层次选择器</h1>
       <div id="box2">
         <p>p1</p>
         <p>p2</p>
         <p>p3</p>
         <div>
          <p>p4</p>
          <p id="p5">p5</p>
          <p>p6</p>
         </div>
       </div>
    </center>
  </body>

过滤选择器
根据一定的规则定位元素对象

//html 代码块
       <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>

$(function(){          
  //:first() 获取匹配的第一个元素;:last() 获取匹配的最后一个元素

  //$("li").last().css("color","red");
       //alert("11");
  //:not 去除所有与给定选择器匹配的元素
   //:even 匹配所有索引值为偶数的元素，从 0开始计数;:odd 匹配所有索引值为奇数的元素，从 0 开始计数

//$("li").not(":even").css("color","blue");
  //:eq() 匹配一个给定索引值的元素,从 0 开始计数;:gt() 匹配所有大于给定索引值的元素
,从 0 开始计数;:lt 匹配所有小于给定索引值的元素,从 0 开始计数;
  $("li").eq(1).css("color","orange");
  $("li:gt(0)").css("color","orange");
    });

//html 代码块
  <h1>hello world!!!</h1>
  <h5>hello world!!!</h5>

$(function(){
// :header 匹配如 h1, h2, h3之类的标题元素,给页面内所有标题加上背景色
 $(":header").css("color","red");

    });

属性选择
根据元素的特有属性或者属性值定位元素对象。

<table id="tab" border="1" cellpadding="0" cellspacing="0">
          <tr>
             <td>姓名</td>
             <td>性别</td>
             <td>年龄</td>
          </tr>
          <tr>
             <td>jack</td>
             <td>male</td>
             <td>20</td>
          </tr>
          <tr>
             <td>rose</td>
             <td class="sexfemale">female</td>
             <td>18</td>
          </tr>
          <tr>
             <td>tom</td>
             <td class="sexmale">male</td>
             <td>25</td>
          </tr>
       </table>

        //属性选择器 $("[key?value]");
        //$("[class]").css("color","red");
        //$("[class=sexfemale]").css("color","red");
          //以 sex 开头 $("[属性^=vulue]");
          //$("[class ^=sex]").css("color","blue");
          //以 le 结尾 $("[属性$=vulue]");
          //$("[class $=le]").css("color","red");
          //包含 ma值 $("[属性*=vulue]");
         // $("[class *=ma]").css("color","blue");

选择器中特殊符号的处理
符号的转义

<div id="id#a">aa</div>
<div id="id[2]">cc</div>

用反斜杠来进行转义

//错误的写法
$("#id#a");                
$("#id[2]");               
//正确的写法
$("#id\\#a");              
$("#id\\[2\\]");

lhy_loveit

关注

0
点赞
踩
0

收藏

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

选择器是对DOM元素对象的选择和定位。基本选择器更具基本的元素信息过去元素对象,如ID,Class,标签等。 //ID选择器：格式为：$("#ID");只会获取一个元素节点$("#box").css("background-color","orange"); //标签元素选择器：可获取所有的元素节点//$("h2") 选择所有h2的元素 $("p").css("color","
复制链接

扫一扫