还是那句话,这些知识一个小小的练习,更多的请看jQuery手册

在jQuery对象中的元素对象数组中过滤出一部分元素来
1. first()
2. last()
3. eq(index|-index)
4. filter(selector)
5. not(selector)
6. has(selector)

需求:
1. ul下li标签第一个
2. ul下li标签的最后一个
3. ul下li标签的第二个
4. ul下li标签中title属性为hello的
5. ul下li标签中title属性不为hello的
6. ul下li标签中有span子标签的

<ul>
<li>AAAAA</li>
<li title="hello" class="box2">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two"><span>BBBBB</span></li>
</ul>
<li>eeeee</li>
<li>EEEEE</li>
<br>

具体实现如下:

//获得ul下的所有li
var $lis = $("ul>li");
// 1. ul下li标签第一个
//$lis.first().css("background","red"); // 2. ul下li标签的最后一个
$lis.last().css("background","red");
// 3. ul下li标签的第二个
$lis.eq(1).css("background","red")
// 4. ul下li标签中title属性为hello的
$lis.filter("[title='hello']").css("background","red");
// 5. ul下li标签中title属性不为hello的
$lis.filter('[title!=hello]').filter('[title]').css('background', 'red')
$lis.not('[title=hello]').css('background', 'red')
// 6. ul下li标签中有span子标签的
$lis.has("span").css('background', 'red');

jQuery之过滤元素的更多相关文章

  1. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  2. jQuery 简单过滤选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...

  3. 使用jquery获取父元素或父节点的方法

    今天面试题问到了,没答上,jq要继续学习啊 jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个 ...

  4. jQuery简单过滤选择器

    <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <!--jQuery选择器详解 根据所获 ...

  5. Jquery的过滤选择器分为哪几种?

    Jquery的过滤选择器分为哪几种? 转载▼ 标签: jquery 过滤选择器 分类 分类: JQuery 所有的过滤选择器分为哪几种: 一.基本过滤选择器(重点掌握下列八个) :first 选取第一 ...

  6. 使用jquery获取父元素或父节点

    使用jquery获取父元素或父节点,比较简单,jquery提供了丰富的方法来让我们使用jquery获取父元素或父节点   jquery获取父元素方法比较多,比如parent(),parents(),c ...

  7. 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决

    jquery的"筛选选择器", 都是用冒号开头的, 即, 冒号选择器就是 筛选选择器.如: :first, :last, :eq(index), :first-child,...等 ...

  8. jquery获取父元素或父节点的方法

    jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个例子: <ul class=" ...

  9. jQuery中兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

随机推荐

  1. scala (4) 可变数组和不可变数组

    在scala中数组分为不可变长数组(在immutable包下)和可变长数组(在mutable包下) 不可变长数组指的是长度不可变,但是数组中角标对应的元素的值是可变的 可变数组指的是长度和数组中角标对 ...

  2. Tokio,Rust异步编程实践之路

    缘起 在许多编程语言里,我们都非常乐于去研究在这个语言中所使用的异步网络编程的框架,比如说Python的 Gevent.asyncio,Nginx 和 OpenResty,Go 等,今年年初我开始接触 ...

  3. xshell sftp可用命令,sftp: cannot open d: to write![解决]

    sftp可用命令: cd 路径 更改远程目录到“路径” lcd 路径 更改本地目录到“路径” chgrp group path 将文件“path”的组更改为“group” chmod mode pat ...

  4. 【Hutool】Hutool工具类之日期时间工具——DateUtil

    一.用于取代Date对象的DateTime对象 再也不用Date SimpleDateFormat Calendar之间倒腾来倒腾去了!日期创建-获取-操作一步到位! 如果JDK版本更新到了8及以上, ...

  5. 20145226夏艺华 《Java程序设计》实验报告二

    实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实验步骤 (一)单元测试 ...

  6. bootstrap 内边框样式

    css设置: .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table ...

  7. Luogu2183【国家集训队】礼物

    题面 题解 易得答案为 $$ \sum_{i=1}^m\binom{n-\sum_{j=1}^{i-1}w_j}{\sum_{j=1}^iw_j} $$ 扩展$\text{Lucas}$即可 代码 # ...

  8. (ex)Lucas总结

    (ex)Lucas总结 普通Lucas 求 \[ C_n^m\;mod\;p \] 其中\(n,m,p\leq 10^5\)其中\(p\)为质数 公式不难背,那就直接背吧... \[ C_n^m\;m ...

  9. P1546 最短网络(codevs | 2627村村通)

    P1546 最短网络 Agri-Net 题目背景 农民约翰被选为他们镇的镇长!他其中一个竞选承诺就是在镇上建立起互联网,并连接到所有的农场.当然,他需要你的帮助. 题目描述 约翰已经给他的农场安排了一 ...

  10. [NOIp2018]铺设道路 贪心

    LG传送门 考场上写的\(O(nlogn)\)做法,具体思想是把深度从低到高排个序,开一个标记数组,每次加入的时候标记当前位置并判断:如果当前加入的位置两边都被标记过,则下次的贡献-1,若两边都没有被 ...