1. [
  1. 课程介绍
  2. ](_index_)
    1. [
  1. htmlcss入门
  2. ](001day_index)
  3. -
  4. [
  5. html概述及基本结构
  6. ](001day_section02)
    1. [
  1. html标签入门
  2. ](001day_section03)
    1. [
  1. html布局入门
  2. ](001day_section04)
    1. [
  1. css介绍
  2. ](001day_section05)
    1. [
  1. css载入方式
  2. ](001day_section06)
    1. [
  1. css选择器一
  2. ](001day_section07)
    1. [
  1. css元素属性及盒子模型
  2. ](001day_section08)
    1. [
  1. css文本属性
  2. ](001day_section09)
    1. [
  1. css基本布局演示
  2. ](001day_section10)
    1. [
  1. htmlcss进阶
  2. ](002day_index)
  3. -
  4. [
  5. 相对地址与绝对地址
  6. ](002day_section01)
    1. [
  1. 列表
  2. ](002day_section02)
    1. [
  1. 表单
  2. ](002day_section03)
    1. [
  1. 表格
  2. ](002day_section04)
    1. [
  1. css选择器二
  2. ](002day_section05)
    1. [
  1. css显示特性
  2. ](002day_section06)
    1. [
  1. css元素溢出
  2. ](002day_section07)
    1. [
  1. htmlcss高级
  2. ](003day_index)
  3. -
  4. [
  5. 定位
  6. ](003day_section01)
    1. [
  1. css权重
  2. ](003day_section02)
    1. [
  1. photoshop辅助测量与取色
  2. ](003day_section03)
    1. [
  1. 前端页面开发流程
  2. ](003day_section04)
    1. [
  1. javascript入门及进阶
  2. ](004day_index)
  3. -
  4. [
  5. JavaScript介绍
  6. ](004day_section01)
    1. [
  1. JavaScript嵌入页面的方式
  2. ](004day_section02)
    1. [
  1. 变量、数据类型及基本语法规范
  2. ](004day_section03)
    1. [
  1. 函数
  2. ](004day_section04)
    1. [
  1. 获取元素方法
  2. ](004day_section05)
    1. [
  1. 操作元素
  2. ](004day_section06)
    1. [
  1. 事件属性及匿名函数
  2. ](004day_section07)
    1. [
  1. 条件语句
  2. ](004day_section08)
    1. [
  1. javascript高级
  2. ](005day_index)
  3. -
  4. [
  5. 数组及操作方法
  6. ](005day_section01)
    1. [
  1. 循环语句
  2. ](005day_section02)
    1. [
  1. 字符串及操作方法
  2. ](005day_section03)
    1. [
  1. 定时器
  2. ](005day_section04)
    1. [
  1. 调试程序的方法
  2. ](005day_section05)
    1. [
  1. 变量作用域
  2. ](005day_section06)
    1. [
  1. 封闭函数
  2. ](005day_section07)
    1. [
  1. JQuery入门
  2. ](006day_index)
  3. -
  4. [
  5. jquery介绍
  6. ](006day_section01)
    1. [
  1. jquery文档加载完再执行
  2. ](006day_section02)
    1. [
  1. jquery选择器
  2. ](006day_section03)
    1. [
  1. jquery样式操作
  2. ](006day_section04)
    1. [
  1. 绑定click事件
  2. ](006day_section05)
    1. [
  1. jquery动画
  2. ](006day_section06)
    1. [
  1. JQuery进阶
  2. ](007day_index)
  3. -
  4. [
  5. jquery特殊效果
  6. ](007day_section01)
    1. [
  1. jquery链式调用
  2. ](007day_section02)
    1. [
  1. jquery属性操作
  2. ](007day_section03)
    1. [
  1. jquery事件
  2. ](007day_section04)
    1. [
  1. 表单验证
  2. ](007day_section05)
    1. [
  1. JQuery高级
  2. ](008day_index)
  3. -
  4. [
  5. 事件冒泡
  6. ](008day_section01)
    1. [
  1. 事件委托
  2. ](008day_section02)
    1. [
  1. Dom操作
  2. ](008day_section03)
    1. [
  1. javascript对象
  2. ](008day_section04)
    1. [
  1. json
  2. ](008day_section05)
    1. [
  1. ajax
  2. ](008day_section06)
    1. [
  1. ES6语法
  2. ](009day_index)
  3. -
  4. [
  5. 变量声明和赋值
  6. ](009day_section01)
    1. [
  1. 函数相关
  2. ](009day_section02)
    1. [
  1. 模块及面向对象
  2. ](009day_section03)
    1. [
  1. 异步请求数据
  2. ](009day_section04)
    1. [
  1. 新增数组操作方法
  2. ](009day_section05)
    1. [
  1. react入门和进阶
  2. ](010day_index)
  3. -
  4. [
  5. react介绍
  6. ](010day_section01)
    1. [
  1. 快速开始
  2. ](010day_section02)
    1. [
  1. JSX语法
  2. ](010day_section03)
    1. [
  1. 组件和属性(props)
  2. ](010day_section04)
    1. [
  1. 绑定事件
  2. ](010day_section05)
    1. [
  1. 状态(state)
  2. ](010day_section06)
    1. [
  1. 列表渲染
  2. ](010day_section07)
    1. [
  1. 表单数据绑定
  2. ](010day_section08)
    1. [
  1. react高级
  2. ](011day_index)
  3. -
  4. [
  5. 生命周期方法
  6. ](011day_section01)
    1. [
  1. 数据交互
  2. ](011day_section02)
    1. [
  1. 脚手架开发
  2. ](011day_section03)
    1. [
    2. 本書使用 GitBook 釋出
    3. ](https://www.gitbook.com)

前端开发课程

绑定click事件

给元素绑定click事件,可以用如下方法:

  1. $('#btn1').click(function(){
  2. // 内部的this指的是原生对象
  3. // 使用jquery对象用 $(this)
  4. })

获取元素的索引值 有时候需要获得匹配元素相对于其同胞元素的索引位置,此时可以用index()方法获取

  1. var $li = $('.list li').eq(1);
  2. alert($li.index()); // 弹出1
  3. ......
  4. <ul class="list">
  5. <li>1</li>
  6. <li>2</li>
  7. <li>4</li>
  8. <li>5</li>
  9. <li>6</li>
  10. </ul>

课堂练习
选项卡