JavaScript

作者: 须臾之北 | 来源:发表于2018-08-09 22:48 被阅读6次

JavaScript的学习

HTML:决定页面框架

CSS：用来美化页面

JS：提供用户的交互的

JS的步骤

确定事件

通常事件会触发一个函数

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

<html>
    <head>
        <meta charset = "UTF-8">
        <title></title>
        
        <script>            
            function dianwo(){
                alert("我被点击了");
            }           
        </script>
    </head>
    
    <body>
        <div>
            <input type = "button" value = "点我，弹框" onclick = "dianwo()"/>
        </div>
    </body>
</html>

image

JS的输出

1. alert() 直接弹框

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

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

4. innerHTML: 向页面输出

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

<html>
    <head>
        <meta charset = "UTF-8">
        <title></title>
        
        <script>            
            function dianwo(){
                var text = document.getElementById("text");
                
                text.innerHTML = "内容已经被替换";         
            }           
        </script>
    </head>
    
    <body>
            <input type = "button" value = "点我，修改div中内容" onclick = "dianwo()"/>
            
            <div id = "text">
                这里的内容会被替换掉
            </div>
    </body>
</html>

JS的简单校验举例

<html>
    <head>
        <meta charset = "UTF-8">
        <title></title>
        
        <!--
            校验用户名
            1. 确定事件：提交事件onsubmit
            2. 事件要触发函数checkUser()
            3. 函数中检测用户名长度               
        --> 
        
        <script>
    
            function checkUser(){
                //1.获取用户输入
                var username = document.getElementById("username");
                
                var usernameVaule = username.value;
                
                if(usernameVaule.length >= 6){
                }
                else{
                    alert("用户名太短了，请重新输入");
                    return false;
                }


                //邮箱的校验
                var email = document.getElementById("username");
                
                var emailVaule = email.value;
                
                if(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(emailVaule)){
                    alert("邮箱校验成功");
                }
                else{
                    alert("邮箱校验失败");
                    return false;
                }
                return true;
            }           
        </script>
    </head>
    
    <body>  
        <form action = "TestUsername.html" onsubmit = "return checkUser()">
            用户名<input type = "text" id = "username"/><br/>
            密码<input type = "password" id = "password"/><br/>
            邮箱<input type = "text" id = "email"/><br/>
            
            <!--邮箱<input type = "email" id = "email"/><br/>-->
            <input type = "submit"  value = "提交" id = "email">              
        </form>
    </body>
</html>

JS的应用举例

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

轮播图自动播放分析

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

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

3 .步骤分析

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

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

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

1. 切换图片.html

<html>
    <head>
        <meta charset = "UTF-8">
        <title></title>
        <script>
            function change(){
                var pic = document.getElementById("pic");
                
                pic.src = "2.jpg";
            }
        </script>
    </head>
    
    <body>
        <input type = "button" value = "点击切换图片" onclick = "change()"/>      
        <img src = "1.jpg" id = "pic"/>
    </body>
</html>

1. 定时器.html

window.setInterval("alert("123")",2000);   <!--2000为毫秒值-->


<html>
    <head>
        <meta charset = "UTF-8">
        <title></title>
        <script>
            function test(){
                console.log("setInterval()调用了我");
            }           
            
            var timeID;
            function start(){
                timeID = window.setInterval("test()",2000);
            }
            
            function end(){
                clearInterval(timeID);
            }
        </script>
    </head>
    
    <body>
        <input type = "button" value = "开启定时器" onclick = "start()"/><br/>
        <input type = "button" value = "取消定时器" onclick = "end()"/><br/>     
    </body>
</html>

3. 自动轮播技术实现

<html>
    <head>
        <meta charset = "UTF-8">
        <title></title>
        
        <script>
            var index = 0;
            
            function changeImg(){
                var img = document.getElementById("img");
                
                //计算当前要切换到第几张图片
                
                var curIndex = index%3 + 1;   //0,1,2               
                img.src = curIndex + ".jpg";
                
                index = index + 1;
            }
        
            function init(){
                setInterval("changeImg()",1000);    <!--每隔1秒执行一次changeImg()-->
            }           
        </script>
    </head>
    
    <body onload = "init()">
        <img src = "1.png" id = "img"/>     
    </body>
</html>

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

需求分析:

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

1. 图片显示与隐藏.html

<html>
    <head>
        <meta charset = "UTF-8">
        <title></title>
        
        <script>
            function show(){
                var img = document.getElementById("img");               
                img.style.display = "block";
            }

            function hide(){
                var img = document.getElementById("img");               
                img.style.display = "none";
            }
        </script>
    </head>
    
    <body>
        <input type = "button" value = "显示" onclick = "show()"/><br/>   
        <input type = "button" value = "隐藏" onclick = "hide()"/><br/>   

        <img src = "1.jpg" id = "img" style = "display:none"/>      
    </body>
</html>

2. 定时弹出广告.html

<html>
    <head>
        <meta charset = "UTF-8">
        <title></title>
        
        <script>
        function init(){
                setTimeout("showAD()",3000);
            }
            
            function showAD(){
                //首先要获取要操作的img
                var img = document.getElementById("img");
                //显示广告
                img.style.display = "block";
                
                //再开启定时器,关闭广告
                setTimeout("hideAD()",3000);
            }
            
            function hideAD(){
                //首先要获取要操作的img
                var img = document.getElementById("img");
                //隐藏广告
                img.style.display = "none";
            }           
        </script>
    </head>
    
    <body onload = "init()">
        <img src = "1.jpg" id = "img" style = "display:none"/>
    </body>
</html>

三、JS的表单校验

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

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

用户名校验简单代码

<html>
    <head>
        <meta charset = "UTF-8">
        <title></title>
        <script>
            /*
                1.确定事件：onfocus = "showSpan()"--获得焦点操作
                2.事件要驱动函数:showSpan()
                3.函数中要完成:修改span中的内容         
            */
            
            function showSpan(){
                var span = document.getElementById("span_username");                
                span.innerHTML = "<font color = 'red' size = '2'>用户名长度不能小于6位</font>";
            }
            
            /*
                校验用户名
                1.确定事件：onblur = "checkUsername()"--失去焦点操作
                2.事件要驱动函数:checkUsername()
                3.函数中要完成:校验用户名，显示校验结果       
            */
            
            function checkUsername(){
                //获取用户输入内容
                var user = document.getElementById("username");             
                var username = user.value;

                //获取显示结果span
                var span = document.getElementById("span_username");
                
                if(username.length < 6){
                    //显示校验结果
                    
                    span.innerHTML = "<font color = 'red' size = '2'>对不起，用户名太短了</font>";
                }else{
                    span.innerHTML = "<font color = 'red' size = '2'>恭喜，用户名可用</font>";
                }
            }            
        </script>
    </head>
    
    <body>  
        <form action = "TestUsername.html" onsubmit = "return checkUser()">
            用户名<input type = "text" id = "username" onfocus = "showSpan()" onkeyup = "checkUsername()" onblur = "checkUsername()"/><span id = "span_username"></span><br/>
            密码<input type = "password" id = "password"/><br/>
            确认密码<input type = "password" id = "repassword"/><br/>
            邮箱<input type = "text" id = "email"/><br/>
            手机号<input type = "text" id = "tell"/><br/>
            
            <!--邮箱<input type = "email" id = "email"/><br/>-->
            <input type = "submit"  value = "提交" id = "email">
            
            
        </form>
    </body>
</html>

用户注册信息校验代码

<html>
    <head>
        <meta charset = "UTF-8">
        <title></title>
        <!--
            引入外部的js文件       
        -->
        <script type = "text/javascript" src = "regutils.js"></script>
        
        <script>
            /*
                1.确定事件：onfocus = "showSpan()"--获得焦点操作
                2.事件要驱动函数:showSpan()
                3.函数中要完成:修改span中的内容         
            */
            
            function showSpan(spanID,msg){
                var span1 = document.getElementById(spanID);                
                span1.innerHTML = msg;
            }
            
            /*
                校验用户名
                1.确定事件：onblur = "checkUsername()"--失去焦点操作
                2.事件要驱动函数:checkUsername()
                3.函数中要完成:校验用户名，显示校验结果       
            */
            
            function checkUsername(){
                //获取用户输入内容
                var user = document.getElementById("username");             
                var username = user.value;

                //获取显示结果span
                var span = document.getElementById("span_username");
                
                if(username.length < 6){
                    //显示校验结果
                    
                    span.innerHTML = "<font color = 'red' size = '2'>对不起，用户名太短了</font>";
                    return false;
                }else{
                    span.innerHTML = "<font color = 'red' size = '2'>恭喜，用户名可用</font>";
                    return true;
                }
            }
            
            
            /*
                密码校验            
            */
            function checkPassword(){
                //获取用户输入
                var password = document.getElementById("password").value;
                
                //获取显示结果
                var span = document.getElementById("span_password");
                
                if(password.length < 6){
                    span.innerHTML = "<font color = 'red' size = '2'>对不起，密码太短了</font>";
                    return false;
                }
                else{
                    span.innerHTML = "<font color = 'red' size = '2'>密码可用</font>";
                    return true;
                }
            }
            
            /*
                确认密码校验          
            */
            function checkRePassword(){
                //获取用户输入
                var repassword = document.getElementById("repassword").value;
                
                //获取输入的密码
                var password = document.getElementById("password").value;
                
                //获取显示结果
                var span = document.getElementById("span_repassword");
                
                if(repassword != password){
                    span.innerHTML = "<font color = 'red' size = '2'>对不起，两次密码不一致</font>";
                    return false;
                }
                else{
                    span.innerHTML = "";
                    return true;
                }
            }
            
            /*
                邮箱校验
            */
            function checkemail(){
                //获得用户输入
                var email = document.getElementById("email").value;
                
                //获取span显示结果
                var span = document.getElementById("span_email");
                
                //校验邮箱
                var flag = checkEmail(email);
                
                if(flag){
                    span.innerHTML = "<font color = 'red' size = '2'>邮箱格式不正确</font>";
                    return false;
                }else{
                    span.innerHTML = "<font color = 'red' size = '2'>恭喜您,邮箱可用</font>";
                    return true;
                }
            }
            
            function checkInfo(){
                var flag = checkUsername() && checkPassword() && checkRePassword() && checkEmail();
                
                return flag;
            }           
        </script>
    </head>
    
    <body>  
        <form action = "test.html" onsubmit = "return checkInfo()">
            用户名<input type = "text" id = "username" onfocus = "showSpan('span_username','用户名长度不能小于6位')" onkeyup = "checkUsername()" onblur = "checkUsername()"/><span id = "span_username"></span><br/>
            密码<input type = "password" id = "password" onfocus = "showSpan('span_password','密码长度不能小于6位')" onblur = "checkPassword()" onkeyup = "checkPassword()"/><span id = "span_password"></span><br/>
            确认密码<input type = "password" id = "repassword" onfocus = "showSpan('span_repassword','两次密码必须一致')" onblur = "checkRePassword()" onkeyup = "checkRePassword()"/><span id = "span_repassword"></span><br/>
            邮箱<input type = "text" id = "email" onfocus = "showSpan('span_email','邮箱格式必须正确')" onblur = "checkemail()" onkeyup = "checkmail()"/><span id = "span_email"></span><br/>
            手机号<input type = "text" id = "tell"/><br/>
            
            <!--邮箱<input type = "email" id = "email"/><br/>-->
            <input type = "submit"  value = "提交" id = "email">          
        </form>
    </body>
</html>

内容回顾

定时器

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

切换图片

imgsrc = "图片路径";

事件

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

表单校验

引入外部js文件：

  <script type = "text/javascript" src = "js文件路径"></script>

表单校验中常用的事件
- 获得焦点的事件：onfocus
- 失去焦点事件：onblur
- 按键抬起事件:onkeyup

JS开发步骤

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

四、表格的相关操作

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

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

<html>
    <head>
        <meta charset = "UTF-8">
        <title></title>
        
        <!--
            1. 确定事件 onload
            2. 事件触发函数  init()
            3. 函数：操作页面的元素
                    操作页面中每一行
                    动态的修改行的背景颜色
        -->
        
        <script>
            function init(){
                //获取表格
                var tab = document.getElementById("tab");
                
                //获取表格中所有行
                var rows = tab.rows;
                
                //遍历所有行
                for(var i = 1;i < rows.length;i++){
                    var row = rows[i];
                    
                    if(i%2 == 0){
                        row.bgColor = "yellow";
                    }else
                    {
                        row.bgColor = "red";
                    }
                }
            }
            
            /*
                表格的全选和全不选
                1.确定事件:onclick
                2.事件触发函数：checkALL()
                3.函数要做的事：
                      ·获得当前第一个checkbox的状态
                      ·获得所有分类项的checkbox
                      ·修改每一个checkbox的状态
            */
            
            function checkAll(){
                //获得当前第一个checkbox的状态
                var check1 = document.getElementById("check1");
                
                //得到当前checked状态
                var checked = check1.checked;
                
                //获得所有分类项的checkbox
                var checks = document.getElementsByClassName("check");
                
                for(var i = 0;i < checks.length;i++){
                    //修改每一个checkbox的状态                  
                    var checkone = checks[i];
                    
                    checkone.checked = checked;
                }       
            }
        </script>
    </head>
    
    <body onload = "init()">
        <!--
            六行六列的表格
        -->
        <table border = "1px solid black" width = "600px" id = "tab">
            <tr>
                <td>
                    <input type = "checkbox" onclick = "checkAll()" id = "check1"/>
                </td>
                <td>分类ID</td>
                <td>分类名称</td>
                <td>分类商品</td>
                <td>分类描述</td>
                <td>操作</td>
            </tr>
            
            <tr>
                <td>
                    <input type = "checkbox" class = "check"/>
                </td>
                <td>1</td>
                <td>手机数码</td>
                <td>华为、vivo、oppo</td>
                <td>产品质量好</td>
                <td>
                    <a href = "#">修改</a>|
                    <a href = "#">删除</a>
                </td>
            </tr>
            
            <tr>
                <td>
                    <input type = "checkbox" class = "check"/>
                </td>
                <td>2</td>
                <td>儿童玩具</td>
                <td>飞机、火车、托马斯</td>
                <td>儿童玩具很好玩儿的哟</td>
                <td>
                    <a href = "#">修改</a>|
                    <a href = "#">删除</a>
                </td>
            </tr>
            
            <tr>
                <td>
                    <input type = "checkbox" class = "check"/>
                </td>
                <td>3</td>
                <td>冰箱彩电</td>
                <td>格力、海尔</td>
                <td>好用</td>
                <td>
                    <a href = "#">修改</a>|
                    <a href = "#">删除</a>
                </td>
            </tr>
            
            <tr>
                <td>
                    <input type = "checkbox" class = "check"/>
                </td>
                <td>4</td>
                <td>香烟酒水</td>
                <td>中华、威士忌、二锅头</td>
                <td>香烟酒水哈哈哈</td>
                <td>
                    <a href = "#">修改</a>|
                    <a href = "#">删除</a>
                </td>
            </tr>
            
            <tr>
                <td>
                    <input type = "checkbox" class = "check"/>
                </td>
                <td>5</td>
                <td>江海缘超市</td>
                <td>辣条、饮料</td>
                <td>便宜好吃</td>
                <td>
                    <a href = "#">修改</a>|
                    <a href = "#">删除</a>
                </td>
            </tr>
        </table>
    </body>
</html>

五、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操作代码

<html>
    <head>
        <meta charset = "UTF-8">
        <title></title>
    </head>
    
    <script>
        
        /*
            动态添加：<p>文本</p>      
        */
        
        function dianwo(){
            var div = document.getElementById("div1");          
            
            //创建P元素节点
            var p = document.createElement("p");
            
            //创建P元素节点的文本内容
            var textNode = document.createTextNode("文本内容");
            
            //将P和文本内容关联起来
            p.appendChild(textNode);
            
            //将p元素节点追加到div中
            div.appendChild(p);
        }
    </script>
    
    <body>
        <input type = "button" value = "点我，添加P" onclick = "dianwo()"/>
        
        <!--一会动态的在div中添加节点-->       
        <div id = "div1">
            
        </div>
    </body>
</html>

一、省市联动案例

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. 省市联动代码实现

<html>
    <head>
        <meta charset = "UTF-8">
        <title></title>
    </head>
    
    <script>
        /*
            准备数据
        */
        
        var provinces = [
            ["深圳市","东莞市","惠州市"],
            ["太原市","临汾市","吕梁市"],
            ["长沙市","岳阳市","株洲市"]         
        ];
        
        /*
            1.确定事件：onchange
            2.函数:selectProvince()
            3.函数中:
                得到当前操作元素
                得到当前选中的省份
                从数组中取出对应的城市信息
                
                动态创建城市元素节点
                添加到城市select中
        */
        
        function selectProvince(){
            //得到当前操作元素
            var province = document.getElementById("province");
            
            //得到当前选中的省份
            var value = province.value;
            
            //从数组中取出对应的城市信息
            var cities = provinces[value];
            
            //获取要添加的地方
            var citySelect = document.getElementById("city");
            
            //清空城市选择框
            citySelect.options.length = 0;
            
            for(var i = 0;i < cities.length;i++){
                var cityText = cities[i];
                
                //动态创建城市元素节点<option>太原市</option>
                var option1 = document.createElement("option");
                
                //创建城市文本信息
                var textNode = document.createTextNode(cityText);
                
                //将option与文本关联在一起
                option1.appendChild(textNode);
                
                //将option1追加到select中
                citySelect.appendChild(option1);            
            }           
        }
    </script>
    
    <body>
        <!--选择省份-->
        <select onchange = "selectProvince()" id = "province">
            <option value = "-1">--请选择--</option>
            <option value = "0">广东省</option>
            <option value = "1">山西省</option>
            <option value = "2">湖南省</option>
        </select>
        
        <!--选择城市-->
        <select id = "city"></select>
    </body>
</html>

二、商品的左右选择

  <!--
    步骤分析：
    
        1. 确定事件：onclick
        2.事件触发函数：selectOne
        3.函数中要完成：
            将左边选中的元素移动到右边select中
            1.获取左边select中被选中元素
            2.将选中元素添加到右边select中
    -->

商品左右选择代码

<html>
    <head>
        <meta charset = "UTF-8">
        <title></title>
    </head>

    <script>        
        function selectOne(){
            //获取左边select中元素
            var leftSelect = document.getElementById("leftSelect");
            var options = leftSelect.options;
            
            //找到右侧的select
            var rightSelect = document.getElementById("rightSelect");
            
            //遍历找出被选中的option
            for(var i = 0;i < options.length;i++){
                var option1 = options[i];
                if(option1.selected){
                    rightSelect.appendChild(option1);
                }
            }           
        }
        
        /*
            将左边商品全部移动到右边
        */
        function selectAll(){
            //获取左边select中元素
            var leftSelect = document.getElementById("leftSelect");
            var options = leftSelect.options;
            
            //找到右侧的select
            var rightSelect = document.getElementById("rightSelect");
            
            //遍历找出被选中的option
            for(var i = options.length-1;i >= 0;i--){
                var option1 = options[i];
                
                rightSelect.appendChild(option1);
            }
        }
    </script>
    
    <body>
        <!--创建四行五列的表格-->
        <table border = "1px solid black" width = "400px">
            <tr>
                <td>分类名称</td>
                <td>手机数码</td>
            </tr>
            
            <tr>
                <td>分类描述</td>
                <td>手机数码，应有尽有</td>
            </tr>
            
            <tr>
                <td>分类商品</td>
                <td height = "100px">
                    <!--设计两个浮动的div-->
                    
                    <!--左边div-->
                    <div style = "float:left">
                        已有商品<br/>
                        <select  multiple = "multiple" id = "leftSelect" ondblclick = "selectOne()">
                            <option>华为</option>
                            <option>vivo</option>
                            <option>oppo</option>
                            <option>荣耀</option>
                            <option>魅族</option>                         
                        </select></br>
                        
                        <a href = "#" onclick = "selectOne()">&gt;&gt;</a><br/>
                        <a href = "#" onclick = "selectAll()">&gt;&gt;&gt;</a>
                        
                    </div>
                    
                    <div style = "float:right">
                        未有商品<br/>
                        <select  multiple = "multiple" id = "rightSelect">
                            <option>三星</option>
                            <option>小米</option>
                            <option>锤子</option>
                            <option>诺基亚</option>                                                            
                        </select><br/>
                        
                        <a href = "#">&lt;&lt;</a><br/>
                        <a href = "#">&lt;&lt;&lt;</a>
                    </div>
                    
                    <div style = "clear:both"></div>
                </td>
            </tr>
            
            <tr>
                <td colspan = "2">
                    <input type = "submit" value = "提交"/>
                </td>
            </tr>
        </table>            
    </body>
</html>

image

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. 省市联动代码实现

二、 商品的左右选择

商品左右选择代码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

一、省市联动案例

二、商品的左右选择