选择器

最新推荐文章于 2024-04-19 11:18:43 发布
今天又困了吗
最新推荐文章于 2024-04-19 11:18:43 发布
阅读量120
点赞数
本文链接：https://blog.youkuaiyun.com/weixin_45747582/article/details/102655748
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
   // #id :根据给定的ID匹配一个元素。
$("#idName");

   // .class: 根据给定的css类名匹配元素。
$(".className");

   // element: 根据给定的元素标签名匹配所有元素
    $("div");

    //:匹配所有元素
    $("");

   // selector1,selector2,selectorN:将每一个选择器匹配到的元素合并后一起返回。
$("div,span,p.className");

   // ancestor descendant:在给定的祖先元素下匹配所有的后代元素
    $(“form input”)；

//parent > child：在给定的父元素下匹配所有的子元素
    $(“form > input”)

  //  prev + next：匹配所有紧接在 prev 元素后的 next 元素
    $(“label + input”)

  //  prev ~ siblings： 匹配 prev 元素之后的所有 siblings 元素
    $(“form ~ input”)；

   // :first： 获取第一个元素
    $(‘li:first’);

  //  :not(selector)：去除所有与给定选择器匹配的元素
    $(“input:not(:checked)”)；

   // :even：匹配所有索引值为偶数的元素，从 0 开始计数
    $(“tr:even”)；

   // :odd：匹配所有索引值为奇数的元素，从 0 开始计数
    $(“tr:odd”)；

  //  :eq(index) ： 匹配一个给定索引值的元素
    $(“tr:eq(1)”)；

   // :gt(index)：匹配所有大于给定索引值的元素
    $(“tr:gt(0)”)；

   // :lang(language)：选择指定语言的所有元素。
$(“p:lang(it)”)

 //   :last() ：获取最后个元素
    $(‘li:last’)；

 //   :lt(index)：匹配所有小于给定索引值的元素
    $(“tr:lt(2)”)

  //  :header ：匹配如 h1, h2, h3之类的标题元素
    $(":header").css(“background”, “#EEE”);

  //  :animated：匹配所有正在执行动画效果的元素
    $("#run").click(function(){
        $(“div:not(:animated)”).animate({ left: “+=20” }, 1000);
    });

    //:focus ：匹配当前获取焦点的元素。
$( '#content ').delegate( '*', 'focus blur', function( event ) {
        var elem = $( this );
        setTimeout(function() {
            elem.toggleClass( 'focused', elem.is( ':focus' ) );
        }, 0);
    });

   // :root：选择该文档的根元素。
$(":root").css(“background-color”,“yellow”);

   // :contains(text)：匹配包含给定文本的元素
    $(“div:contains(‘John’)”)

  //  :empty：匹配所有不包含子元素或者文本的空元素
    $(“td:empty”)

   // :has(selector)：匹配含有选择器所匹配的元素的元素
    $(“div:has§).addClass(“test”);

   // :parent：匹配含有子元素或者文本的元素
    $('td:parent');

  //  :hidden ：匹配所有不可见元素，或者type为hidden的元素
    $('tr:hidden');

   // :visible ：匹配所有的可见元素
    $('tr:visible')

 //   [attribute] ：匹配包含给定属性的元素
    $('div[id]')

  //  [attribute=value] ：匹配给定的属性是某个特定值的元素
    $('input[name=‘newsletter’]').attr('checked', true);

   // :first-child ：匹配所给选择器( :之前的选择器)的第一个子元素
    $('ul li:first-child')

    //:last-child：匹配最后一个子元素
    $('ul li:last-child')

    //:only-child ：如果某个元素是父元素中唯一的子元素，那将会被匹配
    $('ul li:only-child')

   // :input：匹配所有 input, textarea, select 和 button 元素
    $(":input")