首页>>网站建设>>Javascript>>经验笔记

jQuery 选择器可以说是jQuery的灵魂了，想要使用jQuery来操作html必须先要使用选择器选择操作对象才可以。

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

一、元素选择器

jQuery可以根据元素的名称来选择操作对象，比如以div或者p元素名称来笼统选择。

$("p")
$("div")

实例1：点击任意一个p元素，会弹出消息框

$(document).ready(function(){
  $("p").click(function(){
    alert("hello world");
  });
});

二、id选择器

jQuery的id选择器可以根据元素的id名称来选择，语法如下：

$("#idname")

请注意，id的名称前面有一个井号。

实例使用如下：

$(document).ready(function(){
  $("idname").click(function(){
    //这里是要实现的语句
  });
});

三、class选择器

jQuery的class选择器是根据元素的class的名称来选择操作对象的。语法如下：

$(".classname")

实例如下：

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

PS:请注意class选择器名称前面有一个点“.”号。

四、更多技巧

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

$(this)  选择当前元素

$("p.ceshi") 组合使用，选择p元素下class名称为ceshi的

$("p:first")  选择第一个p元素

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

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

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

$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素$("tr:even") 选取偶数位置的 <tr> 元素

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

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

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