day02_WebAPIs.ppt

Web APIs,正文-单击此处标题样式微软雅黑24号,昨日复习,获取元素可以通过软件系统或软件系统或软件系统或软件系统来获取 事件的三要素分别是软件系统、软件系统、软件系统修改元素的内容可以通过软件系统或软件系统修改元素的属性由软件系统修改元素的样式属性由软件系统与软件系统给元素注册事件的步骤软件系统、软件系统、软件系统,昨日复习,正文-单击此处标题样式微软雅黑24号,获取元素可以通过ID或标签名或class或选择器来获取 事件的三要素分别是事件源、事件类型、事件处理程序 修改元素的内容可以通过innerText或innerHTML 修改元素的属性由元素对象.属性名=值 修改元素的样式属性由元素对象.style.样式属性名=值件 与 元素对象.className=类名 给元素注册事件的步骤获取元素、注册事件、编写事件处理代码,Contents,目,录,操作元素（排他思想、自定义属性）节点操作,能够操作DOM元素的属性（自定义属性）能够操作DOM节点,目标,TARGET,排他思想,要点提示,排他思想（算法）,掌握程度：应用,1.1 排他思想（算法）,1、说出什么是排他操作？2、说出排他操作的实现步骤,1.1 排他思想（算法）,课堂问答,课堂问答,练习,5个按钮，单击按钮，当前按钮变背景色，其他按钮没有背景色！,提示,获取所有的按钮使用for循环给所有的按钮注册单击事件 事件处理函数中，完成排他操作,5分钟,1.1 排他思想（算法）,排他操作练习,要点提示,百度换肤效果,掌握程度：应用,1.2 百度换肤效果,练习,4个图片，单击图片时，body的背景更换！,提示,给所有的img注册单击事件 获取当前图片的src设置body的背景图,5分钟,1.2 百度换肤效果,案例巩固练习,onmouseover和onmouseout事件,要点提示,表格隔行变色效果,掌握程度：应用,1.3 表格隔行变色效果,练习,有1个表格，鼠标经过 tr 行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色,提示,给所有的行注册鼠标移入事件给所有的行注册鼠标移出事件鼠标移入事件中，改变当前行的背景颜色鼠标移出事件中，改变当前行的背景颜色,5分钟,1.3 表格隔行变色效果,案例巩固练习,全选和取消全选,要点提示,表单全选取消全选（上）,掌握程度：应用,2.1 表单全选取消全选（上）,练习,点击上面全选复选框，下面所有的复选框都选中（全选）再次点击全选复选框，下面所有的复选框都不中选（取消全选）,提示,获取全选按钮和子复选框给全选按钮注册单击事件获取全选按钮的选中状态设置子复选框的选中状态,5分钟,2.1 表单全选取消全选（上）,案例巩固练习,下面复选框影响全选按钮,要点提示,表单全选取消全选（下）,掌握程度：应用,2.2 表单全选取消全选（下）,练习,如果下面复选框全部选中，上面全选按钮就自动选中如果下面复选框有一个没有选中，上面全选按钮就不选中,提示,给所有的子复选框注册单击事件使用变量记录全选按钮的状态判断是否有没被选中的子复选框，有则改变全选按钮的状态设置全选按钮的的状态,5分钟,2.2 表单全选取消全选（下）,案例巩固练习,获取原有和自定义属性,要点提示,获取自定义属性值,掌握程度：应用,2.3 获取自定义属性值,设置自带和自定义属性移出属性,要点提示,设置移除自定义属性,掌握程度：应用,3.1 设置移除自定义属性,tab栏布局,要点提示,tab栏切换布局分析（重要）,掌握程度：理解,3.2 tab栏切换布局分析（重要）,选项卡操作,要点提示,tab栏切换制作（上）,掌握程度：应用,3.3 tab栏切换制作（上）,练习,选项卡，点击某一个，当前这个底色会是红色，其余不变（排他思想）,提示,获取所有的选项卡，注册单击事件选项卡排他操作,5分钟,3.3 tab栏切换制作（上）,案例巩固练习,选项卡对应内容操作,要点提示,tab栏切换制作（下）,掌握程度：应用,3.4 tab栏切换制作（下）,练习,选项卡下面的内容部分，跟随选项卡显示和隐藏,提示,给所有的选项卡设置“索引号”在选项卡的单击事件中，获取“索引号”根据索引号找到选项卡对应的内容，排他操作,5分钟,3.4 tab栏切换制作（下）,案例巩固练习,上午复习,排他操作的实现步骤是所有元素全部清除与设置当前元素 h5中新增了通过在data-属性名方式设置自定义属性 h5中通过element.dataset.属性名获取自定义属性,正文-单击此处标题样式微软雅黑24号,上午复习,排他操作的实现步骤是所有元素全部清除与设置当前元素 h5中新增了通过在data-属性名方式设置自定义属性 h5中通过element.dataset.属性名获取自定义属性,正文-单击此处标题样式微软雅黑24号,自定义属性的目的h5中设置自定义属性和获取自定义属性,要点提示,H5自定义属性,掌握程度：应用,4.1 H5自定义属性,节点节点的层级关系,要点提示,为什么学习节点操作以及节点简介,掌握程度：理解,4.2 为什么学习节点操作以及节点简介,父子层级关系,要点提示,