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正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
随机推荐
- 短连接、长连接、轮询、长轮询、WebSocket
短连接 建立连接——数据传输——关闭连接...建立连接——数据传输——关闭连接 定义:短连接是指通讯双方有数据交互时,就建立一个连接,数据发送完成后,则断开此连接,即每次连接只完成一项业务的发送. 应 ...
- 从零开始搭建vue移动端项目到上线的步骤
初始化项目 1.在安装了node.js的前提下,使用以下命令 npm install --g vue-cli 2.在将要构建项目的目录下 vue init webpack myproject(项目目录 ...
- Office 365部分安装及同时安装Visio的方法
From MWeb Win版本的Office 365安装包默认安装所有组件,没有选择的页面,在安装Office 365后再安装下载的Visio 2016专业版时,会显示计算机上已经安装了即插即用Off ...
- 20155304 2016-2017-2 《Java程序设计》实验三 敏捷开发与XP实践
实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验步骤 (一)敏捷开发与XP 软件工程是把系统的.有序的.可量化的方法应用到软件的开发.运营和维护上的过程.软件工程包括下列领 ...
- WPF Color、String、Brush转换
原文:WPF Color.String.Brush转换 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/detai ...
- PostgreSQL的hstore初步学习
安装hstore: 进入源代码的 /contrib/hstore 目录,然后执行gmake 和 gmake install: [root@pg200 hstore]# gmake gcc -O2 -W ...
- Drupal学习(19) 使用jQuery
本节学习如果在Drupal里交互使用jQuery. jQuery在Drupal是内置支持的.存在根目录的misc目录中. 当调用drupal_add_js方法,会自动加载jQuery. 在Drupal ...
- [转]WIN2008 IIS7的日期格式
最近项目升级服务器从32位升级到64位的WIN2008,日期显示格式非我们所期望的yyyy-M-d格式,原以为修改控制面板的日期格式即可,可是不行. 修改注册表问题解决. 修改方法: 运行注册表编辑器 ...
- 用Micro:bit做剪刀、石头、布游戏
剪刀.石头.布游戏大家都玩过,今天我们用Micro:bit建一个剪刀.石头.布游戏! 第一步,起始 当你摇动它时,我们希望the micro:bit选择剪刀.石头.布.尝试创建一个on shake b ...
- python基础数据类型3
python_day_5 今日大纲: 1. dict 用大括号{} 括起来. 内部使用key:value的形式来保存数据 {'jay':'周杰伦', "jj":'林俊杰'} 注意: ...