The core component of jQuery is: the selector engine, which inherits the CSS syntax and can quickly and accurately select the tag name, attribute name, status, etc. of DOM elements without worrying about browser compatibility.
So the jQuery selectors we introduce below are mostly similar to the CSS selectors we learned before
CSS selectors are used to find and locate elements on the page and set styles Go to the element
The jQuery selector is also used to find the element. After we find the element, we can use some given methods to modify, delete, or even move the element
When using the jQuery selector, we must use the "$()" function to wrap our css rules, and after the css rules are passed as parameters to the jQuery object, they are returned Contains the jQuery object of the corresponding element in the page. Then, we can perform behavioral operations on the obtained DOM node.
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> will change color:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css('color','red'); //添加一个行为
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>Run the program to try it
#id selector
jQuery #id selector selects the specified element through the id attribute of the HTML element.
Note: ID is only allowed to appear once on the page. We generally require developers to abide by and maintain this rule. But if you appear three times in the page and use css styles, then these three elements will still perform the effect. But if you do this in jQuery, you will encounter problems. Only one ID will take effect, so we must Make it a habit to use only one ID on the page
The syntax for selecting elements by id is as follows:
$("#test")
Example
When the user clicks the button, the element with the id="test" attribute will turn red:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").css('color','red');
});
});
</script>
</head>
<body>
<h2>标题</h2>
<p>段落</p>
<p id="test">我变颜色了</p>
<button>点我</button>
</body>
</html>Run the program and try it
.class selector
jQuery class selector can find elements by specifying class.
The syntax is as follows:
$(".test")
##Example
After the user clicks the button, all elements with class="test" attributes will change color:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").css('color','blue');
});
});
</script>
</head>
<body>
<h2 class="test">class选择器</h2>
<p class="test">class选择器</p>
<button>点我</button>
</body>
</html>Run the program to try it
More selector examples
Syntax | Description |
$(this) | Current HTML element |
$("p") | All<p> elements |
$("p.intro") | All<p> elements with class="intro" |
##$(".intro ")| All elements with class="intro" | |
$("#intro")| Elements with id="intro" | |
$("ul li:first")| The first<li> element of each<ul> | |
$("[href$='.jpg']")| All href attributes with attribute values ending in ".jpg" | |
$ ("div#intro .head")| All elements with class="head" in the <div> element with id="intro" | |
Next Section
