jQuery的基本使用和理解

什么是jQuery

• 一个强大的JS函数库，封装简化了DOM操作/Ajax

jQuery的特点

• 强大的选择器：方便快速查找DOM元素
• 隐式遍历：一次操作多个元素
• 读写合一：读数据/写数据用的是同一个函数
• 事件处理
• 链式调用
• DOM操作
• 样式操作

jQuery函数：$/jQuery

• 当成函数使用：$(param)

1. param是function：相当于window.onload = function(文档加载完成的监听)
2. param是选择器字符串：查找所有匹配的DOM元素，返回包含所有DOM元素的jQuery对象
3. param是DOM元素：将DOM元素对象包装为jQuery对象返回
4. param是标签字符串：创建标签DOM元素对象并包装为jQuery对象返回

• 当成对象使用：$.xxx

1. $.each(obj/arr, function(key, value))：遍历对象或数组
2. $.trim(str)：去掉字符串两边的空白字符

jQuery对象

• 通过执行$()/jQuery()得到
• 包含所有匹配的DOM元素的伪数组对象
• 基本行为
  1. length/size()：得到DOM元素的个数
  2. [index]：得到指定下标对应的DOM元素
  3. each(fucntion(index, domEle){})：遍历所有DOM元素
  4. index()：得到当前DOM元素在所有兄弟中的下标

选择器

• 基本选择器与原生css大同小异
• 过滤选择器

1. :first：找出匹配到的DOM中的第一个
2. :last：找出匹配到的DOM中的最后一个
3. :eq(index)：找出匹配到的DOM中的指定元素
4. :lt(index)
5. :gt(index)
6. :not(selector): 从匹配到的DOM中排除selector选中的元素
7. :odd：从匹配到的中找出索引值奇数的（索引从0开始）
8. :even：从匹配到的中找出索引值偶数的
9. :hidden：从匹配中的DOM找出不可见的
10. :visible：从匹配中的DOM找出可见的

• 表单选择器

1. :input： 匹配所有 input, textarea, select 和 button 元素
2. :text：匹配所有的单行文本框
3. :checkbox：匹配所有复选框
4. :radio：匹配所有单选按钮
5. :checked：匹配所有选中的被选中元素(复选框、单选框等，select中的option)

下面的方法都在jQuery对象里

操作标签的属性

• attr(name)/attr(name, value): 读写非布尔值的标签属性
• prop(name)/prop(name, value): 读写布尔值的标签属性
• removeAttr(name)/removeProp(name): 删除属性
• addClass(classValue): 添加class
• removeClass(classValue): 移除指定的class
• toggleClass(classValue): 如果存在（不存在）就删除（添加）一个类。
• val()/val(value): 读写标签体文本
• html()/html(htmlString): 读写标签体文字

操作CSS

• style样式

1. css(styleName)/css(styleName, value)：读写一个值
2. css({样式配置对象})：设置多个样式

• 位置坐标

1. offset()：读写当前元素坐标（原点是页面左上角）
2. position()：读写当前元素坐标（原点是父元素左上角）
3. scrollTop()：读写当前元素/页面的滚动条坐标

• 尺寸

1. width()/height(): width/height
2. innerWidth()/innerHeight(): width + padding
3. outerWIdth()/outerHeight(): width + padding + border

筛选模块

• 过滤：在匹配的DOM中找出部分匹配的DOM

1. first()
2. last()
3. eq(index)
4. filter(selector): 匹配的元素需要满足的条件
5. not(selector)
6. has(selector)：匹配到的元素的子孙需要满足的条件

• 查找：根据已知元素，查找它的相关元素

1. children(selector): 查找子元素
2. find(selector): 查找后代元素
3. preAll(selector): 前面的所有兄弟
4. siblings(selector): 所有兄弟
5. parent(): 父元素

文档处理

• 增加

1. append()/appendTo(): 向每个匹配的元素内部追加内容，插入后部
2. preppend()/preppendTo(): 向每个匹配的元素内部追加内容，插入前部
3. before(): 在每个匹配的元素之前插入内容
4. after(): 在每个匹配的元素之后插入内容

• 删除

1. remove(): 将自己及内部的孩子都删除
2. empty(): 将内部的孩子删除，自己还在

• 更新

1. replaceWith(): 将所有匹配的元素替换成指定的HTML或DOM元素。

事件模块

• 绑定事件

1. eventName(function(){})
2. on('eventName', function(){})

• 解绑事件

3. off('eventName')

• 事件委托

4. 将子元素的事件委托给父元素处理
5. 事件绑定在父元素身上，但发生在子元素上
6. 事件会冒泡到父元素
7. 但最终调用事件回调函数的是子元素：event.target

• 事件坐标

8. event.offsetX: 原点是当前元素左上角
9. event.clientX: 原点是窗口左上角
10. event.pageX: 原点是页面左上角

• 事件相关

11. 停止事件冒泡：event.stopPropagation()
12. 阻止事件默认行为：event.preventDefault()