折叠菜单及采纳器的行使,折叠菜单采纳器

后天才发掘原先筛选标签还足以那样用。

折叠菜单及接纳器的采纳,折叠菜单选择器

明日才意识原本筛选标签仍是能够这么用。

not(expr|ele | fn):从相称元素的集合中除去与钦赐表明式匹配的因素

上面demo中的使用:   var $category = 
$(“.sub-category-box>ul>li:gt(2):not(:last)”); 
//列表中索引大于2的,除了最终三个

filter(expr|obj|ele|fn)
:r筛选出与钦定表明式相称的因素集结。这些措施用于收缩相称的界定。用逗号分隔三个表达式

$(“ul>li”).filter(“:contains(‘佳能(CANON)’),:contains(‘Sony’),:contains(‘三星(Samsung)’)”)
.toggleClass(“promoted”);//
筛选出li标签中带有佳能(CANON)、索尼(Sony)、Samsung的竹签,并设置class

找个demo中使用了那四个方法。 突然以为 jQuery真的是好庞大。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .sub-category-box{
      width: 300px;
      border: 1px solid #000;
      margin: 20px auto;
      background-color: gainsboro;
    }
    .sub-category-box ul{
      list-style: none;
      width: 100%;
      overflow: hidden;
    }
    .sub-category-box ul li{
      float: left;
      width: 95px;
      height: 35px;
      text-align: center;
      background-color: darkorange;
      box-sizing: border-box;
      line-height: 40px;
      border-radius: 5px;
      margin: 2px;
    }
    .promoted{
      background-color: red !important;
      color: white !important;
    }
    .sub-category-box .show-more{
      width: 100%;
      height: 30px;
      border: 1px solid #000;
      text-align:center;
    }
    .sub-category-box .show-more a{
      text-decoration: none;
      line-height: 30px;
    }
  </style>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script>
    $(function () {
      //列表中索引大于2的,除了最后一个
      var $category = $(".sub-category-box>ul>li:gt(2):not(:last)");
      $category.hide();

      $('.show-more').click(function () {
        $category.stop().slideToggle(300);
        //筛选出符合条件的选择器
        $("ul>li").filter(":contains('佳能'),:contains('索尼'),:contains('三星')")
             .toggleClass("promoted");
        return false;
      });
    });
  </script>
</head>
<body>
<div class="sub-category-box">
  <ul>
    <li>佳能</li>
    <li>索尼</li>
    <li>三星</li>
    <li>尼康</li>
    <li>松下</li>
    <li>卡西欧</li>
    <li>富士</li>
    <li>柯达</li>
    <li>理光</li>
    <li>明基</li>
    <li>松下</li>
    <li>卡西欧</li>
    <li>富士</li>
    <li>柯达</li>
    <li>海尔</li>
    <li>其他品牌</li>
  </ul>
<div class="show-more">
  <a href="javasript:void(0);">显示全部品牌</a>
</div>
</div>
</body>
</html>

以上正是本文的全部内容,希望本文的剧情对大家的读书只怕干活能带动一定的赞助,同一时间也盼望多多协助帮客之家!

昨日才发觉原先筛选标签仍是能够这样用。 not(expr|ele |
fn):从相配元素的集纳中去除与钦命表达…

jQuery 筛选,jQuery筛选

筛选
1.过滤
    1.1 eq(index|-index) 获取第N个元素
        index 从0开始算
        -index 从最后八个成分算,从1起始
        $(“li”).eq(2);
        $(“li”).eq(-2);
    1.2 first() 获取第二个成分
        $(“li”).first();
    1.3 last() 获取最后三个要素
        $(“li”).last();
    1.4 hasClass(class) 检查当前的因素是不是包括有个别特定的类。等同于
is(“.” + class)。
        $(“li”).haClass(“active”);
    1.5 filter(expr|obj|ele|fn)
筛选出与钦命表明式相称的要素集合,用于裁减匹配的限制
        $(“p”).filter(“.selected”);
        $(“p”).filter(“selected,:first”);
        $(“p”).filter(function(index){    //保留子成分中不含有ol的因素
            return $(“ol”,this).length==0;  
        });
    1.6    is(expr|obj|ele|fn) 依据选择器、DOM成分或 jQuery
对象来检查评定相配成分会集,假诺内部至少有贰个成分符合那几个给定的表明式就回去true。
        $(“p”).parent().is(“div”);
        $(“p”).is(function(index){
            return $(“span”,this).length==0;
        });
    1.7 map(callback)
将一组成分转换来其余数组(不论是或不是是成分数组),用那一个函数来树立三个列表,不论是值、属性照旧CSS样式,恐怕其它极其形式。
        $(“p”).append($(“input”).map(function(){
            return $(this).val();
        }).get().join(“, “));  //数组根据join的参数连接起来
    1.8 has(expr|ele)
保留包含特定后代的因素,去掉那叁个不带有钦定后代的成分。
        $(“li”).has(“ul”).css(“color”,”red”)
    1.9 not(expr|ele|fn) 删除与钦赐表明式相配的要素
        $(“p”).not(“.active”);
        $(“p”).not(function(index,element){
            return this.id==this.className;
        });
    1.10 slice(start,[end]) 选择贰个十二分的子集
         $(“p”).slice(0,2);
         $(“p”).slice(1);
         $(“p”).slice(-1);
2.查找
    2.1 children([expr])
获得一个包罗相称的因素集结中每一个要素的享有子成分的成分集合
        $(“p”).children();
        $(“p”).children(“.active”)
    2.2 find()
搜索全数与钦点表明式相配的成分。那些函数是寻觅正在管理的要素的儿孙成分的好办法
        $(“p”).find(“a”);
    2.3 next([expr])
猎取二个带有相配的要素集结中每三个成分紧邻的背后同辈成分的因素群集
        $(“p”).next();
        $(“p”).next(“.selected”);
    2.4 nextAll([expr]) 查找当前成分之后全部的同辈成分
        $(“p”).nextAll();
    2.5    nextUntil([exp|ele][,filter])
查找当前成分之后有所的同辈成分,直到遇见匹配的百般成分截至
        $(“p”).nextUntil(“div”);
        $(“p”).nextUntil(“div”,”.active”);
//唯有class为active的因素并且在div成分从前才干被入选
    2.6    parent([expr])
获得三个包含着全数匹配成分的无与伦比父成分的要素会集
        $(“p”).parent();
        $(“p”).parent(“.active”);
    2.7 parents([expr])
获得二个富含着独具匹配成分的先世成分的要素集结(不包蕴根成分)
        $(“p”).parents();
        $(“p”).parents(“div”);
        $(“p”).parents().map(function(){return
this.tagName;}).get().join(“, “);
//this.tagName==$(obj).attr(“tagName”);
    2.8 parentsUntil([expr|element][,filter])
查找当前成分的有着的大叔成分,直到碰着相配的不胜元素停止。
        $(“p”).parentsUntil(“div”);
    2.9 prev([expr])
获得二个带有相配的要素集结中每三个元素紧邻的前二个同辈成分的因素集结
        $(“p”).prev();
        $(“p”).prev(“.selected”);
    2.10 prevAll([expr]) 查找当前成分以前全部的同辈成分
        $(“p”).prevAll();
    2.11 prevUntil([expr|ele][,filter])
查找当前因素在此之前全数的同辈成分,直到遇见相配的要命元素截至
        $(“p”).prevUntil(“div”);
    2.12 siblings([expr])
获得几个带有相配的元素集结中每一个因素的具备唯一起辈成分的要素集结
        $(“p”).siblings();
        $(“p”).siblings(“.active”);
    2.13 offsetParent()
重回第多个相配成分用于固定的父节点,那重临父成分中首先个其position设为relative只怕absolute的要素。此措施仅对可知成分有效
        $(“p”).offsetParent();
3.串联
    3.1 add(expr|ele|html|obj[,con])
把与表明式相配的成分加多到jQuery对象中。那么些函数能够用于连接分别与七个表明式相配的要素结果集。
      
 $(“p”).add(“span”).css(“color”,”red”);p与span成分中的文字颜色变为海军蓝
    3.2 andSelf() 到场先前所选的 参与当前因素中
      
 $(“p”).find(“span”).css(“color”,”red”);span和p中的文字都将变为青古铜色
    3.3 contents() 查找相称成分内部有着的子节点(包含文件节点)。
        $(“p”).contents().not(“[nodeType=1]”).wrap(“<b />”)
        nodeType=1  代表成分
        nodeType=2  代表属性
        nodeType=3  代表文本内容
        nodeType=8  代表注释
    3.4 end()
回到方今的三个”破坏性”操作在此以前。即,将格外的因素列表变为前一回的情形
      
 $(“p”).find(“span”).end().css(“color”,”red”);//给p中的文字加上黑褐

筛选,jQuery筛选 筛选 1.过滤 1.1
eq(index|-index) 获取第N个成分 index 从0早先算 -index
从最后贰个成分算,从1初阶 $(“li”).eq(2); $(“li”).eq(-2)…

1、eq()    筛选钦定索引号的成分
2、first()  筛选出第三个门户特别的因素
3、last()   筛选出最终叁个相称的成分
4、hasClass()  检查相称的要素是或不是带有钦命的类
5、filter()  筛选出与钦点表明式相称的因素集结
6、is()    检查成分是还是不是参数里能相配上的
7、map()
8、has()  筛选出含有内定子成分的要素
9、not()  排除能够被参数中相称的因素
10、slice()    从钦点索引开端,截取内定个数的成分
11、children()  筛选获得钦赐成分的财富
12、closest()   从此时此刻因素初阶,重返起头相配到的符合条件的父元素
13、find()    从钦点元素中查找子成分
14、next()     获取钦命元素的下三个小伙子成分
15、nextAll()   获取其后的具有兄弟元素
16、nextUntil() 
获取其后的成分,直到参数能相称上的完毕,不包蕴停止条件十三分
17、offsetPosition()  再次来到第一个用于固定的上代元素,即查找祖先成分中position为relative或absolute的要素。
18、parent()   获取钦命元素的直接父成分
19、parents()  
获取钦点元素的富有祖先元素,一向到<body></body>
20、parentsUntil()  获取钦点成分的祖宗成分,知道参数里能相称到的了断
21、prev()    获取钦赐成分的前四个小家伙成分
22、prevAll()   获取内定成分前边的兼具兄弟成分
23、prevUntil()  
获取钦点成分前面包车型大巴具备兄弟成分,直到参数里的标准能够同盟到的。
注意参数条件本人不会被相称
24、siblings()   获取钦命成分的兄弟成分,不分前后
25、add()    将入选的成分增多到jQuery对象集结中
26、andSelf()  将自个儿加到选中的jQuery会集中,以有益一遍性操作
27、end()     将改成近日选取器选中的操作回退为上三个气象。
28、contents  未明白

not(expr|ele | fn):从相配成分的成团中除去与钦命表明式相配的因素

************************* 筛选
************************************

下边demo中的使用:   var $category = 
$(“.sub-category-box>ul>li:gt(2):not(:last)”); 
//列表中索引大于2的,除了最终一个

一、eq()  筛选钦命索引号的要素

filter(expr|obj|ele|fn)
:r筛选出与钦点表明式相称的要素集合。这几个法子用于缩短相称的限定。用逗号分隔多少个表达式

  语法:eq(index|-index)  索引号从0起头,若为负值,则从最终三个方始尾数,最终叁个从-1开始

$(“ul>li”).filter(“:contains(‘佳能(CANON)’),:contains(‘索尼(Sony)’),:contains(‘三星(Samsung)’)”)
.toggleClass(“promoted”);//
筛选出li标签中富含CANON、索尼(Sony)、三星(Samsung)的竹签,并设置class

  $("p").eq(1);  //如果选择器改为 $("p").eq(-1),则我是第四个P会被选中
    
  <div>
    <p>我是第一个P</p>
    <p>我是第二个P</p>  //会被选中,索引值为1
    <p>我是第三个P</p>
    <p>我是第四个P</p>
  </div>  

找个demo中运用了那五个格局。 突然认为 jQuery真的是好壮大。

二、first()  筛选出第二个地位非常的成分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .sub-category-box{
      width: 300px;
      border: 1px solid #000;
      margin: 20px auto;
      background-color: gainsboro;
    }
    .sub-category-box ul{
      list-style: none;
      width: 100%;
      overflow: hidden;
    }
    .sub-category-box ul li{
      float: left;
      width: 95px;
      height: 35px;
      text-align: center;
      background-color: darkorange;
      box-sizing: border-box;
      line-height: 40px;
      border-radius: 5px;
      margin: 2px;
    }
    .promoted{
      background-color: red !important;
      color: white !important;
    }
    .sub-category-box .show-more{
      width: 100%;
      height: 30px;
      border: 1px solid #000;
      text-align:center;
    }
    .sub-category-box .show-more a{
      text-decoration: none;
      line-height: 30px;
    }
  </style>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script>
    $(function () {
      //列表中索引大于2的,除了最后一个
      var $category = $(".sub-category-box>ul>li:gt(2):not(:last)");
      $category.hide();

      $('.show-more').click(function () {
        $category.stop().slideToggle(300);
        //筛选出符合条件的选择器
        $("ul>li").filter(":contains('佳能'),:contains('索尼'),:contains('三星')")
             .toggleClass("promoted");
        return false;
      });
    });
  </script>
</head>
<body>
<div class="sub-category-box">
  <ul>
    <li>佳能</li>
    <li>索尼</li>
    <li>三星</li>
    <li>尼康</li>
    <li>松下</li>
    <li>卡西欧</li>
    <li>富士</li>
    <li>柯达</li>
    <li>理光</li>
    <li>明基</li>
    <li>松下</li>
    <li>卡西欧</li>
    <li>富士</li>
    <li>柯达</li>
    <li>海尔</li>
    <li>其他品牌</li>
  </ul>
<div class="show-more">
  <a href="javasript:void(0);">显示全部品牌</a>
</div>
</div>
</body>
</html>

  语法:first()  此格局未有参数

以上就是本文的全体内容,希望本文的剧情对大家的上学也许干活能带动一定的补助,同一时候也盼望多多支持脚本之家!

  $("p").first();  
  <div>
    <p>我是第一个P</p>  //我的索引值是0,我是第一个,我会被选中
    <p>我是第二个P</p>
    <p>我是第三个P</p>
    <p>我是第四个P</p>
  </div> 

你也许感兴趣的篇章:

  • Bootstrap创设多个右侧折叠菜单的系列模板(一)
  • Bootstrap营造一个左方折叠菜单的系统模板(二)
  • 依据jQuery完毕轻巧的折叠菜单效率
  • JS完毕超轻易的仿QQ折叠菜单功效
  • JS完结Infiniti级网页折叠菜单(类似树形菜单)效果代码
  • jQuery完毕的简短折叠菜单(折叠面板)效果代码
  • JS完成三级折叠菜单特效,别的级可自行缩短
  • 微信小程序
    省市区选用器实例详解(附源码下载)
  • 微信小程序
    选拔器(时间,日期,地区)实例详解
  • jQuery中Find选择器用法示例
  • Bootstrap时间接选举用器datetimepicker和daterangepicker使用实例解析

 三、last()  筛选出最后二个合营的要素

   语法:last()  此办法未有参数

  $("p").last();   
  <div>
    <p>我是第一个P</p>
    <p>我是第二个P</p>
    <p>我是第三个P</p>
    <p>我是第四个P</p> //我是最后一个,我会被选中
  </div> 

四、hasClass()  检查相称的要素是或不是带有钦定的类

  语法:hasClass(class)  class为品种名  //重返布尔值

 if($("p").hasClass("p2"))
  {
    alert("我里面含有class=p2的元素");  //会弹出,p里的确存在class="p2"的元素
  } 
  <div>
    <p>我是第一个P</p>
    <p class="p2">我是第二个P</p>
    <p>我是第三个P</p>
    <p>我是第四个P</p>
  </div> 

 五、filter()  筛选出与钦点表明式匹配的成分集结

  语法:filter(expr|obj|ele|fn)  expr:相配表明式|obj:jQuery对象,用于相称现成元素| DOM:用于相称的DOM成分 | function重回值作为相称原则

  $("p").filter(".p2");
  <div>
    <p>我是第一个P</p>
    <p class="p2">我是第二个P</p>  //我会被选中,我的class="p2"
    <p>我是第三个P</p>
    <p>我是第四个P</p>
  </div>  

 六、is()    检查元素是不是参数里能相配上的

  语法:is(expr|obj|ele|fn)  expr:相称表明式|obj:jQuery对象,用于相配现存成分| DOM:用于匹配的DOM成分 | function再次来到值作为相称原则

  $($("p").first().is(".p2"))
  {
    alert("不会弹出,因为第一个P的class不等于p2"); 
  }
  <div>
    <p>我是第一个P</p>
    <p class="p2">我是第二个P</p>  //我会被选中,我的class="p2"
    <p>我是第三个P</p>
    <p>我是第四个P</p>
  </div> 

七、map()

八、has()  筛选出含有钦定子成分的因素

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图