jQuery基本使用
jQuery语句由下三部分组成：
工厂函数$()：将DOM对象转化为jQuery对象
选择器 selector：获取需要操作的DOM 元素
方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法
“$”等同于“ jQuery ”
工厂函数$()用于获取或创建节点
$(selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点
$(html)：使用HTML字符串创建jQuery节点
使用css()方法设置元素样式，如下:
$("p").css("属性1","值1");
$("p").css({"属性1":"值1","属性2":"值2"....});
$("p").css("background-color"); 获取类样式为p的背景颜色值
使用removeClass()方法移除样式
语法：$(selector).removeClass("class") ;
使用show()、hide() 方法设置元素的显示和隐藏，如下:
$(selector).show( );
$(selector).hide( );
DOM对象：直接使用JavaScript获取的节点对象：
var objDOM=document.getElementById("title");
jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法:
$("#title").html();
等同于
document.getElementById("title").innerHTML;
使用$()函数进行转化：$(DOM对象)
var txtName =document.getElementById("txtName"); "DOM对象"
var $txtName =$(txtName); "jQuery对象"
jQuery对象命名一般约定以$开头
jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象
var $txtName =$ ("#txtName");
var txtName =$txtName[0];
基本过滤选择器
| 语法 | 描述 | 示例 |
|---|---|---|
:eq(index) | 选取索引等于index的元素（index从0开始） | $("li:eq(1)") 选取索引等于1的<li>元素 |
:gt(index) | 选取索引大于index的元素（index从0开始） | $("li:gt(1)") 选取索引大于1的<li>元素 |
:lt(index) | 选取索引小于index的元素（index从0开始） | $("li:lt(1)") 选取索引小于1的<li>元素 |
:header | 选取所有标题元素，如h1~h6 | $(":header") 选取网页中所有标题元素 |
:focus | 选取当前获取焦点的元素 | $(":focus") 选取当前获取焦点的元素 |
:animated | 选择所有动画 | $(":animated") 选取当前所有动画元素 |
:first | 选取第一个元素 | $("li:first") 选取所有<li>元素中的第一个 |
:last | 选取最后一个元素 | $("li:last") 选取所有<li>元素中的最后一个 |
:not(selector) | 选取去除所有与给定选择器匹配的元素 | $("li:not(.three)") 选取class不是three的元素 |
:even | 选取索引是偶数的所有元素（index从0开始） | $("li:even") 选取索引是偶数的所有<li>元素 |
:odd | 选取索引是奇数的所有元素（index从0开始） | $("li:odd") 选取索引是奇数的所有<li>元素 |
元素内部插入子节点：
| 语法 | 功能 | 示例 |
|---|---|---|
append(content) | $(A).append(B) 表示将 B 追加到 A 中 | $("ul").append($newNode1); |
appendTo(content) | $(A).appendTo(B) 表示把 A 追加到 B 中 | $newNode1.appendTo("ul"); |
prepend(content) | $(A).prepend(B) 表示将 B 前置插入到 A 中 | $("ul").prepend($newNode1); |
prependTo(content) | $(A).prependTo(B) 表示将 A 前置插入到 B 中 | $newNode1.prependTo("ul"); |
元素外部插入同辈节点：
| 语法 | 功能 | 示例 |
|---|---|---|
after(content) | $(A).after(B) 表示将 B 插入到 A 之后 | $("ul").after($newNode1); |
insertAfter(content) | $(A).insertAfter(B) 表示将 A 插入到 B 之后 | $newNode1.insertAfter("ul"); |
before(content) | $(A).before(B) 表示将 B 插入至 A 之前 | $("ul").before($newNode1); |
insertBefore(content) | $(A).insertBefore(B) 表示将 A 插入到 B 之前 | $newNode1.insertBefore("ul"); |
jQuery 获取紧邻的同辈元素：
| 语法 | 功能 | 示例 |
|---|---|---|
next([expr]) | 用于获取紧邻匹配元素之后的元素 | $("li:eq(1)").next().addClass("orange"); |
prev([expr]) | 用于获取紧邻匹配元素之前的元素 | $("li:eq(1)").prev().addClass("orange"); |
siblings([expr]) | 用于获取位于匹配元素前面和后面的所有同辈元素 | $("li:eq(1)").siblings().addClass("orange"); |
children()方法可以用来获取元素的所有子元素
$(selector).children([expr]);
jQuery提供了三种删除节点的方法
remove([expr])：删除整个节点
expr参数为筛选元素的jQuery表达式，通过表达式获取指定元素，并并进行删除
empty()：清空节点内容，他能清空元素中的所有后代节点
detach()：删除整个节点，保留元素的绑定事件、附加的数据
替换节点：replaceWith()和replaceAll()
replaceWith()的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素，
replaceAll()的作用和replaceWith()相同，只是颠倒了，
类似于append()和appento()
只展示基础部分，剩下的在下面text中，我整合的时候还不会用Markdown格式，所以格式就不好看，但这样多看几次，就熟悉了，能很快找到对应的位置。
