JQuery——JQuery七大选择器及常见错误注意事项
1.选择器的分类
2.基本选择器
2.1 基本选择器的分类及描述
2.2 基本选择器的代码实现
<script type="text/javascript">
$(function(){
//选择id为one的元素
$("#btn1").click(function(){
$("#one").css("background","#bfa");
});
//选择class为mini的所有元素
$("#btn2").click(function(){
$(".mini").css("background","#bfa");
});
//选择 元素名是 div 的所有元素
$("#btn3").click(function(){
$("div").css("background","#bfa");
});
//选择 所有的元素
$("#btn4").click(function(){
$("*").css("background","#bfa");
});
//选择 所有的span元素和id为two的元素
$("#btn5").click(function(){
$("span,#two").css("background","#bfa");
});
});
</script>
3.层次选择器
3.1 层次选择器的分类及描述
3.2 层次选择器的代码实现
<script type="text/javascript">
$(function() {
//选择body内的所有div元素
$("#btn1").click(function() {
$('body div').css("background", "#bbffaa");
});
//在body中选择元素名称是div的子元素（第一层包含的元素，元素内部的其他元素不包括）
$("#btn2").click(function() {
$('body>div').css("background", "#bbffaa");
});
//选择 所有class为one 的下一个div元素（除去第一个后面的元素，但是要求必须是class为one）
$("#btn3").click(function() {
$('.one+div').css("background", "#bbffaa");
});
//选择 id为two的元素后面的所有div兄弟元素(后面同一级别的div元素)
$("#btn4").click(function() {
$('#two~div').css("background", "#bbffaa");
});
});
</script>
4.基本过滤选择器
4.1 基本过滤选择器的分类及描述
4.2 基本过滤选择器的代码实现
<script type="text/javascript">
$(function(){
//选择第一个div元素
$("#btn1").click(function(){
$("div:first").css("background","#bfa");
});
//选择最后一个div元素
$("#btn2").click(function(){
$("div:last").css("background","#bfa");
});
//选择class不为one的 所有div元素
$("#btn3").click(function(){
$("div:not(.one)").css("background","#bfa");
});
//选择索引值为偶数 的div元素
$("#btn4").click(function(){
$("div:even").css("background","#bfa");
});
//选择索引值为奇数的div元素
$("#btn5").click(function(){
$("div:odd").css("background","#bfa");
});
//选择索引值等于3的元素
$("#btn6").click(function(){
$("div:eq(3)").css("background","#bfa");
});
//选择索引值大于3的元素
$("#btn7").click(function(){
$("div:gt(3)").css("background","#bfa");
});
//选择索引值小于3的元素
$("#btn8").click(function(){
$("div:lt(3)").css("background","#bfa");
});
//选择所有的标题元素,比如h1，h2，h3等
$("#btn9").click(function(){
$(":header").css("background","#bfa");
});
//选择当前正在执行动画的所有元素
$("#btn10").click(function(){
$(":animated").css("background","#bfa");
});
//选择当前获取焦点的所有元素
$("#btn11").click(function(){
$(":focus").css("background","#bfa");
});
});
</script>
5.属性过滤选择器
5.1 属性过滤选择器的分类及描述
5.2 属性过滤选择器的代码实现
<script type="text/javascript">
$(function(){
//选取含有 属性title 的div元素
$("#btn1").click(function(){
$("div[title]").css("background","#bbffaa");
});
//选取 属性title值等于“test”的div元素
$("#btn2").click(function(){
$("div[title=test]").css("background","#bbffaa");
});
//选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)
$("#btn3").click(function(){
$("div[title!=test]").css("background","#bbffaa");
});
//选取 属性title值 以“te”开始 的div元素
$("#btn4").click(function(){
$("div[title^=te]").css("background","#bbffaa");
});
//选取 属性title值 以“est”结束 的div元素
$("#btn5").click(function(){
$("div[title$=est]").css("background","#bbffaa");
});
//选取 属性title值 含有“es”的div元素
$("#btn6").click(function(){
$("div[title*=es]").css("background","#bbffaa");
});
//组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素
$("#btn7").click(function(){
$("div[id][title*=es]").css("background","#bbffaa");
});
});
</script>
6.可见性过滤选择器
6.1 可见性过滤选择器的分类及描述
6.2 可见性过滤选择器的代码实现
<script type="text/javascript">
$(function(){
$("#reset").click(function(){
window.location.reload();
});
$("#btn_visible").click(function(){
$("div:visible").css("background","#ffbbaa");
});
$("#btn_hidden").click(function(){
alert("不可见的元素有："+$('body :hidden').length+"个\n"+
"其中不可见的div元素："+$('div:hidden').length+"个\n");
$("div:hidden").show(3000).css("background","#bbffaa");
});
});
</script>
7.表单选择器
7.1 表单选择器的分类及描述
7.2 表单选择器的代码实现
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
var $alltext = $("#form1 :text");
var $allpassword = $("#form1 :password");
var $allradio = $("#form1 :radio");
var $allcheckbox = $("#form1 :checkbox");
var $allsubmit = $("#form1 :submit");
var $allimage = $("#form1 :image");
var $allreset = $("#form1 :reset");
var $allbutton = $("#form1 :button"); // <input type=button /> 和 <button ></button>都可以匹配
var $allfile = $("#form1 :file");
var $allhidden = $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
var $allselect = $("#form1 select");
var $alltextarea = $("#form1 textarea");
var $AllInputs = $("#form1 :input");
var $inputs = $("#form1 input");
$("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>")
.append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>")
.append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>")
.append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>")
.append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
.append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
.append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
.append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
.append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
.append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
.append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
.append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
.append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
.append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
.css("color", "red")
$("form").submit(function () { return false; }); // return false;不能提交.
});
//]]>
</script>
8.常见错误注意事项
8.1 特殊符号需转义
8.2 选择器中的空格要注意
