jQurey 选择器

选择器 :

基本选择器:

 

  1. $("*").css("border","3px solid red");  查找文档中的每一个元素(包括 head, body 等)
  2. $(".myClass").css("border","3px solid red"); 类选择器
  3. $("div").css("border","9px solid red");  标签选择器,选择所有div标签
  4. $("#myDiv").css("border","3px solid red");  id 选择器
  5. $("div,span#fuck,p.myClass").css("border","3px solid red"); 分组选择器,div,span#fuck,p.myClass 都会被选择

分层选择器:

 

  1. $("ul.topnav > li").css("border", "3px double red");  只选择 ul.topnav 的li子元素,子孙元素不选取
  2. $("form input").css("border", "2px dotted blue");  选取  form 的所有 input 的子孙元素
  3. $("label + input").css("color", "blue");  选取label后的第一个是input的兄弟节点
  4. $("#prev ~ div").css("border", "3px groove blue"); 选取label后的所有是div 的兄弟节点

基本筛选:

 

  1. $("div:animated").toggleClass("colored");   正在进行动画的标签.
    function animateIt() {
       $("#mover").slideToggle("slow", animateIt);  回调animateIt函数
    }
    animateIt(); 不停的滑入滑出
  2. $("td:eq(-2)").css("color", "red");  选择td 集合中的倒数第二个,index为正数是,从0开始计数,类似数组
  3. $("tr:even").css("background-color", "#bbbbff"); 从0开始计数,选择元素集合中的偶数的元素.
  4. $("tr:odd").css("background-color", "#bbbbff")从0开始计数,选择元素集合中的奇数的元素.
  5. $("tr:first").css("font-style", "italic");   :first伪类选择器相当于:eq(0) 总共只会选择一个元素,但是:first-child选择器可以匹配多个:即为每个父级元素匹配第一个子元素
  6. jQuery( ":gt(index)" )  所有大于给定index(索引值)的元素。
    $( "td:gt(-2)" ).css( "color", "red" );  -index: 从0开始计数的索引值。所以倒数第二以后的只有倒数第一

  7. $(":header").css({ background:'#CCC', color:'blue' })   选择所有的标题元素  h1,h2,h3
  8. $("div:lang(en)")将匹配
     and 
    (和他们的后代
    ,但不包括
  9. $("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'}); 和first 相反
  10. jQuery( ":lt(index)" )   和 :gt相反,选取小于索引值的
  11. $("input:not(:checked) + span").css("background-color", "yellow");  :not 除了被checked的 input 元素
  12. $(":root") 选择的元素一样, 永远是元素。
    $( "" ).html( $( ":root" )[0].nodeName ).appendTo( "#log" );
    产生一个 HTML 标签  添加到 id=log的元素,作为last子元素
  13.  $( "p:target" )  给定的URI http://example.com/#foo,将选择

    元素。

内容筛选:

 

 

  1. $("div:contains('John')").css("text-decoration", "underline");  div 内含有指定子文本的div元素
  2. $("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');  :empty选择所有没有子元素得到元素,包括文本节点
  3. $("div:has(p)").addClass("test");  div 后代元素中有 p元素
  4. $("td:parent").fadeTo(1500, 0.3);  选择所有含有子元素或者文本的td元素。 !!!子元素为文本也算
  5. $("div:hidden").show(3000);   所有隐藏的div 元素将显示  隐藏条件 : 1.父元素隐藏,2.display:none ;3宽和高都是0 ;4 中type='hidden' //
    不算隐藏
  6. $("div:visible").click(function(){ $(this).css('background','red')}); 所有可见的div元素添加click事件
  7. $("div span:first-child")   选择所有父级元素下的第一个子元素。:first 是元素集合中的第一个元素->相反[ (":last-child"]
  8. $("span:first-of-type") ->相反[ (":last--of-type"]
      
    四个子元素 中选择第一个span Corey, <---就是它 Yehuda, Adam, Todd
    四个子元素 中选择第一个span Nobody, Jörn, <---就是它 Scott, Timo
    选择器匹配元素,在文档树中,相同的父元素并且在其他相同的元素名称之前的选择一个。

     

  9.  $("ul li:nth-child(2)")  选择的他们所有父元素的第n个子元素。

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

  11. $("div button:only-child") 某个元素是其父元素的唯一子元素

表单筛选 : 

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

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

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

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

  5. $('input:enabled')   检查元素的disabled属性是否严格等于false 
  6. $(:not([disabled])) 检查是disabled 属性(attribute)没有被设置
  7. $(':focus')等同为$('*:focus') 获取焦点的元素
  8. $(':file') 等同于 $('*:file'),所以应该使用$('input:file')
  9. $("input:image") 
  10. $(":input");  $(':password')  jQuery( ":radio" )

     

     

你可能感兴趣的:(jQuerry)