conventional
1. Id selector
$("#myId")
Copy the codeClass selector
$(".myclass")
Copy the code3. Element selector
$("p")
Copy the code4. Wildcard *
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script type="text/javascript">
$("*").css({ "background-color": "gray"});
//$("html").css({ "background-color": "green"});
//$(":root").css({ "background-color": "red"});
</script>
</html>
Copy the code5, selector1 selector2, selectorN
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass"> p class="notMyClass"</p>
<p class="notMyClass">p class="notMyClass" </p>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script type="text/javascript">
// Match all elements that meet the criteria
page = {}
page.body = $("body");
page.body.find("div,span,p.myClass").css({
"background-color": "green"
});
</script>
</html>
Copy the codeDiv > p finds all p elements that must be children of the div element
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* div > p{ background-color:gray; } * /
</style>
</head>
<body>
<div>
<p>P1 label</p>
<p>P2 label</p>
<p>P3 label</p>
</div>
<p>Div outside the p4 tag</p>
</body>
<script src="Js/jquery - 1.7.1. Min. Js." "></script>
<script type="text/javascript">
page = {}
page.body = $("body");
page.body.find("div > p").css({"background-color":"green"});
//$(document.body).css( "background", "gray" );
</script>
</html>
Copy the code7. A + B matches all elements of B immediately following A
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
<label>Newsletter:22</label>
<input name="newsletter222" />
<input name="newsletter333" />
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script type="text/javascript">
// Matches all input elements immediately following the label label
page = {}
page.body = $("body");
page.body.find("label + input").css({"background-color":"green"});
</script>
</html>
Copy the codeA to B matches all ** elements of the same generation as **
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
<input name="none2" />
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script type="text/javascript">
// Matches all input elements of the same generation as the form
page = {}
page.body = $("body");
page.body.find("form ~ input").css({
"background-color": "green"
});
</script>
</html>
Copy the code9 :first Finds the first element that matches
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script type="text/javascript">
// Matches the first li element in ul
page = {}
page.body = $("body");
page.body.find("li:first").css({ "background-color": "green"});
</script>
</html>
Copy the code10 :last Finds the last element that matches
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script type="text/javascript">
// Matches the last li element in ul
page = {}
page.body = $("body");
page.body.find("li:last").css({ "background-color": "green"});
</script>
</html>
Copy the code11 :not Finds the first element that matches
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<span>basketball </span><input type="radio" name="ball" checked="checked" value="0"/>
<span>football </span><input type="radio" name="ball" value="1"/>
<span>football </span><input type="radio" name="ball" value="2"/>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script type="text/javascript">
//
page = {}
page.body = $("body");
page.body.find("input:not(:checked)").prev().css({ "color": "blue"});
page.body.find("input[name='ball']").click(function(){$(this).prev().css({ "color": ""});
page.body.find("input:not(:checked)").prev().css({ "color": "blue"});
})
</script>
</html>
Copy the code12, :eq(n) matches the element with li subscript n in UL
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script type="text/javascript">
// Match ul element with li subscript n
page = {}
page.body = $("body");
page.body.find("li:eq(2)").first().css({ "background-color": "green"});
</script>
</html>
Copy the code13. :odd matches an odd number
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<table>
<tr>
<td>Header 1</td>
</tr>
<tr>
<td>Value 1</td>
</tr>
<tr>
<td>Value 2</td>
</tr>
</table>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script type="text/javascript">
// Matches the odd rows in the table
page = {}
page.body = $("body");
page.body.find("tr:odd").css({ "background-color": "green"});
</script>
</html>
Copy the code14, :even matches even numbers
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<table>
<tr>
<td>Header 1</td>
</tr>
<tr>
<td>Value 1</td>
</tr>
<tr>
<td>Value 2</td>
</tr>
</table>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script type="text/javascript">
// Matches even rows in the table
page = {}
page.body = $("body");
page.body.find("tr:even").css({ "background-color": "red"});
</script>
</html>
Copy the code15, :gt(n) matches elements with subscripts greater than n
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<table>
<tr>
<td>Header 1</td>
</tr>
<tr>
<td>Value 1</td>
</tr>
<tr>
<td>Value 2</td>
</tr>
</table>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script type="text/javascript">
// Match tr rows with even subscripts greater than 0
page = {}
page.body = $("body");
page.body.find("tr:gt(0)").css({ "background-color": "red"});
</script>
</html>
Copy the code16, :lt(n) matches tr rows with subscripts less than n
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<table>
<tr>
<td>Header 1</td>
</tr>
<tr>
<td>Value 1</td>
</tr>
<tr>
<td>Value 2</td>
</tr>
</table>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script type="text/javascript">
// Match tr with subscript less than 2
page = {}
page.body = $("body");
page.body.find("tr:lt(2)").css({ "background-color": "red"});
</script>
</html>
Copy the code17, :header matches header elements such as H1, H2, h3
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<div>
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
</div>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script type="text/javascript">
// Match all h tags
page = {}
page.body = $("body");
page.body.find(":header").css({
"background-color": "red"
});
</script>
</html>Contans matches the element containing aCopy the code18. :empty matches all empty elements that do not contain child elements or text
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table tr td {
height: 20px;
width: 60px;
background-color: aqua;
border: 1px;
}
</style>
</head>
<body>
<table>
<tr>
<td>Value 1</td>
<td></td>
</tr>
<tr>
<td>Value 2</td>
<td></td>
</tr>
</table>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script type="text/javascript">
// Match all elements in the table where TD is empty
page = {}
page.body = $("body");
page.body.find("td:empty").css({
"background-color": "white"."border": "1 px solid rgba (204204204, 1)"
});
page.body.find("td:empty").append("--").css("text-align"."center");
</script>
</html>
Copy the code19, :parent Selects all parent elements that contain child or text nodes, as opposed to :empty.
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<button id="btn">To find the</button>
<div class="ancestors">
<div style="width:500px;">Div (great grandfather element)<ul>Ul (Grandfather element)<li>Li (parent element)<span>span</span>
</li>
</ul>
</div>
<div style="width:500px;">Div (grandfather element)<p>P (parent element)<span>span</span>
<span style="height: 23px;"></span>
</p>
</div>
</div>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script>
page = {}
page.body = $("body");
page.body.find("#btn").click(function() {
// Select all elements with child elements or containing text:
page.body.find("span:parent").css({
"color": "red"."border": "2px solid red"
});
})
</script>
</html>
Copy the code20, :contains(text) matches the element that contains text
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
height: 40px;
width: 100px;
background-color: aqua;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom john Sinclair</div>
<div>J. Ohn</div>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script type="text/javascript">
// Matches all elements that contain John,contains is case sensitive
page = {}
page.body = $("body");
page.body.find("div:contains('john')").css({
"background-color": "green"
});
</script>
</html>
Copy the code21, :has(selector) matches elements that contain elements matched by the selector
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
height: 60px;
width: 60px;
background-color: aqua;
margin: 10px;
font-size: 15px;
}
</style>
</head>
<body>
<div>
<p>Hello</p>
</div>
<div>Hello again!
<span id="span"></span>
</div>
<div>Hello again!
<h1 class="h1"></h1>
</div>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script type="text/javascript">
// Match div with p tag
page = {}
page.body = $("body");
//page.body.find("div:has(p)")
// page.body.find("div:has('#span')")
page.body.find("div:has(.h1)").css({
"background-color": "lightgray"."font-size": "20px"
});
</script>
</html>
Copy the code22: Visible matches all visible elements
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<span id="span1">Total number of Tr:</span>
<span id="span2">Number of tr displayed:</span>
<table>
<tr style="display:none">
<td>tr 1</td>
</tr>
<tr>
<td>tr 2</td>
</tr>
<tr>
<td>tr 2</td>
</tr>
</table>
</div>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script type="text/javascript">
//
page = {}
page.body = $("body");
page.body.find("#span1").append(page.body.find("tr").length+"；")
page.body.find("#span2").append(page.body.find("tr:visible").length)
</script>
</html>
Copy the code23 :hidden Matches all invisible elements, or elements of type hidden
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<span id="span1">Total number of Tr:</span>
<span id="span2">Number of tr hidden:</span>
<table>
<tr style="display:none">
<td>tr 1</td>
</tr>
<tr>
<td>tr 2</td>
</tr>
<tr>
<td>tr 3</td>
</tr>
</table>
</div>
<div class="div2">
<span id="div2_span">Total number of input:</span>
<span id="div2_span2">Number of hidden inputs:</span><br />
<input type="hidden" value="111"/>
<input type="text" value="222"/>
<input type="number" value="333"/>
</div>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script type="text/javascript">
//
page = {}
page.body = $("body");
page.body.find("#span1").append(page.body.find("tr").length+"；")
page.body.find("#span2").append(page.body.find("tr:hidden").length)
page.body.find("#div2_span").append(page.body.find("input").length+"；")
page.body.find("#div2_span2").append(page.body.find("input:hidden").length);
</script>
</html>
Copy the code24 [attribute] Matches the element containing the given attribute
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<button id="btn">Find div with id</button>
<div class="ancestors" style="width:500px;">
<div class="cla" name="11">
<p>Hello!</p>
</div>
<div id="test2" name="12">
<p>good!</p>
</div>
<div>
<p>Hi!</p>
</div>
</div>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script>
page = {}
page.body = $("body");
page.body.find("#btn").click(function() {
//page.body.find(".ancestors").find("div[id]").css({
//page.body.find(".ancestors").find("div[id='test2']").css({
//page.body.find(".ancestors").find("div[class]").css({
//page.body.find(".ancestors").find("div[class='cla']").css({
//page.body.find(".ancestors").find("div[name']").css({
page.body.find(".ancestors").find("div[name='11']").css({
"color": "red"."border": "2px solid red"
});
})
</script>
</html>
Copy the code[attribute!=value] matches all elements that do not have a specified attribute or that attribute is not equal to a specified value.
Equivalent to [: not (/ attr = value)]
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<button id="btn">To find the</button>
<div class="ancestors" style="width:500px;">
<div class="cla" name="11">
<p>Hello!</p>
</div>
<div id="test2" name="12">
<p>good!</p>
</div>
</div>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script>
page = {}
page.body = $("body");
page.body.find("#btn").click(function() {
page.body.find(".ancestors").find("div[id !='test2']").css({
// page.body.find("div:not([id='test2'])").css({
//page.body.find(".ancestors").find("div[name !='11']").css({
"color": "red"."border": "2px solid red"
});
})
</script>
</html>
Copy the code[attribute^=value] matches elements that start with some value for a given attribute
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors..ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<button id="btn">Matches elements that start with some value for a given attribute</button>
<div class="ancestors" style="width:500px;">
<input id="input1" class="first_input" name="newsletter" placeholder="newsletter"/>
<input id="input12" class="second_input" name="milkman" placeholder="milkman"/>
<input id="input33" class="third_input" name="newsboy" placeholder="newsboy"/>
</div>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script>
page = {}
page.body = $("body");
page.body.find("#btn").click(function() {
page.body.find(".ancestors").find("input[id ^='input1']").css({
//page.body.find(".ancestors").find("input[name ^='news']").css({
"color": "red"."border": "2px solid red"
});
})
</script>
</html>
Copy the code[attribute $= value] matches elements that end in certain values for a given attribute
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors..ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<button id="btn">Matches elements that end in some value for a given attribute</button>
<div class="ancestors" style="width:500px;">
<input id="input1" class="first_input" name="newsletter" placeholder="newsletter"/>
<input id="input12" class="second_input" name="milkman" placeholder="milkman"/>
<input id="input33" class="third_input" name="newsboy" placeholder="newsboy"/>
</div>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script>
page = {}
page.body = $("body");
page.body.find("#btn").click(function() {
page.body.find(".ancestors").find("input[class $='d_input']").css({
"color": "red"."border": "2px solid red"
});
})
</script>
</html>
Copy the code[attribute*=value] matches a given attribute to an element that contains certain values
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors..ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<button id="btn">Matches a given attribute to an element that contains some value</button>
<div class="ancestors" style="width:500px;">
<input id="input1" class="first_input" name="newsletter" placeholder="newsletter"/>
<input id="input12" class="second_input" name="milkman" placeholder="milkman"/>
<input id="input33" class="third_input" name="newsboy" placeholder="newsboy"/>
</div>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script>
page = {}
page.body = $("body");
page.body.find("#btn").click(function() {
//page.body.find(".ancestors").find("input[class *='d_in']").css({
page.body.find(".ancestors").find("input[id *= 'put1']").css({
"color": "red"."border": "2px solid red"
});
})
</script>
</html>
Copy the code29, :first-child matches the first child of the given selector (the selector before:)
The :first-child selector can match more than one: that is, matches the first child element for each parent element. This equals :nth-child(1)
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors..ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<button id="btn">:first-child matches the first child of the given selector (the selector before:)</button>
<p>li:first-child</p>
<div class="ancestors" style="width:500px;">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
</div>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script>
page = {}
page.body = $("body");
page.body.find("#btn").click(function() {
page.body.find(".ancestors").find("li:first-child").css({
"color": "red"."border": "2px solid red"
});
})
</script>
</html>
Copy the code30, :first-of-type The first child of type E that matches the parent element of E. Is equivalent to:nth-of-type(1)Selector.
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors..ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<button id="btn">Am I</button>
<div class="ancestors" style="width:500px;">
<div id="n2" class="abc">
<label id="n3">label1</label>
<span id="n4">span1</span>
<span id="n5" class="abc">span2</span>
<span id="n6">span3</span>
<div id="n7">
<span id="n8" class="abc">span1</span>
<span id="n9">span2</span>
</div>
</div>
<div id="n7">
<span id="n8" class="abc">span1</span>
<span id="n9">span2</span>
</div>
</div>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script>
page = {}
page.body = $("body");
page.body.find("#btn").click(function() {
page.body.find(".ancestors").find("span:first-of-type").css({
"color": "red"."border": "2px solid red"
});
})
</script>
</html>
Copy the code31, :last-child matches last child (each parent matches last child)
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors..ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<button id="btn">:last-child matches the last child of the given selector (the selector before:)</button>
<p>li:last-child</p>
<div class="ancestors" style="width:500px;">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
</div>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script>
page = {}
page.body = $("body");
page.body.find("#btn").click(function() {
page.body.find(".ancestors").find("li:last-child").css({
"color": "red"."border": "2px solid red"
});
})
</script>
</html>
Copy the code32, :last-of-type Last child of type E that matches the parent element of type E
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors..ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<button id="btn">Am I</button>
<div class="ancestors" style="width:500px;">
<div id="n2" class="abc">
<label id="n3">label1</label>
<span id="n4">span1</span>
<span id="n5" class="abc">span2</span>
<span id="n6">span3</span>
<div id="n7">
<span id="n8" class="abc">span1</span>
<span id="n9">span2</span>
</div>
</div>
<div id="n7">
<span id="n8" class="abc">span1</span>
<span id="n9">span2</span>
</div>
</div>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script>
page = {}
page.body = $("body");
page.body.find("#btn").click(function() {
page.body.find(".ancestors").find("span:last-of-type").css({
"color": "red"."border": "2px solid red"
});
})
</script>
</html>
Copy the code33, :nth-child(n) matches the NTH/odd/even element (n starts from 1) of the given selector.
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors..ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<button id="btn">:nth-child(n) matches the NTH child of the given selector (the selector before:)</button>
<p>li:nth-child(n)</p>
<div class="ancestors" style="width:500px;">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
</div>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script>
page = {}
page.body = $("body");
page.body.find("#btn").click(function() {
page.body.find(".ancestors").find("li:nth-child(2)").css({
//page.body.find(".ancestors").find("li:nth-child(even)").css({
//page.body.find(".ancestors").find("li:nth-child(odd)").css({
"color": "red"."border": "2px solid red"
});
})
</script>
</html>
Copy the code34, : the NTH – last – child (n | even | odd | formula) since the last find meet the conditions of the element
N (starting at 1) | | even even odd odd | formula for expression
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors..ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 10px;
}
</style>
</head>
<body>
<button id="btn">:nth-child(n) The last one to start looking for elements that satisfy the condition</button>
<p>li:nth-child(n)</p>
<div class="ancestors" style="width:500px;">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
<li>Kerwen</li>
<li>Linda</li>
<li>James</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
<li>Jack</li>
<li>Jackson</li>
<li>Paul</li>
<li>Thomas</li>
</ul>
</div>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script>
page = {}
page.body = $("body");
page.body.find("#btn").click(function() {
//page.body.find(".ancestors").find("li:nth-last-child(2)").css({
//page.body.find(".ancestors").find("li:nth-last-child(even)").css({
//page.body.find(".ancestors").find("li:nth-last-child(odd)").css({
page.body.find(".ancestors").find("li:nth-last-child(2n+1)").css({
"color": "red"."border": "2px solid red"
});
})
</script>
</html>
Copy the code35, NTH – of – type (n | even | odd | formula)
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors..ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 10px;
}
</style>
</head>
<body>
<button id="btn">:nth-of-type </button>
<p>li:nth-of-type()</p>
<div class="ancestors" style="width:500px;">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
<li>Kerwen</li>
<li>Linda</li>
<li>James</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
<li>Jack</li>
<li>Jackson</li>
<li>Paul</li>
<li>Thomas</li>
</ul>
</div>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script>
page = {}
page.body = $("body");
page.body.find("#btn").click(function() {
page.body.find(".ancestors").find("li:nth-of-type(2)").css({
//page.body.find(".ancestors").find("li:nth-of-type(even)").css({
//page.body.find(".ancestors").find("li:nth-of-type(odd)").css({
//page.body.find(".ancestors").find("li:nth-of-type(2n+1)").css({
"color": "red"."border": "2px solid red"
});
})
</script>
</html>
Copy the code36, : the NTH – last – of – type (n | even | odd | formula)
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors..ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 10px;
}
</style>
</head>
<body>
<button id="btn">:nth-last-of-type </button>
<p>li:nth-last-of-type()</p>
<div class="ancestors" style="width:500px;">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
<li>Kerwen</li>
<li>Linda</li>
<li>James</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
<li>Jack</li>
<li>Jackson</li>
<li>Paul</li>
<li>Thomas</li>
</ul>
</div>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script>
page = {}
page.body = $("body");
page.body.find("#btn").click(function() {
page.body.find(".ancestors").find("li:nth-last-of-type(2)").css({
//page.body.find(".ancestors").find("li:nth-last-of-type(even)").css({
//page.body.find(".ancestors").find("li:nth-last-of-type(odd)").css({
//page.body.find(".ancestors").find("li:nth-last-of-type(2n+1)").css({
"color": "red"."border": "2px solid red"
});
})
</script>
</html>
Copy the code37, :only-child matches an element that is unique in its parent class and has no sibling element
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors..ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 10px;
}
</style>
</head>
<body>
<button id="btn">:only-child </button>
<p>Li: Only child is unique in the parent class. It has no sibling element</p>
<div class="ancestors" style="width:500px;">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
<li>Kerwen</li>
<li>Linda</li>
<li>James</li>
</ul>
<ul>
<li>Thomas</li>
</ul>
</div>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script>
page = {}
page.body = $("body");
page.body.find("#btn").click(function() {
page.body.find(".ancestors").find("li:only-child").css({
"color": "red"."border": "2px solid red"
});
})
</script>
</html>
Copy the code38, only of type in the parent class, there is no sibling element of the same kind
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors..ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 10px;
}
</style>
</head>
<body>
<button id="btn">:only-of-type </button>
<p>Li: Only of type is unique in the parent class. There is no sibling element of the same type</p>
<div class="ancestors" style="width:500px;">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
<li>Kerwen</li>
<li>Linda</li>
<li>James</li>
</ul>
<ul>
<li>Thomas</li>
<span>Paul</span>
</ul>
<ul>
<span>Paul</span>
</ul>
</div>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script>
page = {}
page.body = $("body");
page.body.find("#btn").click(function() {
page.body.find(".ancestors").find("span:only-of-type").css({
"color": "red"."border": "2px solid red"
});
})
</script>
</html>
Copy the code39, :enabled Matches available
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.ancestors..ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<button id="btn">enabled </button>
<p>Enabled available</p>
<div class="ancestors" style="width:500px;">
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
</div>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script>
page = {}
page.body = $("body");
page.body.find("#btn").click(function() {
page.body.find(".ancestors").find("input:enabled").css({
"color": "red"."border": "2px solid red"
});
})
</script>
</html>
Copy the code40, :disabled Indicates that the match is unavailable
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="Icon" href=".. /img/favicon.ico" type="image/x-icon" />
<style>
.ancestors..ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<button id="btn">disabled </button>
<p>Disabled is not available</p>
<div class="ancestors" style="width:500px;">
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
</div>
</body>
<script src=".. / js/jquery - 1.7.1. Min. Js. ""></script>
<script>
page = {}
page.body = $("body");
page.body.find("#btn").click(function() {
page.body.find(".ancestors").find("input:disabled").css({
"color": "red"."border": "2px solid red"
});
})
</script>
</html>
Copy the code41、 :radio :input :password :text :button :image :checked :selected
:checkbox :submit :file :enabled :disabled
$.escapesElector (selector) matches ids or classes containing special characters
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="Icon" href=".. /img/favicon.ico" type="image/x-icon" />
<style>
.ancestors..ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<button id="btn">disabled </button>
<p>Disabled is not available</p>
<div class="ancestors" style="width:500px;">
<div>
<div id="#notMe">div id="#notMe"</div>
<span id=".span"> id=".span"</span>
<div class="notMe">div class="notMe"</div>
<div class=".box myClass">div class=".box myClass"</div>
<div class=".box">span class=".box"</div>
<span class="#span"> class="#span"</span>
</div>
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/3.0.0/jquery.min.js"></script>
<script>
page = {}
page.body = $("body");
page.body.find("#btn").click(function() {
//page.body.find(".ancestors").find( "#" + $.escapeSelector( "#notMe" )).css({
//page.body.find(".ancestors").find( "." + $.escapeSelector( ".box" )).css({
page.body.find(".ancestors").find("." + $.escapeSelector("#span")).css({
"color": "red"."border": "2px solid red"
});
})
</script>
</html>
Copy the code