jQuery选择器
jQuery选择器
jq 选择器和 css 的选择器语法类似, jq 的选择器是他的灵魂
就是将 html 中的节点元素选择出来的语法,
jq 的选择器非常的灵活
id选择器:
$("#id")
类选择器:
$(".class值");
元素选择器:
$("元素 ");
组选择器:
一次可以使用多种选择器选择元素,每个选择器之间使用 "," 隔开
$("div,span,.myClass");
后代选择器:
选择出指定父元素下指定的所有子孙元素
$(function(){
var inputs = $("form input");
console.log("inputs.length");
})
子选择器
选择指定父元素下指定的子元素
$("form > input")
选择第一个元素
html:
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
</body>
jq:
$(function(){
var item = $("ul li:first");
console.log(item[0]);
})
选择最后一个元素
$(function(){
var item = $("ul li:last");
console.log(item[0]);
})
not 选择器
一般在复选框中使用较多
选择不是input标签, 属性不是 checked的
$(function(){
var boxes = $("input:not(:checked)");
for (var i = 0; i < boxes.length; i++) {
console.log("boxes[i]");
}
})
偶数选择器:
html:
<body>
<table border="1">
<tr>
<td>雇员编号</td><td>雇员姓名</td><td>雇员职位</td><td>雇员薪资</td><td>部门编号</td>
</tr>
<tr>
<td>7963</td><td>SMITH</td><td>PRESIDENT</td><td>5000.00</td><td>10</td>
</tr>
<tr>
<td>7788</td><td>SMITH</td><td>PRESIDENT</td><td>5000.00</td><td>10</td>
</tr>
<tr>
<td>7932</td><td>SMITH</td><td>PRESIDENT</td><td>5000.00</td><td>10</td>
</tr>
<tr>
<td>7369</td><td>SMITH</td><td>PRESIDENT</td><td>5000.00</td><td>10</td>
</tr>
<tr>
<td>7521</td><td>SMITH</td><td>PRESIDENT</td><td>5000.00</td><td>10</td>
</tr>
</table>
</body>
jq:
$(function(){
var trs = $("table tr:even");
for (var i = 0; i < trs.length; i++) {
console.log(trs[i]);
}
})
奇数选择器:
$(function(){
$("table tr:odd").css({background:"red"})
})
eq选择器:
$(function(){
$("table tr:eq(2)").css({background:"red"})
})
gt(index) 选择器,
寻找大于指定索引的元素
$(function(){
$("table tr:gt(2)").css({background:"red"})
})
lt(index)选择器
选择小于指定索引的元素
$(function(){
$("table tr:lt(3)").css({background:"red"})
})
属性选择器
$(function(){
//选择出具备id属性的所有div
var divs = $("div[id]");
})
属性值选择器
1.选择input元素中具有name属性并且name值为"newsletter"
$(function(){
var inputs = $("input[name='newsletter']");
console.log("inputs[0]");
})
2.选择出以指定内容开始的属性的所有元素
$(function(){
var inputs = $("input[name^='news']");
console.log("inputs[0]");
})
3.查询所有name 属性中包含 news 的input元素
$(function(){
var inputs = $("input[name*='news']");
console.log("inputs[0]");
})
4.选择出以指定内容结尾的元素
$(function(){
var inputs = $("input[name$='news']");
console.log("inputs[0]");
})
5.选择input元素中具有name属性并且name值不等于"newsletter"
$(function(){
var inputs = $("input[name!='newsletter']");
console.log("inputs[0]");
})
