<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li id="li1">1</li>
        <li class="li2">2</li>
        <li name="li3">3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <script src="./jquery.min.js"></script>
    <script>
        // 筛选器 : 在通过选择器获取的标签对象伪数组的基础上,再次筛选出需要的标签内容
        
        // 筛选器的执行结果,也是一个伪数组
        // 筛选器是在通过选择器获取的伪数组基础上,再次筛选
        // 筛选器是为了链式编程服务
        // $('ul>li') 在 获取的 ul中li 的伪数组基础上,再次筛选
        // 伪数组中的第一个
        console.log( $('ul>li').first() );
        // 伪数组中的最后一个
        console.log( $('ul>li').last() );
        // 伪数组中按照索引下标筛选
        console.log( $('ul>li').eq(2) );
        // 伪数组中,当前标签的上一个兄弟标签
        console.log( $('ul>li').eq(2).prev() );
        // 伪数组中,当前标签的下一个兄弟标签
        console.log( $('ul>li').eq(2).next() );
        // 伪数组中,当前标签之前的所有兄弟标签,顺序是就近顺序
        console.log( $('ul>li').eq(2).prevAll() );
        // 伪数组中,当前标签之后的所有兄弟标签,顺序是就近顺序
        console.log( $('ul>li').eq(2).nextAll() );
        // 伪数组中,当前标签的所有兄弟标签,顺序是从第一个开始
        console.log( $('ul>li').eq(2).siblings() );
        // 伪数组中,当前标的直接父级标签,就一层
        console.log( $('ul>li').eq(2).parent() );
        // 伪数组中,当前标的所有父级标签,有几层算几层
        console.log( $('ul>li').eq(2).parents() );
        // 伪数组中,当前标签的索引下标
        console.log( $('ul>li').eq(2).index() );
        console.log( $('ul').find('#li1').index() );
        // 在父级标签中,按照条件筛选,找子级标签中,符合条件的标签对象 
        // 条件是任意的html,css支持的语法形式
        console.log( $('ul').find('#li1') );
        console.log( $('ul').find('.li2') );
        console.log( $('ul').find('[name="li3"]') );
    </script>
</body>
</html>

jquery的筛选器的更多相关文章

  1. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  2. jQuery 初识 筛选器 属性选择器

    ---------------------------大事使我们惊讶,小事使我们沮丧,久而久之,我们对这二者都会习以为常. 一 jQuery是什么? ［1］   jQuery由美国人John Resi ...

  3. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  4. jquery选择器筛选器

    jQuery对象 Query 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里 ...

  5. jquery查找筛选器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. JQuery 选择器 筛选器

    什么是jQuery对象 参考:http://jquery.cuishifeng.cn/css.html jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQue ...

  7. jQuery基本筛选器-表单筛选器-关系筛选器

    一.基本筛选器 :first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素,从 0 开始计数 :odd ...

  8. 【jQuery】总结:筛选器、控制隐藏、操作元素style属性

    筛选器 -> http://blog.csdn.net/lijinwei112/article/details/6938134 常用到的: $("tr[id=ac_"+id+ ...

  9. 【jQuery】jQuery筛选器规则

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

  10. jQuery中的选择器及筛选器

    1.jQuery的介绍 1.jQuery是继prototype之后又一个优秀的Javascript框架.其宗旨是--WRITE LESS,DO MORE! 2.它是轻量级的js库,这是其它的js库所不 ...

随机推荐

  1. Spring 源码阅读（二）IoC 容器初始化以及 BeanFactory 创建和 BeanDefinition 加载过程

    相关代码提交记录:https://github.com/linweiwang/spring-framework-5.3.33 IoC 容器三种启动方式 XML JavaSE: ApplicationC ...

  2. 【数学】向量点乘、叉乘的理论、应用及代码实现（C++）

    前言 我总结了一下向量点乘,叉乘的概念,以及他们的应用及相关C++代码的实现.blog 这类问题也是技术面试经常碰到的,一次研究透了会有收获. 1 向量 向量具有大小和方向. 共线向量:两个平行的向量 ...

  3. HarmonyOS NEXT应用开发之MpChart图表实现案例

    介绍 MpChart是一个包含各种类型图表的图表库,主要用于业务数据汇总,例如销售数据走势图,股价走势图等场景中使用,方便开发者快速实现图表UI.本示例主要介绍如何使用三方库MpChart实现柱状图U ...

  4. 阿里云张振尧：阿里云边缘云驱动5G时代行业新价值

    ​简介:近日,以"5G融合通信趋势下的技术创新"为主题的2021中国增值电信及虚拟运营高峰论坛在北京召开,阿里云边缘云高级产品专家张振尧发表了<阿里云边缘云驱动5G时代行业新 ...

  5. [GPT] export, export default, import, module.exports, require

    ES6 规范:export 和 import 配对 import 的 {} 大括号里面指定要从其他模块导入的变量名, 如果 export 命令没有写 default,那么 import {} 大括号里 ...

  6. Vue源码-手写mustache源码

    引言 在Vue中使用模板语法能够非常方便的将数据绑定到视图中,使得在开发中可以更好的聚焦到业务逻辑的开发. mustache是一个很经典且优秀的模板引擎,vue中的模板引擎也对其有参考借鉴,了解它能更 ...

  7. 阿里云边缘容器云帮助AI推理应用快速落地

    近日,阿里云技术专家徐若晨在全球分布式云大会上,分享了<边缘容器云助力AI推理高效落地>的主题演讲,分享了阿里云边缘容器云如何助力开发者实现更快速的AI推理应用的迭代和部署.此外,他还分享 ...

  8. 让 KEPServer 变成一款 Web 组态软件

    ​KEPServerEX是行业领先的连接平台,用于向您的所有应用程序提供单一来源的工业自动化数据.该平台的设计使用户能够通过一个直观的用户界面来连接.管理.监视和控制不同的自动化设备和软件应用程序. ...

  9. C#/C++ 通过ODBC连接OceanBase Oracle租户

    概述 近期我们项目正处于将Oracle数据库迁移到OceanBase Oracle租户模式的阶段.考虑到我们项目采用了C++和C#混合开发,并且使用了多种技术,因此存在多种数据库连接方式.然而,针对C ...

  10. list转json tree的工具类

    package com.glodon.safety.contingency.job; import com.alibaba.fastjson.JSON; import com.alibaba.fast ...