属性选择器

Posted on Posted in js
Tips: 本文创建于2014年7月6日,已超过 2 年,内容或图片可能已经失效!

[code lang="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="jquery-2.1.0.js"></script>

<script type="text/javascript">
function f1() {
//属性选择器使用
//① [name=value]
$("[value=tom]").css('width', '200px');
$("[value=触发]").css('color', 'red');
$("[type=text]").css('background-color', 'pink');

//② [name*=value] value的信息是对应属性的信息的一部分
$("[name*=r]").css('background-color', 'lightblue');
$("[name*=ma]").css('background-color', 'lightblue');

//③ [name^=value] name的属性值以value开始
$("[name^=t]").css('color', 'red');

//④ [name$=value] name属性值以value结尾
$("[value$=om]").css('width', '400px');

//⑤ [name!=value] name属性值不等于value(注意,元素节点没有此属性也给找到)
$("[class!=apple]").css('background-color', 'pink');
//元素节点有此属性,并且此属性的值不等于条件值

//⑥ [name] 获得的元素节点必须有name属性
$("[class]").css('width', '400px');

//⑦ [name][条件][条件] 符合属性选择器,获取的元素节点必须符合全部的条件
$("[class][class!=apple]").css('background-color', 'red');
//元素节点必须是input框,还需要有class属性,并且class属性的值不等于apple
$("input[class][class!=apple]").css('width', '500px');

}
</script>

<style type="text/css">
div {
width: 300px;
height: 50px;
border: 2px solid black;
}
</style>
</head>

<body>
<input type="text" name="usernmae" value='tom' class="apple" />
<br />
<input type="text" name="useremail" value='tom@163.com' class="pear" />
<br />
<input type="text" name="qq" value='268736483' />
<br />
<input type="text" name="tel" value='13456237865' class="apple" />
<br />
<input type="text" name="tintroduce" value='I am tom' />
<br />
<div class="orange"></div>
<br />
<input type="button" value="触发" onclick="f1()" />
</body>
</html>[/code]

» 转载请注明来源:若我若鱼 » 属性选择器

Leave a Reply

Your email address will not be published. Required fields are marked *

2 × 2 =