jQuery学习篇(2)_jQuery 选择器



jQuery 选择器允许对 HTML 元素组或单个元素进行操作

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素

jQuery 中所有选择器都以美元符号开头：$()

元素选择器

$("p") 在页面选择所有<p>元素

$(document).ready(function(){

  $("button").click(function(){

    $("p").hide();

  });

});

#id选择器

$("#test") 在页面选择id为"test"的元素

$(document).ready(function(){

  $("button").click(function(){

    $("#test").hide();

  });

});

.class选择器

$(".test")  在页面选择带有class="test"的元素

$(document).ready(function(){

  $("button").click(function(){

    $(".test").hide();

  });

});

其他实例

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

$(document).ready(function(){
  $("button").click(function(){
    $("*").hide();
  });
});

$(this)选取当前html元素

$(document).ready(function(){
  $("button").click(function(){
    $(this).hide();
  });
});

$("p.intro")选取class为intro的<p>元素

$(document).ready(function(){
  $("button").click(function(){
    $("p.intro").hide();
  });
});

$("p:first")选取第一个<p>元素

$(document).ready(function(){
  $("button").click(function(){
    $("p:first").hide();
  });
});

$("ul li:first")选取第一个<ul>元素的第一个<li>元素

$(document).ready(function(){
  $("button").click(function(){
    $("ul li:first").hide();
  });
});

$("ul li:first-child")选取每个<ul>元素的第一个<li>元素

$(document).ready(function(){
  $("button").click(function(){
    $("ul li:first-child").hide();
  });
});

$("[href]")选取带有href属性的元素

$(document).ready(function(){
  $("button").click(function(){
    $("[href]").hide();
  });
});

$("a[target='_blank']")选取所有target属性值等于"_blank"的<a>元素

$(document).ready(function(){
  $("button").click(function(){
    $("a[target='_blank']").hide();
  });
});

$("a[target!='_blank']")选取所有target属性值不等于"_blank"的<a>元素

$(document).ready(function(){
  $("button").click(function(){
    $("a[target!='_blank']").hide();
  });
});

$(":button")选取所有type="button"的<input>元素和<button>元素

$(document).ready(function(){
  $("button").click(function(){
    $(":button").hide();
  });
});

$("tr:even")选取偶数位置的<tr>元素

$(document).ready(function(){
  $("tr:even").css("background-color","yellow");
});

$("tr:odd")选取奇数位置的<tr>元素

$(document).ready(function(){
  $("tr:odd").css("background-color","yellow");
});