jQuery之过滤选择器
在原有选择器匹配的元素中进一步进行过滤的选择器
* 基本
* 内容
* 可见性
* 属性
需求
1. 选择第一个div
2. 选择最后一个class为box的元素
3. 选择所有class属性不为box的div
4. 选择第二个和第三个li元素
5. 选择内容为BBBBB的li
6. 选择隐藏的li
7. 选择有title属性的li元素
8. 选择所有属性title为hello的li元素
<div id="div1" class="box">class为box的div1</div>
<div id="div2" class="box">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<ul>
<li>AAAAA</li>
<li title="hello">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two">BBBBB</li>
<li style="display:none">我本来是隐藏的</li>
</ul>
实现
$("div:first").css("background","blue")
// 2. 选择最后一个class为box的元素
$("div:last").css("background","blue")
// 3. 选择所有class属性不为box的div
$("div:not(.box)").css("background","blue") // 4. 选择第二个和第三个li元素
$("li:gt(0):lt(2)").css("background","blue") 不是一起的,是从左到右的,选完一个得到的值从新划基准去选择
// 5. 选择内容为BBBBB的li
$("li:contains('BBBBB')").css("background","blue")
// 6. 选择隐藏的li
console.log($("li:hidden").length,$("li:hidden")[0])
// 7. 选择有title属性的li元素
$("li[title]").css("background","blue")
// 8. 选择所有属性title为hello的li元素
$("li[title='hello']").css("background","blue")
jQuery之过滤选择器的更多相关文章
- jQuery 简单过滤选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...
- jQuery简单过滤选择器
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--jQuery选择器详解 根据所获 ...
- jQuery基本过滤选择器
jQuery基本过滤选择器: <h1>this is h1</h1> <div id="p1"> <h2>this is h2< ...
- Jquery的过滤选择器分为哪几种?
Jquery的过滤选择器分为哪几种? 转载▼ 标签: jquery 过滤选择器 分类 分类: JQuery 所有的过滤选择器分为哪几种: 一.基本过滤选择器(重点掌握下列八个) :first 选取第一 ...
- 第一百六十五节,jQuery,过滤选择器
jQuery,过滤选择器 学习要点: 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似与 CSS3 (h ...
- jquery :checked(过滤选择器) 和 空格:checked(后代选择器)
jquery 过滤选择器 和 后代选择器 <%@ page language="java" contentType="text/html; charset=UTF- ...
- JQuery 可见性过滤选择器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JQuery 内容过滤选择器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- jQuery内容过滤选择器与子元素过滤选择器用法实例分析
jQuery选择器内容过滤 一.:contains(text) 选择器::contains(text)描述:匹配包含给定文本的元素返回值:元素集合 示例: ? 1 2 $("div.mini ...
- jquery :checked(过滤选择器) 和 空格:checked(后代选择器)【转】
jquery 过滤选择器 和 后代选择器 <%@ page language="java" contentType="text/html; charset=UTF- ...
随机推荐
- 20155207 2006-2007-2 《Java程序设计》第4周学习总结
20155207 2006-2007-2 <Java程序设计>第4周学习总结 教材学习内容总结 ISP原则:一个类对另一个类的依赖应该限制在最小化的接口上. OCP原则:软件构成(类,模块 ...
- 小议linux
小议linux在虚拟机上的安装和命令行 如何解决intel-vt-x被禁用而无法正常安装虚拟机 一般在新的电脑上第一次安装虚拟都可能出现如下图的问题:intel-vt-x(intel Virtuali ...
- 20155231 cho2 课下作业
20155231 cho2 课下作业 2 调用附图代码,编写一个程序 "week0602学号.c",用show_int(), show_float()打印一下你的4位学号,参考教材 ...
- 20155331 2016-2017-2 《Java程序设计》第九周学习总结
20155331 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 JDBC是什么? JDBC代表Java数据库连接,这对Java编程语言和广泛的数据库之间独立 ...
- mysql的启动,停止与重启
启动mysql:方式一:sudo /etc/init.d/mysql start 方式二:sudo start mysql方式三:sudo service mysql start 停止mysql:方式 ...
- centos7下将java -jar命令运行一个项目做成systemd服务
有些时候运行一个java项目在linux下通过一条简单的java命令即可,如: #nohup java -jar jenkins.war & ###这里为后台运行jenkins 在此背景下,j ...
- OpenStack入门篇(四)之KVM虚拟机介绍和管理
1.查看虚拟机,启动虚拟机 [root@linux-node1 ~]# virsh list --all Id Name State --------------------------------- ...
- AngularJS中Directive指令系列 - 基本用法
参考: https://docs.angularjs.org/api/ng/service/$compile http://www.zouyesheng.com/angular.html Direct ...
- Azkaban 工作流调度器
Azkaban 工作流调度器 1 概述 1.1 为什么需要工作流调度系统 a)一个完整的数据分析系统通常都是由大量任务单元组成,shell脚本程序,java程序,mapreduce程序.hive脚本等 ...
- lua 中的 loadfile、dofile和require的调用
文件 hello.lua print("hello") function say() print("hello world") end 1. 介绍: dofil ...