$("ancestor descendant"): Select all child elements after the parent element
$("parent > child"): Select all the child elements directly after the parent element, what is "directly", that is, the meaning of the first level
$( "prev + next"): prev and next are two elements of the same level. Select the next element after the prev element
$("prev ~ siblings"): Select the element filtered by siblings after the prev element. Note: siblings are filters. I want to talk about it
here . Since the last two are used less often, they are usually replaced by other selectors. Please see the following:
$("prev + next") is equivalent to next()
$("prev ~ siblings") is equivalent to nextAll().
The specific usage will be discussed later.
===================================================== ==========================
Let's take a closer look at the 4 level selectors
[1] $("ancestor descendant"): select parent All the child elements behind the element
ancestors mean "ancestor" in Chinese, descendant means "descendants" in Chinese, just like the way CSS defines hierarchical elements, only need to have spaces between different elements, the former parent, the latter children, and so on, and we write it like this, $("
$("body div") selects all div elements under the body element.
$("ul li") selects all li elements under the ul element.
$("#test div") Selects all div child elements contained in the element with id "test"
$("div#test div") Selects all div child elements contained in the div with id "test"
$ (".test div") Select all div sub-elements contained in the element with class "test"
$("div.test span") Select all span sub-elements contained in the div with class "test"
$( "span.test .demo") Select all the elements with class demo contained in the span with class "test"
$(".test .demo") Select all the classes contained in the element with class "test" as Element of demo
[2] $("parent > child"): Select all the child elements directly under the parent element, what is "directly under", that is, the meaning of the first level
$("body > div") Select under the body element All first level div elements.
$("ul > li") selects all first-level li elements under the ul element.
$("#test > div") Selects all first-level div child elements contained in the element with id "test"
$("div#test >
$("div.test > span") Select all first-level span sub-elements contained in the div with class "test"
$("span.test > .demo") Select the span contained in the class "test" All the elements whose first-level class is demo
$(".test > .demo") Select all the first-level class elements contained in the element whose class is "test"
[3] $("prev + next"): prev and next are two elements of the same level. Select the next element after the prev element.
(1) $("div + p") means to select the p element immediately after the div element
(2) $("#demo+img") selects the img object whose id is behind the demo element. If there is no img object of the same level after the id is the demo element, then this $("#demo+img").length=0
[4] $("prev ~ siblings"): Select the elements filtered by siblings after prev. Note: siblings are filters.
(1) $("div ~ p") means to match all p elements following the div element
(2) $("#demo~[title]") selects all elements with the title attribute after the element whose id is demo , and also if there is no element with a title attribute after the element with the id of demo, then $("#demo~[title]").
$(".one + div") is equivalent to $(".one").next("div")
$("#prev ~ div") is equivalent to $(".prev").nextAll("div ")
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Instance</title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#bt1").click(function(){
$("div > p").text("We are all sons in div, our name is p. Remember the relationship of $(\"father > son > ...\") in the tutorial? I selected this way $(\"div > p\")");
})
$("#bt2").click(function(){
$("div + p").text("I follow the p next to the div, so of course I have to use "+" to connect them closely. I chose this way $(\" div + p\")");
})
$("#bt3").click(function(){
$("div ~ p").text("We are followers of div, our name is p to be selected this way $(\"div ~ p\")");
})
})
</script>
</head>
<body>
<input id="bt1" type="button" value="Get all p tags under the div"/>
<input id="bt2" type="button" value="matches an element immediately following the p element of the div"/>
<input id="bt3" type="button" value="matches all p elements that follow the div element"/>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
</body>
</html>