JQuery选择器
文章目录
- 选择器
- ID选择器
- 类选择器
- 元素选择器
- 组选择器
- 后代选择器
- 子选择器
- 选择第一个元素
- 选择最后一个元素
- not选择器
- 偶数选择器
- 奇数选择器
- eq选择器（选择指定索引的元素）
- gt(index)选择器，选择大于指定索引的元素
- lt(index)，选择小于指定索引的元素
- 属性选择器
- 属性值选择器
- 不等于的
- 以XX开头的
- 包含xx的
- 以XX结尾的
选择器
JQuery选择器和css的选择器语法很类似
ID选择器
<body>
<div id="notMy"><p>id="notMy"</p></div>
<div id="MyDiv"><p>id="MyDiv"</p></div>
</body>
$(document).ready(function(){
var div=$("#MyDiv");
console.log(div.html());
});
类选择器
<body>
<div class="notMy">div class "notMy"</div>
<div class="myClass">div class "myClass"</div>
<span class="myClass">span class "myClass"</span>
</body>
$(document).ready(function(){
var div=$(".myClass");
console.log(div.html());
});
元素选择器
<body>
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
</body>
$(document).ready(function(){
var div=$("div");
console.log(div.html());
});
直接使用元素名称选择
组选择器
<body>
<div>DIV</div>
<p class="myClass">p class="myClass"</p>
<span>SPAN</span>
</body>
$(document).ready(function(){
var div=$("div,span,p.myClass");
console.log(div);
});
一次可以选择多个元素
后代选择器
<body>
<form>
<label>Name:</label>
<input name="name"/>
<fieldset>
<label>Newsletter:</label>
<input name="newsletter"/>
</fieldset>
</form>
<input name="none" />
</body>
$(document).ready(function(){
var temp=$("form input");
console.log(temp);
});
选择出指定父元素下指定的所有子孙元素
子选择器
<body>
<form>
<label>Name:</label>
<input name="name"/>
<fieldset>
<label>Newsletter:</label>
<input name="newsletter"/>
</fieldset>
</form>
<input name="none" />
</body>
$(document).ready(function(){
var temp=$("form>input");
console.log(temp[0]);
});
选择第一个元素
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
</body>
$(document).ready(function(){
var temp=$("ul li:first");
console.log(temp.html());
});
选择最后一个元素
$(document).ready(function(){
var temp=$("ul li:last");
console.log(temp.html());
});
not选择器
一般在复选框中使用
<body>
<input name="apple" type="checkbox"/>
<input name="flower" checked="checked" type="checkbox"/>
</body>
$(function(){
//选择出没有选中的复选框
var inputs=$("input:not(:checked)");
console.log(inputs[0]);
});
$(function(){
//选择出选中的复选框
var inputs=$("input:checked");
console.log(inputs[0]);
});
偶数选择器
<body>
<table border="1">
<tr>
<td>雇员编号</td><td>雇员姓名</td><td>雇员职位</td><td>雇员薪资</td><td>部门编号</td>
</tr>
<tr>
<td>7963</td><td>尼古拉斯</td><td>天神</td><td>50000.00</td><td>10</td>
</tr>
<tr>
<td>7964</td><td>雅典娜</td><td>智慧女神</td><td>50000.00</td><td>10</td>
</tr>
<tr>
<td>7965</td><td>斯巴达</td><td>战争之王</td><td>50000.00</td><td>10</td>
</tr>
<tr>
<td>7966</td><td>毒液</td><td>超级英雄</td><td>50000.00</td><td>10</td>
</tr>
<tr>
<td>7967</td><td>蚁人</td><td>超级英雄</td><td>50000.00</td><td>10</td>
</tr>
</table>
</body>
$(function(){
var trs=$("table tr:even");
for (var i=0;i<trs.length;i++) {
console.log(trs[i]);
}
});
奇数选择器
$(function(){
var trs=$("table tr:odd");
for (var i=0;i<trs.length;i++) {
console.log(trs[i]);
}
});
eq选择器（选择指定索引的元素）
$(function(){
//选择出索引为1的元素
var trs=$("table tr:eq(1)");
console.log(trs.html());
});
gt(index)选择器，选择大于指定索引的元素
$(function(){
//选择出索引为1的元素
var trs=$("table tr:gt(1)");
for (var index in trs) {
console.log(trs[index]);
}
});
lt(index)，选择小于指定索引的元素
$(function(){
//选择出索引为1的元素
var trs=$("table tr:lt(1)");
for (var index in trs) {
console.log(trs[index]);
}
});
属性选择器
<body>
<div>
<p>Hello!</p>
</div>
<div id="test"></div>
</body>
$(function(){
//选择出索引为1的元素
var divs=$("div[id]");
console.log(divs[0]);
});
选择出具备id属性的所有div
属性值选择器
<!--导入JQuery的js文件-->
<script src="../js/juery.min.js"></script>
<script>
$(function(){
//选择出具有name属性并且name值为"newsletter"的div
var input=$("input[name='newsletter']");
for (var i=0;i<input.length;i++) {
console.log(input[i]);
}
})
</script>
</head>
<body>
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
</body>
选择出具有指定属性并且属性值等于指定的内容的所有元素
不等于的
<script>
$(function(){
var input=$("input[name!='newsletter']");
console.log(input[0]);
})
</script>
以XX开头的
<script>
$(function(){
var input=$("input[name^='news']");
console.log(input);
})
</script>
包含xx的
$(function(){
var input=$("input[name*='cc']");
console.log(input[0]);
})
以XX结尾的
$(function(){
var input=$("input[name$='pt']");
console.log(input[0]);
})