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>
Next Section