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 ...
随机推荐
- Hive——join的使用
Hive--join的使用 hive中常用的join有:inner join.left join .right join .full join.left semi join.cross join.mu ...
- Python+Requests+Bs4（解析）爬取某诗词信息（数据分析二）
1.环境安装 - 需要将pip源设置为国内源,阿里源.豆瓣源.网易源等 - windows (1)打开文件资源管理器(文件夹地址栏中) (2)地址栏上面输入 %appdata% (3)在这里面新建一个 ...
- Centos 7 配置阿里云 yum 源
Centos 7 配置阿里云 yum 源 一. 禁用 yum 插件 fastestmirror 修改插件的配置文件 cp /etc/yum/pluginconf.d/fastestmirror.con ...
- js学习笔记之公告逐行显示
$(function(){ var newsListHeight = $(".news-list").height(); //获得内容的高度 var newsConHeight = ...
- jquery点击空白处事件
$(document).live('click',function(){ $('.emails').hide(); }); 此代码为点击空白处,'emails',标签隐藏.
- 移动APP我们需要关注什么
移动APP关注的点比web或者PC上的程序更多 1.测试用例的设计 移动互联网的快节奏,要放弃传统的测试用例编写方式,不需要写详细的测试用例,采用罗列测试点的方式如思维导图,这样既节省时间又能够直观清 ...
- 剑指 Offer 40. 最小的k个数
剑指 Offer 40. 最小的k个数 输入整数数组 arr ,找出其中最小的 k 个数.例如,输入4.5.1.6.2.7.3.8这8个数字,则最小的4个数字是1.2.3.4. 示例 1: 输入:ar ...
- ip地址分配
目录 一.子网划分基础 二.子网划分的原理 三.IP地址汇总 四.ip地址规划 一.子网划分基础 二进制: 特点:基数为2,数值部分用2个不同的数字符号0.1表示逢二进一 IP地址:IP地址由32位二 ...
- C++ //多继承语法 C++中允许一个类继承多个类
1 //多继承语法 C++中允许一个类继承多个类 2 #include <iostream> 3 #include <string> 4 using namespace std ...
- Create Shortcut to Get Jar File Meta Information
You have to get meta information of cobertura.jar with command "unzip -q -c cobertura.jar META- ...