jQuery selector
jQuery Selectors
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 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:
$("p")
Example
After the user clicks the button, all< p> All elements are hidden:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery示例</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>這是一個(gè)標(biāo)題</h2>
<p>這是一個(gè)段落。</p>
<p>這是另一個(gè)段落。</p>
<button>點(diǎn)我</button>
</body>
</html>#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 only element in the page, you need to use the #id selector.
The syntax for selecting elements by id is as follows:
$("#test")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>好好學(xué)習(xí)</h2>
<p>天天向上</p>
<p id="test">PHP測試</p>
<button>點(diǎn)我</button>
</body>
</html>.class selector
The jQuery class selector can find elements by specifying the class.
The syntax is as follows:
$(".test")
Grammar ??????????????????????????????????????????????????????????????????? Description
$("*") ??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? Select all elements????????????????????????????????????????????????????????????????????????????????Select the<p> whose class is intro Elements
$("p:first") ??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? Selects the first <p> element li> element
$("ul li:first-child") Selects the first <li> element of each <ul> element
$("[href]" ) Select element with href attribute
$ ("a [target = '_lank']") Select all target attribute values ??equal to "_blank" & lt; a & gt; element
## $ ( "a[target!='_blank']") Select all<a> elements whose target attribute value is not equal to "_blank" $(":button") Select all< of type="button" Input & gt; element and & lt; button & gt; element $ ("tr: event") Select the even position of & lt; tr & gt $ ("tr: ODD"). The <tr> elementUsing jQuery functions in standalone files
If your website contains many pages and you want your jQuery functions to be easy to maintain, then please Put your jQuery functions into separate .js files.
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 via the src attribute):<head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script src="my_jquery_functions.js"></script> </head>
