jQuery基础（一）：选择器与DOM操作
一. jQuery的概念
jQuery是 John Resig 于2006创建的javascript开源函数库，凭借着简洁的语法和跨平台的兼容性（ie6），jQuery极大的简化了js的开发。jQuery的优势：
- 强大的选择器：jquery继承了css中选择器机制，避免了传统js中循环遍历节点获取DOM元素对象的过程
- 出色的DOM对象封装：jquery可以动态更新元素节点（element）以及元素节点的属性（attribute）
- 可靠的事件处理机制：在jquery中为元素对象绑定事件非常容易
- 完善的Ajax操作：jquery将js中的原生Ajax操作封装到了
$.ajax()函数中，使得开发者只需要专注于业务逻辑，无需关心浏览器的兼容性以及XMLHttpRequest对象的创建和使用过程
要使用jquery只需要在页面的公共位置引入jquery库即可：
<html>
<head>
<title>Hello jQuery!title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">script>
head>
<body>
<script type="text/javascript">
// jQuery函数库中，$代表jQuery
// ready()方法相当于传统javascript中的window.onload()方法，当时read()方法在DOM结构
// 加载完毕之后就执行了，onload()方法必须等网页所有相关元素（图片）加载完毕才执行
$(document).ready(function(){
alert("Hello jQuery!");
});
script>
body>
html>
$(document).ready() 方法可以简写为：
// 使用匿名函数作为参数传递给jQuery函数$()
$(function(){
alert("Hello jQuery!");
});
jQuery对象和DOM对象的区别：
DOM对象是指通过原生js中通过getElementById() 等方法获取的元素对象，jQuery对象是指通过jquery方法封装后的元素对象，只有jQuery对象才能使用jquery库中的方法，例如$("#foo").innerHTML是错误的
/* dom对象和jquery对象的互换 */
var $variable = $("#foo"); // 获取jquery对象，返回的是一个jquery对象数组
var variable = $variable[0]; // 转为dom对象
var variable = document.getElementById("foo") // dom对象的获取
var $variable = $(variable); // 将dom对象包装为jquery对象
二. jQuery中的选择器
选择器是jquery的基础，在jquery中对于事件处理、DOM遍历、ajax操作都依赖于选择器，其核心思想是先要找到页面中的dom元素，然后改变dom元素的内容或者绑定效果。jquery的选择器技术继承自css，使用jquery选择器可以非常方便地找出页面中指定的jquery元素对象，添加相应的行为，避免了原生js的复杂遍历获取对象的过程。jquery选择器的优势是非常的简洁，$(#idName)就可以替代js中document.getElementById()函数。
jQuery中的选择器：jquery中的选择器种类非常多，主要分为获取jquery元素对象和过滤jquery元素对象。最常用的选择器是按dom元素的id属性或class属性来获取jquery对象，因为页面的中dom元素的id属性具有唯一性，所以这是最常用的。
<div id="notMe"><p>id="notMe"p>div>
<div id="myDiv">id="myDiv"div>
<span class="myClass">span class="myClass"span>
<script type="text/javascript">
$("#myDiv"); // 根据dom的id元素匹配获取jquery对象
$(".myClass"); // 根据dom元素的class元素匹配获取jquery对象
script>
jquery中还提供了很多辅助的选择器，这些选择器主要是用来过滤jquery对象的：
<ul>
<li>list item 1li>
<li>list item 2li>
<li>list item 3li>
<li>list item 4li>
<li>list item 5li>
ul>
<table>
<tr><td>Header 1td>tr>
<tr><td>Value 1td>tr>
<tr><td>Value 2td>tr>
table>
<script type="text/javascript">
$("li:first"); // $("li")根据标签获取的是一个jquery对象数组，该选择器过滤出第一个元素
$("tr:eq(1)"); // 根据给定的索引获取元素
script>
除此之外，还有诸如子类选择器，属性匹配选择器，表单元素选择器…需要的时候可以参考文档
三. jQuery中的DOM操作
每个html页面都能使用dom树表示出来，而js又能动态地改变这个dom结构，再使用jquery操作dom元素的时候往往会动态地创建html内容，使得dom文档在浏览器中呈现效果发生变化（dom结构或元素节点发生变化）
元素节点查找：使用jquery选择器
<p class="myClass" title="shoppinglist">购物列表：p>
<ul>
<li title="牛肉">牛肉li>
<li title="洋葱">洋葱li>
<li title="苹果">苹果li>
ul>
<script type="text/javascript">
// 元素节点查找
var $li = $("ul li:eq(1)"); // 获取中的第二个节点元素
var $li_txt = $li.text(); // 获取节点元素的文本内容
alert($li_txt);
script>
查找元素节点的属性值：使用attr()方法可以获取元素节点的属性值
// 获取元素节点的属性值
var $para = $("p");
var p_txt = $para.attr("title");
alert(p_txt);
创建节点：在dom操作中，常常要动态地创建html内容，append()方法用于将元素节点添加到dom树上
// 创建元素节点，并将它作为元素的子节点添加到dom节点树上
var $li = $("鸡蛋 "); // 创建一个包含文本内容和属性的元素节点
$("ul").append($li); // 将新创建的元素节点出入到dom文档树上
删除节点：romove()方法可以将文档中某个多余的元素节点删除，包括该节点所包含的所有后代元素，方法的返回值是指向该删除的节点的引用
var $li = $("ul li:eq(1)").remove();
$li.appendTo($li); // 洋葱跑到苹果后面了，dom文档结构发生了变化
节点的替换：使用replaceWith()方法将所有匹配的元素都替换成指定的dom元素，如果被替换的元素节点绑定了事件也一起删除
$("li:eq(1)").replaceWith("橘子 ");
节点属性的操作：attr()方法可以用来获取和设置元素属性，removeAttr()方法用于删除元素属性
var $p = $("p");
var p_txt = $p.attr("title"); // 获取节点指定属性的属性值
console.log(p_txt);
// 设置节点的属性，attr()方法可以同时设置多个属性
$p.attr({"title":"购物清单", "name":"shopping!!!"});
console.log($p.attr("name")); // 在控制台查看效果
操作节点的样式：class属性也是节点的属性，可以使用attr()方法来操作属性值，样式文件定义在css文件中，jquery中还提供了addClass()方法来追加样式，removeClass()用于移除指定样式
设置和获取html、文本和值：html()，text()，val()
// html()方法用于获取某个节点的html内容，类似js中的innerHTML属性
var p_html = $("p").html();
alert(p_html);
// text()方法用于读取和设置某个元素中的文本内容
var p_text = $("p").text();
console.log(p_text);
$("p").text("今天买点啥？"); // 设置节点的文本内容
val()方法：
<input type="text" id="address" value="请输入邮箱地址">
<input type="text" id="password" value="请输入邮箱密码">
<script type="text/javascript">
// value()方法用于获取和设置文本框、下拉菜单、单选框的值
$("#address").focus(function(){
var txt_value = $(this).val(); // 获取节点的值
if(txt_value == "请输入邮箱地址"){
$(this).val(""); // 设置节点的值为空
}
});
$("#address").blur(function(){
var txt_value = $(this).val(); // 获取节点的值
if(txt_value == ""){
$(this).val("请输入邮箱地址");
}
});
script>