目录

  • 1 课程简介
    • 1.1 为何要学习前端开发
    • 1.2 前端学习路线
    • 1.3 课程教案
    • 1.4 课程教学日历
    • 1.5 【课堂讨论】答疑解惑
    • 1.6 线上教学示范
    • 1.7 线上线下教学示范
  • 2 JavaScript概述
    • 2.1 本课我要学什么
    • 2.2 任务1.1 认识JavaScript
    • 2.3 开发工具的安装
    • 2.4 任务1.2 在页面显示个人信息
    • 2.5 任务1.3 测试综合案例在主流浏览器上的兼容性
    • 2.6 第1章节测验
    • 2.7 主题讨论
  • 3 JavaScript基础
    • 3.1 本课我要学什么
    • 3.2 任务2.1 显示变量数据类型
    • 3.3 任务2.2 根据成绩给出学生考评
    • 3.4 任务2.3 实现猜数游戏
    • 3.5 任务2.4 制作简易计算器
    • 3.6 第2章节测验
    • 3.7 主题讨论
  • 4 JavaScript对象编程
    • 4.1 本课我要学什么
    • 4.2 任务3.1 在页面动态显示系统时间
    • 4.3 任务3.2 制作随机选号器
    • 4.4 任务3.3 制作简单的焦点图效果
    • 4.5 任务3.4 使用JSON方式显示图书信息
    • 4.6 任务3.5 验证注册页面信息
    • 4.7 任务3.6 使用正则表达式验证注册页面信息
    • 4.8 第3章节测验
    • 4.9 主题讨论
  • 5 BOM编程
    • 5.1 本课我要学什么
    • 5.2 任务4.1 制作弹窗效果
    • 5.3 任务4.2 制作网页标题交替显示效果
    • 5.4 任务4.3 制作复选框全选效果
    • 5.5 第4章节测验
    • 5.6 主题讨论
  • 6 DOM编程
    • 6.1 本课我要学什么
    • 6.2 任务5.1  Core DOM方式动态添加表格 Core DOM方式动态添加表格
    • 6.3 任务5.2 使用HTML DOM方式动态添加表格
    • 6.4 第5章节测验
    • 6.5 主题讨论
  • 7 JavaScript与CSS交互
    • 7.1 本课我要学什么
    • 7.2 任务6.1 JavaScript动态改变导航菜单样式
    • 7.3 任务6.2 制作图片轮显效果
    • 7.4 任务6.3 制作随鼠标滚动的广告图片
    • 7.5 第6章节测试
    • 7.6 主题讨论
  • 8 jQuery基础
    • 8.1 线上学习引导文-交互特效1
    • 8.2 本课我要学什么
    • 8.3 课前测试
    • 8.4 任务7.1 JQuery基础
    • 8.5 课堂闯关游戏
    • 8.6 任务7.2 列表的显示与收起
    • 8.7 第7章节测试
    • 8.8 主题讨论
  • 9 jQuery中的DOM操作
    • 9.1 线上学习引导文-交互特效2、3
    • 9.2 本课我要学什么
    • 9.3 课前测试
    • 9.4 任务8.1  制作图片展示效果
    • 9.5 任务8.2 制作留言板前端局部更新效果
    • 9.6 课堂闯关游戏
    • 9.7 任务8.3 制作电子邮件删除效果
    • 9.8 第8章节测试
    • 9.9 主题讨论
  • 10 jQuery中的事件
    • 10.1 线上学习引导文-交互特效4、5
    • 10.2 本课我要学什么
    • 10.3 课前测试
    • 10.4 任务9.1 微博字数统计
    • 10.5 课堂闯关游戏
    • 10.6 任务9.2 制作图片提示效果
    • 10.7 课前测试
    • 10.8 任务9.3 制作横向导航菜单
    • 10.9 课堂闯关游戏
    • 10.10 第9章节测试
    • 10.11 主题讨论
  • 11 jQuery制作动画
    • 11.1 线上学习引导文-交互特效6、7
    • 11.2 本课我要学什么
    • 11.3 课前测试
    • 11.4 课堂闯关游戏
    • 11.5 任务10.1 FAQ答案的显示和隐藏
    • 11.6 课前测试
    • 11.7 课堂闯关游戏
    • 11.8 任务10.2 制作图片横向移动效果
      • 11.8.1 主题讨论
      • 11.8.2 第10章节测试
  • 12 jQuery插件应用
    • 12.1 线上学习引导文-交互特效8
    • 12.2 本课我要学什么
    • 12.3 课前测试
    • 12.4 任务11.1 使用ss-Menu固定侧边栏插件
    • 12.5 任务11.2 Pinterest Grid实现响应式网格瀑布流布局
    • 12.6 任务11.3 编写表格隔行变色插件
    • 12.7 主题讨论
  • 13 拓展:Bootstrap(网络资源)
    • 13.1 第1集 BootStrap安装和栅格系统
    • 13.2 第2集 BootStrap排版样式
    • 13.3 第3集 BootStrap代码、表格和表单样式
    • 13.4 第4集 BootStrap表单样式
    • 13.5 第5集 BootStrap按钮、图片、工具和响应式工具
    • 13.6 第6集 BootStrap Glyphicons图标、下拉菜单、按钮组和按钮式下拉菜单
    • 13.7 第7集 BootStrap输入框组和导航
    • 13.8 第8集 BootStrap导航条
    • 13.9 第9集 BootStrap面包屑导航、分页、标签、徽章、大屏幕显示、页面标题和缩略图
  • 14 1+X Web前端开发考证
    • 14.1 Web前端开发1+X职业技术等级证书的学习目标和学习线路图
    • 14.2 JavaScript专项练习1
    • 14.3 JavaScript专项练习2
    • 14.4 jQuery专项练习1
    • 14.5 jQuery专项练习2
    • 14.6 jQuery专项练习3
    • 14.7 jQuery专项练习4
任务7.2 列表的显示与收起
  • 1 任务视频
  • 2 教学课件
  • 3 教学案例
  • 4 练一练

任务视频V2.0




任务视频V1.0


知识点

1.基本选择器                                               

 

选择器

 
 

描述

 
 

返回

 
 

示例

 
 

#id

 
 

根据给定的id匹配一个元素

 
 

单个元素

 
 

$(‘#test’)选取id为test的元素

 
 

.class

 
 

根据给定的类名匹配元素

 
 

集合元素

 
 

$(“.test”)选取所有class为test的元素

 
 

element

 
 

根据给定的元素名匹配元素

 
 

集合元素

 
 

$(‘p’)选取所有的<p>元素

 
 

*

 
 

匹配所有元素

 
 

集合元素

 
 

$(‘*’)选取所有的元素

 
 

selector1, selector2,

 

…,

 

selectorN

 
 

将每一个选择器匹配到的元素合并后一起返回

 
 

集合元素

 
 

$(‘div, span, p.myClass’)选取所有<div>、<span>和拥有class为myClass的<p>标签的一组元素

 

2.层次选择器                                            

 

选择器

 
 

描述

 
 

返回

 
 

示例

 
 

$(‘ancestor descendant’)

 
 

选取ancestor元素里的所有descendant后代元素

 
 

集合元素

 
 

$(‘div span’)选取<div>里的所有的<span>元素

 
 

$(‘parent > child’)

 
 

选取parent元素下的child子元素,$(‘ancestor descendant’)选择的是后代元素

 
 

集合元素

 
 

$(‘div > span’)选取<div>元素下元素名是<span>的子元素

 
 

$(‘prev + next’)

 
 

选取紧接在prev元素后的next元素

 
 

集合元素

 
 

$(‘.one + div’)选取class为one的下一个<div>元素

 
 

$(‘prev ~ siblings’)

 
 

选取prev元素之后的所有siblings元素

 
 

集合元素

 
 

$(‘#two ~ div’)选取id为two的元素后面的所有<div>兄弟元素

 

3.基本过滤选择器                                                                                        

 

选择器

 
 

描述

 
 

返回

 
 

示例

 
 

:first

 
 

选取第1个元素

 
 

单个元素

 
 

$(‘div:first’)选取所有<div>元素中第1个<div>元素

 
 

:last

 
 

选取最后一个元素

 
 

单个元素

 
 

$(‘div:last’)选取所有<div>元素中最后一个<div>元素

 
 

:not(selector)

 
 

去除所有与给定选择器匹配的元素

 
 

集合元素

 
 

$(‘input:not(.myClass)’)选取class不是myClass的<input>元素

 
 

:even

 
 

选取索引是偶数的所有元素,索引从0开始

 
 

集合元素

 
 

$(‘input:even’)选取索引是偶数的<input>元素

 
 

:odd

 
 

选取索引是奇数的所有元素,索引从0开始

 
 

集合元素

 
 

$(‘input:odd’)选取索引是奇数的<input>元素

 
 

:eq(index)

 
 

选取索引等于index的元素,index从0开始

 
 

单个元素

 
 

$(‘input:eq(1)’)选取索引等于1的<input>元素

 
 

:gt(index)

 
 

选取索引大于index的元素,index从0开始

 
 

集合元素

 
 

$(‘input:get(1)’)选取索引大于1的<input>元素

 
 

:lt(index)

 
 

选取索引小于index的元素,index从0开始

 
 

集合元素

 
 

$(‘input:lt(1)’)选取索引小于1的<input>元素

 
 

:header

 
 

选取所有的标题元素,例如h1,h2,h3等

 
 

集合元素

 
 

$(‘:header’)选取页面中所有的<h1>,<h2>, <h3>……

 
 

:animated

 
 

选取当前正在执行动画的所有元素

 
 

集合元素

 
 

$(‘div:animated’)选取正在执行动画的<div>元素

 

 4.内容过滤选择器                                           

 

选择器

 
 

描述

 
 

返回

 
 

示例

 
 

:contains(text)

 
 

选取含有文本内容为text的元素

 
 

集合元素

 
 

$(“div:contains(‘我’)”)选取含有文本“我”的<div>元素

 
 

:empty

 
 

选取不包含子元素或者文本的空元素

 
 

集合元素

 
 

$(‘div:empty’)选取不包含子元素(包括文本元素)的<div>空元素

 
 

:has(selector)

 
 

选取含有选择器所匹配的元素的元素

 
 

集合元素

 
 

$(‘div:has(p)’)选取含有<p>元素的<div>元素

 
 

:parent

 
 

选取含有子元素或者文本的元素

 
 

集合元素

 
 

$(‘div:parent’)选取拥有子元素(包括文本元素)的<div>元素

 

 5.属性过滤选择器                                                                 

 

选择器

 
 

描述

 
 

返回

 
 

示例

 
 

[attribute]

 
 

选取拥有此属性的元素

 
 

集合元素

 
 

$(‘div[id]’)选取拥有属性id的元素

 
 

[attribute=value]

 
 

选取属性的值为value的元素

 
 

集合元素

 
 

$(‘div[title=test]’)选取属性title为test的<div>元素

 
 

[attribute!=value]

 
 

选取属性的值不等于value的元素

 
 

集合元素

 
 

$(‘div[title!=test]’)选取属性title不等于test的<div>元素。注意:没有属性title的<div>元素也会被选取

 
 

[attribute^=value]

 
 

选取属性的值以value开始的元素

 
 

集合元素

 
 

$(‘div[title^=test]’)选取属性title以test开始的<div>元素

 
 

[attribute$=value]

 
 

选取属性的值以value结束的元素

 
 

集合元素

 
 

$(‘div[title$=test]’)选取属性title以test结束的<div>元素

 
 

[attribute*=value]

 
 

选取属性的值含有value介绍的元素

 
 

集合元素

 
 

$(‘div[title*=test]’)选取属性title含有test的<div>元素

 
 

[selector1][selector2]…[selectorN]

 
 

用属性选择器合并成一个复合属性选择器,满足多个条件。每选择一次,缩小一次范围

 
 

集合元素

 
 

$(‘div[id][title$=test]’)选取拥有属性id,并且属性title以test结束的<div>元素

 

 6.子元素过滤选择器                                          

 

选择器

 
 

描述

 
 

返回

 
 

示例

 
 

:nth-child(index/even/odd/equation)

 
 

选取每个父元素下的第index个子元素或者奇偶元素(index从1算起)

 
 

集合元素

 
 

:eq(index)只匹配一个元素,而:nth-child将为每一个父元素匹配元素,并且:nth-child(index)的index是从1开始的,而:eq(index)是从0算起的

 
 

:first-child

 
 

选取每个父元素的第1个子元素

 
 

集合元素

 
 

:first只返回单个元素,而:first-child选择符将为每个父元素匹配第1个子元素。例如$(‘ul li:first-child’)选取每个<ul>中第1个<li>元素

 
 

:last-child

 
 

选取每个父元素的最后一个子元素

 
 

集合元素

 
 

同样,:last只返回单个元素,而:last-child选择符将为每个父元素匹配最后一个子元素。例如$(‘ul li:last-child’)选择每个<ul>中最后一个<li>元素

 
 

:only-child

 
 

如果某个元素是它父元素中唯一的子元素,那么将会被匹配。如果父元素中含有其他元素,则不会被匹配

 
 

集合元素

 
 

$(‘ul li:only-child’)在<ul>中选取是唯一子元素的<li>元素

 

  7.表单对象属性过滤选择器                                          

 

选择器

 
 

描述

 
 

返回

 
 

示例

 
 

:enabled

 
 

选取所有可用元素

 
 

集合元素

 
 

$(‘#form1 :enabled’)选取id为form1的表单内的所有可用元素

 
 

:disabled

 
 

选取所有不可用元素

 
 

集合元素

 
 

$(‘#form2 :disabled’)选取id为form2的表单内的所有不可用元素

 
 

:checked

 
 

选取所有被选中的元素(单选框,复选框)

 
 

集合元素

 
 

$(‘input:checked’)选取所有被选中的<input>元素

 
 

:selected

 
 

选取所有被选中的选项元素(下拉列表)

 
 

集合元素

 
 

$(‘select:selected’)选取所有被选中的选项元素