JQuery中常用选择器和方法的总结

       JQuery是JS的一个类库，是大型开发必备人工具之一。在前端开发过程中，我们可以通过它简化JS的复杂操作、可以不用需要关心兼容性、同时它提供了大量实用的方法。但是需要记住的是，JQ中的思想还是基于原生JS的，它只是一个辅助工具，需要我们正确对待。在我看来，JQ其实可以分为两大内容，一个是选择器，一个是其封装好的方法。下面内容就是简要介绍一下，在实际开发项目中可能会用到的选择器和方法。

一、选择器

       选择器其实和CSS3的差不多。主要有： 

    1、 基本选择器

       主要有通过id名查询的id选择器（如:$("#myELement")）、类选择器（如:$(".myClass")）、标签选择器（如：$("div") ）以及通用选择器（如：$("*")  选择文档中的所有的元素）。

     2、 层次选择器

        常见有后代选择器（$("form input")  选择所有的form元素中的input元素）、子选择器（$("#main > *")   选择id值为main的所有的子元素）、相邻兄弟选择器（$("label + input")     选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素）、同胞选择器（如：返回id为prev的标签元素的所有的属于同一个父元素的div标签）

     3、 过滤选择器：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、 子元素过滤选择器 、表单对象属性过滤选择器   

        3—1、简单过滤选择器

            可能会用到的有(以tr、div等标签为例):

           $("tr:first")               选择所有tr元素的第一个 

          $("tr:last")                选择所有tr元素的最后一个

          $("input:not(:checked) + span")        过滤掉：checked的选择器的所有的input元素

          $("tr:even")               选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）

         $("tr:odd")                 选择所有的tr元素的第1，3，5... ...个元素

          $("td:eq(2)")             选择所有的td元素中序号为2的那个td元素 

         $("td:gt(4)")               选择td元素中序号大于4的所有td元素

         $("td:lt(4)")                选择td元素中序号小于4的所有的td元素

         $(":header")             选择h1、h2、h3之类的

         $("div:animated")     选择正在执行动画效果的元素

       3—2    内容过滤选择器

         $("div:contains('John')") 选择所有div中含有John文本的元素 

        $("td:empty")           选择所有的为空（也不包括文本节点）的td元素的数组

       $("div:has(p)")        选择所有含有p标签的div元素 

       $("td:parent")          选择所有的以td为父节点的元素数组

       3—3   可视化过滤选择器        

$("          $("div:hidden")        选择所有的被hidden的div元素 

$("          $("div:visible")        选择所有的可视化的div元素 

r re        3—4   属性过滤选择器

                  $("div[id]")              选择所有含有id属性的div元素 

                $("input[name='newsletter']")    选择所有的name属性等于'newsletter'的input元素

           $("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素

        $("input[name^='news']")         选择所有的name属性以'news'开头的input元素 

        $("input[name$='news']")         选择所有的name属性以'news'结尾的input元素

        $("input[name*='man']")          选择所有的name属性包含'news'的input元素

        $("input[id][name$='man']")    可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

        3—1    子元素过滤选择器

         查找ul中第2个li $("ul li:nth-child(2)")

        查找ul中处于奇数位的li(下标从1开始)  $("ul li:nth-child(odd)")

       查找ul中1、4、7、10.....位置的li   $("ul li:nth-child(3n + 1)")

       $("div span:first-child")          返回所有的div元素的第一个子节点的数组 

       $("div span:last-child")           返回所有的div元素的最后一个节点的数组 

       $("div button:only-child")       返回所有的div中只有唯一一个子节点的所有子节点的数组

      4、表单选择器

       $(":input")                  选择所有的表单输入元素，包括input, textarea, select 和 button

      $(":text")                     选择所有的text input元素 

      $(":password")           选择所有的password input元素 

      $(":radio")                   选择所有的radio input元素

     $(":checkbox")            选择所有的checkbox input元素 

     $(":submit")               选择所有的submit input元素 

     $(":image")                 选择所有的image input元素 

     $(":reset")                   选择所有的reset input元素 

     $(":button")                选择所有的button input元素 

      $(":file")                     选择所有的file input元素      

$(":      $(":hidden")               选择所有类型为hidden的input元素或表单的隐藏域

    4—1    表单元素过滤选择器

      $(":enabled")             选择所有的可操作的表单元素 

     $(":disabled")            选择所有的不可操作的表单元素 

      $(":checked")            选择所有的被checked的表单元素 

    $("select option:selected") 选择所有的select 的子元素中被selected的元素

二、JQ中的常用方法

        1、用于页面元素操作的方法(即：创建节点、插入节点、复制节点、替换节点、包裹节点、遍历节点操作)

       1-1   新建DOM节点（$li1=$("<li></li>")）

       1-2    增--添加DOM节点 （如：append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()。）

       1-3   删除DOM节点操作（remove()：法删除所有匹配的元素、empty():清空节点，它能清空元素中的所有子节点）

        1-4  修改DOM节点操作(clone():复制匹配的节点、$(element).repalcewith()：用某节点替换匹配的节点、$(element).repalceAll()：替换所有节点、$(element).wrap()、$(element).wrapAll()、$(element).wrapInner()：包裹节点)

       2   元素属性操作、获取和设置元素、元素样式操作

        

         2-1  属性操作attr()和removeAttr()

        attr()方法能够获取元素属性，也能能够设置元素属性。方法如下，当attr(para1)方法有个参数时候用于获得当前元素的para1的属性值，当attr(para1,attrValue)有两个参数时候设置当前元素的属性名为para1的属性值为attrValue

       2-2  样式操作addClass()、removeClass()、toggleClass()和hasClass()

      添加样式addClass()方法、移除样式removeClass()方法、切换样式toggleClass()方法，使用该方法切换目标元素的样式、alert($("p").hasClass("ul"));打印出p元素是否有ul样式。

       2-3  设置和获取HTML【html()】,文本【text()】和值【val()】

        html()方法获得或设置某个元素的html元素。该方法可以用于XHTML文档，不能用于XML文档。

         text()方法获得或设置某个元素的文本值。该方法对html和XML文档都适用。

        2-4  遍历节点操作children()、next()、prev()、siblings()和closest()

       children()方法用于取得匹配元素的子元素集合，只匹配子元素不考虑任何后代元素

       $("p").next().html();该示例获得p元素的下一个兄弟节点的html内容。

        prev()方法用于匹配元素的上一个兄弟节点，方法如下：$(selector).prev();

        $("p").slibings();示例获得p元素的所有兄弟节点元素

        closest()方法()用来取得最近的匹配元素，首先检查当前元素是否匹配如果匹配则直接返回，否则继续向上查找父元素中符合条件的元素返回，如果没有匹配的元素则返回空JQuery对象。

     2-5   CSS-Dom操作css()、offset()、position()、scrollTop()和scrollLeft()

         css()方法用于获取、设置元素的一个或多个属性。方法如下：$(selector).css();

         offset()方法用于获取元素相对当前窗体的偏移量，其返回对象包括两个属性：top和left。

         position()方法用于获取元素于最近的个position样式属性设置为relative或者absolute的祖先节点的相对偏移量。方法如下：$(selector).position();

         scrollTop()和scrollLeft()方法用于获取元素的滚动条距顶端的距离和距左侧的距离。         

     3   width()   innerWidth()   outerWidth()获取元素的宽度

     以下字母分别代表w:width、p:padding、b:border、m:margin

      width()--->w

       innerWidth()---->w、p

        outerWidth()------>w、p、b

      outerWidth(true)------>w、p、b、m

      4   on() 和 off()

      分别对元素进行消息的绑定和解绑。

      6 用于控制动画的函数

     第一组：show(),hide()。宽高透明度一起变

      第二组：fadeIn(),fadeOut(),fadeTo()。用于控制透明度

      第三组：sladeUp(),slideDown()。用于控制高度

      最后为animate();是以上三组函数的结合。

     当然JQ中的方法不止以上所提到的这些，但是这些都是比较常用的方法。总之，JQ的学习主要是方法的查询和使用。