jQuery中的属性过滤选择器（四、五）：[attribute] 、[attribute=value]、[attribute!=value] 、[attribute^=value] 等
<!DOCTYPE html>
<html>
<head>
<title>属性过滤选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<style type="text/css">
body {
font-family: "Microsoft YaHei"
}
.divCls {
width: 180px;
height: 180px;
color: white;
border: solid 1px white;
margin-left: 10px;
float: left;
background-color: #792F7C;
}
.subDivCls {
width: 60px;
height: 60px;
color: white;
border: solid 1px white;
font-size: 12px;
margin: 5px;
float: right;
background-color: #01A6A2;
}
.spanCls {
color: white;
border: solid 1px white;
margin: 5px;
float: left;
height: 50px;
background-color: #ED4A9F;
}
div span {
border: solid 1px white;
font-size: 12px;
margin: 5;
background-color: #ED4A9F;
}
.cGreen {
background-color: #4CA902
}
.cPink {
background-color: #ED4A9F
}
.cBlue {
background-color: #0092E7
}
.cCyan {
background-color: #01A6A2
}
.cYellow {
background-color: #DCA112
}
.cRed {
background-color: #B7103B
}
.cPurple {
background-color: #792F7C
}
.cBlack {
background-color: #110F10
}
.cOrange {
background-color: #FF4500
}
.cGray {
background-color: #A9A9A9
}
.hide {
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
/*
选取有id属性的div元素，这里的属性就要用中括号表示了
*/
// <input type="button" id="btn1" value="选取所有含有id属性的div元素">
$("#btn1").click(function() {
$("div[id]").addClass("cBlack"); // 含有id属性的div
});
// <input type="button" id="btn2" value="选取title属性值等于mzy的div元素">
$("#btn2").click(function() {
$("div[title='mzy']").addClass("cBlack"); // id属性为mzy的的div
});
// <input type="button" id="btn3" value="选取不含有title属性或title属性值不等于mzy的div元素">
$("#btn3").click(function() {
/*
注意这里的不等于并不是真正意义上的title不为mzy，
也包含了不存在title属性的div：
这个是指所有不包含title属性的div，以及title属性不为mzy的div。
*/
$("div[title!='mzy']").addClass("cBlack");
});
// <input type="button" id="btn4" value="选取title属性值是以m开头的div元素">
$("#btn4").click(function() {
/*
属性选择器中，^代表开头。
*/
$("div[title^='m']").addClass("cBlack");
});
// <input type="button" id="btn5" value="选取title属性值是以zy结尾的div元素">
$("#btn5").click(function() {
/*
属性选择器中，$代表结尾。
*/
$("div[title$='zy']").addClass("cBlack");
});
/*
在我误写，给一个btn注册了两个click
事件之后，发现不会报错，但是也不会产生效果；
注意不要给一个btn注册两个click事件。
*/
// <input type="button" id="btn6" value="选取title属性值包含有z的div元素">
$("#btn6").click(function() {
/*
属性选择器中，*代表任意位置包含。
*/
$("div[title*='z']").addClass("cBlack");
});
/*
关于对单个元素标签，做多次属性选择的时候
我们通常将属性并列起来，例如：
div[][][]...，这样就可以对单个元素标签
进行多条件选择了！
*/
// <input type="button" id="btn7" value="选取含有id属性并且title属性值包含有z的div元素">
$("#btn7").click(function() {
// 加空格也是可以的，但是害怕了最好不要乱加
// 因为有层次选择器中子代元素的前例。
// $("div[id][title *= z]").addClass("cBlack");
$("div[id][title*=z]").addClass("cBlack");
});
});
</script>
</head>
<body>
<div id="div1" class="divCls" title="test">
id 为div1 的div，title为test<br>
<br>
<div class="subDivCls">class为subDivCls的div</div>
</div>
<div id="div2" class="divCls">
id 为div2 的div <br>
<br> <span id="span1">div2里面的span,id为span1</span> <br>
<br>
<div class="subDivCls" style="float: left;">class为subDivCls的div</div>
<div class="subDivCls">
subDivCls <span id="span2">span2</span>
</div>
</div>
<div id="div3" class="divCls" title="mzy">
id 为div3 的div，title为mzy，包含隐藏输入框 <input type="hidden" value="hello">
</div>
<span class="spanCls">div3的兄弟元素span</span>
<div id="div4" class="divCls">
id 为div4 的div<br>
<div class="subDivCls" style="float: left;">
subDivCls<br> <span id="span2">span4</span>
</div>
<div class="subDivCls" title="mzy">title为mzy</div>
<div class="subDivCls" style="float: left;" title="test">title为test</div>
<div class="subDivCls"></div>
</div>
<p style="clear: both;"></p>
<br>
<hr>
<input type="button" id="btn1" value="选取所有含有id属性的div元素">
<input type="button" id="btn2" value="选取title属性值等于mzy的div元素">
<input type="button" id="btn3" value="选取不含有title属性或title属性值不等于mzy的div元素">
<input type="button" id="btn4" value="选取title属性值是以m开头的div元素">
<input type="button" id="btn5" value="选取title属性值是以zy结尾的div元素">
<input type="button" id="btn6" value="选取title属性值包含有z的div元素">
<input type="button" id="btn7" value="选取含有id属性并且title属性值包含有z的div元素">
</body>
</html>
jQuery中的属性过滤选择器（四、五）：[attribute] 、[attribute=value]、[attribute!=value] 、[attribute^=value] 等的更多相关文章
- jQuery表单对象属性过滤选择器
jQuery表单对象属性过滤选择器 <div id="p1" attr="p1"> <input type="text" ...
- Jquery | 基础 | jQuery表单对象属性过滤选择器
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用jQuery表单对象属性 ...
- jQuery中的基本过滤选择器（四、三）：:first、:last、:not() ... ...
<!DOCTYPE html> <html> <head> <title>基本过滤选择器</title> <meta http-equ ...
- jquery选择器之属性过滤选择器
<style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray } </style> ...
- jquery选择器之属性过滤选择器详解
代码如下: <style type="text/css"> /*高亮显示*/ .highlight{ } </style> 复制代码代码如下 ...
- jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- jQuery之属性过滤选择器
转自:http://blog.csdn.net/woshisap/article/details/7341136 在HTML文档中,元素的开始标记中通常包含有多个属性(attribute), 在jQu ...
- 黑马day16 jquery&属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取对应的元素 .[attribute] 使用方法: $("div[id]") ; 返回值 集合元素 说明:匹配包括给定属性的元素.样 ...
- Jquery | 基础 | 属性过滤选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Requests方法 -- session方法
import requests#禁用安全请求警告from requests.packages.urllib3.exceptions import InsecureRequestWarningreque ...
- Java多线程（上）
Java多线程 程序.进程和线程 一.程序 程序是存储在磁盘上, 包含可执行机器指令和数据的静态实体. 即进程或者任务是处于活动状态的计算机程序. 二.进程 进程是资源(CPU.内存等)分配的基本单位 ...
- sql语句优化（持续更新）
1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引.2.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用索引 ...
- Java 中 this 和 super 的用法详解
前言 这次我们来回顾一下this和super这两个关键字的用法,作为一名Java程序员,我觉得基础是最重要的,因为它决定了我们的上限,所以我的文章大部分还是以分享Java基础知识为主,学好基础,后面的 ...
- Table类
Interpreter类, class Interpreter: public CC_INTERP_ONLY(CppInterpreter) NOT_CC_INTERP(TemplateInterpr ...
- CAS 原理 应用
原子CAS操作 原子操作指令里,有原子加,原子减,cas到底是什么呢? 首先看一段代码, bool compare_and_swap(int *accum, int *dest, int newval ...
- 线性反馈移位寄存器（LFSR）
LFSR用于产生可重复的伪随机序列PRBS,该电路有n级触发器和一些异或门组成,如下图所示. 其中,gn为反馈系数,取值只能为0或1,取为0时表明不存在该反馈之路,取为1时表明存在该反馈之路:这里的反 ...
- Nexus Repository Manager 3 远程命令执行漏洞（CVE-2019-7238）
poc地址 https://github.com/magicming200/CVE-2019-7238_Nexus_RCE_Tool
- JUC学习笔记（一）
1.什么是 JUC 1.1.JUC简介 在 Java 中,线程部分是一个重点,本篇文章说的 JUC 也是关于线程的.JUC 就是 java.util .concurrent 工具包的简称.这是一个处理 ...
- 花1个月时间准备 面试华为，薪资和定级都谈好了却被拒，HR竟说......
说在前面,千万不要频繁跳槽. 本来华为很想去的,面试前花了一个月的时间准备,面试过程挺顺利的,也拒绝了其他的所有面试邀请,而我拒绝其他面试邀请的底气,则是之前面试过程中的良好表现,薪资和定级都谈好了. ...