黑马day16 jqueryamp;属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取对应的元素

1、[attribute]
使用方法: $(”div[id]“) ; 返回值集合元素

说明:匹配包括给定属性的元素.样例中是选取了全部带”id”属性的div标签.

2、[attribute=value]
使用方法: $(”input[name='newsletter']“).attr(”checked”, true); 返回值集合元素

说明:匹配给定的属性是某个特定值的元素.样例中选取了全部name属性是newsletter的input元素.

3、[attribute!=value]
使用方法: $(”input[name!='newsletter']“).attr(”checked”, true); 返回值集合元素

说明:匹配全部不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).之前看到的:not派上了用场.

4、[attribute^=value]
使用方法: $(”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>

转载于:https://www.cnblogs.com/zsychanpin/p/6756949.html

黑马day16 jqueryamp;属性过滤选择器相关推荐

jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head ...
jQuery表单对象属性过滤选择器
jQuery表单对象属性过滤选择器 <div id="p1" attr="p1"><input type="text" i ...
jquery的选择器之-表单对象属性过滤选择器
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html> <html><head><meta charset= ...
jquery属性过滤选择器[attr=value]、[attr!=value]、[attr^=value]、[attr$=value]、[attr*=value]、[attr|=value]
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery属性过滤选择器 jquery属性过滤选择器,包括[attr].[attr=value].[attr!=value]. ...
Jquery选择器之可见性选择器、属性过滤选择器
可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素,可见性选择器介绍如下在可见性选择器中,需要注意选择器:hidden,他不仅包括样式属性display为"none", ...
jQuery前端开发学习指南(11)——jQuery属性过滤选择器
版权声明本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl 属性过滤选择器概述属性过滤选择器用于根据元素的属性来匹配元素. [attribute] 匹配 ...
jQuery属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素. [attribute] 选取用次属性的元素 [attribute=value] 选取属性值为value的元素 [attribute ...
jq选择器||基本选择器层级选择器属性选择器过滤选择器表单过滤选择器
基本选择器层级选择器属性选择器过滤选择器表单过滤选择器 1. 基本选择器 1. 标签选择器(元素选择器) * 语法: $("html标签 ...
jQueryt过滤选择器
基本过滤选择器选择器描述返回示例重要 :first 返回第一个元素单个元素 :last 返回最后一个元素单个元素 :not(selector) 除去与给定选择器匹配的元素 ...

黑马day16 jqueryamp;属性过滤选择器

黑马day16 jqueryamp;属性过滤选择器相关推荐

最新文章

热门文章