jQuery selector

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

SyntaxDescription$(this)Current HTML element$("p")All<p> elements$("p.intro")All<p> elements with class="intro"##$(".intro ")$("#intro")$("ul li:first")$("[href$='.jpg']")$ ("div#intro .head")





All elements with class="intro"
Elements with id="intro"
The first<li> element of each<ul>
All href attributes with attribute values ending in ".jpg"
All elements with class="head" in the <div> element with id="intro"

Continuing Learning

new file

<!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").hide(); }); }); </script> </head> <body> <h2>标题</h2> <p>段落</p> <p id="test">#id选择器，点击我会隐藏</p> <button>点我</button> </body> </html>

submit Reset Code

Automatic operation

jQuery selector

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]