jQuery知识点总结

jQuery知识点总结思维导图，包括JS基础、BOM对象、DOM对象、JS对象及面向对象、初始jQuery、jQuery选择器、事件与动画等内容。

jQuery

• 1. JS基础
  • JS结构
    • ECMAScript标准
    • 浏览器对象模型（BOM）
    • 文档对象模型（DOM）
  • 语法
    • <script type="text/Javascript"> ........ </script>
    • 变量用 var 声明
    • 数据类型
      • undefined( 未定义类型)
      • null（空类型）
      • number（数值类型）
      • String（字符串类型）
      • String对象的常用方法
        • indexOf（ char，y）:查找某个字符串在字符串中首次出现的位置
        • charAt( )：返回指定位置的字符
        • toLowerCase( )：将字符串转化为小写
        • toUpperCase( )：将字符串转化为大写
        • substring(x ,y ): 返回索引x到y之间的字符串，包含 x 不包含 y
        • split( ): 将字符串分割为字符串数组
        • trim( ):去除字符串两端的空格
      • boolean（布尔类型）
    • 数组
      • 语法
        • var 数组名称 =new Array（长度）;
        • var 数组名称 =[ ];
        • var 数组名称 =new Array（值1，。。。。，值n）;
        • js中数组长度可变
      • 常用方法及属性
        • 属性
          • length:设置或返回数组的长度
        • 方法
          • join（分割符 ）：把数组中所有的元素用分割符连接起来
          • sort（ ）：对数组排序
          • push( ):在数组末尾添加一个或多个元素
      • 运算符
    • 关键字和保留字
      • 在jQuery网页交互第一章 P21页
  • 函数
    • 常用函数
      • document.write( ):将括号里的内容输出
      • alert(”提示信息“)：警告框
      • prompt（“提示信息”，“输入框的默认信息”）
      • parselnt(”“):解析字符串并返回一个整数
      • parseFloat（”“）：解析字符串并返回一个小数
      • isNaN(" "):检查参数是否为非数字
    • 自定义函数
      • function 函数名（）{ }
  • JS是一门基于对象和事件驱动的，有安全性的脚本语言
    • JS主要用来在HTML页面中添加交互行为
    • 是一种脚本语言 语法与java类似
    • 一般用来编写客户端的脚本
    • 是一种解释性语言 边执行边解释
• 2. BOM对象
  • window对象
    • alert( )、confirm( )、close( )、open( )
    • setTimeout( )、setInterval( )
  • history对象与location对象
    • history对象
      • history对象方法
        • back( )、forward( )、go( )
    • location对象
      • location对象方法
        • reload( )、replace( )
  • document对象
    • getElementById( )
    • getElementsByName( )
    • getElementsByTagName( )
  • JavaScript内置对象
    • Date对象：时钟特效
    • Math对象
• 3. DOM对象
  • DOM操作
    • 分类：DOM Core、HTML-DOM、CSS-DOM
    • 节点和节点关系：根节点、父节点、子节点、兄弟节点
    • 访问节点
      • getElement系列访问
      • 层次关系访问
        • parentNode、childNodes
        • firstChild、lastChild
        • nextSibling、previousSibling
    • 节点信息：nodeName、nodeValue、nodeType
  • 操作节点
    • 操作节点的属性
      • getAttribute("属性名")
      • setAttribute("属性名","属性值")
    • 创建和插入节点
      • createElement( tagName)
      • A.appendChild( B)、insertBefore( A,B )
      • cloneNode(deep)
    • 删除和替换节点：removeChild(N)、replaceChild(newN,oldN)
    • 操作节点样式：style属性、className属性
    • 获取元素的样式
  • 获取元素位置
    • currentStyle
    • getComputedStyle()
• 4. JS对象及面向对象
  • 对象
    • 对象的概念
    • 内置对象
    • 自定义对象
      • 操作符new创建对象
      • 使用字面量赋值的方式在定义对象
  • 构造函数
  • 原型对象
  • 继承
    • 原型链
      • 什么是原型链
      • 构造函数和原型之间的关系
      • 完整的原型链
    • 对象继承
      • 借用构造函数
      • 组合继承
• 5. 初始jQuery
  • jQuery的优势
  • jQuery语法
    • jQuery的语法结构：工厂函数、选择器和方法
    • jQuery方法的应用
      • addClass( )方法、css( )方法
      • show( )、hide( )方法
      • next()方法
    • jQuery程序的代码风格
      • “$”的使用
      • 链式操作
      • 隐式迭代
  • DOM对象和jQuery对象
    • DOM对象
    • jQuery对象
    • jQuery对象与DOM对象的相互转换
• 6. jQuery选择器
  • 基本选择器
  • 层次选择器
  • 条件过滤选择器
    • 基本过滤选择器
    • 可见性过滤选择器
  • jQuery选择器注意事项
    • 子主题
• 7. 事件与动画
  • 事件
    • 载入事件
      • ready（）
    • 基础事件
      • 鼠标事件
        • click（）单击； mouseover（） 移过； mouseout（）移出 mouseenter（）进入； mouseleave（）离开 ； mousedown( )按下 mouseover（）与mouseout（）在该元素与其子元素之间切换时会反复执行 mouseenter（）与mouseleave（）只会在该元素上执行不会在其子元素上执行
      • 键盘事件
        • keydown( )：按下按键时,支持特殊按键，不区分大小写 keypress( )：产生可打印字符时，不支持特殊按键，区分大小写 keyup( )：放开按键时
    • 绑定与移除事件
      • 绑定事件 bind(事件类型,[可选参数],fn) 移除事件 unbind（[ 事件类型 ],[ fn ]）
    • 复合事件
      • hover( )方法
      • toggle( )方法
      • toggleClass( )方法
  • jQuery中的动画
    • 控制元素显示与隐藏
      • show( )方法
      • hide( )方法
    • 改变元素的透明度
      • fadeIn( )方法
      • fadeOut( )方法
    • 改变元素高度
      • slideUp ( )方法
      • slideDown ( )方法
    • 自定义动画
      • animate()
• 8. 使用jQuery操作DOM对象
  • DOM操作
    • 分为三类
      • DOM Core（核心）
      • HTML-DOM
      • CSS-DOM
  • 样式操作
    • 设置或获取样式值
      • css（”name“ ”value“）或css（{name1：value1，name2：value2,......}）：
    • 追加样式
      • addClass（）或css( )
      • addClass( ) 是在原原有样式上添加样式
    • 移除样式
      • removeClass（“class”）
    • 切换样式
      • toggleClass（）
    • 判断是否含有指定样式
      • hasClass（“class”）
  • 内容操作
    • HTML代码操作
      • html（[content]）:
        • content：规定被选元素的新内容，可包含HTML标签；无参数时 获取被选元素的文本内容
    • 标签内容操作
      • text（[content]）
        • content：规定被选元素的新内容，特殊字符会被编码；无参数时 获取被选元素的文本内容
    • 属性值操作
      • val（【value】）
        • value：规定被选元素的新内容； 无参数时，返回值为第一个被选元素的 value 属性的值
        • focus（）文本框获得焦点
        • blur( ) 文本框失去焦点
    • html()与text（）的区别
      • html()
        • 无参数
          • 用于获取第一个匹配元素的HTML（标签）或文本内容
        • 参数为为元素的HTML（标签）+内容
          • 用于设置所有匹配元素的HTML（标签）内容或文本内容
      • text()
        • 无参数
          • 用于获取所以匹配元素的文本内容
        • 参数为为元素的文本内容
          • 用于设置所有匹配元素的文本内容
  • 节点操作
    • 查找与创建节点
      • 工厂函数$( )
    • 插入节点
      • 内部插入
        • append（）
          • $(A).append(b) : 将 b 追加到 A 中（末尾）
        • appendTo（）
          • $(a).appendTo(B) : 将 a 追加到 B 中（末尾）
        • prepend( )
          • $(A).prepend(b) : 将 b 追加到 A 中（首位）
        • prependTo( )
          • $(a).prependTo(B) : 将 a 追加到 B 中（首位）
      • 外部插入
        • after( )
          • $(A).after(B) : 将 B 插入到 A 之后
        • insertAfter( )
          • $(A).insertAfter(B) : 将 A 插入到 B 之后
        • before( )
          • $(A).beforer(B) : 将 B 插入到 A 之前
        • insertBefore( )
          • $(A).insertBeforer(B) : 将 A 插入到 B 之前
    • 删除节点
      • remove（ ）
      • datach ( )
        • 可以在删除元素后 在jQuery对象中保留元素的绑定事件和附加的数据； remove（）没有这种作用
      • empty( ) 清空节点：清空元素中所有的后代节点
    • 替换节点
      • replaceWith ( )
        • 将所有匹配元素替换成指定的HTML或者DOM元素； $(".myDiv li:eq(2)").replaceWith($new) : 指定替换元素在后
      • replaceAll ( )
        • $（new).replaceWith（$(".myDiv li:eq(2)")） : 指定替换元素在前
    • 复制节点
      • clone（）
  • 属性操作
    • 获取与设置元素属性 ：attr（）
    • 删除元素属性 ： removeAttr ( )
  • 节点遍历
    • 遍历子元素
      • children( )
    • 遍历同辈元素
      • siblings( )：前后所有的同辈元素
      • next( )：下一个
      • prev( )：上一个
    • 遍历前辈元素
      • parents ( )：返回匹配所传递的表达式的所有祖先，元素是按照从最近的父元素向外的顺序被返回
      • parent ( )： 获得当前匹配元素集合中每个元素的父元素
    • 其他遍历方法
      • each( ):规定为每个匹配元素规定运行的函数
  • CSS-DOM操作
    • css():获取或设置元素的样式属性； height（）：设置或返回匹配元素的高度； width（）：设置或返回匹配元素的宽度； offset( )：返回以像素为单位的 top 和 left 坐标； offsetParent( ) : 返回最近的已定位祖先元素（定位元素指的是元素的CSS position值被设置为 relative、absolute 或 fixed 的元素）； position()：返回第一个匹配元素相对于父元素的位置 scrollTop()：获取滚动条距离顶端的距离 scrollLeft()：获取滚动条距离左端的距离
• 9. 表单校验
  • 表单基本验证
    • 表单验证事件与方法
      • onblur：失去焦点，当鼠标离开某个文本框时触发 事件 onfocus：获得焦点，当鼠标进入某个文本框时触发 blur( )：从文本域中移开焦点 方法 focus( )：在文本域中设置焦点，即获得光标 select( )：选取文本域中的内容，突出显示输入区域的内容
  • 表单选择器
    • :input，匹配所有的input,textarea,select和button元素，例：$(":input"); :text, 匹配所有的文本框,查找所有的文本框 例：$(":text'); :password, 匹配所有的密码框. 例：$(":password"); :radio, 匹配所有的单选按钮，例：$(":radio"); :checkbox，匹配所有的复选框 例：$(":checkbox"); :submit, 匹配所有的提交按钮 例：$("submit"); :image，匹配所有的图像域 例：$("image"); :reset, 匹配所有的重置按钮, 例：$(":reset")； :button, 匹配所有的按钮, 例：$(":button"); :file，匹配所有的文件域，例：$(":file");[/align][/b][/color][/size]； :hidden,匹配所有不可见元素，或者 type 为 hidden 的元素；
  • 表单属性过滤器
    • :checked 匹配所有选中的被选中元素 $("input:checked") //匹配checked属性为checked的input元素 :disabled 匹配所有不可用元素 $("input:disabled") //匹配disabled属性为disabled的input元素 :enabled 匹配所有可用的元素 $("input:enabled ") //匹配enabled属性为enabled的input元素 :selected 匹配所有选中的option元素 $("select option:selected") //匹配select元素中被选中的option
  • 正则表达式
    • 语法
      • /..../ 代表一个模式的开始 ^ 在[ ]外表示匹配字符串的开始在[ ]表示非 $ 表示匹配字符串的结尾 \s 任何空白字符 等价于 [ \t\n\v] \S 任何非空白字符 等价于 [^ \t\n\v] \d 匹配一个数字字符 等价于[ 0-9 ] \D 除了数字之外的任何字符 等价于[ ^0-9 ] \w 匹配一个数字，下划线或者字母字符等价于 [A-Za-z0-9_ ] \W 任何非单字字符，等价于[^0-9a-Z_] ? 匹配前一项0次或1次，优先匹配1次，相当于{0,1} + 匹配前一项1-n次，优先匹配n次，相当于{1,} * 匹配前一项0-n次，优先匹配n次，相当于{0,} 正则中用|来表示分组，a|b表示匹配a或者b的意思 {n} 匹配前一项n次 {m, n} 匹配前一项m-n次，但不能超过n次 {m,} 匹配前一项m-∞次 匹配除了换行符（\n）以外的任意一个字符 = [^\n] ( ) 提取匹配的字符串 [ ] 定义匹配的字符串取值范围 { } 匹配长度
  • HTML5新增属性
    • placeholder：提供一些提示信息，输入域为空时显示，获得焦点输入内容后消失 required：规定输入域不能为空 pattern：规定验证 input 域的模式（正则表达式）