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>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</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>好好学习</h2>
<p>天天向上</p>
<p id="test">PHP测试</p>
<button>点我</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> element

Using 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>

Continuing Learning

new file

<!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 class="test">你马上就看不见我了</h2> <p class="test">你就要看不见我了</p> <p>为什么还能看见我</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]