`

jQuery选择器

 
阅读更多

基本选择器

基本选择器:#id, .class,element ,*, selector1,selector2....,selectoN

#id  根据id匹配一个元素

 

$("#choose").css("background-color","#B2E0FF");
//选取id为 choose的元素背景颜色

 .class 根据给定的类名匹配元素  遍历css元素

 

$("#choose").css("background-color","#B2E0FF");
//选取id为 choose的元素背景颜色
与 id 选择器不同，class 选择器常用于多个元素。

 element 选取带有指定标签名的元素    (遍历html元素)

 

 

 $("p").css("background-color","#B2E0FF");
//选取所有的p元素

 * 匹配所有元素

 

 

$("*")选取所有的元素

 层次选择器

 

$("ancestor descendant")选取ancestor 元素里所有descendant后代元素

 

$("body div").css("background"."#bbffaa")
改变<body>内所有的<div>的背景色

 $("parent>child")选取parent元素下的child子元素

 

 

 

 $('div > span').css('color', '#FF0000');
//选取div下的第一代span元素，将字体颜色设为红色

 $("prev+next")选取紧接在prev元素后的next元素

 

 

  $('.item + div').css('color', '#FF0000');
    
});

<p class="item"></p>
<div>123</div>
<div>456</div>
<span class="item"></span>
<div>789</div>
只有123  789变色
//选取class为item的下一个div兄弟元素

 $("prev~siblings")选取prev元素之后的所有siblings元素

 

    $('.inside ~ div').css('color', '#FF0000');
   
});

<div class="inside">123</div>
<div>456</div>
<span>789</span>
<div>10 11 12</div>
456 10 11 12会变色 
/// 选取class为inside之后的所有div同辈元素

 过滤选择器: :first :last :not(selector) :even :odd :eq(index) :gt(index) :lt(index) :header :animated :focus

 

 :first :last  取第一个和最后一个元素

 

  $('div:first').css('color', '#FF0000');
            $('div:last').css('color', '#FF0000');
        });

<div>123</div>
<div>456</div>
<div>789</div>
//选取所有<div>元素第一个<div>元素和最后一个<div>元素
// 123    789会变色

:not(selector)去除所有与给定选择器匹配的元素

 

 

$(document).ready(function () {
            $('div:not(.wrap)').css('color', '#FF0000');
        });

<div>123</div>
<div class="wrap">456</div>
//选取class不为wrap的 <div>
//123变色

  :even 选取索引是偶数的所有元素 ,索引从0开始   :odd选取索引是奇数的所有元素

 

 

$('tr:even').css('background', '#EEE'); // 偶数行颜色
            $('tr:odd').css('background', '#DADADA'); // 奇数行颜色

 :eq(index)取指定索引的元素

 

 

$('tr:eq(2)').css('background', '#FF0000');
//从第三个背景色变色

 :gt(x)取大于x索引的元素 :lt(x)小于x索引的元素

 $('ul li:gt(2)').css('color', '#FF0000');
            $('ul li:lt(2)').css('color', '#0000FF');

<ul>
    <li>L1</li>
    <li>L2</li>
    <li>L3</li>
    <li>L4</li>
    <li>L5</li>
</ul>
L4和L5会是红色，L1和L2会是蓝色，L3是默认颜色

 

 

 

分享到：
| jQuery 语法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics