Day03-jS

javaScript概述

什么是javaScript:javaScript是一种直译式脚本语言。直接解释执行的语言。 什么是脚本语言? . java源代码--->编译成.class文件 --->java虚拟机中才能执行 . 脚本语言:源码 ---->解释执行 . js由我们的浏览器解释执行

HTML:决定了页面的框架

CSS:用来美化我们的页面

JS:提供用户的交互,是灵魂

JS的组成:

ECMAScript : 核心部分 ,定义js的语法规范

DOM: document Object Model 文档对象模型 , 主要是用来管理页面的

BOM : Browser Object Model 浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高

JS的语法

变量弱类型:var i = true

区分大小写 , 语句结束之后的分号 可以有,也可以没有

要求写在script标签内

JS的数据类型

  • 基本数据类型

    • string
    • number
    • boolean
    • undefine
    • null
  • 引用数据类型

    • 对象, 内置对象
  • 类型转换

    • js内部自动转换

JS的运算符和语句

  • 运算符和java一样

    • "===" 全等号: 值和类型都必须相等

    • == 值相等就可以了

    • 语句和java大致一样

    • js中无逻辑单与和逻辑单或,函数不支持重载

    • null 属于Object类型。

    • NaN 不是一个数字,但是属于number类型。

      var aa ="哈喽";
      alert(typeof(aa)); //这样赋值的就是String类型
       var v = new String();//直接new出来的就是Object类型
       alert(typeof(v));  
  • 案例:求偶数和
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
        //  document.write("哈喽");
            var num =0;
            for (var a =0;a<=100;a++) {
                if (a%2==0) {
                    num+= a;
                }
            }
            alert(num);
            document.write(num)
        </script>
    </head>
    <body>
    </body>
</html>

JS的输出

  • alert() 直接弹框
  • document.write() 向页面输出
  • console.log()向控制台输出
  • innerHTML:向页面输出,可以改变内容

JS声明变量和函数

var 变量的名称 = 变量的值

    var 函数的名称 = function(){
   }
   function 函数的名称(){
   }

JS的开发步骤

1. 确定事件
2. 通常事件都会出发一个函数
3. 函数里面通常都会去操作页面元素,做一些交互动作,弹框。修改页面,动态添加一些东西

选择器:

    元素选择器: 元素的名称{}
   类选择器:  . 加类名{}
   ID选择器:  #ID选择器{}
   后代选择器:  选择器1 选择器2
   子元素选择器: 选择器1 > 选择器2 
   选择器分组: 选择器1,选择器2,选择器3{}
   属性选择器: 选择器[属性的名称='属性的值']
   伪类选择器:选择器分组: 选择器1,选择器2,选择器3{}
属性选择器: 选择器[属性的名称='属性的值']
伪类选择器:

浮动:

  • 适应于div块 左右排版

    float 属性: left right

清除浮动:

clear 属性: both left right

盒子模型: 上右下左 padding 10px 20px 30px 40px 顺时针的方向

内边距: 控制的盒子内距离
边框: 盒子的边框
外边距: 控制盒子与盒子之间的距离
绝对定位:  position : absolute; top:   left

定时器

  • setInterval("test()",3000) 每隔多少毫秒执行一次函数 循环函数
  • setTimeout("test()",3000) 多少毫秒之后执行一次函数 一次性函数
  • timerID 上面定时器调用之后
  • clearInterval() 清除循环函数定时器
  • clearTimeout() 清除一次性定时器 。一般不用

切换图片

img.src = "图片路径"

事件:文档加载完成的事件 onload事件

显示广告 ,隐藏广告 :调用display的功能。

var img =document.getElementById("id");

img.style.display = "block";

img.style.display = "none"

引入外部JS文件

<script src="js文件的路径"  type="text/javascript"/>
//需要注意的是:当从外部引入后 script中再写js代码就不会生效。
内部引入 :
直接在文件中任何位置:<script>在这里写js</script>

复选框中 checked = true ;代表选中状态
checked = false 代表未选中状态。

表单中常用的事件:

onfocus: 获取焦点事件
onblur : 失去焦点的事件
onkeyup: 按键抬起的事件
onclick:  单击事件
ondblclick:  双击事件 

表格隔行换色,鼠标移入和移除要变色:

onmouseenter:  鼠标移入
onmouseout:  鼠标移出
onload:  文档加载完成事件
onsubmit:  提交
onchange:   下拉列表内容改变

checkbox.checked 选中状态

DOM的文档操作:

添加节点: appendChild
创建节点: document.createElement
创建文本节点: document.createTextNode()

点击事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            // 可以传参数
            function fun1 (x) {
            alert("我被单击了!!"+x);
            }
            function fun2 () {
                alert("我被单机了!!哈哈哈");
            }
            function fun3 () {
                alert("我被双击了!!哈哈哈");
            }
        </script>
    </head>
    <body>
        <input type="button" value="点击" name="按钮" onclick="fun1(100),fun2()" />
        <input type="button" value="双击" ondblclick="fun3()" />
    </body>
</html>
 

#案例一 ,校验#

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="../css/01.css" />
        <script>
            /*
            1.确定事件:表单提交事件  onsubmit事件
            2.事件所要触发的函数: checkForm
            3. 函数中要执行一些程序
                 1. 函数中再创建一个方法统一判断用户名,密码,确认密码 是否为空,直接  调用这个函数。
            */
            function checkForm(){
                //校验用户名是否为空
             var v1 = checkFormIsNull("username","用户名");
                //校验密码是否为空
             var v2 =checkFormIsNull("pwd","密码");
                //校验确认密码是否为空
             var v3 =checkFormIsNull("repwd","确认密码");
                 if(v2 && v3 ){
                    //获取密码的值
                    var pas = document.getElementById("pwd").value;
                    //获取确认密码的值
                    var repas = document.getElementById("repwd").value;
                    //判断是否一致
                    if(pas != repas){
                        alert("两次密码输入不一致!!");
                        return false;
                     }
                   }
             var v4 = document.getElementById("email").value;
                  if(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(v4)){
                    alert("邮箱验证通过");
                  }else{
                    alert("邮箱验证错误");
                    return false;
                  }
                //要验证的四个有一个不对就错 。
                return  v1 && v2 && v3 && v4;
            }
            function checkFormIsNull(id,msg){
                //验证用户名,密码,确认密码 是否为空
                var ele =document.getElementById(id);
                var val = ele.value;
                if(val == ""){ //此处不能写null 。
                    alert(msg+"不能为空!!!");
                    return false;
                }
                return true;
            }
        </script>
    </head>
    <body>
        <div id="divFormId">
            <form onsubmit="return checkForm()" action="#" method="get">
                <table  width="500">
                    <tr>
                        <td colspan="3">
                            <font color="#3164af" size="5">会员注册</font> USER REGISTER
                        </td>
                    </tr>
                    <tr>
                        <td align="right">用户名</td>
                        <td colspan="2"><input type="text" id="username" name="username" size="50"/> </td>
                    </tr>
                    <tr>
                        <td align="right">密码</td>
                        <td colspan="2"><input type="password" id="pwd" name="pwd" size="50"/> </td>
                    </tr>
                    <tr>
                        <td align="right">确认密码</td>
                        <td colspan="2"><input type="password" id="repwd" name="repwd" size="50"/> </td>
                    </tr>
                  <tr>
                        <td align="right">Email</td>
                        <td colspan="2"><input type="text" id="email" name="email" size="50"/> </td>
                    </tr>
                    <tr>
                        <td align="right">姓名</td>
                        <td colspan="2"><input name="text" id="name" name="name" size="50"/> </td>
                    </tr>
                    <tr>
                        <td align="right">性别</td>
                        <td colspan="2">
                            <input type="radio" name="sex" value="man" checked="checked" />男
                            <input type="radio" name="sex" value="woman" />女
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="2">
                            <input type="image" src="/day03/img/submit.jpg"  /> 
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </body>
</html>

#案例二,隐藏广告 #

<!DOCTYPE html>
<html>
    <head>
    <!--页面刚加载完成后,先隐藏图片属性,两秒后显示,过两秒后再消失。-->
        <meta charset="UTF-8">
        <title></title>
        <style>
            .hmig{
                display: none;
            }
            .sowImg{
                display: block;
            }
        </style>
        <script>
            function showImg(){
                //1.选中广告的这个图片
                var obj = document.getElementById("pac");
                //2.修改class的值。切换为块,显示状态
                obj.className="sowImg";
                //2秒后隐藏起来
                setTimeout("hiddImg()",2000);
            }
            function hiddImg(){
                var obj = document.getElementById("pac");
                //2.修改class的值,使其切换成none值
                obj.className="hmig";
            }
        </script>
    </head>
    <body onload="setTimeout('showImg()',2000)">
        //选择一张图片作为广告。
        <img src="../img/3.jpg" id="pac" class="hmig" width="100%"/>
    </body>
</html>
隐藏广告的修改版本:
<!DOCTYPE html>
<html>
    <head>
    <!--页面刚加载完成后,先隐藏图片属性,两秒后显示,过两秒后再消失。-->
        <meta charset="UTF-8">
        <title></title>
        <style>
            .hmig{
                display: none;
                /*display: block;*/
            }
        </style>
        <script>
            
              function showImg(){
                //1.选中广告的这个图片
                var obj = document.getElementById("pac");
                //2.修改class的值。切换为块,显示状态
                
                obj.style.display="block";
                //2秒后隐藏起来
                setTimeout("hiddImg()",2000);
            }
            function hiddImg(){
                var obj = document.getElementById("pac");
                obj.style.display="none";
            }
         </script>
    </head>
    <body onload="setTimeout('showImg()',2000)">
        <img src="../img/3.jpg" id="pac" class="hmig" width="100%"/>
    </body>
</html>

 

 

#案例三,轮播图#

 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            var count =1;
            function changeImg (){
                //获取img元素
                var img =document.getElementById("lbt");
                //修改src的属性
                img.src ="/day03/img/"+(++count)+ ".jpg";
                //当count = 3时 归零
                if(count ==3){
                    count =0;
                }
            }
        </script>
    </head>
    <body onload="setInterval('changeImg()',2000)">
        <img id="lbt" src="../../img/1.jpg" width="100%"/>
    </body>
</html>

 表单验证

 表单验证是为了减轻负担,每次提交只有提交符合才能正确提交上去。

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <link rel="stylesheet" type="text/css" href="../../css/01.css"/>
  7         <script>
  8             function checkForm(){
           //每次验证需要先把span标签内容给清空 !!要不然会一直显示错误提示。。切记
9 var uele = document.getElementById("usernameMsg"); 10 var pele = document.getElementById("pwdMsg"); 11 var rele = document.getElementById("repwdMsg"); 12 uele.innerHTML=""; 13 pele.innerHTML=""; 14 rele.innerHTML=""; 15 //校验用户名是否为空 16 var v1 = checkFormIsNull("username","用户名"); 17 //校验密码是否为空 18 var v2 =checkFormIsNull("pwd","密码"); 19 //校验确认密码是否为空 20 var v3 =checkFormIsNull("repwd","确认密码"); 21 if(v2 && v3 ){ 22 //获取密码的值 23 var pas = document.getElementById("pwd").value; 24 //获取确认密码的值 25 var repas = document.getElementById("repwd").value; 26 //判断是否一致 27 if(pas != repas){ 28 //alert("两次密码输入不一致!!"); 29 var rele =document.getElementById("repwdMsg"); 30 rele.innerHTML="<font color='red'>两次密码输入不一致!!</font>" 31 return false; 32 } 33 } 34 var v4 = document.getElementById("email").value; 35 if(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(v4)){ 36 }else{ 37 // alert("邮箱验证错误"); 38 var vu = document.getElementById("emailMsg"); 39 vu.innerHTML="<font color='red'>邮箱格式输入错误!!</font>" 40 return false; 41 } 42 return v1 && v2 && v3 && v4; 43 } 44 function checkFormIsNull(id,msg){ 45 //验证用户名,密码,确认密码 是否为空 46 var ele =document.getElementById(id); 47 var val = ele.value; 48 if(val == ""){ 49 //1.获取span的标签 50 var span = document.getElementById(id+"Msg"); 51 //2.设置内容体 52 span.innerHTML="<font color='red'>"+msg+"不能为空!!</font>" 53 return false; 54 } 55 return true; 56 } 57 </script> 58 </head> 59 <body> 60 <div id="divbg"> 61 <div class="divFormed"> 62 <form onsubmit="return checkForm()" action="#" method="get"> 63 <table width="500px"> 64 <tr> 65 <td colspan="3"> 66 <font color="#3164af" size="5">会员注册</font> USER REGISTER 67 </td> 68 </tr> 69 <tr> 70 <td align="right">用户名</td> 71 <td colspan="2"><input type="text" id="username" name="username" size="50"/> </td> 72 <td><span id="usernameMsg"></span></td> 73 </tr> 74 <tr> 75 <td align="right">密码</td> 76 <td colspan="2"><input type="password" id="pwd" name="pwd" size="50"/> </td> 77 <td><span id="pwdMsg"></span></td> 78 </tr> 79 <tr> 80 <td align="right">确认密码</td> 81 <td colspan="2"><input type="password" id="repwd" name="repwd" size="50"/> </td> 82 <td><span id="repwdMsg"></span></td> 83 </tr> 84 <tr> 85 <td align="right">Email</td> 86 <td colspan="2"><input type="text" id="email" name="email" size="50"/> </td> 87 <td><span id="emailMsg"></span></td> 88 </tr> 89 <tr> 90 <td align="right">姓名</td> 91 <td colspan="2"><input name="text" id="name" name="name" size="50"/> </td> 92 </tr> 93 <tr> 94 <td align="right">性别</td> 95 <td colspan="2"> 96 <input type="radio" name="sex" value="man" checked="checked" /> 97 <input type="radio" name="sex" value="woman" /> 98 </td> 99 </tr> 100 <tr> 101 <td></td> 102 <td colspan="2"> 103 <input type="image" src="../../img/submit.jpg" /> 104 </td> 105 </tr> 106 </table> 107 </form> 108 </div> 109 </div> 110 </body> 111 </html>

 InnerHtml和InnerText的区别:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
        function run1(){
            var span1 = document.getElementById("sss");
            alert(span1.innerHTML); //innerHTML 输出会全输出
            alert(span1.innerText);  //innerText 输出只输出文本内容。
        }
        function run2(){
            var span2 = document.getElementById("sss");
            //innerText 只能设置普通的文本形式
            span2.innerText="大家好,才是真的好!!!"
            //只有innerHTML 可以设置样式,字体等格式和html一样
            span2.innerHTML="<font color='red'>你好啊</font>";
        }
        </script>
    </head>
    <body>
        <span id="sss">
            <font color="red">今天是8月12号!!</font>
        </span>
        <input type="button" onclick="run1()" value="获取span内容"/><br />
        <input type="button" onclick="run2()" value="设置span内容"/>
    </body>
</html>
    

 隔行换色j加上全选,全不选,反选按钮 

<!DOCTYPE html>
<html>
    <head>
        <style>
            .sss{
                background: lightseagreen;
            }
        </style>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function fun2() {
                //1.获取所有复选框对象
                var arr = document.getElementsByClassName("itemSelect");
                //2.将其状态改为选中。
                for (var i =0;i<arr.length;i++) {
                    arr[i].checked = true;
                }
            }
            function fun3() {
                //1.获取所有复选框对象
                var arr = document.getElementsByClassName("itemSelect");
                //2.将其状态改为全不选。
                for (var i =0;i<arr.length;i++) {
                    arr[i].checked = false;
                }
            }
            function fun4() {
                //1.获取所有复选框对象
                var arr = document.getElementsByClassName("itemSelect");
                //2.将其状态改为反选。
                for (var i =0;i<arr.length;i++) {
                    arr[i].checked = !arr[i].checked;
//                    if (arr[i].checked ) {
//                        arr[i].checked = false;
//                    } else{
//                        arr[i].checked = true;
//                    }
                }
            }
            function changeColor(){
                //1.先获取所有的行
                var line = document.getElementsByTagName("tr")
                //2.晒选出所有的偶数行
                for(var i =1;i<line.length;i++){
                    if(i %2==0){
                        //2.将其背景颜色修改为蓝色
                        line[i].className="sss";
                    }
                }
            }
        </script>
    </head>
    <body onload="changeColor()">
        <table border="1" cellpadding="0" cellspacing="0" width="80%">
            <tr>
                <th>
                    <input type="button" value="全选" onclick="fun2()"/>
                    <input type="button" value="全不选" onclick="fun3()"/>
                    <input type="button" value="反选" onclick="fun4()"/>
                </th>
                <th>序号</th>
                <th>商品名称</th>
                <th>商品描述</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="itemSelect"/>        
                </td>
                <td>1</td>
                <td>手机数码</td>
                <td>手机数码商品信息</td>
                <td>
                    <a href="#">修改</a>
                    <a href="#">删除</a>
                </td>
            </tr>
            <tr class="sss">
                <td>
                    <input type="checkbox" class="itemSelect"/>        
                </td>
                <td>2</td>
                <td>电脑办公</td>
                <td>电脑办公商品信息</td>
                <td>
                    <a href="#">修改</a>
                    <a href="#">删除</a>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="itemSelect"/>        
                </td>
                <td>3</td>
                <td>鞋靴箱包</td>
                <td>鞋靴箱包商品信息</td>
                <td>
                    <a href="#">修改</a>
                    <a href="#">删除</a>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="itemSelect"/>        
                </td>
                <td>4</td>
                <td>家居饰品</td>
                <td>家居饰品商品信息</td>
                <td>
                    <a href="#">修改</a>
                    <a href="#">删除</a>
                </td>
            </tr>
        </table>

    </body>
</html>

 省市二级联动:

主要掌握好 onchange  :下拉列表内容改变 这个事件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
        <script>
        // 定义二维数组,存储城市信息
        var cities = new Array();
        cities[0] = new Array("海淀区","昌平区","朝阳区");
        cities[1] = new Array("郑州市","商丘市","开封市","洛阳市","平顶山市");
        cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
        cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
        cities[4] = new Array("南京市","苏州市","扬州市","宿迁市");
        function changeCity(val){
            //val 是省份的下标
            //根据下标再继续获取城市,再继续获取城市的对象
            var arr = cities[val];
            var city = document.getElementById("city");
            //切记先清空城市这一栏的信息。要不然会一直叠加上个省份的城市
            city.innerHTML="<option value=''>----请-选-择-市----</option>"
            for(var i =0;i<arr.length;i++){
                //city.innerHTML=arr[i];
                 var temp ="<option>"+arr[i]+"</option>";
                 city.innerHTML +=temp;  //追加,要不然会被最后一个覆盖。
            }
        }
    </script>
    <body>
        <select id="province" onchange= "changeCity(this.value)"  style="width:150px">
            <option value="">----请-选-择-省----</option>
            <option value="0">北京</option>
            <option value="1">河南省</option>
            <option value="2">山东省</option>
            <option value="3">河北省</option>
            <option value="4">江苏省</option>
        </select>
        <select id="city" style="width:150px">
            <option value="">----请-选-择-市----</option>
        </select>
    </body>
</html>

 

posted @ 2019-08-11 17:19 呆code 阅读(...) 评论(...) 编辑 收藏