jQuery之过滤元素
还是那句话,这些知识一个小小的练习,更多的请看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之过滤元素的更多相关文章
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
- jQuery 简单过滤选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...
- 使用jquery获取父元素或父节点的方法
今天面试题问到了,没答上,jq要继续学习啊 jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个 ...
- jQuery简单过滤选择器
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--jQuery选择器详解 根据所获 ...
- Jquery的过滤选择器分为哪几种?
Jquery的过滤选择器分为哪几种? 转载▼ 标签: jquery 过滤选择器 分类 分类: JQuery 所有的过滤选择器分为哪几种: 一.基本过滤选择器(重点掌握下列八个) :first 选取第一 ...
- 使用jquery获取父元素或父节点
使用jquery获取父元素或父节点,比较简单,jquery提供了丰富的方法来让我们使用jquery获取父元素或父节点 jquery获取父元素方法比较多,比如parent(),parents(),c ...
- 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决
jquery的"筛选选择器", 都是用冒号开头的, 即, 冒号选择器就是 筛选选择器.如: :first, :last, :eq(index), :first-child,...等 ...
- jquery获取父元素或父节点的方法
jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个例子: <ul class=" ...
- jQuery中兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
随机推荐
- PMP十五至尊图(第六版)
PMP(Project Management Professinoal)项目经理专业资格认证,由美国项目管理学会PMI(Project Management Institute)发起并组织的一种资格认 ...
- 前端chrome调试
Resources标签页 Resources标签页可以查看到请求的资源情况,包括CSS.JS.图片等的内容.也可以设置各种断点.对存储的内容进行编辑然后保存也会实时的反应到页面上. 几个常用的断点快捷 ...
- 【CF813D】Two Melodies
[CF813D]Two Melodies 题面 洛谷 题解 $dp$: 设$f[i][j]$表示第一个集合以$i$结尾.第二个集合以$j$结尾的合法长度之和最大是多少 明显有$f[i][j]=f[j] ...
- 收集的PHP工具及类库
composer PHP的依赖管理工具 phpmig PHP的数据库迁移工具,依赖于composer Requests for PHP HTTP请求库,采集页面可以用到的 ...
- 对posintion属性的简单认识,对于还在纠结的同学们,有一定的帮助
position的四个属性值: relative ,absolute ,fixed,static 下面分别讲述这四个属性,以简单代码表示 <div id="parent" ...
- node升级7.0以上版本使用gulp时报错
今天使用gulp时 ,出现了以下报错信息: Error: Cannot find module 'internal/fs'at Object.<anonymous> (/home/XXX/ ...
- 一个web应用的诞生(12)--再探首页
就要面对本章的一个难点了,说是难点可能仅仅对于我来说,毕竟我是一个js渣,既然首页打算使用动态加载的形式,那么与后台交互的方式就要进行选择,目前比较流行的为RESTful的形式,关于RESTful的文 ...
- Oracle的集合运算符
Oracle的集合运算符有并集union.union all,交集intersect,差集minus 先建表myemp,进行集合运算的测试 create table myemp as select * ...
- 内容安全策略(CSP)
内容安全策略(CSP),其核心思想十分简单:网站通过发送一个 CSP 头部,来告诉浏览器什么是被授权执行的与什么是需要被禁止的.其被誉为专门为解决XSS攻击而生的神器. 1.CSP是什么 CSP指的是 ...
- JMeter测试WebSocket的经验总结
最近有一个微信聊天系统的项目需要性能测试,既然是测试微信聊天,肯定绕不开websocket接口的测试,首选工具是Jmeter,网上能搜到现成的方法,但是网上提供的jar包往往不是最新的,既然是用最新版 ...