jQuery中的一些选择器方法

54 阅读 0 评论 36 点赞

我是靠谱客的博主大力楼房，最近开发中收集的这篇文章主要介绍jQuery中的一些选择器方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

jQuery是一个JavaScript库，它通过封闭原生JavaScript函数得到一整套定义好的方法。它的作者是John Resig,于2006年创建的一个开源项目，随着越来越多开发者的加入，jQuery已经集成了JavaScript、CSS、DOM、和Ajax于一体的强大功能，它可以用最少的代码，完成更多复杂而困难的功能，从而得到了开发者的青睐。
主指：以更少的代码、实现更多的功能。
jQuery是一个基于自身封装的jQuery对象的所有方法集，全部使用函数才可以使用return，所以为了可以连缀，就将所有的内容都设置为方法函数，而不是用属性设值。
主要功能有以下几点：
1.像CSS那样访问和操作DOM
2.修改CSS控制页面外观
3.简化JavaScript代码操作
4.事件处理更加容易
5.各种动画效果使用方便
6.让Ajax技术更加完美
7.基于jQuery大量插件
8.自行扩展功能插件
jQuery最大的优势，就是特别的方便。比如模仿CSS获取DOM，比原生的JavaScript要方便太多。并且在多个CSS设置上的集中处理非常舒服，而最常用的CSS功能又封装到单独的方法，感觉非常有心。最重要的是jQuery的代码兼容性非常好，你不需要总是头疼着考虑不同浏览器的兼容问题。
在jQuery程序中，不管是页面元素的选择、内置的功能函数，都是美元符号“ $” 来起始的。而这个 “$ ”就是jQuery当中最重要且独有的对象：jQuery对象。
**注意：**DOM对象是一个对象，只能是一个对象，所有的jQuery方法DOM都不能使用。所有的DOM方法，jQuery对象都不能使用。
jQuery简单的常用方法

    $("div").html(""); 添加html
    $("div").text(""); 添加文本
    $("div").width(100);  设置div的行内样式width
    $("div").height(100);  设置div的行内样式width
    $("div").css("color","red");  设置div的行内样式
    $("div").on("click",clickHandler);  给所有div添加点击事件侦听
    $("div").off("click",clickHandler);  给所有div删除点击事件侦听
    $(DOM);将DOM元素转换为jQuery对象
    var arr=Array.from($("button")); 将jQuery列表转换为DOM对象的数组
     将jQuery列表中第几个DOM元素提取出来出来变为了DOM对象
     $("button")[0];
     $("button").get(0);
     将jQuery列表中指定下标的元素筛选形成新的jQuery对象
     $("div").eq(3).css("color","red");
     $("div:eq(3)").css("color","red");

jQuery的选择器

         $("li,div");群组选择器
         $("ul div");后代选择器
         $("li>div");子代选择器
         $("div.divs");选择div标签中class是divs的所有元素
         $("div").find(".divs");等同于$("div .divs")；选择div标签后代中class是divs的元素
         $("div>*");选择div中所有子代元素
         $("div").children("span");等同于$("div>span");选择div中子代中的span元素
         $("div *");选择div的所有后代元素
         $("#li0+");等同于$("#li0+*");等同于$("#li0").next(); 查找id是li0的下一个兄弟元素，这个兄弟元素可以是任意元素
         $("#li0").next("li"); 等同于$("#li0+li");查找id是li0的下一个兄弟元素必须是li的，如果不是li元素就不能被选中
         $("#li0~");等同于$("#li0~*");查找id是li0的后面所有兄弟元素
         $("#li0").nextAll("li");等同于$("#li0~li");查找id是li0的后面所有li标签的兄弟元素
         $("#li0").nextUntil("span");从id是li0的元素开始向下选择兄弟元素到span元素之前为止
         $("#li0").prev("li");获取id是li0的上一个兄弟元素是li元素的
         $("#li0").prevAll("li");获取id是li0的向上所有兄弟元素是li元素的
         $("#li0").prevUntil("span");从id是li0的元素开始向上选择兄弟元素到span元素之前为止
         $("#li0").siblings("span");根据id是li0的元素所有的上下的兄弟元素中是span

jQuery的属性选择器

        $("[type]");选择有type属性的所有元素
        $("[type][name]");选择有type和name属性的元素
        $("[abc=3]");选择某个属性是某个值的元素
        $("[hobby^=a]");选择属性是hobby并且值是以a字母开始的元素
        $("[hobby$=e]");选择属性是hobby并且值是以e字母结束的元素
        $("div[hobby!=ade]");选择属性是hobby但是值不等于ade的所有元素，如果属性没有也会被选中
        $("[toggle|=book]");选择属性是toggle，并且这个属性的值是book起头，后面紧跟-的值
        $("[class~=div3]");选择属性是class，属性值中包含div3或者等于div3.包含div3在这里是指div3是一个独立的单词，前后有空格隔开
        $("[class*=div3]");选择属性是class，属性值的字符串中含有div3字符的，可以不是一个独立的单词

jQuery的过滤器
过滤器基于选择器的基础上，进行精细的过滤

      $("li:first");将所有li放在一个列表中，查找它的第一个元素
      $("li").first();将所有li放在一个列表中，查找它的第一个元素,比上面查找速度更快，效率更高。
      $("li:first-child");将li是父元素的第一个子元素是li的选中
      $("li:nth-of-type(1)");li是不是它父元素中li类型列表的第一个子元素
      $("li:last";；将所有li放在一个列表中，查找它的最后一个元素
      $("li").last();将所有li放在一个列表中，查找它的最后一个元素，比上面查找速度更快，效率更高。
      $("li:last-child");将li是父元素的最后一个子元素是li的选中
      $("li:last-of-type");将li是父元素的最后一个子元素是li的选中
      $("li:even");将所有的li放在一个列表中，并且获取偶数项，这个even的偶数是从0开始
      $("li:nth-child(even)");等同于$("li:nth-child(2n)");将每个li的父元素中所有列表的偶数项是li选中，这个even的偶数项是从1开始的
      $("li:nth-of-type(even)");等同于$("li:nth-of-type(2n)");将li父元素中li类型元素的列表中是偶数项的选中，这个even的偶数也是从1开始
      $("ul :even");ul中所有子元素中偶数项
      $("li:odd");将所有的li放在一个列表中，并且获取奇数项，这个odd的奇数是从0开始
      $("li:nth-child(odd)");等同于$("li:nth-child(2n-1)");将每个li的父元素中所有列表的奇数项是li选中，这个odd的奇数项是从1开始的
      $("li:nth-of-type(odd)");等同于$("li:nth-of-type(2n-1)");将li父元素中li类型元素的列表中是奇数项的选中，这个odd的奇数也是从1开始
      $("li:eq(0)");等同于$("li").eq(0);li列表中的第0个元素
      $("div:gt(3)");大于div列表的第三项的其他元素
      $("div:lt(3)");小于div列表的第三项的其他元素
      $("div").slice(2,4);和数组中的slice相同
      $("div:not(.divs)");等同于$("div").not(".divs");div列表中不是class为divs的元素
      $("div:not([class])");div列表中没有class属性的元素
      $(":header");所有h1-h6的元素
      $(":animated");所有正在播放的动画元素
      $(":focus");当前汇聚焦距属性
      $("div:empty");选择没有子元素或者子节点的div
      $("div:contains(3)");div的后代元素中包含3子节点的元素,只能是内容不能是元素
      $(":contains(3)");找到包含这个内容所有父容器
      查找包含选择器元素的容器
      $(":has(.divs)");
      $(":has(#div0)");
      $("div").has("#div0");
      $(".divs").parent();查找当前.divs元素的父容器
      $(".divs").parents();查找当前.divs元素的所有父容器
      $(".divs").parentsUntil("html");查找当前.divs元素的父元素到html之前的所有父容器
      $(":hidden");隐藏的 所有不可见的元素,还包括display:none，像visibility: hidden和height:0都不属于隐藏的
      $(":visible");所有可以显示的元素
      $("div:only-child");该元素是父元素唯一子元素
      $("div:only-of-type");该元素在它的父容器中的同种类型仅此一个
      is(),hasClass();两个方法是最特殊的两个方法,他们都是返回一个布尔值，后面不能继续连缀
      $("div").is(".divs");判断div列表中是否由.divs选择器的元素，有就返回true,没有就返回false
      $("div").hasClass("divs");作用是仅判断div列表中是否有class是divs的选择器，有就返回true 反之返false