1, Selectors in jQuery
There are four kinds: basic selector, hierarchical selector, filter selector, form selector
Usage example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo3_selector</title>
<script src="http://libs.baidu.com/jquery/2.0.2/jquery.min.js"></script>
<script>
window.onload = function() {
//1. Basic selector, same as CSS selector
//2. Hierarchy selector: select descendant / son, just like css derived selector; select younger brother
console.log($("#sh+"));
console.log($("#sh~"));
//3. Filter selector (*)
//3.1 basic filter selector (*)
console.log($("li:first"));
console.log($("li:even"));
console.log($("li:eq(1)"));
console.log($("li:not(#sh)"));
//3.2 content filter selector
console.log($("li:contains('sea')"));
//3.3 visibility filter selector
console.log($("li:hidden"));
//3.4 property filter selector
console.log($("li[style]"));
//3.5 status filter selector
console.log($("input:enabled"));
console.log($("input:checked"));
//4. Form selector
console.log($(":radio"));
}
</script>
</head>
<body>
<ul>
<li>Beijing</li>
<li id="sh">Shanghai</li>
<li>Guangzhou</li>
<li>Shenzhen</li>
<li>Hangzhou</li>
<li style="display: none;">Invisible</li>
</ul>
<p>
<input type="text" disabled/>
<input type="password"/>
</p>
<p>
<input type="radio" name="sex" checked/>male
<input type="radio" name="sex"/>female
</p>
</body>
</html>2, jQuery read / write, add / delete, traverse nodes, style operation
Usage example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.big {font-size: 30px;}
.important{color: red;}
</style>
<script src="http://libs.baidu.com/jquery/2.0.2/jquery.min.js"></script>
<script>
//After the page is loaded, the call is equivalent to window.onload = funcation{}.
$(function() {
//1. Read write node
//1.1 read and write content (double label with content)
//1)html() == innerHTML
console.log($("p:eq(0)").html());
$("p:eq(0)").html("jQuery Yes<u>DOM operation</u>Support provided");
//2)text() == innerText as above
//1.2 read write value (form control has value)
//val() == value
console.log($(":button:first").val());
$(":button:first").val("aaa");
//1.3 read write attributes
//attr() == get/setAttribute()
console.log($("img:first").attr("src"));
$("img:first").attr("src","../img/in.png");
//2. Add / delete nodes
//2.1 creating nodes
var $li1 = $("<li>Tongliao</li>");
var $li2 = $("<li>Erdos</li>");
console.log($li1);
//2.2 add nodes
$("ul").prepend($li1);
$("#sh").after($li2);
//2.3 deleting nodes
$("li:last").remove();
//3. Traversal node: find the relatives of a node, sometimes call someone else's method to get a node, and then operate on the relatives. At this time, you cannot write a selector, you can only call such a method
//Suppose you call someone else's method and get Shanghai
var $sh = $("#sh");
//Get relatives in Shanghai for further treatment
console.log($sh.parent());
console.log($sh.prev());
console.log($sh.siblings());
//Suppose you call someone else's method to get a list
var $ul = $("ul");
//Get the list of children for further processing
console.log($ul.find("li:gt(2)"));
//4. Style operation
//Add a style (*)
$("p:first").addClass("big").addClass("important");
//Delete a style (*)
$("p:first").removeClass("big").removeClass("important");
//Delete all styles: removeClass()
//Determine whether an element contains a style
console.log($("p:first").hasClass("big"));
});
//Switching styles
function bigger() {
$("p:first").toggleClass("big");
}
</script>
</head>
<body>
<p>jQuery Yes<b>DOM operation</b>Support provided</p>
<p>
<input type="button" value="Button"/>
</p>
<p>
<img src="../img/01.jpg">
</p>
<ul>
<li>Beijing</li>
<li id="sh">Shanghai</li>
<li>Guangzhou</li>
<li>Shenzhen</li>
<li>Hangzhou</li>
</ul>
<p>
<input type="button" value="large" onclick="bigger();"/>
</p>
</body>
</html>3, Source of jQuery and DOM objects
jQuery objects are selected by selectors or converted by $()
The method of jQuery assignment usually returns the jQuery object
The method of jQuery value. If the returned node is a jQuery object, if the returned text is a String (built-in object)
You can see what objects are by printing from the console.