一、基本筛选器
1. :first
获取匹配的第一个元素
HTML代码:
<div>
<p id="p1">p1</p>
<p id="p2">p2</p>
<p id="p3">p3</p>
</div>
JavaScript代码:
var p = $('p:first');
console.log(p);
运行结果:
2. :eq(index)
匹配一个给定索引值的元素
HTML代码:
<ul>
<li id="p1">li1</li>
<li id="p2">li2</li>
<li id="p3">pli3</li>
</ul>
JavaScript代码:
console.log($('li:eq(0)'));
console.log($('ul li:eq(1)'));
console.log($('ul li:eq(2)'));
运行结果
3. :gt(index)
匹配所有大于给定索引值的元素
HTML代码:
<div id="div1">
<p id="p1">div_p1</p>
<p id="p2">div_p2</p>
<p id="p3">div_p3</p>
</div>
<p id="p4">p4</p>
JavaScript代码:
console.log($('p:gt(1)'));
console.log($('#div1 p:gt(0)'));
运行结果
4. :lt(index)
匹配所有小于给定索引值的元素
HTML代码:
<div id="div1">
<p id="p1">div_p1</p>
<p id="p2">div_p2</p>
<p id="p3">div_p3</p>
</div>
<p id="p4">p4</p>
JavaScript代码:
console.log($('p:lt(3)'));
console.log($('div p:lt(2)'));
运行结果
5. :last
获取最后个元素
HTML代码:
<ul>
<li id="li1">li1</li>
<li id="li2">li2</li>
<li id="li3">li3</li>
<li id="li4">li4</li>
<li id="li5">li5</li>
</ul>
JavaScript代码:
console.log($('li:last'));
运行结果
二、属性选择器
1. [attribute]
匹配包含给定属性的元素
HTML代码:
<div id="d1">
<div id="d1d1">d1d1</div>
<div>d1d2</div>
</div>
<div id="d2">d2</div>
<div>d3</div>
JavaScript代码:
console.log($('div[id]'));
运行结果
2. [attribute=value]
匹配给定的属性是某个特定值的元素
HTML代码:
<form>
<input type="text" id="username" name="username" value="admin">
<input type="password" id="pwd" name="pwd" value="123456">
<button>提交</button>
</form>
JavaScript代码:
console.log($('input[name="username"]'));
console.log($('input[name="pwd"]'));
运行结果
3. [attribute!=value]
匹配所有不含有指定的属性,或者属性不等于特定值的元素
HTML代码:
<div class="mydiv">
<div class="mydiv_1"></div>
<div class="mydiv"></div>
<div id="mydiv_2"></div>
</div>
<div id="mydiv2"></div>
<div></div>
JavaScript代码:
console.log($('div[class!="mydiv"]'));
运行结果
4. [attribute^=value]
匹配给定的属性是以某些值开始的元素
HTML代码:
<form>
<input type="text" name="newsinput1" id="newsinput1">
<input type="text" name="laoinput2" id="laoinput2">
<input type="text" name="newsinput3" id="newsinput3">
</form>
JavaScript代码:
console.log($('input[name^="news"]'));
运行结果
5. [attribute$=value]
匹配给定的属性是以某些值结尾的元素
HTML代码:
<div>
<p id="red_color" class="red_color">p1</p>
<p id="blue_color" class="blue_color">p2</p>
<p id="green_color" class="green_color">p3</p>
</div>
<p id="yellow_color" class="yellow_color">span1</p>
JavaScript代码:
console.log($('div p[class$="color"]'));
运行结果
6. [attribute*=value]
匹配给定的属性是以包含某些值的元素
HTML代码:
<div id="div1" class="btn btn-lg">
<p id="p1" class="btn-lg s_tab smallp1">p1</p>
<div class="btn-lg s_tab"></div>
<p class="smallp2">p2</p>
<p class="smallp3">p3</p>
<p class="bigp4">p4</p>
</div>
JavaScript代码:
console.log($('div[class*="btn-lg"]'));
console.log($('p[class*="small"]'));
运行结果
三、表单对象属性
1. :checked
匹配所有选中的被选中元素(复选框、单选框等,select中的option),对于select元素来说,获取选中推荐使用 :selected
2. :selected
匹配所有选中的option元素
HTML代码:
<form>
<p>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" value="">
</p>
<p>
<label for="pwd">密码:</label>
<input type="password" id="pwd" name="pwd" value="">
</p>
<p>
<label for="repwd">确认密码:</label>
<input type="password" id="repwd" name="repwd" value="">
</p>
<p>
<label>性别:</label>
<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女
</p>
<p>
<label>爱好:</label>
<input type="checkbox" name="hobby" value="basktball">篮球
<input type="checkbox" name="hobby" value="soccer">足球
<input type="checkbox" name="hobby" value="ping_pong">乒乓球
</p>
<p>
<label>籍贯:</label>
<select name="province">
<option value="">请选择</option>
<option value="sd">山东</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
</p>
<button type="button" onclick="record()">提交</button>
</form>
JavaScript代码:
function record() {
var username = $('input[name="username"]').val();
var pwd = $('input[name="pwd"]').val();
var repwd = $('input[name="repwd"]').val();
var sex = $('input[name="sex"]:checked').val();
var hobby = $('input[name="hobby"]:checked').val();
var province = $('select[name="province"] option:selected').val();
if (username == '') {
alert("用户名不能为空!");
return;
}
if (pwd == ''){
alert("密码不能为空!");
return;
}
if (repwd == ''){
alert("请再次输入密码!");
return;
}
if (repwd != pwd){
alert("两次密码不一致!");
return;
}
if (sex == undefined){
alert("请选择性别");
return;
}
if (hobby == undefined){
alert("请选择爱好");
return;
}
if (province == ''){
alert("请选择籍贯");
return;
}
alert("注册成功!");
}
运行结果
四、总结
学会了一些常用的基本筛选器、属性选择器和表单对象属性。