jQuery的基本使用和理解
什么是jQuery
[*]一个强大的JS函数库，封装简化了DOM操作/Ajax
jQuery的特点
[*]强大的选择器：方便快速查找DOM元素
[*]隐式遍历：一次操作多个元素
[*]读写合一：读数据/写数据用的是同一个函数
[*]事件处理
[*]链式调用
[*]DOM操作
[*]样式操作
jQuery函数：$/jQuery
[*]当成函数使用：$(param)
[*]param是function：相当于window.onload = function(文档加载完成的监听)
[*]param是选择器字符串：查找所有匹配的DOM元素，返回包含所有DOM元素的jQuery对象
[*]param是DOM元素：将DOM元素对象包装为jQuery对象返回
[*]param是标签字符串：创建标签DOM元素对象并包装为jQuery对象返回
[*]当成对象使用：$.xxx
[*]$.each(obj/arr, function(key, value))：遍历对象或数组
[*]$.trim(str)：去掉字符串两边的空白字符
jQuery对象
[*]通过执行$()/jQuery()得到
[*]包含所有匹配的DOM元素的伪数组对象
[*]基本行为
[*]length/size()：得到DOM元素的个数
[*]：得到指定下标对应的DOM元素
[*]each(fucntion(index, domEle){})：遍历所有DOM元素
[*]index()：得到当前DOM元素在所有兄弟中的下标
选择器
[*]基本选择器与原生css大同小异
[*]过滤选择器
[*]:first：找出匹配到的DOM中的第一个
[*]:last：找出匹配到的DOM中的最后一个
[*]:eq(index)：找出匹配到的DOM中的指定元素
[*]:lt(index)
[*]:gt(index)
[*]:not(selector): 从匹配到的DOM中排除selector选中的元素
[*]:odd：从匹配到的中找出索引值奇数的（索引从0开始）
[*]:even：从匹配到的中找出索引值偶数的
[*]:hidden：从匹配中的DOM找出不可见的
[*]:visible：从匹配中的DOM找出可见的
[*]表单选择器
[*]:input： 匹配所有 input, textarea, select 和 button 元素
[*]:text：匹配所有的单行文本框
[*]:checkbox：匹配所有复选框
[*]:radio：匹配所有单选按钮
[*]: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样式
[*]css(styleName)/css(styleName, value)：读写一个值
[*]css({样式配置对象})：设置多个样式
[*]位置坐标
[*]offset()：读写当前元素坐标（原点是页面左上角）
[*]position()：读写当前元素坐标（原点是父元素左上角）
[*]scrollTop()：读写当前元素/页面的滚动条坐标
[*]尺寸
[*]width()/height(): width/height
[*]innerWidth()/innerHeight(): width + padding
[*]outerWIdth()/outerHeight(): width + padding + border
筛选模块
[*]过滤：在匹配的DOM中找出部分匹配的DOM
[*]first()
[*]last()
[*]eq(index)
[*]filter(selector): 匹配的元素需要满足的条件
[*]not(selector)
[*]has(selector)：匹配到的元素的子孙需要满足的条件
[*]查找：根据已知元素，查找它的相关元素
[*]children(selector): 查找子元素
[*]find(selector): 查找后代元素
[*]preAll(selector): 前面的所有兄弟
[*]siblings(selector): 所有兄弟
[*]parent(): 父元素
文档处理
[*]增加
[*]append()/appendTo(): 向每个匹配的元素内部追加内容，插入后部
[*]preppend()/preppendTo(): 向每个匹配的元素内部追加内容，插入前部
[*]before(): 在每个匹配的元素之前插入内容
[*]after(): 在每个匹配的元素之后插入内容
[*]删除
[*]remove(): 将自己及内部的孩子都删除
[*]empty(): 将内部的孩子删除，自己还在
[*]更新
[*]replaceWith(): 将所有匹配的元素替换成指定的HTML或DOM元素。
事件模块
[*]绑定事件
[*]eventName(function(){})
[*]on('eventName', function(){})
[*]解绑事件
[*]off('eventName')
[*]事件委托
[*]将子元素的事件委托给父元素处理
[*]事件绑定在父元素身上，但发生在子元素上
[*]事件会冒泡到父元素
[*]但最终调用事件回调函数的是子元素：event.target
[*]事件坐标
[*]event.offsetX: 原点是当前元素左上角
[*]event.clientX: 原点是窗口左上角
[*]event.pageX: 原点是页面左上角
[*]事件相关
[*]停止事件冒泡：event.stopPropagation()
[*]阻止事件默认行为：event.preventDefault()
文档来源：51CTO技术博客https://blog.51cto.com/u_15295346/3022595
页:
[1]