黑马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 ...
随机推荐
- 串口接收模块（verilog） 波特率115200
我来分享一下uart协议之接收verilog代码 顶层实例化 `timecale 1ns / 1ps////////////////////////////////////////////////// ...
- 数据结构 单链表元素定位 PTA
由于这个很简单,他也貌似没要判断溢出,取巧突破 #include<stdio.h> #include<malloc.h> #include<stdlib.h> // ...
- 【OpenCV】一种基于阈值的图片中的文字分割
在今年泰迪杯A题电商中图片的文字识别这道题中,我们先用了一种很笨的办法来分割字符. 首先对图片进行灰度化,然后二值化,这里的二值化要选择一个合适的阈值.然后我们进行轮廓的提取,计算轮廓最小矩形的面积, ...
- SSO单点登录一：cas单点登录防止登出退出后刷新后退ticket失效报500错，也有退出后直接重新登录报票根验证错误
问题1: 我登录了client2,又登录了client3,现在我把client2退出了,在client3里面我F5刷新了一下,结果页面报错: 未能够识别出目标 'ST-41-2VcnVMguCDWJX ...
- 在LINQ查询中LINQ之Group By的用法
LINQ定义了大约40个查询操作符,如select.from.in.where.group 以及order by,借助于LINQ技术,我们可以使用一种类似SQL的语法来查询任何形式的数据.Linq有很 ...
- HTTP-FLV直播初探
目前几种视频流的简单对比: 协议 httpflv rtmp hls dash 传输方式 http流 tcp流 http http 视频封装格式 flv flv tag Ts文件 Mp4 3gp web ...
- Linux nc 命令传输文件
NAME nc - arbitrary TCP and UDP connections and listensSYNOPSIS nc [-46DdhklnrStUuvz] [-i interv ...
- OpenTSDB介绍
OpenTSDB 2.0, the scalable, distributed time series database可扩展.分布式时间序列数据库 1.背景 一些老的监控系统,它常常会出现这样的问题 ...
- MySQL中Left Join和Right Join的理解
虽然之前一直见过两个Join,对于其具体的含义也在参考书上读过,但是一直没有记住.现在换一种方式进行学习,改为实验方式理解. Left Join 测试表: 表结构很简单,test包括两个int字段,t ...
- 【转】jQuery代码片段备用
在CSDN看到的,记下备用.原文:http://www.csdn.net/article/2013-07-16/2816238-15-jquery-code-snippets-for-develope ...