Jquery入门系列4---过滤选择器之属性过滤选择器

西狂小杨过

于 2024-11-13 22:41:38 发布

阅读量200

点赞数 4

CC 4.0 BY-SA版权

分类专栏： jquery入门系列文章标签： jquery 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_45461146/article/details/143753936

jquery入门系列专栏收录该内容

4 篇文章

订阅专栏

属性过滤选择器

属性过滤选择器顾名思义就是通过元素的属性来获取元素。下面我列出了常用的属性过滤选择器，大家请看：

选择器	描述	示例
[attr]	选取包含给定属性的元素	$(" [href]" )选取含有href属性的元素
[attr=value]	选取属性的值是value的元素	$(" [href ='#']" )选取href属性值为“#”的元素
[attr!=value]	选取属性的值不是value的元素	$(" [href !='#']" )选取href属性值不为“#”的元素
[attr^=vlaue]	选取属性的值以value开头的元素	$(" [href^='en']" )选取href属性值以en开头的元素
[attr$=value]	选取属性的值以value结束的元素	$(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素
[attr*=vlaue]	选取属性的值含有vlaue的元素	$(" [href* ='txt']" )选取href属性值中含有txt的元素

练习环节：

框架沿用上节课的框架，附上代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div, span, p {
  width: 140px;
  height: 140px;
  margin: 5px;
  background: #aaa;
  border: #000 1px solid;
  float: left;
  font-size: 17px;
  font-family: Verdana;
}
div.mini {
  width: 55px;
  height: 55px;
  background-color: #aaa;
  font-size: 12px;
}
div.hide {
  display: none;
}
</style>
</head>
<body>
<div class="one" id="one">
  id为one，class为one的div
  <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
  id为two，class为one，title为test的div
  <div class="mini" title="other">class为mini，title为other</div>
  <div class="mini" title="test">class为mini，title为test</div>
</div>
<div class="one">
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini"></div>
</div>
<div class="one">
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini" title="tesst">class为mini，title为tesst</div>
</div>
<div style="display: none;" class="one">style的display为none的div</div>
<div class="hide">class为hide的div</div>
<div>包含input的type为hidden的div<input type="hidden" size="8"/></div>
<span id="mover">正在执行动画的span元素</span>
</body>
</html>

1.改变含有属性tilte的<div>元素的背景色

$("div[title]").css("background","#ffbbaa");

2.改变属性title等于test的<div>元素的背景色

$("div[title=test]").css("background","#ffbbaa");

3.改变属性title值不等于test的<div>元素的背景色

$("div[title!=test]").css("background","#ffbbaa");

4.改变属性title值以te开始的<div>元素的背景色

$("div[title^=te]").css("background","#ffbbaa");

5.改变属性title值以est结尾的<div>元素的背景色

$("div[title$=est]").css("background","#ffbbaa");

6.改变属性title值含有es的<div>元素的背景色

$("div[title*=es]").css("background","#ffbbaa");

今天这节课讲完了，大家多多练习，下节课我们讲子元素过滤选择器和表单对象属性过滤选择器