一.jQuery中的选择器
共有四种：基本选择器，层次选择器，过滤选择器，表单选择器
用法示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo3_选择器</title>
<script src="http://libs.baidu.com/jquery/2.0.2/jquery.min.js"></script>
<script>
window.onload = function() {
//1.基本选择器，和CSS选择器一样
//2.层次选择器：选择子孙/儿子，和css派生选择器一样；选择弟弟
console.log($("#sh+"));
console.log($("#sh~"));
//3.过滤选择器（*）
//3.1基本过滤选择器（*）
console.log($("li:first"));
console.log($("li:even"));
console.log($("li:eq(1)"));
console.log($("li:not(#sh)"));
//3.2内容过滤选择器
console.log($("li:contains('海')"));
//3.3可见性过滤选择器
console.log($("li:hidden"));
//3.4属性过滤选择器
console.log($("li[style]"));
//3.5状态过滤选择器
console.log($("input:enabled"));
console.log($("input:checked"));
//4.表单选择器
console.log($(":radio"));
}
</script>
</head>
<body>
<ul>
<li>北京</li>
<li id="sh">上海</li>
<li>广州</li>
<li>深圳</li>
<li>杭州</li>
<li style="display: none;">不可见</li>
</ul>
<p>
<input type="text" disabled/>
<input type="password"/>
</p>
<p>
<input type="radio" name="sex" checked/>男
<input type="radio" name="sex"/>女
</p>
</body>
</html>二.jQuery读写，增删，遍历节点，样式操作
用法示例：
<!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>
//页面加载之后调用，作用等价于window.onload = funcation{}
$(function() {
//1.读写节点
//1.1读写内容（双标签有内容）
//1)html() == innerHTML
console.log($("p:eq(0)").html());
$("p:eq(0)").html("jQuery对<u>DOM操作</u>提供了支持");
//2)text() == innerText 用法同上
//1.2读写值（表单控件有值）
//val() == value
console.log($(":button:first").val());
$(":button:first").val("aaa");
//1.3读写属性
//attr() == get/setAttribute()
console.log($("img:first").attr("src"));
$("img:first").attr("src","../img/in.png");
//2.增删节点
//2.1创建节点
var $li1 = $("<li>通辽</li>");
var $li2 = $("<li>鄂尔多斯</li>");
console.log($li1);
//2.2增加节点
$("ul").prepend($li1);
$("#sh").after($li2);
//2.3删除节点
$("li:last").remove();
//3.遍历节点：查找某节点的亲戚,有些时候调用别人的方法得到一个节点，又要对亲戚进行操作，此时无法写选择器，只能调用这样的方法
//假设调用了别人的方法得到了上海
var $sh = $("#sh");
//获取上海的亲戚做进一步处理
console.log($sh.parent());
console.log($sh.prev());
console.log($sh.siblings());
//假设调用了别人的方法得到了列表
var $ul = $("ul");
//获取列表的孩子做进一步处理
console.log($ul.find("li:gt(2)"));
//4.样式操作
//增加一个样式(*)
$("p:first").addClass("big").addClass("important");
//删除一个样式(*)
$("p:first").removeClass("big").removeClass("important");
//删除所有样式：removeClass()
//判断元素是否包含某样式
console.log($("p:first").hasClass("big"));
});
//切换样式
function bigger() {
$("p:first").toggleClass("big");
}
</script>
</head>
<body>
<p>jQuery对<b>DOM操作</b>提供了支持</p>
<p>
<input type="button" value="按钮"/>
</p>
<p>
<img src="../img/01.jpg">
</p>
<ul>
<li>北京</li>
<li id="sh">上海</li>
<li>广州</li>
<li>深圳</li>
<li>杭州</li>
</ul>
<p>
<input type="button" value="大" onclick="bigger();"/>
</p>
</body>
</html>三.jQuery对象和DOM对象的来源
通过选择器选中的，或通过$()转换而来的是jQuery对象
jQuery赋值的方法，一般返回的还是jQuery对象
jQuery取值的方法，若返回节点则是jQuery对象，若返回文字，则是String（内置对象）
通过控制台打印可以观察是什么对象。