<!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. Applet、Scriptlet与Servlet

    Applet.Scriptlet与Servlet - 青春念邵的博客 - 博客频道 - CSDN.NEThttp://blog.csdn.net/mo_fan_qing_wa/article/deta ...

  2. EasyGui的一个小例子

    EasyGui的安装:首先下载easyGui安装包,地址链接:https://pan.baidu.com/s/1D8f_eXWn7l8xhcTuEsqZmA 密码:e5z5 安装步骤: 1.进入eas ...

  3. java在进程启动和关闭.exe程序

    /** * @desc 启动进程 * @author zp * @date 2018-3-29 */ public static void startProc(String processName) ...

  4. CentOS 7 安装配置 MySQL

    https://blog.imzhengfei.com/centos-7-an-zhuang-pei-zhi-mysql/ MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前 ...

  5. About me & OI这一年

    1 最近碰到一些 OIers 问我学 OI 的经历 回忆了一下,我做的第一道题是A+B Problem,时间:2018年2月15日 呀,正好一年了 2 我是来自 HB 的 OIer 一枚 现在高一,就 ...

  6. 【python网络爬虫】之requests相关模块

    python网络爬虫的学习第一步 [python网络爬虫]之0 爬虫与反扒 [python网络爬虫]之一 简单介绍 [python网络爬虫]之二 python uillib库 [python网络爬虫] ...

  7. c++从文件路径获取目录

    场景 c++从文件路径获取目录 实现代码 初始化是不正确的,因为需要转义反斜杠: string filename = "C:\\MyDirectory\\MyFile.bat"; ...

  8. Libevent源码分析系列【转】

    转自:https://www.cnblogs.com/zxiner/p/6919021.html 1.使用libevent库     源码那么多,该怎么分析从哪分析呢?一个好的方法就是先用起来,会用了 ...

  9. python类的使用

    下面是一个员工类的创建及类对象的创建实例: #!/usr/bin/python # -*- coding: UTF-8 -*-class Employee: empCount = 0 def __in ...

  10. centos6.9安装crontab

    yum install vixie-cron crontabs //安装 chkconfig crond on //开机自启动 service crond start //启动 然后就是执行 cron ...