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属性的元素，虽然不可见但是在布局中还是占据了空间