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 ...
随机推荐
- 【论文阅读】套娃之 Blog for DMP Dynamic Movement Primitives
前言:原笔记Notion链接:https://www.notion.so/Blog-for-DMP-d34e83c05eb944ba989fc8bf9b0c0f7b 如有格式显示问题等请点击此处查看 ...
- 学习Git的基本业务逻辑
1,基本业务逻辑(假设针对index.html文件中内容): 1,在init版本库之前已写好开头部分:index 对index进行git init版本库: 进入到文件夹中,git init git a ...
- python之数据驱动Excel+ddt操作（方法二）
一.Mail163数据如下: 二.Excel+ddt代码如下: import xlrdimport unittestfrom selenium import webdriverfrom seleniu ...
- [考试总结]noip模拟15
这次不咕了. 首先发现这套题目十分毒瘤, \(T1\) 就没有太大的思路. 结果最后也是暴力收场... 菜. \(T1\;60pts\) 暴力居然还是挺高的,\(T2\) 莽了一个随机化上去结果还是暴 ...
- Linux下获取当前程序的绝对路径
在Linux开发应用时,我们常常需要在程序中获取当前程序绝对路径,我们可以通过readlink读取符号链接/proc/self/exe进行获取,这个符号链接代表当前程序,它的源路径就是当前程序的绝对路 ...
- SpringCloud升级之路2020.0.x版-3.Eureka Server 与 API 网关要考虑的问题
本系列为之前系列的整理重启版,随着项目的发展以及项目中的使用,之前系列里面很多东西发生了变化,并且还有一些东西之前系列并没有提到,所以重启这个系列重新整理下,欢迎各位留言交流,谢谢!~ 之前我们提到了 ...
- 自学linux——3.编辑器vim的使用
编辑器之神--vim 一. vim的三种模式 1.命令模式(打开文件后默认模式) 不能直接对文件编辑,可以输入快捷键进行一些操作 2.编辑模式 对文件的内容进行编辑 3.末行模式(尾行模式) ...
- 聊聊 PC 端自动化最佳方案 - WinAppDriver
1. 前言 大家好,我是安果! 一提到自动化,可能大家想到的是 App 端的 Appium.Airtest.AutoJS,亦或是 Selenium.Puppeteer.Cypress 等 Web 端的 ...
- 获取元素在页面中位置 getBoundingClientRect()
DOM 原生方法getBoundingClientRect()获取元素相对视口位置 DOMRect 对象包含了一组用于描述边框的只读属性--left.top.right和bottom,单位为像素.除了 ...
- Alibaba-技术专区-RocketMQ 延迟消息实现原理和源码分析
痛点背景 业务场景 假设有这么一个需求,用户下单后如果30分钟未支付,则该订单需要被关闭.你会怎么做? 之前方案 最简单的做法,可以服务端启动个定时器,隔个几秒扫描数据库中待支付的订单,如果(当前时间 ...