jQuery和CSS选择器的使用

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格式，所以格式就不好看，但这样多看几次，就熟悉了，能很快找到对应的位置。