<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>筛选</title>
    <script rel="script" src="js/jquery.min.js"></script>
    <script rel="script" src="js/vue.min.js"></script>
    <style>

    </style>
</head>

<body>
<p>Anna</p>
<p>Jack</p>
<p>Sunny</p>
<p>Anny</p>

<ol>
    <li>列表项1</li>
    <li>列表项<strong>2</strong></li>
    <li>列表项3</li>
    <li><strong>列</strong>表项<strong>4</strong></li>
</ol>

<em>wind</em>
<em class="weather">snow</em>
<em>sunny</em>

<ul>
    <li>1</li>
    <li>2
       <ul>
           <li>4</li>
           <li>6</li>
           <li>5</li>
       </ul>
    </li>
    <li>3</li>
    <li>4</li>
</ul>

<script>
1、eq();
    $(document).ready(function () {
        $("p").eq(1).css({"color":"red"});//正数第二个
        $("p").eq(0).css({"color":"green"});//正数第一个
        $("p").eq(-1).css({"color":"yellow"});//倒数第一个
        $("p").eq(-2).css({"color":"blue"}); //倒数第二个
2、first();
        $("li").first().css({"color":"#ff00ff"});//获取第一个元素
3、last();
        $("li").last().css({"color":"red"});//获取最后一个元素
4、is();
        $("li").click(function() {
            var $li = $(this),
                    isWithTwo = $li.is(function() {//is  筛选器的使用
                        return $('strong', this).length === 2;//列表项内有两个strong标签的是列表项4
                    });
            if ( isWithTwo ) {
                $li.css("border", "1px solid #11dd22");//当当前点击列表项有两个strong标签时就把边框色改为#11dd22
            } else {
                $li.css("border", "1px solid #647787");//点击列表项时把边框改为#647787.
            }
        });
5、has();
        $('li').has('ul').css('border', '1px solid #f0f');//给含有ul的li加上边框,即只有距离ul很近的li才会被识别到，
        // 否则是无法识别到的
6、slice();
        //slice(start, [end])使用：
        // start:开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。
        //end:结束选取自己的位置，如果不指定，则就是本身的结尾。

        $("p").slice(0, 1).wrapInner("<i></i>");//第一个p标签文本变为倾斜
    });
</script>

</body>
</html>

jQuery筛选器常用总结的更多相关文章

  1. jQuery 筛选器1

    jQuery 筛选器1 筛选器1: 在选择器选择的基础上在选择一次 // 当前点击的标签$(this) $(this) // .next() 获取当标签的下一个标签 $(this).next(); / ...

  2. jQuery 筛选器2

    jQuery 筛选器2 // 由于$()只能输入字符串$('#li:eq(1)'),可通过.eq()来传入. // 获取this标签中的指定属性 $(this).eq(1) // 获取第一个元素 $( ...

  3. jQuery筛选器及对DOM修改（学习笔记）

    1.jQuery筛选器 注意:请先在管理Nuget程序包中查找jQuery包,并安装.也可以在jQuery官网下载. 实现: <!DOCTYPE html> <html xmlns= ...

  4. 【jQuery】jQuery筛选器规则

    转载自:http://blog.csdn.net/lijinwei112/article/details/6938134 筛选器中加入变量 var ac = "select_" + ...

  5. jQuery筛选器及练习

    jQuery初识   jQuery是什么? jQuery是一个兼容多浏览器的JavaScript库. jQuery能极大地简化JavaScript编程,它的宗旨就是:"Write less, ...

  6. jQuery笔记-jQuery筛选器children()详解

    jQuery的选择包含两种,一种是选择器,一种是筛选器.筛选器是对选择器选定的jQuery对象做进一步选择. children()是一个筛选器,顾名思义就是筛选孩子,筛选那些符合条件的孩子. 完整的格 ...

  7. python jQuery筛选器

    筛选器:$(this).next() 下一个    $(this).prev  上一个    $(this).parent()  父     $(this).children() 孩     $(th ...

  8. JQuery筛选器全系列介绍

    jQuery提供了强大的选择器让我们获取对象.在这边,我人为地将jQuery选择器分为两大部分:选择对象和筛选条件.选择对象表示要获取什么对象,筛选条件是对获取的对象进行筛选,最终留下符合某些特征的对 ...

  9. jQuery 筛选器 链式编程操作

    $('#i1').next() 下一个标签$('#i1').nextAll() 兄弟标签中,所有下一个标签$('#i1').nextUntil('#ii1') 兄弟标签中,从下一个标签到id为ii1的 ...

随机推荐

  1. CNN学习入门

    https://blog.csdn.net/ice_actor/article/details/78648780

  2. IMX6开发板学习烧写Linux-QT系统步骤做个笔记

    平台:迅为-i.MX6开发板  烧写系统:Linux-QT   <ignore_js_op>   Qt系统的烧写,是使用 MfgTool2 工具,只需要简单的配置下.   打开 “Mfgt ...

  3. VMware虚拟机环境配置--网络配置

    Hadoop集群搭建第一篇. 环境: VMware workstation 12, centos 6.5 配置虚拟机网络连接模式为NAT模式(共享主机的ip地址). 桥接模式: 和主机windows是 ...

  4. yolo

     将目标检测过程设计为为一个回归问题(One Stage Detection),一步到位, 直接从像素到 bbox 坐标和类别概率 优点: 速度快(45fps),效果还不错(mAP 63.4) 利用 ...

  5. Shell-find . -type f -name "*.jpg" -print | xargs tar -czvf images.tar.gz

    查找所有的 jpg 文件,并且压缩它们: find . -type f -name "*.jpg" -print | xargs tar -czvf images.tar.gz

  6. 《Debug Hacks》和调试技巧【转】

    转自:https://blog.csdn.net/sdulibh/article/details/46462529 Debug Hacks 作者为吉冈弘隆.大和一洋.大岩尚宏.安部东洋.吉田俊辅,有中 ...

  7. 即速应用_微信小程序开发 http://www.jisuapp.cn/

    即速应用_微信小程序开发   http://www.jisuapp.cn/

  8. WINDOWS系统中常用网络命令及命令实例详解

    一.查询DNS.IP,mac地址及DHCP服务的情况 二.查看ARP表:MAC地址与IP地址的映射表 三.查看共享资源 四.查看局域网内的主机名 五.查看用户列表  六.路由跟踪命令 七.查看共享资源 ...

  9. python的assert关键字用法

  10. python多线程中锁的概念

    1 2 3 4 5 6 7 8 mutex = threading.Lock() #锁的使用 #创建锁 mutex = threading.Lock() #锁定 mutex.acquire([time ...