jQuery中的属性过滤选择器(四、五):[attribute] 、[attribute=value]、[attribute!=value] 、[attribute^=value] 等

时间:2023-02-28 07:46:54
<!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] 等的更多相关文章

  1. jQuery表单对象属性过滤选择器

    jQuery表单对象属性过滤选择器 <div id="p1" attr="p1"> <input type="text" ...

  2. Jquery &vert; 基础 &vert; jQuery表单对象属性过滤选择器

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用jQuery表单对象属性 ...

  3. jQuery中的基本过滤选择器(四、三):&colon;first、&colon;last、&colon;not&lpar;&rpar; &period;&period;&period; &period;&period;&period;

    <!DOCTYPE html> <html> <head> <title>基本过滤选择器</title> <meta http-equ ...

  4. jquery选择器之属性过滤选择器

    <style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray } </style> ...

  5. jquery选择器之属性过滤选择器详解

    代码如下: <style type="text/css">  /*高亮显示*/  .highlight{       } </style> 复制代码代码如下 ...

  6. jQuery中的表单对象属性过滤选择器(四、八):&colon;enabled、&colon;disabled、&colon;checked、&colon;selected

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  7. jQuery之属性过滤选择器

    转自:http://blog.csdn.net/woshisap/article/details/7341136 在HTML文档中,元素的开始标记中通常包含有多个属性(attribute), 在jQu ...

  8. 黑马day16 jquery&amp&semi;amp&semi;属性过滤选择器

    属性过滤选择器的过滤规则是通过元素的属性来获取对应的元素 .[attribute] 使用方法: $("div[id]") ;  返回值  集合元素 说明:匹配包括给定属性的元素.样 ...

  9. Jquery &vert; 基础 &vert; 属性过滤选择器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. leetcode bugfree note

    463. Island Perimeterhttps://leetcode.com/problems/island-perimeter/就是逐一遍历所有的cell,用分离的cell总的的边数减去重叠的 ...

  2. hdu 3999 The order of a Tree &lpar;二叉搜索树&rpar;

    /****************************************************************** 题目: The order of a Tree(hdu 3999 ...

  3. 真实世界:使用WCF扩展记录服务调用时间

    WCF 可扩展性 WCF 提供了许多扩展点供开发人员自定义运行时行为. WCF 在 Channel Layer 之上还提供了一个高级运行时,主要是针对应用程序开发人员.在 WCF 文档中,它常被称为服 ...

  4. &lbrack;Node&period;js&rsqb; Using npm link to use node modules that are &quot&semi;in progress&quot&semi;

    It is some times convenient, even necessary, to make use of a module that you are working on before ...

  5. bzoj3351:&lbrack;ioi2009&rsqb;Regions

    思路:首先如果颜色相同直接利用以前的答案即可,可以离线排序或是在线hash,然后考虑怎么快速统计答案. 首先如果点a是点b的祖先,那么一定有点b在以点a为根的子树的dfs序区间内的,于是先搞出dfs序 ...

  6. Android&colon;TextView跑马灯-详解

    Android:TextView跑马灯_详解 引言: TextView之所以需要跑马灯,是由于文字太长,或者是吸引眼球. 关键代码如下: android:singleLine="true&q ...

  7. java concurrency&colon; daemon线程

    daemon线程的概念 在学习操作系统概念的时候,我们就曾听说过daemon的概念.daemon本身指的是在后台运行的进程或者线程,一般用来提供某些不需要与用户直接交互的服务,有点像我们见到的一些系统 ...

  8. jmeter对http协议中post请求接口测试

     现在有很多的工具用于工作上的使用,在jmeter的开源工具当中的,提供了一个可以对http协议的post的请求上接口测试,用于实现接口测试的自动化测试,当然也可以使用自己写的工具. 进行打开jmet ...

  9. bzoj 2440 (莫比乌斯函数)

    bzoj 2440 完全平方数 题意:找出第k个不是完全平方数的正整数倍的数. 例如 4  9  16  25 36什么的 通过容斥原理,我们减去所有完全数  4有n/4个,但是36这种会被重复减去, ...

  10. 几个常用的vscode插件

    1.Vetur 可以对.vue文件格式做语法高亮,开发基于Vue项目的标配插件 2.Power Mode 在写代码时出现如烟花.粒子.火焰之类的效果,增加写代码的乐趣 3.Chinese (simpl ...