jQuery学习笔记

jQuery学习笔记

1 基础

HTML  ：一个人的裸体，是一个人的物质基础，是一个结构。

CSS  ：一个人的漂亮外衣，使一个人看起来不是那么原始，修饰了一个人。

JavaScript ：一个人的灵魂，使一个人具备了生命，让它动起来了。



2 jQuery的基础

2.1 jQuery对象引用

jQuery = window.jQuery = window.$ = function( selector, context ) {...}

在jQuery库内还有两个_$和_jQuery用来备份原先导入的库，备以后使用noConflict()交还使用权。



2.2 jQuery的prototype引用

jQuery.fn = jQuery.prototype = {init:function(){...}, ...}

jQuery.fn.init.prototype = jQuery.fn;



2.3 继承：目标对象是当前对象this。

jQuery.extend = jQuery.fn.extend = function() {...}



2.4 插件机制：主要是扩展jQuery的对象的prototype。

利用jQuery.extend和jQuery.fn.extend来进行扩展。

// 用于扩展jQuery对象本身，相当于静态方法。

jQuery.extend();

// 用于扩展jQuery的对象，相当于为每一个jQuery对象多扩展了。

jQuery.fn.extend();



3 选择器

jQuery使用CSS和XPATH的选择器。

3.1 基本

#id                                 // 通过ID选择

element                             // 通过标签选择

.class                              // 通过class选择

*                                   // 选择所有元素

selector1, selector2, selectorN     // 多个选择的合并



3.2 层级

ancestor descendant                 // 父元素下匹配所有后代元素

parent > child                      // 父元素下匹配所有子元素（下一层）

prev + next                         // 匹配所有紧接在prev元素后的next元素

prev ~ siblings                     // 匹配prev元素之后的所有siblings元素



3.3 简单

:first                              // 匹配找到的第一个元素

:last                               // 匹配找到的最后一个元素

:not(selector)                      // 从选中的集合中去除selector的集合

:even                               // 匹配所有索引值为偶数的元素，从0开始计数。

:odd                                // 匹配所有索引值为奇数的元素，从0开始计数。

:eq(index)                          // 匹配一个给定索引值的元素，从0开始计数。

:gt(index)                          // 匹配大于给定索引值的所有元素

:lt(index)                          // 匹配小于给定索引值的所有元素

:header                             // 匹配如h1,h2,h3的标题元素

:animated                           // 匹配所有正在执行动画效果的元素



3.4 内容

:contains(text)                     // 匹配包含给定文本的元素

:empty                              // 匹配不包含子元素或者文本的空元素

:has(selector)                      // 匹配的集合中含有selector的集合

:parent                             // 匹配含有子元素或者文本的元素

可见性

:hidden                             // 匹配所有不可见的元素（hidden或者"display:none"）

:visible                            // 匹配所有可见的元素



3.5 属性

                                    // 注意：jQuery1.3废弃的前导符@。

[attribute]                         // 匹配包含属性attribute的元素

[attribute=value]                   // 匹配包含属性attribute=value的元素

[attribute!=value]                  // 匹配属性值attribute不等于value的元素

[attribute^=value]                  // 匹配属性值是以value开始的元素

[attribute$=value]                  // 匹配属性值是以value结束的元素

[attribute*=value]                  // 匹配属性值包含value的元素

[selector1][selector2][selectorN]   // 指多个属性匹配多满足的元素



3.6 子元素

:nth-child(index/even/odd/equation) // 匹配其父元素下的第N个子或奇偶子元素，从1开始计数。

:first-child                        // 匹配第一个子元素

:last-child                         // 匹配最后一个子元素

:only-child                         // 匹配只含有一个子元素的子元素



3.7 表单

:input                              // 匹配所有input, textarea, select, button元素

:text                               // 匹配所有text

:password                           // 匹配所有password

:radio                              // 匹配所有radio

:checkbox                           // 匹配所有checkbox

:submit                             // 匹配所有submit按钮

:image                              // 匹配所有image

:reset                              // 匹配所有reset

:button                             // 匹配所有button

:file                               // 匹配所有file

:hidden                             // 匹配所有hidden或者"display:none"



3.8 表单对象属性

:enabled                            // 匹配所有可用的元素

:disabled                           // 匹配所有不可用的元素

:checked                            // 匹配所有选中的元素（复选框、单选框、不包含select）

:selected                           // 匹配所有选中的option元素



4 核心

4.1 jQuery核心函数

jQuery(expression, [context])      // 在全局范围或者context范围（Dom或jQuery）内选择

jQuery(html, [lownerDocument])     // 根据HTML创建jQuery对象

jQuery(elements)                   // 将Dom对象创建为jQuery对象

jQuery(callback)                   // $(document).ready()的缩写



4.2 jQuery对象访问

each(callback)                     // 遍历jQuery选择的对象

                                   // callback参数有两个，1是下标，2是DOM对象（就是this对象



）。使用$this的话，是jQuery对象。

size()                             // 返回jQuery对象中元素个数。

length                             // 同size()

selector                           // 返回jQuery对象的selector

context                            // 返回jQuery对象的context

get()                              // 返回所选中的jQuery对象的DOM数组

get(index)                         // 返回一个DOM元素，可以写成类似$("div")[0]。jQuery具有



数组特性。

index(subject)                     // 返回DOM对象的位置



4.3 数据缓存

data(name)                         // 返回在jQuery对象上缓存的数据

data(name, value)                  // 在jQuery对象上设置缓存数据

removeData(name)                   // 在元素上移除存放的数据

queue([name])                      // 返回在jQuery对象上的队列（一个函数数组）

queue([name, callback])            // 在队列后面加入一个函数

dequeue([name], queue)             // 用新的函数数组代替原先的函数数组

dequeue([name])                    // 从队列最前端移除一个队列函数，并执行他。



4.4 多库共存

jQuery.noConflict()                // 将$使用权交还给原先的库

jQuery.noConflict(extreme)         // 将$和jQuery使用权交还给原先的库



5 属性

5.1 属性

attr(name)                         // 取得属性值

attr(properties)                   // properties是一个键值对对象，设置属性。

attr(key, value)                   // 设置属性

attr(key, fn)                      // 设置属性，由函数fn返回值。

removeAttr(name)                   // 删除一个属性



5.2 CSS类

addClass(class)                    // 使用CSS的类选择器添加CSS

removeClass(class)                 // 删除CSS样式

toggleClass(class)                 // 若存在（不存在），则删除（添加）。

toggleClass(class, switch)         // 若switch为true，则加上对应的class，否则删除。



5.3 HTML代码

html()                             // 取第一个元素的innerHtml

html(val)                          // 设置每一个元素的innerHtml



5.4 文本

text()                             // 取得所有匹配元素的innerText

text(val)                          // 设置所有匹配元素的innerText



5.5 值

val()                              // 获得第一个匹配元素的value属性值

val(val)                           // 设置每一个匹配元素的value属性值

                                   // val可以是一个值，也可以是多个值（一个数组）