jquery知识点

一、 基本概念

jQuery是一个基于javascript的框架。它提供了丰富的选择器和大量的函数，可以方便的实现网页中各种动态的效果。

1. 文档加载完毕函数

常规形式：$(document).ready(function(){… …});

简写形式：$(function(){… …});

2. jquery对象和js对象的相互转化

jquery对象不等同于js对象!

js对象的属性和方法,jquery对象不能调用；jquery对象的属性和方法，js对象也不能调用。

js转jquery：$(js对象)

jquery转js：$(“#box1”).get(0)  或者    $(“.box”)[0]

比如使用var cb = $(‘input[type=checkbox]’)选择到了所有的checkbox，保存到了cb这个变量中，然后使用for循环遍历cb，如下：

For(var i=0;maxi=cb.length;i<maxi;i++){

Alert($(cb[i]).prop(‘checked’));

}

其中cb就是jquery的对象，而cb[i]是js的对象，如果想调用jquery的方法prop的话，得用$抱一下，即$(cb[i])。

二、 选择器

jquery的基石就是选择，jquery提供了大量的选择器。建议在不同的业务场景下使用不同的选择器。

注意：通过任何一个选择器筛选到的结果都是一个数组，所以要判断通过选择器是否筛选到了元素，可以通过length属性进行判断。

1. 基本选择器

 ID选择器

$(“#ID值”)    例如：$(“#txt1”)

 类选择器

$(“.class名称”)   例如：$(“.box”)

 标记选择器

$(“tagName”)   例如：$(“div”)

 组合选择器

$(“selector1,selector2,selector3”)   例如：$(“.box,#txt1,div”)

 通配符选择器

$(“*”)

1. 层次选择器

 父子选择器

$(“selector1 > selector2”)

 祖先后代选择器

$(“selector1   selector2”)

 后兄弟选择器

$(“selector1~siblings”)

 相邻的后兄弟选择器

$(“selector1 + selector2”)

2. 基本过滤选择器

 :first ：筛选第一个元素

 :last ：筛选最后一个元素

 :odd ：筛选索引值为奇数的元素

 :even ：筛选索引值为偶数的元素

 :eq(n) ：筛选索引值等于n的元素

 :gt(n) ：筛选索引值大于n的元素

 :lt(n) ：筛选索引值小于n的元素

 :not(selector) ：筛选排除selector以外的元素

3. 属性过滤选择器

 [attr] ：筛选存在attr属性的元素

 [attr=value] ：筛选attr属性值等于value的元素

 [attr!=value] ：筛选attr属性值不等于value的元素

 [attr^=value] ：筛选attr属性值以value开头的元素

 [attr$=value] ：筛选attr属性值以value结尾的元素

 [attr*=value] ：筛选attr属性值包含value的元素

4. 表单属性选择器

 :checked ：筛选选中状态的单选按钮和复选框

 :selected ：筛选选中的下拉列表项

 :enabled ：筛选可用的表单元素

 :disabled ：筛选不可用的表单元素

二、 筛选函数

 parent() ：获取父元素

 children() ：获取子元素

 next() ：获取相邻的后兄弟元素

 nextAll() ：获取所有的后兄弟元素

 prev() ：获取相邻的前兄弟元素

 prevAll() ：获取所有的前兄弟元素

 find() ：从子孙后代元素中查找满足条件的子孙元素（过滤后的是这组元素的子孙元素）

 filter() ：从一组元素中筛选满足条件的元素（过滤后的是这一组元素中的部分元素）

 first() ：获取第一个元素

 last() ：获取最后一个元素

 siblings() ：获取所有的同辈元素

 not() ：排除指定的元素

 index() ：获取一个元素在一组元素中的索引值

 eq(n) ：获取索引值等于n的元素

三、 样式操作

 css(“css属性”) ：获取css属性的值

 css(“css属性”, “值”) ：给css属性赋值

 css({“css属性1”:“值”,  “css属性2”:”值”}) ：通过给多个css属性赋值

 addClass ：添加class样式

 removeClass ：移除class样式

 toggleClass ：切换class样式

 hasClass ：判断是否拥有class样式，有返回true，否则返回false

四、 属性操作

 attr(“属性名”) ：获取属性的值

 attr(“属性名”, “值”) ：给属性赋值

prop使用同理，prop取元素自带的属性，attr取程序员设置的属性。

五、 DOM操作

 append() ：追加子元素（最后一个子元素）

 prepend() ：添加子元素（第一个子元素）

 remove() ：移除元素

 empty() ：清除所有的子孙元素

 after() ：添加一个后兄弟元素

 before ：添加一个前兄弟元素

六、 事件

1. 事件的类型

load、click、dblclick、focus、blur、change、mouseover、mouseout、mousemove、mouseenter、mouseleave、keyup、keydown、keypress、scroll、resize

七、 动画

 show([slow|normal|fast]|毫秒数)：让元素显示

 hide([slow|normal|fast]|毫秒数)：隐藏元素

 toggle([slow|normal|fast]|毫秒数)：切换元素的显隐状态

 slideUp()：让元素隐藏（高度逐渐变为0）

 slideDown()：让元素显示（高度从0逐渐恢复到原始高度）

 slideToggle()：切换元素的显隐状态（改变的是高度）

 fadeIn()：让元素显示（透明度逐渐变为不透明）

 fadeOut()：让元素隐藏（改变透明度逐渐变为透明）

 fadeToggle()：切换元素的显隐状态（改变透明度）

八、 其他函数

 height()、height(val)

 width()、width(val)

 val(value)、val()

 text(value)、text()

 html(value)、html()

上述函数有参数表示赋值，没有参数表示获取值。