课程计划

未分类

js基础 -- 第一次课

简介前端开发环境

• 编辑器
• 浏览器

js书写的位置

• 行间
• 内嵌
• 外链

第一个JS特效实例

• 获取元素
  响应用户操作
  绑定事件
  添加处理过程
  函数

属性操作

• 属性的定义
  属性操作语法
  属性操作

元素的属性

• innerHTML
• value
• href
• src
• id
• className

变量

• 概念
  作用
  使用
  
  • 变量声明
    变量赋值
• Console的使用
  
  • console.log()
• 变量命名规则
  
  • 大小写敏感
    字母、数字、美元符号($)和下划线
    首字母不允许数字
    禁止使用关键字、保留字
    关键字
    保留字
• 变量命名风格
  
  • 驼峰命名
    大驼峰命名
    小驼峰命名
    烤串命名

函数

• 概念
  
  • 定义
    使用
• 参数
  
  • 概念
    定义
    形参（名）
    实参（值）
• 返回值
  
  • return

数据类型

• 简单值类型
  
  • Number : 数字
    String : 字符串
    Boolean : 布尔
    Null : 空值
    Undefined : 未定义
• 复合类型
  
  • Object : 对象

运算符

* 算术运算符：+、-、*、/、%、++、--
* 赋值运算符：=、+=、-=、*=、/=
* 关系运算符：==、===、>、<、>=、<=
* 逻辑运算符：&&、||

js基础 -- 第二次课

流程控制

• if语法
• 案例--显示隐藏切换

for循环

• for语句语法和使用
• 自定义属性
• 案例--选项卡

定时器

• setTimeout 延迟型定时器
  延迟广告
• setInterval 间隔型定时器
  定时器管理
• 案例
  无动画版自动轮播图

数组

• 定义
  key、索引、下标
  length
• 常用方法
  
  • push
  • pop
  • shift
  • unshift

字符串

• 定义
  length
• 字符串拼接
• 常用方法
  
  • slice
  • charAt
  • trim

Math

• 常用方法
  
  • Math.ceil
    Math.floor
    Math.round
    Math.abs
    Math.random
• 案例
  随机点名

操作DOM和事件绑定 -- 第三次课

什么是DOM

DOM 树 - DOM Tree

DOM 节点 - DOM Node

节点类型 - Node Type

• nodeType 属性
  元素节点
  属性节点
  文本节点
  注释节点
  文档节点

节点操作

• 获取节点

  • document.getElementById
    Element.getElementsByTagName
    Element.getElementsByClassName
    Element.querySelector
    Element.querySelectorAll
  • 创建节点
    document.createElement
  • 插入节点
    Element.appendChild
    Element.insertBefore
  • 删除节点
    Element.removeChild
  • 替换节点
    Element.replaceChild

  • 克隆元素
    Element.cloneNode

  • 获取子节点
    children

  • 获取父节点
    parentNode
    
    • 案例：
      动态留言本

获取元素尺寸

• clientWidth / clientHeight
• offsetWidth / offsetHeight
• scrollLeft / scrollTop

事件模型

事件函数绑定

• DOM0/DOM1 事件绑定
  on...
• DOM2 事件绑定
  addEventListener

事件函数解绑定

• DOM0/DOM1 事件函数绑定
• DOM2 事件函数绑定
  removeEventListener

事件对象 - Event

• clientX/clientY
  
  • 鼠标的坐标
    
    • 案例--拖拽元素

事件类型

• 鼠标事件
  mouseover、mouseout、mousemove、
• 键盘事件
  keydown、keyup

事件流

• 事件流概念
• 阻止事件冒泡
  cancelBubble / stopPropagation
• 阻止默认行为
  return false/preventDefault/returnValue

js面象对象 --- 第四次课

js面象对象基本概念

js面向对象包含的内容

对象的组成

• 成员属性
• 成员方法

类和对象之间的关系

使用new来创建对象

• new Constructor()

原型和原型链

• propotype
• proto

构造函数Constructor

• 案例
  
  • 面向过程选项卡
  • 面向对象选项卡

hasOwnProperty()

• 判断是否是自身属性

for in

• 用来遍历对象

组件开发

• 特点：
  
  • 模板
  • 配置
  • 事件
• 案例
  
  • 面向对象封装图片轮播

初始jQuery --- 第五次课

jQuery介绍

• jQuery是一个JavaScript库提供强大的选择器、简洁的API、优雅的链式、便捷的操作 核心理念 The Write Less,Do More（写更少，做更多）

使用jq库的方式

• 通过script 标签的src引入即可

jq库的总体架构

• 匿名函数自执行
• 无new的实例化过程
• 挂载全局window暴露jq函数

jq选择器

• id选择器
• class选择器
• 后代选择器
• 属性选择器
• 放弃控制$ 变量
  
  • noConflict()

jq事件

• 文档加载事件
  
  • $().ready()
  • $(window).load()
• jq绑定事件的方式
  
  • 事件名方法
    
    • click(callback)
      mouseover(callback)
      mouseout(callback)
  • 事件中的this问题

jq中提供的方法

• css()、data()、attr()、val()、html()、 text()

工具方法

• $.type() $.isFunction()
$. isNumeric() $. isArray()
$. isWindow() $. isEmptyObject()
$. isPlainObject()

案例

• jq版的选项卡

jQuery中DOM操作和绑定事件 -- 第六次课

jq中DOM操作

操作DOM节点

• insertBefore()、insertAfter()、append()、prepend()、remove()、clone()

获取DOM节点

• first()、last()、children()、find()、parent()、parents()

获取元素尺寸

• width()、height()、innerWidth()、innerHeight()

对集合操作

• each()
• 案例
  点击查找指定节点

jq中的事件

浏览器事件

• reize()、scroll()

表单事件

• foucus()、blur()、change()

键盘事件

• keyup()、keydown()

鼠标事件

• click()、mouseover()、mouseout()、hover()、mousemove()

on的方式绑定

• 自定义事件
• trigger()

事件对象

• target()、pageX()、pageY()、preventDefault()、stopPropagation()
• 案例
• 拖拽图片

jQuery动画和插件 -- 第七次课

内置的运动函数

• 基本特效：show() , hide() , toggle()
• 渐变特效：fadeIn() , fadeOut() , fadeToggle()
• 滑动特效：slideDown() , slideUp() , slideToggle()

使用animate方法做运动

• 参数的使用说明
• 链式运动
• delay延迟运动
• stop停止运动
• finish停止并完成运动

插件的编写

什么是插件

第三方插件如何使用

编写自己的插件

$.extend()和$.fn.extend()的区别

扩展函数的调用

案例

• 无缝滚动轮播图

js总结课 -- 第八次课

回顾js原生语法

• 数据类型
• 流程控制语句for和if
• 定时器的开和关
• 数组字符串方法
• DOM和事件
• 面向对象

回顾jq的提供的方法

• jq的整体架构
• jq工具函数
• jq中DOM操作和事件绑定
• jq中animate动画
• jq中插件的编写

接下来如何对js进行学习

• 多看书、多练习、多思考
  
  • 《javascript高程设计》、《JavaScript权威指南》
  • 妙味课堂的练习
• 前端人常去的学习网站
  妙味课堂问答
  stackoverflow问答社区