摄影网站制作流程,千图网免费素材图库背景,请问门户网站是什么意思,东莞感染人数最新消息jQuery选择器之属性筛选选择器
属性选择器让你可以基于属性来定位一个元素。可以只指定该元素的某个属性#xff0c;这样所有使用该属性而不管它的值#xff0c;这个元素都将被定位#xff0c;也可以更加明确并定位在这些属性上使用特定值的元素#xff0c;这就是属性选择…jQuery选择器之属性筛选选择器
属性选择器让你可以基于属性来定位一个元素。可以只指定该元素的某个属性这样所有使用该属性而不管它的值这个元素都将被定位也可以更加明确并定位在这些属性上使用特定值的元素这就是属性选择器展示它们的威力的地方。 描述如下
浏览器支持
[attval]、[att]、[att|val]、[att~val] 属于CSS 2.1规范[ns|attr]、[att^val]、[att*val]、[att$val] 属于CSS3规范[name!“value”] 属于jQuery 扩展的选择器
注意在这么多属性选择器中[attr“value”]和[attr*“value”]是最实用的。
[attr“value”]能帮我们定位不同类型的元素特别是表单form元素的操作比如说input[type“text”],input[type“checkbox”]等。 [attr*“value”]能在网站中帮助我们匹配不同类型的文件。
!DOCTYPE html
htmlheadmeta http-equivContent-type contenttext/html; charsetutf-8 /title/titlelink relstylesheet hrefimooc.css typetext/cssscript srchttp://libs.baidu.com/jquery/1.9.1/jquery.js/scriptstyle.left {width: auto;height: 120px;}.left div {width: 100px;height: 70px;padding: 5px;margin: 5px;float: left;background: #bbffaa;border: 1px solid #ccc;}.bottom {width: 800px;}.bottom div,.bottom span {display: block;width: 80px;height: 80px;margin: 5px;background: #bbffaa;float: left;font-size: 14px;}.bottom .small {width: 60px;height: 25px;font-size: 12px;background: #fab;}/style
/headbodyh2属性筛选选择器/h2h3[attval]、[att]、[att|val]、[att~val]/h3div classleft testattrtrue div classdiv testattrtrue namep1a[attval]/a/divdiv classdiv testattrtrue p2a[att]/a/divdiv classdiv testattrtrue name-a[att|val]/a/divdiv classdiv testattrtrue namea ba[att~val]/a/div/divscript typetext/javascript//查找所有div中属性namep1的div元素$(div[namep1]).css(border, 3px groove red); /scriptscript typetext/javascript//查找所有div中有属性p2的div元素$(div[p2]).css(border, 3px groove blue); /scriptscript typetext/javascript//查找所有div中有属性name中的值只包含一个连字符“-”的div元素$(div[name|-]).css(border, 3px groove #00FF00); /scriptscript typetext/javascript//查找所有div中有属性name中的值包含一个连字符“空”和“a”的div元素$(div[name~a]).css(border, 3px groove #668B8B); /scripth3[att^val]、[att*val]、[att$val]、[att!val]/h3div classleft testattrtrue div classdiv testattrtrue nameimooc-aaorna[att^val]/a/divdiv classdiv testattrtrue nameaaorn-imooca[att$val]/a/divdiv classdiv testattrtrue nameattr-test-selectora[att*val]/a/divdiv classdiv namea ba[att!val]/a/div/divscript typetext/javascript//查找所有div中属性name的值是用imooc开头的$(div[name^imooc]).css(border, 3px groove red); /scriptscript typetext/javascript//查找所有div中属性name的值是用imooc结尾的$(div[name$imooc]).css(border, 3px groove blue); /scriptscript typetext/javascript//查找所有div中有属性name中的值包含一个test字符串的div元素$(div[name*test]).css(border, 3px groove #00FF00); /scriptscript typetext/javascript//查找所有div中有属性testattr中的值没有包含true的div$(div[testattr!true]).css(border, 3px groove #668B8B); /script/body
/html
