jQuery selector
jQuery selectors allow you to operate on groups of HTML elements or individual elements.
jQuery Selectors
jQuery selectors allow you to operate on groups of HTML elements or on individual elements.
jQuery selectors "find" (or select) HTML elements based on the element's id, class, type, attributes, attribute values, etc. It is based on existing CSS selectors, in addition to some custom selectors.
All selectors in jQuery begin with a dollar sign: $().
Element Selector
jQuery element selector selects elements based on their name.
Select all <p> elements in the page:
Example
After the user clicks the button, all <p> elements are hidden:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>Run Example»
Click the "Run Example" button to view the online example
#id selector
jQuery #id selector selects the specified element through the id attribute of the HTML element.
The id of the element in the page should be unique, so if you want to select the unique element in the page, you need to pass the #id selector.
The syntax for selecting elements by id is as follows:
Example
When the user clicks the button, the element with the id="test" attribute will be hidden:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>
</html>Run Example»
Click the "Run Example" button to view the online example
.class selector
jQuery class selector can find elements through the specified class.
The syntax is as follows:
Instance
The user clicks the button All elements with class="test" attributes are hidden:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html>Run Example»
Click the "Run Instance" button to view the online instance
More examples
| Syntax | Description | Examples |
|---|---|---|
| $("*") | Select all elements | Online example |
| $(this) | Select the current HTML element | Online example |
| $("p.intro") | Select the <p> element with class intro | Online example |
| $("p:first") | Select the first <p> element | Online example |
| $("ul li:first") | Select the first <li> element of the first <ul> element | Online example |
| $("ul li:first-child") | Select the first <li> element of each <ul> element | Online example |
| Select elements with href attributes | Online example | |
| Select all <a> elements whose target attribute value is equal to "_blank" | Online example | |
| Select all <a> elements whose target attribute value is not equal to "_blank" | Online example | |
| Select all <input> elements and <button> elements of type="button" | Online Example | |
| Select the <tr> element in the even position | Online Example | |
| Select the <tr> element at an odd number position | Online example |
Using jQuery functions in separate filesIf your website contains many pages and you want your jQuery functions to be easy to maintain, then please put your jQuery functions into separate files .js file. When we demonstrate jQuery in the tutorial, we add the function directly into the <head> section. However, it would be better to put them in a separate file, like this (referencing the file through the src attribute):
<script src="my_jquery_functions.js "></script></head>
