Js+Dom-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52830421/article/details/142450164

一.Js

1.输出语句:console.log();alert() typeof 变量输出对应变量的类型
2.javascrtpt是弱类型语言,即在运行的过程当中变量的类型可以发生变化
3.js的两种使用方式:1.直接使用script标签引用,第二种从外部导入js文件

  <script type = "text/javascript" src = ./my.js></script>

4.js的数据类型 number,string,boolean,object,function,js有三种特殊值,undefined 变量未赋初始值时,默认undefined,null:空值
NaN :非数值
5短路与机制:若&&的表达式为真,则返回最后一个表达式的值,若为假,则返回第一个错误表达式的值. 短路或机制,若表达式为真则返回第一个为真的表达式的值,若为假则返回最后一个为假的表达式的值
6.条件运算符,跟java一样,若表达式为真就返回第一个表达式的值,若为假就返回第二个表达式的值
7.数组

 <script type="text/javascript">
      //方式一
        var cars1 = ["Audi", "bmw", "volvo"]
        console.log(cars1);
    //  方式2定义一个空数组,然后再添加元素
      var cars2 = [];
      //方式三
      var cars3 = new Array(1,2,3)
      console.log(cars3[2])
    //  定义数组4
      var cars4 = new Array();
      cars4[0] = "天气好";
      cars4[1] = "在下雨"
      console.log(cars4[0])
    </script>
    数组的遍历与java类似这里不再举例

8.函数的使用方式:第一种与java相同,第二种:

 var 函数名 = function(形参列表){
    函数体
    return 表达式}
    //调用  函数名(实参列表)

函数注意事项:①js中函数的重载会覆盖掉上一次的定义 ②:函数的arguments隐形参数,在function中不需要定义,可以获取所有参数的变量

<script type = "text/javascript">
    function f2(){
      console.log("arguments=",arguments)
    }
    f2(10,20,30)
  </script>

③:如果我们的函数有形参,在传实参的时候,仍然按照顺序匹配,如果匹配上就赋给形参,不管匹配如何,仍然把所有的实参赋给arguments

9.对象的定义

var 对象名 = new Object();对象实例
对象名.属性名 = 值;
对象名.函数名 = function(){} //定义一个函数

定义方式2:

var 对象名 = {
属性名:值
属性名:值
函数名:function(){}
}

二.事件

1.事件的绑定:即当事件相应后浏览器要执行哪些操作代码称作事件绑定:①通过html标签的事件属性直接赋予事件响应后的代码,这种方式叫做静态注册

②动态注册:通过js代码得到标签的dom对象,再通过dom对象.事件名 =function(){}的形式叫做动态注册
2.页面加载完毕事件:动态绑定和静态绑定案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    function sayOk(){
      alert("静态注册 onload 事件 sayOk")
    }

    //使用window(页面窗口)dom对象,即页面窗口被映射成了dom对象
    //window.onload表示页面被加载完毕,后面的函数表示加载完毕后要执行的代码
    //此为动态注册
    window.onload = function(){
      alert("window.onload加载完毕")
    }

  </script>
</head>
//在body这进行静态绑定
<body onload = "sayOk()">

</body>
</html>

3.点击事件onclick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type = "text/javascript">
    function sayOk(){
      alert("你点击了sayOk按钮触发了sayOk方法")
    }
    //当页面加载完毕后,我们再进行动态绑定
    window.onload = function(){
      //动态注册onclick事件
      //先拿到id = btn01的button对应的dom对象
      //通过dom对象动态的绑定onclick事件
      var btn01 = document.getElementById("btn01")
      btn01.onclick = function(){
        alert("sayHi可以了")
      }
    }

  </script>
</head>
<body>

</body>
<button onclick = "sayOk()">sayOk按钮</button>
<button id = "btn01">sayHi</button>
</html>

4.失去焦点事件 onblur

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    //静态绑定
  function upperCase(){
    //获取dom对象
    var fname = document.getElementById("fname");
    //通过对象来绑定相应事件
    fname.value = fname.value.toUpperCase()
  }


    //在页面加载完成后进行动态绑定
    //1.得到id = fname2的input对应的dom对象
    //通过dom对象动态绑定toUpperCase事件
    window.onload = function(){
    var fname2 = document.getElementById("fname2");
    fname2.value = fname2.value.toUpperCase();
    }
  </script>
</head>

<body>

输入英文单词:
<input type="text" id="fname" onblur="upperCase()"/> <br>
输入英文单词:
<input type="text" id="fname2"/>
</body>
</html>

5.内容发生改变事件onchange

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type = "text/javascript">
    //静态绑定
    function mysal(){
      alert("工资发生变化了")
    }
    //动态绑定
    //首先先获取id = "girlfriend"的select的dom对象
    //再通过dom对象进行绑定事件
    window.onload = function() {
      var girl = document.getElementById("girlfriend");
      girl.onchange = function(){
        alert("女友变化了")
      }

    }
  </script>
</head>
<body>
你当前的工资水平:
<select onchange=" mysal()">
  <option>--工资范围--</option>
  <option>10k以下</option>
  <option>10k-30k</option>
  <option>30k以上</option>
</select><br>
你当前的女友是谁:
<select id = "girlfriend">
  <option>赵丽颖</option>
  <option>杨幂</option>
  <option>baby</option>
</select>
</body>
</html>

6.表单提交事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type = "text/javascript">

    //进行动态注册提交表单
    //页面加载结束后再提交表单
    window.onload = function() {
        //首先获取dom对象
        var form2 = document.getElementById("form2");
        //再绑定提交事件
        form2.onsubmit = function () {
            //name可用于获取对应的value值
            name = form2.username.value
            if (name.length < 4 | name.length > 6) {
                alert("用户名长度不对")
                return false
            }
            psd = form2.psd.value
            if (psd.length != 6) {
                alert("密码长度不对")
                return false
            }
            if(psd!=form2.oSure.value){
                alert("输入的两次密码不相等")
                return false
            }
            //如何使用正则表达式
            var emailPattern = /^[\w-]+@([a-zA-Z]+\.)+[a-zA-Z]+$/;
            //验证括号里的是否满足emailPattern规则,满足返回真,不满足返回假
            if(!emailPattern.test(form2.ems.value)){
                alert("邮件的格式不正确")
                return false
            }
            return true
        }
    }
  </script>
</head>
<body>
<h1>注册用户</h1>
<form action = "ok.html" id = "form2" >
  用户名:<input type = "text"  id ="user" name = "username" >长度(4-6)<br>
  密　码:<input type = "text" id = "password" name = "psd">长度(6)</br>
  确　认:<input type = "text" id = "oneSure" name="oSure">长度(6)</br>
  电　邮:<input type = "text" id = "email" name="ems">满足基本格式</br>
  <input type = "submit"  value = "注册用户">
</form>
</body>
</html>