JavaScript的学习

HTML:决定页面框架

CSS：用来美化页面

JS：提供用户的交互的

JS的步骤

确定事件

通常事件会触发一个函数

函数里通常都会去操作页面元素，做交互工作

image

JS的输出

1. alert() 直接弹框

2. document.write() 向页面输出

3. console.log() 向控制台输出

4. innerHTML: 向页面输出

5. 获取页面元素：document.getElementById("id的名称");

JS的简单校验举例

JS的应用举例

一、图片轮播技术的分析与实现

轮播图自动播放分析

1 .需求分析：
有一组图片
每隔几秒钟，就去切换一张，最终是一直在不同切换

2 .技术分析：
切换图片
每几秒钟做件事

3 .步骤分析

a. 确定事件：文档加载完成的事件 onload = "init()"
   onload 事件会在页面或图像加载完成后立即发生

b. 事件要触发:init()--设置定时器--每隔1秒调用一次changeImg进行图片切换

4 .changeImg()
a. 获得要切换图片的元素

1. 切换图片.html

1. 定时器.html

window.setInterval("alert("123")",2000);

3. 自动轮播技术实现

二、完成页面定时弹出广告

需求分析:

打开网页，看到广告5秒后，广告消失
技术分析
- 定时器
- setInterval("function",5000);--每隔5000秒执行一次函数
- setTimeOut:多少毫秒后执行函数
- clearInterval
- clearTimeout
- 显示广告：img.style.display = "block";
- 隐藏广告：img.style.display = "none";
步骤分析
- 确定事件：页面加载完成的时间 onload = "init()"
- 事件触发函数init()中要做的一件事：
  - 启动定时器：setTimeout()
  - 显示一个广告
  - 再去开启定时器，5秒后关闭广告

1. 图片显示与隐藏.html

2. 定时弹出广告.html

三、JS的表单校验

需求分析：
- 对用户输入进行有好的提示

技术分析：
- [HTML中innerHTML属性]
- [JS的常用事件]
  - onfocus事件--获得焦点
  - onblur事件--失去焦点
  - onkeyup事件--按键抬起事件

用户名校验简单代码

用户注册信息校验代码

内容回顾

定时器

setInterval("",3000);--每隔多少秒执行一次函数
setTimeout("",3000);--多少毫秒之后执行一次函数
timeID--定时器调用后的返回值
clearInterval(timeID);
clearTimeout(timeID);

切换图片

imgsrc = "图片路径";

事件

文档加载完成的事件：onload()事件
显示广告：img.style.display = "block";
隐藏广告：img.style.display = "none";

表单校验

引入外部js文件：
```
  
```
表单校验中常用的事件
- 获得焦点的事件：onfocus
- 失去焦点事件：onblur
- 按键抬起事件:onkeyup

JS开发步骤

1.确定事件
2.事件要触发的函数
3.函数通常要去做一些交互
- 点击，修改图片，动态修改innerHTML属性....
- innerHTML区别对innerTEXT
  - innerHTML中可以编写html代码
  - innerTEXT中不可以编写html代码

四、表格的相关操作

需求分析：
- 提高用户体验，我们要学习隔行换色
技术分析：
- 改变行的颜色
- 表格的全选和全不选

——表格的隔行换色/表格的全选与全不选代码


    
        
        
        
        
        
        
    
    
    
        
        
            
                
                    
                
                分类ID
                分类名称
                分类商品
                分类描述
                操作
            
            
            
                
                    
                
                1
                手机数码
                华为、vivo、oppo
                产品质量好
                
                    修改|
                    删除
                
            
            
            
                
                    
                
                2
                儿童玩具
                飞机、火车、托马斯
                儿童玩具很好玩儿的哟
                
                    修改|
                    删除
                
            
            
            
                
                    
                
                3
                冰箱彩电
                格力、海尔
                好用
                
                    修改|
                    删除
                
            
            
            
                
                    
                
                4
                香烟酒水
                中华、威士忌、二锅头
                香烟酒水哈哈哈
                
                    修改|
                    删除
                
            
            
            
                
                    
                
                5
                江海缘超市
                辣条、饮料
                便宜好吃
                
                    修改|
                    删除

五、DOM的相关操作

DOM:Document Object Model

HTML DOM Document 对象

此时要理解html文件在内存中到底怎么存

【HTML DOM 节点】

* 在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:
* 文档是一个文档。
* 所有的HTML元素都是元素节点。--Element
* 所有 HTML 属性都是属性节点。--Attribute
* 文本插入到 HTML 元素是文本节点。are text nodes。
* 注释是注释节点。--Node

Document 对象

* 当浏览器载入 HTML 文档, 它就会成为 document 对象。
* document 对象是HTML文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）。
* Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
* 提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

元素对象——Element

* 在 HTML DOM 中, 元素对象代表着一个 HTML 元素。
* 元素对象 的 子节点可以是, 可以是元素节点，文本节点，注释节点。
* NodeList 对象 代表了节点列表，类似于 HTML元素的子节点集合。
* 元素可以有属性。属性属于属性节点。
* 元素对象例如：html head  body  title img

属性对象——Attribute

* 在 HTML DOM 中, Attr 对象 代表一个 HTML 属性。
* HTML属性总是属于HTML元素。
* 属性对象例如:src style

image

【HTML中的DOM操作】

一些常用的 HTML DOM 方法：
getElementById(id) - 获取带有指定 id 的节点（元素） 
appendChild(node) - 插入新的子节点（元素） 
removeChild(node) - 删除子节点（元素） 

 一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值 
parentNode - 节点（元素）的父节点 
childNodes - 节点（元素）的子节点 
attributes - 节点（元素）的属性节点 
    
    
查找节点：
getElementById() 返回带有指定 ID 的元素。 
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。 

增加节点：
createAttribute() 创建属性节点。 
createElement() 创建元素节点。 
createTextNode() 创建文本节点。 
insertBefore() 在指定的子节点前面插入新的子节点。 
appendChild() 把新的子节点添加到指定节点。 

删除节点：
removeChild() 删除子节点。 
replaceChild() 替换子节点。 

修改节点：
setAttribute()  修改属性
setAttributeNode()  修改属性节点

HTML中的DOM操作代码

一、省市联动案例

1. 需求及技术分析

需求分析
- 在选择省后相应的选择市
技术分析
- 涉及到DOM中的动态创建节点
  
  步骤：
  1. 创建所需的元素节点--此时假定创建的是option节点
    
    var elementNode = document.createElement("option");
  2. 创建元素节点对应的文本内容
    
    var textNode = document.createTextNode("文本内容");
  3. 将文本内容与元素节点连接在一起
    
    elementNode.appendChild(textNode);
  4. 将元素节点追加到相应的需要添加的节点中
    
    select.appendChild(elementNode);
  5. citySelect.options.length = 0;
    
    //此时的含义是：清除上次城市的选择框

2. 省市联动代码实现

二、商品的左右选择

商品左右选择代码

image

分类ID	分类名称	分类商品	分类描述	操作
1	手机数码	华为、vivo、oppo	产品质量好	修改\| 删除
2	儿童玩具	飞机、火车、托马斯	儿童玩具很好玩儿的哟	修改\| 删除
3	冰箱彩电	格力、海尔	好用	修改\| 删除
4	香烟酒水	中华、威士忌、二锅头	香烟酒水哈哈哈	修改\| 删除
5	江海缘超市	辣条、饮料	便宜好吃	修改\| 删除

JavaScript

JavaScript的学习

JS的步骤

JS的输出

1. alert() 直接弹框

2. document.write() 向页面输出

3. console.log() 向控制台输出

4. innerHTML: 向页面输出

5. 获取页面元素：document.getElementById("id的名称");

JS的简单校验举例

JS的应用举例

一、图片轮播技术的分析与实现

1. 切换图片.html

1. 定时器.html

3. 自动轮播技术实现

二、完成页面定时弹出广告

1. 图片显示与隐藏.html

2. 定时弹出广告.html

三、JS的表单校验

用户名校验简单代码

用户注册信息校验代码

内容回顾

定时器

切换图片

事件

表单校验

JS开发步骤

四、表格的相关操作

——表格的隔行换色/表格的全选与全不选代码

五、DOM的相关操作

HTML DOM Document 对象

【HTML DOM 节点】

Document 对象

元素对象——Element

属性对象——Attribute

【HTML中的DOM操作】

HTML中的DOM操作代码

一、 省市联动案例

1. 需求及技术分析

2. 省市联动代码实现

二、 商品的左右选择

商品左右选择代码

你可能感兴趣的:(JavaScript)

一、省市联动案例

二、商品的左右选择