<!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. Javascript - ExtJs - XTemplate组件

    XTemplate组件(Ext.XTemplate) 如果有一些重复的html代码需要装入数据,可以考虑使用XTemplate模板组件.XTemplate可以填入数组.对象,支持条件判断.for循环. ...

  2. Springboot引入多个yml方法

    SpringBoot默认加载的是application.yml文件,所以想要引入其他配置的yml文件,就要在application.yml中激活该文件 定义一个application-resource ...

  3. Nginx系列6：对称加密与非对称加密各自的应用场景

    强推:推荐一篇通俗易懂的对称加密和非对称加密的文章:https://segmentfault.com/a/1190000004461428 推荐一篇文章:对称加密算法与非对称加密算法的优缺点:http ...

  4. delete 和 delete []的区别

    (1). 针对简单类型 使用new分配后的不管是数组还是非数组形式内存空间用两种方式均可 如:   int *a = new int[10];   delete a;   delete [] a;   ...

  5. qtcreator 快捷键常用

    F1        查看帮助F2        跳转到函数定义(和Ctrl+鼠标左键一样的效果)Shift+F2    声明和定义之间切换F4        头文件和源文件之间切换Ctrl+1     ...

  6. iframe教程

    有关iframe的最强大的强大的教程 $(window.parent.document).contents().find("#tab_release"+taskId2+" ...

  7. Windows下return，exit和ExitProcess的区别和分析

    通常,我们为了使自己的程序结束,会在主函数中使用return或调用exit().在windows下还有ExitProcess()和TerminateProcess()等函数. 本文的目的是比较以上几种 ...

  8. /etc/shadow中密码段的生成方式

    why? 为什么要手动生成? 通常情况下,使用passwd命令即可以为用户设置密码,但是在某些情况下是需要先获得加密后的密码然后去操作的,比如,kickstart文件中的rootpw指令,ansibl ...

  9. linux批量替换文件内容3种方法(perl,sed,shell)

    方法1:perl   这两天在构建一个应用的使用用到了maven,由于project很大,足足有700多个 pom.xml文件,更郁闷的是在很多pom.xml文件里都单独指定了资源库的url,我需要把 ...

  10. hibernate框架学习之二级缓存（测试用例）

    HqlDemoApp.java package cn.itcast.h3.query.hql; import java.io.Serializable; import org.hibernate.Qu ...