js类库-jQuery选择器

由John Resig独立发布的一款JavaScript前端类库，使用了CSS选择器机制

支持代码链，大大降低了代码量，是当时最为流行的前端js类库之一。jQuery基本上解决了浏览器差异性问题

jQuery使用非常方便，直接将jQuery依赖下载到本地引入页面即可使用

选择器:

            普通选择器:

                      1.id选择器:根据给定Id匹配一个元素:  $("#id")

                      2.标签选择器:根据给定标签名匹配所有元素:  $("div")

                      3.类型选择器:根据给定的css类名匹配元素:  $(".class")

                      4.全选选择器:匹配全部元素:  $("*")

                      5.多选选择器:将每一个选择器的匹配结果合并一起返回:  $("#id,class,span")

            层级选择器:

                      1.祖先元素选择器:给定祖先元素 左祖先右子匹配: $("form input")

                      2.后代选择器 :给定父元素情况下匹配其后代元素:  $("form>input")

                      3.匹配紧接在元素1后的所有的元素2 : $("1+2")

                      4.匹配元素1后和其同辈的元素2:  $("1~2")

            基本选择器:

                      1.获取匹配的第一个元素: $("标签名:first")

                      2.获取匹配的最后的一个元素:  $("标签名:last")

                      3.匹配索引值为偶数的元素,从0计数:  $("标签名:even")

                      4.匹配索引值为奇数的元素,从0计数:  $("标签名:odd")

                      5.匹配一个给定索引值的元素:  $("标签名:eq(索引值)")

                      6.匹配所有索引值大于给定索引值的元素:  $("标签名:gt(索引值)")

                      7.匹配所有索引值小于给定索引值的元素:  $("标签名:lt(索引值)")

                      8.去除所有与给定选择器匹配的元素:  $("input:not(selector)")

                      9.匹配所有标题元素(h1~h6): $(":header")

            内容选择器:

                      1.匹配包含给定文本的元素:  $("标签名:contains(文本内容)")

                      2.匹配所有不包含文本或者子元素的空元素:  $("标签名:empty")

                      3.匹配含有选择器所匹配元素的元素: $("标签名:has(selector)")

                      4.匹配所有含有文本元素或子元素的元素:  $("标签名:parent")

                      5.匹配所有可见的指定元素:  $("标签名:visible")

                      6.匹配所有隐藏元素:  $("标签名:hidden")

             属性选择器:

                      1.匹配包含指定属性的元素:  $("div[id]")

                      2.匹配给定的属性是某个特定的值的元素:  $("input[name='elena']")

                      3.匹配所有不含有指定的属性，或者属性不等于特定值的元素: $("input[name!='elena']")

                      4.匹配给定的属性是以某些值开头的元素:  $("input[name^='ele']")

                      5.匹配给定的属性是以某些值结尾的元素:  $("input[name$='na']")

                      6.匹配给定的属性中包含某些值的元素:  $("input[name*='len']")

                      7.复合属性选择器,同时满足多个选择器时使用: $("[seletor][seletor][seletor]")

            子元素选择器:

                      1.匹配所给选择器( :之前的选择器)的第一个子元素(可返回多个):  $("ul li:first-child")

                      2.匹配所给选择器的随后一个子元素:  $("ul li:last-child")

                      3.匹配其父元素下的第N个子或奇偶元素:  $("ul li:nth-child(索引值)")

                      4.如果某个元素是父元素中唯一的子元素，那将会被匹配:  $("ul li:only-child")

            表单选择器:

                      1.匹配所有 input, textarea, select 和 button 元素: $(":input")

                      2.匹配所有的单行文本框:  $(":text")

                      3.匹配所有密码框:  $(":password")

                      4匹配所有单选按钮:  $(":radio")

                      5.匹配所有复选框: $(":checkbox")

                      6.匹配所有提交按钮:  $(":submit")

                      7.匹配所有图像域:  $(":image")

                      8.匹配所有重置按钮:  $(":reset")  

                      9.匹配所有文件域:  $(":file")

jQuery通过选择器拿取的元素与js中的元素节点是同一种元素吗？如果不是为什么？两者如何进行转换？

    jQuery元素是对js节点的一个轻度封装,jQuery元素只能使用jQuery中的函数方法属性等,js节点也只能使用自己的函数方法等,两者不能通用

    两者如何转换:jQuery  =>  js:    jQuery元素.get(0)    或    jQuery元素[0] 

                          js =>  jQuery:  $(js节点)