jQuery

    jQuery是一个轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），但是jQuery2.0及后续版本将不再支持IE6/7/8浏览器。

 
 
$(document).ready(function (){
    //代码段
});

可以简化成：

 
 
$(function (){
    //代码段
});

基础选择器

基础选择器是jQuery中使用最频繁的选择器，它由元素id、class、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找，如下表格：

选择器	功能	返回值
#id	根据给定的id匹配一个元素	单个元素
element	根据给定的元素名匹配所有元素	元素集合
.class	根据给定的类匹配元素	元素集合
*	匹配所有元素	元素集合
selector1,selectorN	将每一个选择器匹配到的元素合并后一起返回	元素集合

(2)代码实现

 
 
    ...省略代码
    <script type="text/javascript">
        $(function(){ //id匹配元素
        $("#divOne").css("display","none");
    })
    $(function(){ //元素名匹配元素
            $("div span").css("display","none");
    })
    $(function(){ //类匹配元素
        $(".clsFrame .clsOne").css("display","none");
    })
    $(function(){ //匹配所有元素
        $("*").css("display","none");
    })
    $(function(){ //合并匹配元素
        $("#divOne,span").css("display","none");
    })
    </script>

jQuery层次选择器

层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素，详细说明如下表：

选择器	功能	返回值
ancestor descendant	根据祖先元素匹配所有的后代元素	元素集合
parent > child	根据父元素匹配所有的子元素	元素集合
prev + next	匹配所有紧接在prev元素后的相邻元素	元素集合
prev ~ siblings	匹配prev元素之后的所有兄弟元素	元素集合

提示：ancestor descendant 与 parent > child 所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系；另外 prev + next 可以使用 .next() 代替，而prev ~ siblings可以使用nextAll()代替。

示例如下：

(1)描述

所有的元素标记初始全部显示，然后通过jQuery层次选择器隐藏相对应的页面标记。

(2)代码实现

 
 
 
<script type="text/javascript">
$(function(){ //匹配后代元素
    $("div span").css("display","none");//隐藏div中所有的<span>标记
})
$(function(){ //匹配子元素
    $("div>span").css("display","none");//隐藏div中子span标记
})
$(function(){ //匹配后面元素
    $("#divMid + div").css("display","none");//隐藏id为divMid元素后的下一个div
    $("#divMid").next().css("display","none");
})
$(function(){ //匹配所有后面元素
    $("#divMid ~ div").css("display","none");//隐藏id为divMid元素后的所有div
    $("#divMid").nextAll().css("display","none");
})
$(function(){ //匹配所有相邻元素
    $("#divMid").siblings("div").css("display","none");//隐藏id为divMid元素的所有相邻div
})
</script>

jQuery 简单过滤选择器

过滤选择器根据某类g过滤规则进行元素的匹配，书写时都以冒号（:）开头；简单过滤选择器是过滤选择器中使用最广泛的一种，详细如下表：

选择器	功能	返回值
first()或 :first	获取第一个元素	单个元素
parent >last() 或 :last	获取最后一个元素	单个元素
:not(selector)	获取除给定选择器外的所有元素	元素集合
:even	获取所有索引值为偶数的元素，索引号从0开始	元素集合
:odd	获取所有索引值为奇数的元素，索引号从0开始	元素集合
:eq(index)	获取指定索引值得元素，索引号从0开始	单个元素
:gt(index)	获取所有大于给定索引值的元素，索引号从0开始	元素集合
:lt(index)	获取所有小于给定索引值的元素，索引号从0开始	元素集合
:header	获取所有标题类型的元素，如h1、h2......	元素集合
:animated	获取正在执行动画效果的元素	元素集合

下面将通过示例来讲解如何通过过滤选择器定位DOM元素的方法。

示例如下：

(1)描述

通过简单过滤选择器获取元素，将选中的元素改变其类名称，从而突出其被选中的状态

(2)代码实现

 
 
...省略代码
<script type="text/javascript">
$(function(){ //增加第一个元素的类别
    $("li:first").addClass("GetFocus");//
})
$(function(){ //增加最后一个元素的类别  
    $("li:last").addClass("GetFocus"); //
})
$(function(){ //增加去除所有与给定选择器匹配的元素类别
    $("li:not(.NotClass)").addClass("GetFocus");//
})
$(function(){ //增加所有索引值为偶数的元素类别，从0开始计数
    $("li:even").addClass("GetFocus"); //
})
$(function(){ //增加所有索引值为奇数的元素类别，从0开始计数
    $("li:odd") .addClass("GetFocus"); // 
})
$(function(){ //增加一个给定索引值的元素类别，从0开始计数
    $("li:eq(1)").addClass("GetFocus"); // 
})
$(function(){ //增加所有大于给定索引值的元素类别，从0开始计数
    $("li:gt(1)").addClass("GetFocus"); // 
})
$(function(){ //增加所有小于给定索引值的元素类别，从0开始计数
    $("li:lt(4)").addClass("GetFocus"); // 
})
$(function(){ //增加标题类元素类别
    $("div h1").css("width","238"); // 
    $(":header").addClass("GetFocus"); // 
})
$(function(){ //增加动画效果元素类别
    animateIt();
    $("#spanMove:animated").addClass("GetFocus"); // 
})
function animateIt() {//动画效果
    $("#spanMove").slideToggle("slow",animateIt);
}
</script>

内容过滤选择器

内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或者绝对匹配进行元素定位，详细如下：

选择器	功能	返回值
:contains(text)	获取包含给定文本的元素	元素集合
:empty	获取所有不包含子元素或者文本的空元素	元素集合
:has(selector)	获取含有选择器所匹配的元素的元素	元素集合
:parent	获取获取含有子元素或者文本的元素	元素集合

下面将通过示例来讲解如何通过内容过滤选择器定位DOM元素的方法。

示例如下：

(1)描述

页面中，创建四个div标记，并在其中一个div中新建一个span标记，其余div标记中输入内容或空，通过内容过滤选择器获取元素，并显示在页面中。

(2)代码实现

 
 
...省略代码
<script type="text/javascript">
$(function(){ //显示包含给定文本的元素
    $("div:contains('Div')").css("display","block");
})
$(function(){ //显示所有不包含子元素或者文本的空元素  
    $("div:empty").css("display","block"); 
})
$(function(){ //显示含有选择器所匹配的元素
    $("div:has(span)").css("display","block");//显示含有span标记的元素
})
$(function(){ //显示含有子元素或者文本的元素
    $("div:parent").css("display","block"); 
})
</script>

可见性过滤选择器

可见性过滤选择器根据元素是否可见的特征获取元素，详细如下：

选择器	功能	返回值
:hidden	获取所有不可见元素，或者type为hidden的元素	元素集合
:visible	获取所有的可见元素	元素集合

提示：hidden选择器所选择的不仅包括样式为display：none所有元素，还包括属性type="hidden"和样式为visibility:hidden的所有元素

示例如下：

(1)描述

页面中，新建一个span和div标记，分别设置标记的display属性为"none"和"block"；然后根据可见性过滤选择器显示页面元素。

(2)代码实现

 
 
...省略代码
<script type="text/javascript">
$(function(){ //增加所有可见元素的类别
    $("span:hidden").show()
    $("div:visible").addClass("GetFocus");
})

属性过滤选择器

选择器	功能	返回值
[attribute]	获取包含给定属性的元素	元素集合
[attribute=value]	获取等于给定的属性是某个特定值得元素	元素集合
[attribute!=value]	获取不等于给定的属性是某个特定值得元素	元素集合
[attribute^=value]	获取给定的属性是以某些值开始的元素	元素集合
[attribute$=value]	获取给定的属性是以某些值结尾的元素	元素集合
[attribute*=value]	获取给定的属性是以包含某些值得元素	元素集合
[selector1][selector2][selectorN]	获取满足多个条件的复合属性的元素	元素集合

下面将通过示例来讲解如何使用过滤选择器定位DOM元素的方法。

示例如下：

(1)描述

页面中，创建四个div标记，并设置不同的ID和Title属性值，然后通过属性过滤选择器获取所指定的元素集合，并显示在页面中。

(2)代码实现

 
 
...省略代码
<script type="text/javascript">
$(function(){ //显示所有包含id属性的元素 1
    $("div[id]").show(3000);
})
$(function(){ //显示所有属性title的值是"A"的元素  2
    $("div[title='A']").show(3000); 
})
$(function(){ //显示所有属性title的值不是"A"的元素  3
    $("div[title!='A']").show(3000); 
})
$(function(){ //显示所有属性title的值是"A"开始的元素  4
    $("div[title^='A']").show(3000); 
})
$(function(){ //显示所有属性title的值是"C"结束的元素  5
    $("div[title$='C']").show(3000); 
})
$(function(){ //显示所有属性title的值中含有"B"的元素  6
    $("div[title*='B']").show(3000); 
})
$(function(){ //显示所有属性title的值中含有"B"且属性id的值是“divAB”的元素   7
    $("div[id='divAB'][title*='B']").show(3000); 
})
</script>

子元素过滤选择器

在页面开发中，总是遇到突出指定某行的需求。如果实现单个表格的显示，用基本过滤选择器:eq(index)就能实现；但如果是大量数据的选择需求可以通过子元素过滤选择器轻松获取所有父元素中指定的某个元素。详细如下：

选择器	功能	返回值
:nth-child(eq|even|odd|index)	获取每个元素下的特定元素，索引号从1开始	元素集合
:first-child	获取每个父元素下的第一个子元素	元素集合
:last-child	获取每个父元素下的最后一个子元素	元素集合
:only-child	获取每个父元素下的仅有一个子元素	元素集合

下面将通过示例来讲解如何使用子元素过滤选择器获取元素。

示例如下：

(1)描述

描述：页面中，创建三个ul标记，前两个标记中设置四个li,后一个标记中设置一个li，通过子元素过滤选择器获取指定的页面元素，并改变其选择后的状态，显示在页面中。

(2)代码实现

 
 
...省略代码
<script type="text/javascript">
$(function(){ //增加每个父元素下的第2个子元素类别 1
    $("li:nth-child(2)").addClass("GetFocus");
})
$(function(){ //增加每个父元素下的第1个子元素类别  2
    $("li:first-child").addClass("GetFocus"); 
})
$(function(){ //增加每个父元素下的最后一个子元素类别  3
    $("li:last-child").addClass("GetFocus"); 
})
$(function(){ //增加每个父元素下只有一个子元素类别  4
    $("li:only-child").addClass("GetFocus"); 
})
</script>

表单对象属性过滤选择器

表单对象属性过滤选择器通过表单中的某对象属性特征获取该类元素，如enabled、disabled、checked、selected属性。详细如下：

选择器	功能	返回值
:enabled	获取表单中所有属性为可用的元素	元素集合
:disabled	获取表单中所有属性为不可用的元素	元素集合
:checked	获取表单中所有被选中的元素	元素集合
:selected	获取表单中素有被选中option的元素	元素集合

下面将通过示例来讲解如何使用表单对象属性过滤选择器获取表单对象的方法。

示例如下：

(1)描述

在表单中，通过表单对象属性过滤选择器获取某指定元素，并处理该元素。

(2)代码实现

 
 
 
<script type="text/javascript">
$(function(){ //增加表单中所有属性为可用的元素类别
    $("#divA").show(3000);
    $("#form1 input:enabled").addClass("GetFocus");
})
$(function(){ //增加表单中所有属性为不可用的元素类别  2
    $("#divA").show(3000);
    $("#form1 input:disabled").addClass("GetFocus"); 
})
$(function(){ //增加表单中所有被选中的元素类别  3
    $("#divB").show(3000);
    $("#form1 input:disabled").addClass("GetFocus"); 
})
$(function(){ //显示表单中所有option的元素内容  4
    $("#divC").show(3000);
    $("#Span2").html("选中项是：" + $("select option:selected").text());
})
</script>

表单选择器

在表单中，为了使用更加方便和高效，在jQuery选择器中引入了表单选择器，通过它可以再页面中快速定位某表单对象。详细如下：

选择器	功能	返回值
:input	获取所有input、textarea、select	元素集合
:text	获取表单中所有单行文本框	元素集合
:password	获取表单中所有密码框	元素集合
:radio	获取表单中所有单选按钮	元素集合
:checkbox	获取表单中所有复选框	元素集合
:submit	获取表单中所有提交按钮	元素集合
:image	获取表单中所有图像域	元素集合
:reset	获取表单中所有重置按钮	元素集合
:button	获取表单中所有按钮	元素集合
:file	获取表单中所有文件域	元素集合

示例如下：

(1)描述

在表单中，创建11种常用的表单对象，根据表单选择器，先显示出所有表单对象的总量，然后显示各种不同类型的表单对象。

(2)代码实现

 
 
 
<script type="text/javascript">
$(function(){ //显示input类型元素的总数量 1
    $("#form1 div").html("表单共找出input类型元素" + 
    $("#form1 :input").length);
    $("#form1 div").addClass("div");
})
$(function(){ //显示所有文本框对象  2
    $("#form1 :text").show(3000); 
})
$(function(){ //显示所有密码框对象  3
    $("#form1 :password").show(3000);
})
$(function(){ //显示所有单选按钮对象  4
    $("#form1 :radio").show(3000); 
    $("#form1 #span1").show(3000);
})
$(function(){ //显示所有复选框对象  5
    $("#form1 :checkbox").show(3000); 
    $("#form1 #span2").show(3000);
})
$(function(){ //显示所有提交按钮对象  6
    $("#form1 :submit").show(3000);
})
$(function(){ //显示所有图片域对象  7
    $("#form1 :image").show(3000); 
})
$(function(){ //显示所有重置按钮对象  8
    $("#form1 :reset").show(3000);
})
$(function(){ //显示所有按钮对象  9
    $("#form1 :button").show(3000);
})
$(function(){ //显示所有文件域对象  10
    $("#form1 :file").show(3000);
})
</script>