4) Content selector
contains('john'): Indicates a label containing a specified string, which is case sensitive.Empty: An element that represents a query for empty labels
has('p'): An element that indicates that a query has child elements
addClass("Style Name"): Add Styles to all tags queried
parent: Represents a query for non-empty labels
5) Visibility selector
Hidden: Represents querying all hidden labelsvisible: Represents querying all displayed labels
Or: not(:hidden)
6) Property selector
div[id]: Represents the div element of the query containing the ID attributeinput[name='newsletter']: indicates that the query contains the name attribute and its value is the input element of "newsletter"
input[name!='newsletter: means that the query contains the name attribute and its value is not the input element of "newsletter"
input[name^='newsletter: means that the query contains the name attribute and its value starts with the input element of "news"
"input[name$='letter': Indicates that the query contains the name attribute and that its value ends with the input element of"letter"
input[name*='news']:: Represents that the query contains the name attribute and that it contains the input element of "news"
input[id][name$='letter']: Indicates that the query contains an ID attribute and a name attribute whose value ends with an input element with a "letter" string
7) Sub-element selector
first-child: Represents the first child element of the querylast-child: Represents the last child element of the query
only-child: Elements that indicate that a query has only one child element
Nth-child (numbered from 1), which represents the element of the query specified number
8) Form selector
Input: Find the number of all input elements. Note: Include all input,textarea,select and button elements:text
:password
:radio
:checkbox
:file
:submit
:reset
:image
:file
9) Form object properties
enabled: Elements that represent available queriesDisad: Elements that indicate that the query is not available
checked: An element that represents the check/radio box selected by the query
Select: Represents the drop-down box element selected by the query
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.6.js"></script>
</head>
<body>
<hr />
<div>
<p>ma yun</p>
</div>
<div>
<p>ma hua teng</p>
</div>
<div>lei jun</div>
<div>lei bu si</div>
<p></p>
<p></p>
<div></div>
<hr />
<table align="center" border="1" height="200" width="200">
//The first line is not displayed
<tr style="display: none;">
<td>value 1</td>
</tr>
<tr>
<td>value 1</td>
</tr>
<tr>
<td>value 1</td>
</tr>
</table>
<hr />
<div>test2</div>
<hr />
<div align="center">
<input type="checkbox" name="newselect" value="hot fuzz" />
<input id="myID" type="checkbox" name="newselect" value="cold fusion">
<input type="checkbox" name="newsaccept" value="evil" />
</div>
<hr />
<div align="center">
<ul>
<li>bob</li>
<li>john</li>
<li>mary</li>
</ul>
<ul>
<li>green</li>
<li>white</li>
<li>bill</li>
</ul>
<ul>
<li>jack</li>
</ul>
</div>
<script type="text/javascript">
/*
*
:contains('john'): Represents a label containing a specified string, case sensitive
:empty: Elements representing query empty labels
:has('p'): Elements representing queries with child elements
.addClass("Style Name ": Add Styles to all Tags Queried
:parent: Represents a query with non-empty labels
*/
/*
var con =$("div:contains('ma')").size();
alert(con);
alert($("div:empty").size());
alert($("p:empty").size());
//:has('p'): Elements representing queries with child elements
alert($("div:has(p)").size());
// .addClass("Style Name ": Add Styles to all Tags Queried
$("div:has('p')").addClass('MyClass');
//patents Represents a query with non-empty labels
alert($("p:parents").size());*/
//visibility
//Query hidden tr elements
//alert($("table tr:hidden").size());
// alert($("tr:hidden").size());
//Find all visible
// alert($("table tr:visible").size());
// alert($("tr:visible").size());
/*
* div[id]: Represents div elements with id attributes in queries
input[name='newsletter']: Represents that the query contains the name attribute and its value is the input element of "newsletter"
input[name!='newsletter: Represents that the query contains a name attribute and its value is not an input element of "newsletter"
input[name^='newsletter: Represents that the query contains the name attribute and that its value starts with the input element "news"
"input[name$='letter': Indicates that the query contains the name attribute and that its value ends with the input element of "letter"
input[name*='news']: : Represents that the query contains the name attribute and that it contains the input element of "news"
input[id][name$='letter']: Represents that the query contains an id attribute and a name attribute whose value ends with an input element with a "letter" string
*
*/
alert($("div[id]").size());
alert($("input[name='newselect']").size());
alert($("input[name='!newselect']").size());
alert($("input[name^='news']").size());
// The input element whose value ends with "letter" is selected
// alert($("input[name$='select']").attr("checked","checked"));
//
//alert($("input[name*='new']").attr("checked","checked"));
//input[id][name$='letter']: Indicates that the query contains an ID attribute and a name attribute whose value ends with an input element with a "letter" string
$("input[id][name$='select']").attr("checked", "checked");
/*
*
* :first-child: Represents the first child element of the query
:last-child: Represents the last child element of the query
:only-child:Elements that indicate that a query has only one child element
:nth-child(Number begins at 1), which represents the element of the specified number for the query
*
*
*/
//Auto-cycling sub-elements
$("ul li:first-child").each(function() {
alert($(this).html());
})
$("ul li:last-child").each(function() {
alert($(this).html());
})
//Find unique child elements
$("ul li:only-child").each(function() {
alert($(this).html());
})
//Find the second child element of li
$("ul li:nth-child(2)").each(function() {
alert($(this).html());
})
/*
* :input: Find the number of all input elements, note: Include all input,textarea,select and button elements
:text
:password
:radio
:checkbox
:file
:submit
:reset
:image
:file
*
* 9)Form object properties
:enabled: Elements that represent available queries
:disabled: Represents elements that are not available for queries
:checked: Elements representing check/radio boxes selected for queries
:selected: Represents the drop-down box element selected by the query
*/
</script>
</body>
</html>