JQuery

1. jQuery是什么？

　　　　jQuery是JavaScript的封装

1. 为什么要使用jQuery？

　　　　正因为它是对JavaScript的封装，所以能“写得更少，做得更多”。

1. jQuery包括哪些内容？

　　　　选择器、事件、DOM操作、AJAX等等

1. jQuery选择器的分类？

　　　　1)         基本选择器

　　　　　　(一)   ID选择器

　　　　　　(二)   标签选择器

　　　　　　(三)   类选择器

　　　　　　(四)   全局选择器

　　　　　　(五)   并集选择器

　　　　2)         层次选择器

　　　　　　(一)   后代选择器

　　　　　　(二)   子代选择器

　　　　　　(三)   同辈后相邻选择器

　　　　　　(四)   同辈后所有选择器

3)         过滤选择器

　　　　　　(一)   :first                                      首元素选择器

　　　　　　(二)   :last                             尾元素选择器

　　　　　　(三)   :even                           索引值为偶数选择器

　　　　　　(四)   :odd                             索引值为奇数选择器

　　　　　　(五)   :eq(index)                   索引值相等选择器

　　　　　　(六)   :gt(index)                   索引值大于选择器

　　　　　　(七)   :lt(index)                     索引值小于选择器

　　　　　　(八)   :not(selector)            取反选择器

　　　　　　(九)   :header                       标题选择器

　　　　　　(十)   :focus                          焦点选择器

　　　　　　(十一)          :animated         动画选择器

4)         属性选择器

　　　　　　(一)   属性包含

　　　　　　(二)   属性值相等

　　　　　　(三)   属性值不等

　　　　　　(四)   属性值开头

　　　　　　(五)   属性值结尾

　　　　　　(六)   属性值包含

　　　　　　(七)   复合属性

5)         子元素选择器

　　　　　　(一)   first-child                                               首子元素

　　　　　　(二)   last-child                                                尾子元素

　　　　　　(三)   first-of-type                                           类型首子元素

　　　　　　(四)   last-of-type                                           类型尾子元素

　　　　　　(五)   nth-child(even/odd/an+b)                 顺序子元素

　　　　　　(六)   nth-last-child(even/odd/an+b)         倒序子元素

　　　　　　(七)   nth-of-type(even/odd/an+b)             顺序类型子元素

　　　　　　(八)   nth-last-of-type(even/odd/an+b)     倒序类型子元素

　　　　　　(九)   only-child                                               唯一子元素

　　　　　　(十)   only-of-type                                           唯一类型子元素

6)         表单选择器

　　　　　　(一)   :input                          匹配所有的表单元素

　　　　　　(二)   :text                                      匹配所有的单行文本框<input type="text">

　　　　　　(三)   :password                  匹配所有的密码框<input type="password">

　　　　　　(四)   :radio                          匹配所有的单选按钮<input type="radio">

　　　　　　(五)   :checkbox                   匹配所有的复选框<input type="checkbox">

　　　　　　(六)   :submit                       匹配所有的<input type="submit">和<button></button>

　　　　　　(七)   :image                        匹配所有的图片按钮<input type="image" src="">

　　　　　　(八)   :reset                          匹配所有的重置按钮<input type="reset">

　　　　　　(九)   :button                       匹配所有的<input type="button">和<button></button>

　　　　　　(十)   :file                              匹配所有的文件域<input type="file">

7)         内容选择器

　　　　　　(一)   :contains                    文本内容包含选择器

　　　　　　(二)   :empty                        没有文本或子元素选择器

　　　　　　(三)   :has                             包含指定选择器的元素选择器

　　　　　　(四)   :parent                        有文本或子元素的选择器

8)         可见性选择器

　　　　　　(一)   :hidden                       匹配所有不可见、或<input type="hidden">的元素

　　　　　　(二)   :visible                        匹配所有可见的元素

9)         表单对象选择器

　　　　　　(一)   :enabled                     匹配所有可用的元素

　　　　　　(二)   :disabled                    匹配所有不可用的元素

　　　　　　(三)   :checked                     匹配所有被选中的单选框、复选框及下拉框

　　　　　　(四)   :selected                    匹配所有被选中的下拉框

10)     混淆选择器

　　　　　　(一)   escapeSelector()      对类或者ID选择器中包含的CSS特殊字符进行转义

1. jQuery的CSS操作？

　　　　1)         css()

(一)   获取指定样式属性的值

例如：var width = $("div").css("width");

(二)   通过name,value设置单个样式

例如：$("div").css("border", "1px solid #F00");

(三)   通过properties设置一组样式

例如：$("div").css({"width": "100px", "height": "50px", "color": "#F00"});

(四)   样式属性值通过回调函数计算获得

例如：

$("div").css({

"width": function(index, value) {

                            return parseFloat(value) * 2;

},

"height": function(index, value) {

         return parseFloat(value) / 2;

}

});

　　　　2)         addClass()

(一)   每次添加一个类样式

例如：$("div").addClass("myClass1");

(二)   每次添加一组类样式，用空格隔开

例如：$("div").addClass("myClass1  myClass2");

(三)   添加的类样式通过函数计算获得

例如：

$("div").addClass(function(index, oldClass) {

         var r = parseInt(Math.random() * 3) + 1;

                   return "myClass  myClass" + r;

});

　　　　3)         removeClass()

(一)   每次删除一个类样式

例如：$("div"). removeClass("myClass1");

(二)   每次删除一组类样式

例如：$("div"). removeClass("myClass1  myClass2");

(三)   一次删除所有类样式

例如：$("div"). removeClass();

(四)   删除的类样式通过函数计算获得

例如：

         $("div"). removeClass(function(index, oldClass) {

                   var r = parseInt(Math.random() * 2) + 1;

                   return "myClass" + r;

});

　　　　4)         toggleClass()

(一)   每次切换(有就删除，没有就添加)一个类样式

例如：$("div"). toggleClass("myClass1");

(二)   每次切换一组类样式

例如：$("div"). toggleClass("myClass1  myClass2");

(三)   使用布尔值控制样式的切换

a)         原来没有类样式，true表示添加该类样式

b)         原来没有类样式，false表示不添加该类样式

c)         原来有类样式，true表示不删除该类样式

d)         原来有类样式，false表示删除该类样式

例如：$("div"). toggleClass("myClass1", true);

(四)   切换的类样式通过函数计算获得

例如：

         $("div").toggleClass(function(index, oldClass) {

                   var r = parseInt(Math.random() * 2) + 1;

                   return "myClass" + r;

}, true);

                                     注意：boolean值的含义同(三)

1. jQuery的位置操作？

1)         offset()

(一)   获取元素相对于视口的位置，该位置包含left属性、top属性，以像素为单位

例如：

var offset = $("div").offset();

         alert("坐标：["  +  offset.left  +  ","  +  offset.top  +  "]");

(二)   设置元素相对于视口的位置，该位置包含left属性、top属性，以像素为单位

例如：

         $("div").offset({left: 200, top: 200});

注意：设置位置的本质，是添加了以下样式：

         position: relative; top: 200px; left: 200px;

　　　　　　2)         position()

(一)   获取元素相对于父元素的位置，包含left属性、top属性，以像素为单位

例如：

var position = $("div"). position();

         alert("坐标：["  +  position.left  +  ","  +  position.top  +  "]");

3)         scrollTop()

(一)   获取或设置元素的垂直滚动条的位置，对可见或隐藏元素均有效

例如：

         //设置元素的垂直滚动条的位置

         $("div").scrollTop(500);

         //获取元素的垂直滚动条的位置

         var value = $("div").scrollTop();

4)         scrollLeft()

(一)   获取或设置元素的水平滚动条的位置，对可见或隐藏元素均有效

例如：

         //设置元素的水平滚动条的位置

         $("div"). scrollLeft(500);

         //获取元素的水平滚动条的位置

         var value = $("div"). scrollLeft();