jQuery selector

What is a jQuery selector?

jQuery selector is one of the very important parts of the jQuery library. It supports CSS syntax familiar to web developers to set up pages quickly and easily. Understanding jQuery selectors is the key to opening the door to efficient jQuery development. A typical jQuery selector syntax form:
$(selector).methodName();
selector is a string expression that is used to identify elements in the DOM and is then provided using jQuery set of methods.
In most cases jQuery supports such operations:
$(selector).method1().method2().method3();
This example represents the id in the implicit DOM ="goAway" element, and then add a class="incognito" attribute to it.
$('#goAway').hide().addClass('incognito');
Tips: When the selector expression matches multiple elements, it can be used conveniently and flexibly like JavaScript array operations. Array pointer for selection. This is an example:
var element = $('img')[0];
Among the elements represented by the matching expression, the first element object will be assigned to the variable element.

Basic selector

1. Element selector

jQuery element selector is based on elements The name of the selected element.

<!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").hide();
  });
});
</script>
</head>
<body>
<h2>标题</h2>
<p>段落。</p>
<p>另一个段落。</p>
<button>点击隐藏P标签内容</button>
</body>
</html>

2. #id selector

<!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>
<p>段落</p>
<p id="test">另一个段落</p>
<button>点击隐藏id</button>
</body>
</html>

3.class selector

<!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 class="test">标题</h2>
<p class="test">段落。</p>
<button>点击隐藏所有class</button>
</body>
</html>

4.element selector

Set the text size of the p element to 12px:

$(document).ready(function () {
$('p').css('font-size' , '12px');
});

5. * Selector

$(document ).ready(function () {
). ## });

6. Parallel selector

$(document).ready(function () { // Set the margin of the p element and div element to 0 $('p, div').css('margin', '0');
});

Other hierarchical selectors and filter selectors will be introduced step by step in subsequent chapters.

Using jQuery functions in separate 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 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 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"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> </head> <body> <script> $(document).ready(function () { $('.cube').css('background', 'pink'); }); </script> <p class="cube" style="width: 50%;">选择器是jQuery最基础的东西</p> <p>选择器是jQuery最基础的东西</p> </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]