Jquery3课程大纲

2017课程大纲

JQuery介绍

• jQuery 是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)
• jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能

JQuery整体架构

• 使用匿名函数自执行，避免变量全局污染
• 给匿名函数传入window和函数，兼容模块化写法
• 在浏览器环境，给factory传入的是window
• 传入window可以节省找全局window的时间，提高性能
• noGlobal为undefined，确保undefined可以使用
• 代码分析
  
  • 不用new的方式，因为内部已经实例化了
  • 防止循环调用，构造函数为jQuery原型上的方法
  • jQuery原型给到init函数的原型，可以访问jQuery原型方法和属性
  • 通过挂载window对象上暴露出jQuery，别名为$，方便操作
• jQuery内置选择器库Sizzle.js

JQuery选择器、常用API

• $(callBack)、$(document).ready(callBack)
• jQuery( selector [context ] )
• jQuery( element )
• 选择器
  
  • 元素选择器：$("#id")、$("#className")、$("tagname")
  • 属性选择器: $("[href]")、$("[href='#']")
  • 过滤选择器: :first、:last、:not(selector)、:eq(index)、 :animated
  • 属性过滤选择器：$("[attribute = value]")、$(" [attribute != value]")、$("[attribute]")
• eq()、click()、css()、addClass()、index()、find() 等方法的使用
• 工具方法
  
  • $.type()、$.isFunction()、$. isNumeric() 、$. isArray()、$. isWindow()、
    $. isEmptyObject()、$. isPlainObject()

DOM/BOM操作

• 元素选择：find()、children()、parent() 等方法使用
• 过滤操作：filter()、has()、parents()、closest()、siblings() 等方法使用
• 对元素进行增删改操作： clone()、wrap()、unwrap()、remove()
• 元素位置与尺寸：width()、innerWidth()、outerWidth()、offset()、position()等方法
• 改变浏览器触发事件：resize()、scroll()等方法

JQuery事件系统

• 常用事件： click()、mouseover()、mouseout、mouseenter()、mouseleave()、hover() 等事件
• 绑定和解除绑定的方法: on(evName,callback)、off(evName,callback)
• 事件委托和自定义事件: on(evName,target,callback)
• 事件触发器：trigger(evName)
• 事件对象Event：clientX/clientY、pageX/pageY、target、stopPropagation()、preventDefault()

JQuery动画

• 动画函数： show()、hide()、toggle()，fadeIn()、fadeOut()、fadeToggle()
• 动画函数： slideDown()、slideUp()、slideToggle()、animate()等
• animate函数参数的使用：duration持续时间，easing动画形式，callback回调函数
• 动画链式运动、延迟运动delay()，停止动画stop()、停止并到达目标点finish()

编写和使用JQuery插件

• 使用插件功能其实就是给JQuery扩展功能
• $.extend()扩展JQuery静态方法
• $().extend()扩展JQuery动态方法
• 编写浅拷贝和深拷贝方法

【实例】JQuery版本的拖拽
【实例】JQuery好友列表
【实例】JQuery表单验证插件