jQuery属性选择器

jQuery属性选择器

<form action="">
    <input type="text">
    <input type="password">
    <input type="checkbox" name="hobby"><label>游泳</label>
    <input type="checkbox" name="hobby"><label>篮球</label>
</form>
<div abc="3" hobby="abcde" toggle='book-1' class="div1 div2">1</div>
<div hobby="ab" toggle='book-2' class="div2 div3 div1">2</div>
<div abc="4" hobby="ade" toggle='book' class="div2 div1 div3">3</div>
<div abc="4" hobby="ade" toggle='book3' class="div3 div4">4</div>
<div abc="4" hobby="ade" toggle='book3' class="div32">5</div>

// 选择有type属性的元素
// $("[type]")
// 获取abc属性，设置颜色为红色
$("[abc]").css("color","red");
// 设置input元素type属性文本内容颜色为红色
$("input[type=text]").css("color","red");

// 选择有type和name属性的元素
$("[type][name]").next("label").css("color","red");

// 选择某个属性是某个值的元素
$("[abc=3]").css("color","red");

// 选择属性是hobby并且值是以a字母开头的元素
$("[hobby^=a]").css("color","red");

// 选择属性是hobby并且值是以e字母结束的元素
$("[hobby$=e]").css("color","red");

// 选择属性是hobby但是值不等于ade的所有元素，如果属性没有也会被选中
$("div[hobby!=ade]").css("color","red");

// 选择属性是toggle，并且这个属性的值是book起头或者后面紧跟-的值
$("[toggle|=book]").css("color","red");

// 选择属性是class，属性值中包含div3或者等于div3，包含div3在这里是指div3是一个 独立的单词，前后有空格隔开
$("[class~=div3]").css("color","red");

// 选择属性是class，属性值的字符串含有div3字符的，可以不是一个独立的单词
$("[class*=div3]").css("color","red");

1、原生js中变量和函数名都必须使用驼峰式命名，因为js是区分大小写
2、html和css是不区分大小写，所以在html和css中，自定义的名称无法使用驼峰式命名，使用-连接两个单词
3、php中变量名区分大小写，所以使用驼峰式命名，函数名不区分大小写，单词直接使用_连接