黑马day16 jquery&属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取对应的元素
使用方法: $(”div[id]“) ;
返回值 集合元素
说明:匹配包括给定属性的元素.样例中是选取了全部带”id”属性的div标签.
使用方法: $(”input[name='newsletter']“).attr(”checked”, true);
返回值 集合元素
说明:匹配给定的属性是某个特定值的元素.样例中选取了全部name属性是newsletter的input元素.
使用方法: $(”input[name!='newsletter']“).attr(”checked”, true);
返回值 集合元素
说明:匹配全部不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).之前看到的:not派上了用场.
使用方法: $(”input[name^=‘news’]“)
返回值 集合元素
说明:匹配给定的属性是以某些值開始的元素.,我们又见到了这几个类似于正则匹配的符号.如今想忘都忘不掉了吧?!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
} div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 含有属性title 的div元素" id="b1"/>
<input type="button" value=" 属性title值等于test的div元素" id="b2"/>
<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)" id="b3"/>
<input type="button" value=" 属性title值 以te開始 的div元素." id="b4"/>
<input type="button" value=" 属性title值 以est结束 的div元素.." id="b5"/>
<input type="button" value="属性title值 含有es的div元素." id="b6"/>
<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素" id="b7"/> <!--文本隐藏域-->
<input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4"> <h1>天气冷了</h1>
<h2>天气又冷了</h2> <div id="one">
id为one div </div> <div id="two" class="mini" title="test">
id为two class是 mini div title="test"
<div class="mini" >class是 mini</div>
</div> <div class="visible" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" title="test02">
class是 one title="test02"
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div> <div class="visible" >
这是隐藏的
</div> <div class="one"> </div>
<br>
<div id="mover" >
动画
</div>
<br> <input type="text" value="zhang" id="username" name="username">
</body>
<script language="JavaScript">
//<input type="button" value=" 含有属性title 的div元素" id="b1"/>
$("#b1").click(function(){
$("div[title]").css("background","red");
});
//<input type="button" value=" 属性title值等于test的div元素" id="b2"/>
$("#b2").click(function(){
$("div[title='test']").css("background","red");
});
//<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)" id="b3"/>
$("#b3").click(function(){
$("div[title!='test']").css("background","red");
});
//<input type="button" value=" 属性title值 以te開始 的div元素." id="b4"/>
$("#b4").click(function(){
$("div[title^='te']").css("background","red");
});
//<input type="button" value=" 属性title值 以est结束 的div元素.." id="b5"/>
$("#b5").click(function(){
$("div[title$='est']").css("background","red");
});
//<input type="button" value="属性title值 含有es的div元素." id="b6"/>
$("#b6").click(function(){
$("div[title*='es']").css("background","red");
});
//<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素" id="b7"/>
$("#b7").click(function(){
$("div[id][title*='es']").css("background","red");
});
</script> </html>
黑马day16 jquery&属性过滤选择器的更多相关文章
- 黑马day16 jquery&内容过滤选择器&可见度选择器
内容过滤选择器的过滤规则主要体如今它所包括的子元素和文本内容上 .:contains(text) 使用方法: $("div:contains('John')") 返回值 集 ...
- jQuery之属性过滤选择器
转自:http://blog.csdn.net/woshisap/article/details/7341136 在HTML文档中,元素的开始标记中通常包含有多个属性(attribute), 在jQu ...
- Jquery | 基础 | 属性过滤选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery选择器之表单对象属性过滤选择器Demo
测试代码: 08-表单对象属性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- jQuery表单对象属性过滤选择器
jQuery表单对象属性过滤选择器 <div id="p1" attr="p1"> <input type="text" ...
- Jquery | 基础 | jQuery表单对象属性过滤选择器
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用jQuery表单对象属性 ...
- 【转】jQuery属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素. [attribute] 选取用次属性的元素 [attribute=value] 选取属性值为value的元素 [attribute ...
- 009 jquery过滤选择器-----------（表单对象属性过滤选择器 与 表单选择器）
1.表单对象属性选择器 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
随机推荐
- JavaScript中把Json字符串转化为对象
1.采用eval()函数 定义和用法 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 语法 eval(string) 参数 描述 string 必需.要计算的字符串, ...
- zepto在操作dom的selected和checked属性时尽量使用prop方法
zepto在操作dom的selected和checked属性时尽量使用prop方法.
- BPF漫谈
源起 最近看到国内两篇文章[1][2]先后翻译了就职于Netflix的性能分析大牛Brendan Gregg于2017年7月31日写的<Golang bcc/BPF Function Traci ...
- Problem B: 大整数的加法运算
Problem B: 大整数的加法运算 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 112 Solved: 57[Submit][Status][W ...
- Java中Httpsession是如何实现的?
HTTP协议(http://www.w3.org/Protocols/)是“一次性单向”协议. 服务端不能主动连接客户端,只能被动等待并答复客户端请求.客户端连接服务端,发出一个HTTP Reques ...
- phpcms 的getcache()函数
一直没有去研究phpcms 的getcache()函数是干嘛的,今天有空去看了一下,原来就那样. 1 function getcache($name, $filepath='', $type='fil ...
- oracle数据库管理系统常见的错误(一)
oracle数据库管理系统常见的错误之一如下: Listener refused the connection with the following error:ORA-12519, TNS:no a ...
- C#获取存储过程的 Return返回值和Output输出参数值
1.获取Return返回值 程序代码 //存储过程//Create PROCEDURE MYSQL// @a int,// @b int//AS// return @a + ...
- 流式数据分析模型kafka+storm
http://www.cnblogs.com/panfeng412/archive/2012/07/29/storm-stream-model-analysis-and-discussion.html ...
- linux 安装nginx 详解
1 nginx安装环境 nginx是C语言开发,建议在linux上运行,本教程使用Centos6.5作为安装环境. n gcc 安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没 ...