jQuery的基本使用和理解

Green

　　
什么是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元素的个数
    
  • [index]：得到指定下标对应的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()