jQurey 选择器

选择器 :

基本选择器:

$("*").css("border","3px solid red"); 查找文档中的每一个元素（包括 head, body 等）

$(".myClass").css("border","3px solid red"); 类选择器

$("div").css("border","9px solid red"); 标签选择器,选择所有div标签

$("#myDiv").css("border","3px solid red"); id 选择器

$("div,span#fuck,p.myClass").css("border","3px solid red"); 分组选择器,div,span#fuck,p.myClass 都会被选择

分层选择器:

$("ul.topnav > li").css("border", "3px double red"); 只选择 ul.topnav 的li子元素,子孙元素不选取

$("form input").css("border", "2px dotted blue"); 选取 form 的所有 input 的子孙元素

$("label + input").css("color", "blue"); 选取label后的第一个是input的兄弟节点

$("#prev ~ div").css("border", "3px groove blue"); 选取label后的所有是div 的兄弟节点

基本筛选:
$("div:animated").toggleClass("colored"); 正在进行动画的标签.
function animateIt() {
   $("#mover").slideToggle("slow", animateIt);  回调animateIt函数
}
animateIt(); 不停的滑入滑出
$("td:eq(-2)").css("color", "red"); 选择td 集合中的倒数第二个,index为正数是,从0开始计数,类似数组

$("tr:even").css("background-color", "#bbbbff"); 从0开始计数,选择元素集合中的偶数的元素.

$("tr:odd").css("background-color", "#bbbbff"); 从0开始计数,选择元素集合中的奇数的元素.

$("tr:first").css("font-style", "italic"); :first伪类选择器相当于:eq(0) 总共只会选择一个元素,但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素

jQuery( ":gt(index)" ) 所有大于给定index（索引值）的元素。
$( "td:gt(-2)" ).css( "color", "red" ); -index: 从0开始计数的索引值。所以倒数第二以后的只有倒数第一

$(":header").css({ background:'#CCC', color:'blue' }) 选择所有的标题元素 h1,h2,h3

$("div:lang(en)")将匹配<div lang="en"> and <div lang="en-us">（和他们的后代<div>），但不包括<div lang="fr">

$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'}); 和first 相反

jQuery( ":lt(index)" ) 和 :gt相反,选取小于索引值的

$("input:not(:checked) + span").css("background-color", "yellow"); :not 除了被checked的 input 元素
$(":root") 选择的元素一样，永远是<html>元素。
$( "<b></b>" ).html( $( ":root" )[0].nodeName ).appendTo( "#log" );
产生一个 <b>HTML</b> 标签  添加到 id=log的元素,作为last子元素
$( "p:target" ) 给定的URI http://example.com/#foo，将选择<p id="foo">元素。
内容筛选:
$("div:contains('John')").css("text-decoration", "underline"); div 内含有指定子文本的div元素

$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)'); :empty选择所有没有子元素得到元素,包括文本节点

$("div:has(p)").addClass("test"); div 后代元素中有 p元素

$("td:parent").fadeTo(1500, 0.3); 选择所有含有子元素或者文本的td元素。 !!!子元素为文本也算

$("div:hidden").show(3000); 所有隐藏的div 元素将显示隐藏条件 : 1.父元素隐藏,2.display:none ;3宽和高都是0 ;4 <input>中type='hidden' //<div></div>不算隐藏

$("div:visible").click(function(){ $(this).css('background','red')}); 所有可见的div元素添加click事件

$("div span:first-child") 选择所有父级元素下的第一个子元素。:first 是元素集合中的第一个元素->相反[ (":last-child") ]
$("span:first-of-type") ->相反[ (":last--of-type") ]
  <div> 四个子元素 中选择第一个span 
    <span>Corey,</span> <---就是它
    <span>Yehuda,</span>
    <span>Adam,</span>
    <span>Todd</span>
  </div>
  <div> 四个子元素 中选择第一个span
    <b>Nobody,</b>
    <span>Jörn,</span>  <---就是它
    <span>Scott,</span>
    <span>Timo</span>
  <div>
   选择器匹配元素，在文档树中，相同的父元素并且在其他相同的元素名称之前的选择一个。
$("ul li:nth-child(2)") 选择的他们所有父元素的第n个子元素。

$("ul li:nth-last-child(2)") 计数从最后一个元素开始到第一个。

$("div button:only-child") 某个元素是其父元素的唯一子元素
表单筛选 :

$(":button") =$("button, input[type='button']")所有的button 元素

$(':checkbox')= $('[type=checkbox]')

$( "input:checked" ).length; 选择器适用于复选框（checkbox）

$("input:disabled") input 被禁用的

$('input:enabled') 检查元素的disabled属性是否严格等于false

$(:not([disabled])) 检查是disabled 属性（attribute）没有被设置

$(':focus')等同为$('*:focus') 获取焦点的元素

$(':file') 等同于 $('*:file')，所以应该使用$('input:file')

$("input:image")

$(":input"); $(':password') jQuery( ":radio" )

选择器 :

基本选择器:

分层选择器:

基本筛选:

内容筛选:

表单筛选 :

猜你喜欢