JQuery二：jQuery()使用及选择器selector

jQuery()方法主要有如下用途：

一、根据selector搜索文档匹配的元素并转化为jQuery对象

1.$(selector) ：从文档根部开始搜索整个文档匹配selector的元素。

2.$(selector[,context])：从指定context中搜索匹配selector的元素，限制了搜索的范围，等同于$(context).find(selector)

二、转化为jQuery对象

1.$(element)：将一个DOM element包装成jQuery对象，以便使用jQuery的相关的操作。

2.$(elementArray)：将一个DOM element数组包装成jQuery对象，以便使用jQuery的相关操作。

3.$(plainObject)：将一个普通的javascript对象包装成jQuery对象。

三、复制jQuery对象

$(jQueryObject)：复制一个jQuery对象。

四、根据html格式字符串创建对应的DOM元素

1.$(html[,ownerDocument])：根据Html格式字符串创建相应的DOM元素。

备注：

a.jQuery会检验传入的字符串，如果是html格式的，例如<tag>...</tag>则解析html并创建对应DOM元素，否则作为selector处理，如果是要明确的创建DOM元素，则可以使用$.parseHtml方法。

b.ownerDocument默认为jQuery加载进来的Document，如果需要创建到其它文档(例如其它iframe），则需要传此参数。

c.返回的DOM元素后一般都是调用appendTo方法添加到具体的位置去，例如：$("<div>hello</div>").appendTo("body");

2.$(html,attributes)：建立一个单一的独立的对象，并设置其CSS属性，事件处理handler等。

备注：

a.html必须是一个单一且独立元素html脚本，例如<div>,<div/>或者<div></div>

b.attributes可以设置CSS属性，普通控件属性，以及绑定其事件handler.

例如：

$("<DIV/>",{"class":"css_class",text:"Click me",click:function(){alert("hello");}}).appendTo("body");

上面的写法等同于：

$("<DIV/>",{"class":"css_class",text:"Click me",on:{click:function(){alert("hello");}}}).appendTo("body");

也等同于：

$("<div/>").addClass("css_class").prop("text","Click me").on({click:function(){alert("hello");}});

五、jQuery(callback)等同于$(document).ready().

～～～～～～～～～～～～～～～

基础选择器：

$("*"): 选择所有元素, $("*")

$("#id"): 根据id选择元素, $("#txtMsg")

$(".class"): 根据class选择元素, $(".trhead")

$("element"): 根据类型选择元素，$("p")

$(this): 选择当前元素

$(selector1,selector2,selector3): 多元素选择/或条件

$(selector1selector2selector3): 多条件选择/并条件(selector之间没有空格)

属性选择器：

$([name]): 选择具有指定名称的属性的元素

$([name="val"]): 选择具有指定名称且其值等于val的属性的元素

$([name!="val"]):选择具有指定名称且其值不等val的属性的元素

$([name|="val"]):选择具有指定名称且其值等于val或者以val开头其后字符为"-"的属性的元素,例如$("[name|='dv']")能够选择具有name="dv"及name="dv-msg"属性的元素

$([name*="val"]):选择具有指定名称且其值包含val的属性的元素

$([name~="val"]):选择具有指定名称且其值包含单独val(以空格与其它字符分开)的属性的元素

$([name$="val"]):选择具有指定名称且其值以val结尾的属性的元素

$([name^="val"]):选择具有指定名称且其值以val开头的属性的元素

$([name="val"][name2="val2"]...):多属性匹配选择元素/并条件。

基础过滤选择器：

$(:eq(index)): 选择匹配元素列表中指定索引位置的元素(索引以0开始，方向从头到尾)

$(:eq(-index)):同上，只是方向从尾到头

$(:gt(index)): 选择匹配元素列表中索引位置大于指定值的元素

$(:lt(index)): 选择匹配元素列表中索引位置小于指定值的元素

$(:not(selector)): 选择所有不匹配selector的元素/排除选择

$(:first): 选择匹配元素列表中第一个元素

$(:last): 选择匹配元素列表中最后一个元素

$(:even): 选择匹配元素列表中索引位置为偶数的元素

$(:odd): 选择匹配元素列表中索引位置为奇数的元素

$(:focus): 选择当前处于焦点的元素

$(:animated): 选择执行时候处于动画或者特效状态的元素

$(:header): 选择作为header的元素，如h1~h6

$(:root): 选择文档根元素，一般为html

$(:target): 根据URL最后的#id来找到当前网页的目标元素.

$(:lang(language)): 选择具有特殊语言类型的元素(根据元素lang属性或者meta-charset来判断)

子元素过滤选择器：

$(:first-child): 选择所有第一子元素

$(:last-child): 选择所有最后一个子元素

$(:nth-child(index/even/odd/equation)): 选择指定位置的子元素

$(:nth-last-child(index/even/odd/equation)): 同上，区别计算位置的顺序是从尾到头

$(:only-child)： 选择唯一子元素

$(:first-of-type): 选择在相同类型的兄弟节点中第一个出现的子元素

$(:last-of-type): 选择在相同类型的兄弟节点中最后一个出现的子元素

$(:nth-of-type(index/even/odd/equation)): 选择在相同类型的兄弟节点中指定位置的子元素

$(:nth-last-of-type(index/even/odd/equation)): 同上，区别计算位置的顺序是从尾到头

$(:only-of-type)： 选择具有唯一类型的子元素

内容过滤选择器：

$(:contains(text))：选择包含指定文本的元素

$(:empty)：选择为空的元素或者不包含任何子元素的元素

$(:has(selector)):选择后代节点中具有匹配selector参数对应元素

$(:parent)：选择具有至少一个子元素的元素，与:empty相反。

表单元素选择器：

$(:input): 选择所有input元素

$(:text/password/radio/checkbox/submit/reset/button/image/file)：选择指定类型的input元素

$(:checked): 选择所有被checked或者selected的表单元素。

$(:enabled): 选择所有启用的表单元素

$(:disabled): 选择所有禁用的表单元素

$(:focus): 选择所有具有焦点的元素

$(:selected): 选择所有选中的元素

分类或者层级选择器：

$(parent>child): 在parent匹配的父元素中选择匹配child的第一代子元素

$(ancestor descendant): 在ancestor匹配的祖先元素中选择匹配descendant的子孙元素,与前面的区别为子孙元素可以为任何层次。

$(prev+next): 选择匹配next且紧邻的前一个兄弟节点匹配prev的元素

$(prev~siblings): 选择匹配siblings且其前具有匹配prev的兄弟元素的所有元素，与$(prev+next) 的区别为prev与被选择元素必须紧邻，所以只能选择一个，但是后者选择prev后面匹配的所有兄弟元素，不必紧邻。

是否可视选择器：

$(:hide): 选择不可见元素，包含:

具有CSS display=none属性的元素；

type=hidden的input元素；

其width及height设置为0的元素；

其父元素不可见的元素。

$(:visible): 选择可见元素，包含下面特殊情况:

具有visibility: hidden或者opacity: 0属性的元素，虽然不可见但是在布局中还是占据了空间