jQuery选择器

jQuery 选择器是一个jQuery库的重要组成部分。

jQuery选择器

jQuery 选择器允许你选择和操作HTML元素。

jQuery选择器是用来“发现”（或选择）的HTML元素，根据其名称、id、类、类型、属性、属性值等.

它是基于现有的CSS选择器，另外，它有一些自定义的选择器。

jQuery中所有的选择器，开始使用美元符号和括号: $().

元素选择器

jQuery元素选择器选择元素基于元素名称.

你可以像这样，选择所有的<p>:

$("p")

实例

当用户点击按钮时, 所有<p>元素将隐藏:

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

让我试试

#id选择器

jQuery #id 选择器，使用id属性来找到特点元素.

ID在页面中应该是唯一的, 所有当你想找一个唯一的元素，可以使用#id选择器

使用id查找元素，前面使用一个井号(#)，后面紧跟HTML id。

$("#test")

实例

当用户点击按钮时, id="test"的元素将隐藏:

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

让我试试

.class 选择器

jQuery 类选择器使用特定的class，找到元素.

使用特定的class找到元素，前面写一个点(.)，后面跟一个class名称：

$(".test")

实例

当用户点击按钮时, class="test"的元素将隐藏:

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

让我试试

jQuery 选择器的更多实例

语法	描述	实例
$("`*`")	选择所有元素	让我试试
$(this)	选择当前 HTML 元素	让我试试
$("p.intro")	选择所有 <p> 元素，使用 class="intro"	让我试试
$("p:first")	选择第一个 <p> 元素	让我试试
$("ul li:first")	选择第一个 <ul> 里面的 <li> 元素	让我试试
$("ul li:first-child")	选择每个<ul>里面的<li> 元素	让我试试
$("[href]")	选择有href属性的所有元素	让我试试
$("a[target='blank']")	选择所有 target属性值是 "blank" 的<a> 元素	让我试试
$("a[target!='blank']")	选择所有 target属性值不是 "blank" 的<a> 元素	让我试试
$(":button")	选择所有 type="button" 的<button> 和 <input> 元素	让我试试
$("tr:even")	选择所有<tr> 元素	让我试试
$("tr:odd")	选择所有奇数<tr>元素	让我试试

对于所有的jQuery选择器完全参考,请访问：jQuery Selectors Reference

单独文件中的函数

如果你的网站有很多网页，你想你的jQuery函数维护容易，你可以把你的jQuery函数放在一个单独的js文件中。

当我们在本教程演示jQuery时, 函数直接添加到<head>部分.然而，有时最好把它们放在一个单独的文件，像这样(使用src属性去引用.js文件):

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>