jQuery属性选择器，过滤选择器，通过标签关系获取元素

最新推荐文章于 2023-11-08 08:20:01 发布

这是一个对象

最新推荐文章于 2023-11-08 08:20:01 发布

阅读量215

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_67576744/article/details/126807754

版权

1，属性选择器

2，过滤选择器

3，通过标签关系获取元素

1，属性选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
  <p>段落1</p>
  <p id="p1">段落2</p>
  <p>段落3</p>
  <p>段落4</p>
  <p>段落5</p>
  <p>段落6</p>
</body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    $('p').css('color','red');  //所有p元素
    $('p[id]').css('color','yellow'); //p元素中，设置了id属性的所有元素。
    $('p[id=btn1]'); //p元素中，id=asd1的元素。
    $('p[id^=btn]'); //p元素中，id以asd开头的所有元素。
    $('p[id$=btn]'); //p元素中，id以bww结尾的所有元素。
    $('input[value][type=text]');   //同时满足多个属性条件，用[] []。input元素中，设置了value属性值，并且类型是text的所有元素。

</script>

</html>

2，过滤选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
   <ul class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
</body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    $('.list li:event') //偶数
    $('.list li:odd') //奇数
    $('.list li:eq(0)') //索引第几个,如果有多个相同类名只会找第一个索引
    $('.list li:lt(1)') //索引小于1
    $('.list li:gt(1)') //索引大于1
    $('.list li:header') //所有标题元素h1-h6
    $('.list li:first') //第一个
    $('.list li:last') //最后一个
    $('.list li:firstchild') //第一个儿子
    $('.list li:fastchild') //最后一个儿子
    $('.list li:nth-child()') //要找第几个
    $('.list li:not(;current)') //不包含current类名的



</script>

</html>

3，通过标签关系获取元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
   <ul class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
</body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    fiind()//查找指定后代必须传参
    parents()//祖先元素
    parent()//父元素
    children()//子元素
    next()//后一个兄弟标签
    nextAll()//后面所有兄弟标签
    prev()//前一个兄弟标签
    prevAll()//前面所有兄弟标签
    siblings()//所有兄弟标签不包含自身
</script>

</html>