jQuery element selector
jQuery uses the CSS selector to select HTML elements.
$("p") Select the <p> element.
$("") Select all class="intro" <p> elements.
$("p#demo") Select all <p> elements.
Sample code:
jquery part
$(document).ready(function(){//Execute after the page loads tagName();
// idName();
// className();
});
function tagName(){
$('p').addClass('heighlight');
}
function idName(){
$('#div').addClass('heighlight2');
}
function className(){
$('').addClass('heighlight2');
}
html part
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/" ></script>
<script type="text/javascript" src="js/" ></script>
<link rel="stylesheet" href="css/" />
</head>
<body>
<div >
<p>this is my name!!</p>
<p class="pClass">class is import!</p>
<a href="#">you cai!!</a>
</div>
</body>
</html>
CSS part
.heighlight {
background-color: blue;
}
.heighlight2 {
background-color: red;
}
.alt{
background-color:#ccc;
}
jQuery attribute selector
Query uses the XPath expression to select an element with the given attribute.
$("[href]") Select all elements with the href attribute.
$("[href='#']") Select all elements with the href value equal to "#".
$("[href!='#']") Select all elements with href value not equal to "#".
$("[href$='.jpg']") Select all elements with href values ending in ".jpg".
jquery part, other parts are the same as above.
$(document).ready(function(){
attribute();
});
function attribute(){
$('[href="#"]').addClass('heighlight');
}
jQuery CSS selector
.addClass() or .css()
$(document).ready(function(){
cssName();
});
function cssName(){
$('p').css("background-color","pink");
}
jQuery Custom Selector
$(document).ready(function(){
custom();
});
function custom(){
$('tr:odd').addClass('alt');
}
Attached
| Selector | Example | Select |
|---|---|---|
| * | $("*") | All elements |
| #id | $("#lastname") | Elements |
| .class | $(".intro") | All class="intro" elements |
| element | $("p") | All <p> elements |
| .class.class | $(".") | All elements of class="intro" and class="demo" |
| :first | $("p:first") | The first <p> element |
| :last | $("p:last") | The last <p> element |
| :even | $("tr:even") | All even <tr> elements |
| :odd | $("tr:odd") | All odd <tr> elements |
| :eq(index) | $("ul li:eq(3)") | The fourth element in the list (index starts at 0) |
| :gt(no) | $("ul li:gt(3)") | List elements with index greater than 3 |
| :lt(no) | $("ul li:lt(3)") | List elements with index less than 3 |
| :not(selector) | $("input:not(:empty)") | All input elements that are not empty |
| :header | $(":header") | All title elements <h1> - <h6> |
| :animated | All animation elements | |
| :contains(text) | $(":contains('W3School')") | All elements containing the specified string |
| :empty | $(":empty") | All elements of a childless (element) node |
| :hidden | $("p:hidden") | All hidden <p> elements |
| :visible | $("table:visible") | All visible tables |
| s1,s2,s3 | $("th,td,.intro") | All elements with matching selection |
| [attribute] | $("[href]") | All elements with href attribute |
| [attribute=value] | $("[href='#']") | All href attributes have the value equal to "#" |
| [attribute!=value] | $("[href!='#']") | All href attributes have elements whose values are not equal to "#" |
| [attribute$=value] | $("[href$='.jpg']") | All href attribute values contain elements ending with ".jpg" |
| :input | $(":input") | All <input> elements |
| :text | $(":text") | All type="text" <input> elements |
| :password | $(":password") | All type="password" <input> elements |
| :radio | $(":radio") | All type="radio" <input> elements |
| :checkbox | $(":checkbox") | All type="checkbox" <input> elements |
| :submit | $(":submit") | All type="submit" <input> elements |
| :reset | $(":reset") | All type="reset" <input> elements |
| :button | $(":button") | All type="button" <input> elements |
| :image | $(":image") | All type="image" <input> elements |
| :file | $(":file") | All type="file" <input> elements |
| :enabled | $(":enabled") | All activated input elements |
| :disabled | $(":disabled") | All disabled input elements |
| :selected | $(":selected") | All selected input elements |
| :checked | $(":checked") | All selected input elements |