JAVA EE-JS

最新推荐文章于 2022-05-10 09:39:36 发布

Thingvellir

最新推荐文章于 2022-05-10 09:39:36 发布

阅读量1.3k

点赞数

分类专栏： Java-EE

本文链接：https://blog.csdn.net/Thingvellir/article/details/52557225

版权

Java-EE 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

JAVASCRIPT 笔记整理

即使是一个智慧的地狱，也比一个愚昧的天堂好些。 —— 雨果

ECMAScript

实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：
1. 核心（ECMAScript）
2. 文档对象模型（DOM） Document object model(整合js和html和css)
3. 浏览器对象模型（BOM） Broswer object model(整合js和浏览器)

JS的架构

JS的结合方式

<html>
  <head>
    <title>01-js结合方式01l.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
        <!-- 在页面上使用script标签. 在标签中书写js代码 -->
        <script type="text/javascript">
            alert("hello world!");
        </script>
  </head>

  <body>
  </body>
</html>

<html>
  <head>
    <title>01-js结合方式01l.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
        <!-- 使用src属性引入外部js文件
            注意: 在引入外部js的script标签中,不能再书写js代码.
         -->
        <script type="text/javascript" src="hello.js" ></script>
  </head>

  <body>
  </body>
</html>

JS的语法

需要特别注意的是，JS是弱类型语言，所有对象的声明都通过var 关键字来进行。

        <script type="text/javascript">
            //1 声明变量, 变量的类型是随时可以变化的
            var a = 1;
                a = "haha";
                a = false;
             //2 注释    注释写法与java一模一样.没有文档注释. //   /**/
             //3 声明变量
             var b=2,c=3;
             //4 js中每行语句的结束使用 ";" 号来表示. 也可以不使用";".(推荐都加上)

             //5 声明变量时,也可以不加var => 加var声明,作用范围在代码块中.不加var声明,作用范围为全局

             //6 字母大小写.语法区分大小写 

             function fun1(){
                 var d = "hello"
                 e =  "heihei";
             }

             fun1();
             alert(e);//
        </script>

JS的变量

<script type="text/javascript">
            //java中的变量分类
                //1 基本数据类型 => 8个
                //2引用数据类型
            //js中的变量分类
                //1 原始类型
                //2 对象类型
    //---------------------------------------------------------------
        //js的原始类型  5种
            //1 number 数字  不分整型或浮点型
            //2 string 字符串  
            //3 boolean 布尔 
            //4 null  一般人为来赋值为null.  对象数据类型的占位符.
            //5 undefined(未定义) null的衍生值. 通常是系统自动赋值.当我们创建一个变量,并且没有初始化.

            var a = 10;
            var b = 3.14;
            var c = "hello";
            var d = 'world';
            var e = true;
            var f = null;
            var g = undefined;
            var h ;
            var i = new Object();
        //运算符=> typeof => 返回原始类型的类型

        /* alert(typeof a);
        alert(typeof b);
        alert(typeof c);
        alert(typeof d);
        alert(typeof e);
        alert(typeof f);//Object
        alert(typeof g);
        alert(typeof h); */
        alert(typeof i);
        // typeof null => object
        // 是javascript中的一个bug.后来将该bug保留了.
//----------------------------------------------------
//
        </script>

在许多语言中，字符串都被看作引用类型，而非原始类型，因为字符串的长度是可变的。ECMAScript 打破了这一传统。
JS中的语句

JS中的语句可以类比Java当中的。

<script type="text/javascript">
        //java中的语句
            //1 判断
                // if  else/ switch
            //2 循环
                // for / while do / do while
        //js中的语句(语法种类等都与java的一模一样)
            //1 判断
                // if  else/ switch
            //2 循环
                // for / while do / do while
        //----------------------------------------------------------------
        function fun1(){
                    var num1 = 100;
                    var num2 = 100;
                    if(num1<num2){
                        alert("num1小");
                    }else if(num1==num2){
                        alert("相等");
                    }else{
                        alert("num1大");
                    }
                }
        //fun1();
    //-----------------------------------------------------------------
    //从1累加到100
    function fun2(){
        var count = 0;
        for(var i = 1 ; i<=100 ; i++){
            count += i;
        }
        alert(count);
    }
    fun2();

    </script>

JS中的运算符

    <!-- js中的语句 -->
        <script type="text/javascript">
        //java中的运算符
        var a = -2;
        var b = +2;
        //=======================================
        var c = "1234";
        alert(typeof c);
        c = -c;
        alert(typeof c);
        //js是弱类型=>js中的类型会根据需要自动变化.
        //上面的例子中因为+是数学运算符.所以需要c是数字类型.js就会自动将c转换为number类型.

    </script>

关于typeof 运算符

ECMAScript 提供了 typeof 运算符来判断一个值是否在某种类型的范围内。可以用这种运算符判断一个值是否表示一种原始类型：如果它是原始类型，还可以判断它表示哪种原始类型。

对变量或值调用 typeof 运算符将返回下列值之一：

undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的

注释：您也许会问，为什么 typeof 运算符对于 null 值会返回 “Object”。这实际上是 JavaScript 最初实现中的一个错误，然后被 ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。

JS中的运算符

        <script type="text/javascript">
        //js中的运算符
        // && || ! => 用法与java的一模一样

    //--------------------------------------------------
        //js会在需要什么类型时,对类型自动进行转换



        // number => boolean   除了+0,-0,NaN  其他都是true.
        // string => boolean   字符串不为空,那么其他都是true.
        // null => boolean      false
        // undefined => boolean false
        // Object   => boolean  true

    //----------------------------------------------------------------  
        /* var n = +"abc";// NaN => not a number 
        alert(n); */
    //-----------------------------------------------------------------

        if("haha"&& new Object()){
            alert("true");
        }else{
            alert("false");
        } 
    </script>

一元加法对字符串的神奇效果：

var sNum = "20";
alert(typeof sNum); //输出 "string"
var iNum = +sNum;
alert(typeof iNum); //输出 "number"

JS中的数字运算符

        <script type="text/javascript">
        //js中的运算符
        // 使用+法时, 如果相加的值包含字符串,会自动转换为字符串类型
            var a = 1+'1';
            alert(a);
        //其他数学运算符中,字符串会自动转换为数字
            var b = "2"-1;
        </script>

JS中的逻辑运算符？

  逻辑 AND 运算的运算数可以是任何类型的，不止是 Boolean 值。
  如果某个运算数不是原始的 Boolean 型值，逻辑 AND 运算并不一定返回 Boolean 值：
如果一个运算数是对象，另一个是 Boolean 值，返回该对象。 
如果两个运算数都是对象，返回第二个对象。 
如果某个运算数是 null，返回 null。 
如果某个运算数是 NaN，返回 NaN。 
如果某个运算数是 undefined，返回undefined。 
     //1 false&&o  ==>         false
      //2 true&&o   ==> o ==> true
       //3 o&&true   ==>       true
       //4 o&&false  ==>       false
       //5 o1&&o2   ==>  
       //6  null&&true == >  null
       //7 NaN && true == >  NaN
       //8 NaN&&null   ==>   NaN
       //9 null&&NaN   ==>   null
   
       //10 undefined&&true ==> undefined
        //11 false&&undefined == > false

与逻辑 AND 运算符相似，如果某个运算数不是 Boolean 值，逻辑 OR 运算并不一定返回 Boolean 值：
如果一个运算数是对象，并且该对象左边的运算数值均为 false，则返回该对象。 
如果两个运算数都是对象，返回第一个对象。 
如果最后一个运算数是 null，并且其他运算数值均为 false，则返回 null。 
如果最后一个运算数是 NaN，并且其他运算数值均为 false，则返回 NaN。 
如果某个运算数是 undefined，返回undefined。
     //1  false||o  ==> o
       //2  true||o ==>true
       //3  o||false == > o
       //4  o||true == > o
       //5 o1||o2   ==>o1
       //6  null||false == > false
       //7 null||true  ==> true
       //8 null||undefined ==>undefined
        //9 undefined||null ==>null

JS中的比较运算符

比较数字和字符串
另一种棘手的状况发生在比较两个字符串形式的数字时，比如：
var bResult = "25" < "3";
alert(bResult); //输出 "true"
上面这段代码比较的是字符串 "25" 和 "3"。两个运算数都是字符串，所以比较的是它们的字符代码（"2" 的字符代码是 50，"3" 的字符代码是 51）。
不过，如果把某个运算数该为数字，那么结果就有趣了：
var bResult = "25" < 3;
alert(bResult); //输出 "false"
这里，字符串 "25" 将被转换成数字 25，然后与数字 3 进行比较，结果不出所料。

JS中的等性运算符

        <script type="text/javascript">
        //js中的运算符
        // == != 

        /* alert(1 == true);//true
        alert(2==true);// false
        alert(0==false);// true
        alert(0 == null);// false 
        alert(null == undefined);//true
        alert(NaN == NaN);// false  凡是NaN参与判断运算符 除了 ! != 其他全是false
        */
    //--------------------------------------------------------------
        // ===  比较时包括类型本身

        alert(1 === true);//false
        alert("1" === 1);// false

        alert(+"1"+1);
    </script>

如果一个运算数是 Boolean 值，在检查相等性之前，把它转换成数字值。false 转换成 0，true 为 1。 
如果一个运算数是字符串，另一个是数字，在检查相等性之前，要尝试把字符串转换成数字。 
如果一个运算数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串。 
如果一个运算数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字。

JS中的三元运算符

        <script type="text/javascript">
        //js中的运算符
        var a = 100;
        var b =20;
        alert(a>b?"a厉害":"b厉害");
    </script>

JS中的赋值运算符

        <script type="text/javascript">
        //js中的运算符
        /* var a = 1;

        a+="1";

        alert(a);//11 */
        //-------------------------------------------------

        var a ="5";
        if(a>3){

            alert("haha");
        }
        alert(typeof a);//string
    </script>

JS中的Function对象

<script type="text/javascript">
    //1 对象的功能
        //Function对象=>特殊=>相当于java中的方法
                     function fun1(){
                        alert("hello");
                    }
                    alert(fun1.toString());
                    alert(fun1);
                    fun1(); 
    //2 对象的创建
        var fun2 = function (a,b){

            alert("hello2");
        };
        var fun3 = new Function("alert('hello3');");
        //fun2();
        //fun3();
    //3 对象的属性
        alert(fun2.length);//length属性代表函数的参数个数
    //4 对象的方法
        // toString => 打印函数的定义
</script>

JS中调用函数的特点

<script type="text/javascript">
    //函数的进阶 
    function fun1(a,b){
        alert(a+b);
    }
    //调用
    fun1(1,2);//3
    fun1(1,2,3,4);//3
    fun1();//NaN
    //结论: js中的函数在调用时,只看函数名称.不看参数.
</script>

<script type="text/javascript">
    //函数的进阶 
    // arguments  => 函数运行时,参数的封装
    function fun1(){
        //alert(arguments.length);//打印实际传递的参数个数
        var count = 0;

        for(var i =0; i<arguments.length ; i++){

            count += arguments[i];
        }
        alert(count);
    }
    //调用
    fun1(1,2);//3
    fun1(1,2,3,4);//10
    fun1();//0
</script>

<script type="text/javascript">
    //函数的进阶
    //与java一样,使用return 关键字
    // return 也可以结束方法的调用
    function fun1(a,b){
        alert(a+b);
        return a+b;
    }

    //alert(fun1(1,2));
    //------------------------------------------------
        function fun2(){
        alert("haha");
        return "haha";
        alert("heihei");
    }
    alert(typeof fun2());//undefined
    //-------------------------------------------------
    //void运算符: 用于拦截方法的返回值.
</script>

需要特别关注的

 <body>
    <a href="javaScript:void(fun1(1,2));" >点我</a><br>
     <a href="javaScript:void(0)" onclick="alert('haha')"  >点我</a>
  </body>

其中：href="javaScript:void(0)

在做页面时，如果想做一个链接点击后不做任何事情，或者响应点击而完成其他事情，可以设置其属性 href = "#"，但是，这样会有一个问题，就是当页面有滚动条时，点击后会返回到页面顶端，或者是跳到设置的锚点的地方，用户体验不好。 
//点击链接之后什么也不做
<a href="javascript:void(0)">单击此处看看效果</a> 
//点击链接后，响应用户自定义的点击事件 
<a href="javascript:void(0)" onclick="doSomething()">test</a>

JS中的三大包装对象

<script type="text/javascript">
    //三个包装对象
    //java中8大基本数据类型都有对应的包装类
    //js中5个原始类型,有3个包装类. => Number String Boolean
//------------------------------------------------------------------
    //java中  有自动拆装箱机制来方便基本数据类型的转换,已经包装方法的调用.
    //js中  有伪对象的概念.原始类型可以直接调用 对应包装类型的属性或函数.
//-------------------------------------------------------------------   
    // String
    //1 创建
    //填写任何类型的参数都可以.
    //也就是说构造方法具有强制数据类型转换的功能.=>  Number String Boolean 的构造都具有强制数据类型转换的功能
    var str = new String("hello");
    //2 属性
    /* alert(str.length);
    alert("world".length); */
    //3 方法
    //一:没有用的=>帮助生成Html标签的方法
        //alert(str.anchor("haha"));
    //二:有用的 => 与java一样
    var str2 = new String("hello world");
        //charAt
        alert(str2.charAt(1));
        //indexof
        alert(str2.indexOf("e", 0));
        //lastindexof
        //substring
        alert(str2.substring(0, 5));
        //toLowerCase/toUpperCase
    //三:有用的=>与正则结合使用的
        //split
        //replace
        //match
        //search


</script>

JS中的instance of 运算符

<script type="text/javascript">
    //Instance of 与java中 一样, 用于判断变量是否属于指定类型

    var str = new String("abc");

    alert(str instanceof String);//true

    alert("abc" instanceof String);//false

</script>

JS中的Global对象

<script type="text/javascript">
    // encodeURI/decodeURI 可以将中文Url编码 例如:  汤姆=>%E6%B1%A4%E5%A7%86
    // encodeURIComponent/decodeURIComponent 转换的范围更大,包括一些url中的字符. & : /
    //username=%E6%B1%A4%E5%A7%86

    var str ="http://www.baidu.com?wd=&汤?姆";
    var encodeStr = encodeURIComponent(str);
    alert(encodeStr);
//------------------------------------------    
</script>

<script type="text/javascript">
// parseInt  转换成整数  => 从左到右依次转换.转换到遇到不能转换的字符为止
// parseFloat 转换成浮点数

var str = "123";

var num1 = parseInt(str);
var num2 = +str;
var num3 = new Number(str);

//alert(typeof num);
//------------------------------------------
var str2 = "123a";

//alert(+str2);
//alert(parseInt(str2));//123
//-------------------------------------------
var str3 = "a123";

//alert(parseInt(str3));//NaN
//-------------------------------------------
var str4= "3.14";

//alert(parseFloat(str4));//3.14
//alert(parseInt(str4));//3
</script>

<script type="text/javascript">
//isNaN() 判断一个值是否是NaN 
var num = NaN;

/* if(isNaN(num)){
    alert("是NaN");
}else{
    alert("不是NaN");
} */
//-------------------------------------------------
//eval() 解析运行 方法

alert(eval("1+1"));//2
alert(eval("new String('abc')"));// abc

</script>

注意，NaN==NaN为fulse

Math对象
在Global对象中，Math相当于一个工具类。

<script type="text/javascript">
//math 数学工具类 
    //属性
        //PI 圆周率
    //方法
        // random 随机数
        var num = Math.random();
        //alert(num);
        // round  四舍五入
        var  num2 = Math.round(3.54);
        //alert(num2);
        //pow 计算幂
        var num3 = Math.pow(2, 3);
        //alert(num3);8
        // min/max  返回最小/最大数
        var num4 = Math.min(1,2,3);
        alert(num4);
        var num5 = Math.max(1,2,3);
        alert(num5);
</script>

Array对象

<script type="text/javascript">
    //数组
    //对象的功能
        //表达数组,类似于java中的数组. 可以存取值
    //对象的创建
        var arr1 = [1,2,3,4];
        var arr2 = new Array(1,2,3,4);
        var arr3 = new Array(4);// 如果调用数组构造,只传递一个参数,并且参数的值是数字.那么该值将作为数组初始化长度
        alert(arr3);
    //对象的属性
        // length  长度
        //alert(arr1.length);//4
        //alert(arr2.length);//4
        //alert(arr3.length);//4
    //对象的方法
        //pop 弹栈  将0索引 的变量移除并返回
        //push 压栈 将一个值放入数组的0索引位置
        //reverse 将数组反转 => 会对数组本身顺序进行调整
            //alert(arr1.reverse());
        //sort 排序 => 默认会按照字符串比较的方式排序.而不是数字.

        var arr5 = [100,1,5,9,2,3,8,7];

        //alert(arr5.sort(abc));

        // sort 可以传入一个比较器 => 比较器决定排序规则

        function abc(a,b){
            return a-b;
        }
    //----------------------------------------------------------------------
    //进阶  js中的array没什么原则
        //1 数组中元素的类型可以任意
        //2 数组的长度是可以随时变化的.
        var arr6 = ["haha",3.14,true,null,undefined,new Object()];

        alert(arr6.length);

        arr6[10] = "itcast";
        alert(arr6[10]);//itcast
        alert(arr6.length);// 11

        alert(arr6[9]);//undefined
</script>

JS中的Date对象

<script type="text/javascript">
//Date对象  => 日期

//1 创建
    var date1 = new Date();
    var date2 = new Date(12983798123121);
//2 方法
    //1.new Date() 获取当前时间
    //2.getFullYear() 获取年份
    alert(date2.getFullYear());
    //3.getMonth() 获取月份注意 1月份结果为0
    alert(date2.getMonth());
    //4.getHours() 小时
    alert(date2.getHours());
    //5.getDate() 日期
    alert(date2.getDate());
    //6.getMinutes() 分钟
    alert(date2.getMinutes());
    //7.getSeconds() 获取秒
    alert(date2.getSeconds());
    //8.getTime()  获取毫秒值.
    alert(date2.getTime());
    //9.toLocaleString() 获取本地的时间格式字符串.
    alert(date2.toLocaleString());
</script>

参照的基准是1970年1月1日 8：00其中new Date（）当中传的是一个距离标准时间的毫秒值。

JS中的正则对象

<script type="text/javascript">
//正则对象  =>  使用正则匹配字符串.
//表单校验时会用到正则

    //1 创建
        //参数1: 正则表达式
        //参数2: 匹配模式. g: 全局  i: 忽略大小写
    var reg1 = new RegExp("e","gi");
    var reg2 = /z/g;
    //2 方法
    // test 方法 => 校验 字符串是否能与正则表达式匹配
    //alert(reg2.test("hello"));//true
//------------------------------------------------------------------------
// String 与正则结合的 4个方法
    var str = "hello world";
    //split 切割
    alert(str.split(/o/g));
    //replace 替换
    alert(str.replace(/l/g, "a"));
    //match 匹配并获得 => 找不到就返回null
    alert(str.match(/or/g));//or
    //search 查找索引
    alert(str.search(/e/g));//1
</script>

JS中的BOM对象

Window 对象

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

        <script type="text/javascript">
        //1 如何获得window对象
                //window对象 由浏览器创建.当浏览器加载页面时,浏览器会立刻自动创建window对象.
                // 如果要获得,直接使用即可.

            //alert(window); // 就可以拿到
        //2 window中的方法
            // alert
            // confirm  弹出确认框
            // prompt 弹出一个输入框 返回值为str. 点击取消返回null.
                //---------------------------------
                //var b = confirm("您确定要删除吗?");
                //alert(b);
                //---------------------------------
            var str =   prompt("请输入一个整数!","0");
            alert(typeof str);
 //-------------------------------------------------------------------------

        </script>

    <script type="text/javascript">
        //window对象
        //  close方法 => 关闭当前窗口
        function close2(){
            window.close();         
        }
        //  open方法  => 打开一个新的窗口
        //参数1: 打开的url
        //参数2: 窗口名称=> name属性
        //参数3: 窗口的特征=> 长宽(其他属性未必好使)...
        //参数4: 是否将新窗口的地址加入到浏览器历史记录中
        // 返回值: 返回一个window对象. 新打开的窗口的window对象
        function open2(){

            window.open("../猜数字.html", "",'width=100,height=100');

        }
    </script>

    <script type="text/javascript">
        //window对象
        //定时器方法
        // setInterval  设置定时器
        // clearInterval 清除定时器
        //-----------------------------------------------
        //参数1: 可以是一段string, 内容是js代码
        //参数2: 毫秒单位的时间
        //返回值: 当前开启的定时器id
        // 功能: 每个参数2毫秒,执行参数1代码.
        var id = window.setInterval("alert('abc');", 2000);
        //------------------------------------------------
        function stop(){
            window.clearInterval(id);
        }
    </script>

    <script type="text/javascript">
        //window对象
        //定时器方法
        // setTimeout  设置定时器
        // clearTimeout 清除定时器
        //-----------------------------------------------
        //参数1: 可以是一段string, 内容是js代码
        //参数2: 毫秒单位的时间
        //返回值: 当前开启的定时器id
        // 功能:参数2毫秒后,执行参数1代码(只执行一次).
        var id = window.setTimeout("alert('abc');", 2000);
        //------------------------------------------------
        function stop(){
            window.clearTimeout(id);
        }



    </script>

History对象

  <body>
        <a href="06-history对象02.html" >06-history对象02.html</a>
        <input type="button" onclick="window.history.forward()"  value="前进"  />
        <input type="button" onclick="window.history.go(1)"  value="前进"  />
  </body>

  <body>
        <input type="button" onclick="window.history.back()"  value="后退"  />
        <input type="button" onclick="window.history.go(-1)"  value="后退"  />
  </body>

Location对象

  <body>
        <input type="button" onclick="window.location.href='01-Window对象.html'"  value="01-Window对象.html"  />
        <input type="button" onclick="window.location.assign('01-Window对象.html')"  value="01-Window对象.html"  />
        <input type="button" onclick="window.location.reload()"  value="刷新"  />
  </body>
</html>

DOM对象

DOM结构

 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

    <script type="text/javascript">
        //dom的所有对象会在页面打开时,由浏览器负责创建.
        //我们如何获得这些dom对象?
        // 浏览器把 dom的定点对象 Document对象的引用交给了 window对象
   //代码:window.document

    //document  
        var doc = window.document;

        //alert(doc);
    //element 的获得 (重点)
        var div1 = document.getElementsByTagName("div")[0];
        var div2 = document.getElementById("one");
        var div3 = document.getElementsByClassName("two")[0];
        var div4 = document.getElementsByName("three")[0];
        alert(div3 == div4);
    </script>

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

  <body>
        <input type="button" value="点我" id="one" onclick="alert('heihei')" />
  </body>
    <script type="text/javascript">
        //演示 给id为one的 按钮 添加事件的方法
        //方式1:  
            /* //1 获得要添加的元素对象
            var one = document.getElementById("one");
            //2 添加事件函数属性
            one.onclick=function(){
                alert("haha");
            } */
        //方式2:
            // <input type="button" value="点我" id="one" onclick="alert("heihei")" />    
    </script>
</html>

    <script type="text/javascript">
            var one = document.getElementById("one");

            one.onblur=function(){
                alert("失去焦点!");
            }
            one.onfocus=function(){
                alert("得到焦点!");
            }
    </script>

可以添加各种点击事件。

  <body>
        <input type="text" id="one"  />

        <select id="two" >
            <option>大专</option>
            <option>本科</option>
        </select>
  </body>
    <script type="text/javascript">
            var one = document.getElementById("one");

            one.onchange=function(){
                alert("被改变了!");
            }


        var two = document.getElementById("two");

        two.onchange=function(){
                alert("被改变了!");
            }
    </script>

Event对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态

    <script type="text/javascript">
   /*  onkeydown 某个键盘按键被按下。 3 1 No Yes 
    onkeypress 某个键盘按键被按下并松开。 3 1 9 Yes 
    onkeyup 某个键盘按键被松开。 3 1 9 Yes  */

    //event =>　封装了事件发生的详情
        //keyCode属性 => 按下按键的unicode码

            var one = document.getElementById("one");

            one.onkeydown=function(event){
                //1 获得摁下的按键
                var key = event.keyCode;
                //2 判断按键按下的是否是回车
                if(key==13){
                        //是=>表单提交
                    alert("表单被提交了");                    
                }
            }

    </script>

<html>
  <head>
    <title>07-dom中的事件05.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <style type="text/css">
    div{
        border:1px red solid;
        width:300px;
        height: 300px;
    }
 </style>
  </head>


  <body  >
        <div id="one">

        </div>
  </body>

   <script type="text/javascript">
   /*  onmousedown 鼠标按钮被按下。 4 1 9 Yes 
       onmouseup 鼠标按键被松开。

        onmouseout 鼠标从某元素移开。 4 1 9 Yes 
        onmouseover 鼠标移到某元素之上。 3 1 9 Yes 

        onmousemove 鼠标被移动。 3 1 9 Yes 
          */
    var one = document.getElementById("one");

/*  one.onmousedown =function(event){
            alert(event.button);
        }
    one.onmouseout =function(event){
        alert("onmouseout");
    }
    one.onmouseover =function(event){
        alert("onmouseover");
    } */
    one.onmousemove =function(event){
        alert(event.clientX+"==>"+event.clientY);
    }
    </script>
</html>

相关节点的增删改查

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>节点的增删改查</title>
<!--加入样式表-->
<style type="text/css">
div {
    border:#0099FF 1px solid;
    height:60px;
    width:120px;
    margin:20px 0px 20px 20px;
    padding:10px 0px 0px 20px;
    }

#div_1{
    background-color:#00FFFF;
    }

#div_2{
    background-color:#FF3399;
    }

#div_3{
    background-color:#0000FF;
    }

#div_4{
    background-color:#FFFF66;
    }
</style>


</head>



<body>
    <div id="div_1">

    </div>

    <div id="div_2">
    div区域2
    </div>

    <div id="div_3">
     div区域3
    </div>



    <div id="div_4">
    div区域4
    </div>


    <hr />
    <input type="button" value="创建并添加节点" onclick="addNode()" />
    <input type="button" value="删除节点" onclick="deleteNode()" />
    <input type="button" value="替换节点" onclick="updateNode()" />
    <input type="button" value="克隆节点" onclick="copyNode()" />

</body>
<script type="text/javascript">
        //创建并添加节点
        function addNode(){
                // 1 创建A标签对象   <a></a>
                var a = document.createElement("a");
                // 2 为创建的a标签增加属性
                a.setAttribute("href", "http://www.itcast.cn");
                // 3 为a标签添加标签体
                a.innerHTML = "点我";
                // 4 找到div标签
                var div_1 = document.getElementById("div_1");
                // 5 添加
                div_1.appendChild(a);

        }
        //删除节点
        function deleteNode(){
            //1 获得要删除的div
            var div_2 = document.getElementById("div_2");
            //2 获得div的父元素
            var parent = div_2.parentNode;
            //3 通过爹删除孩子
            parent.removeChild(div_2);
        }
        //替换节点
        function updateNode(){
            //1 获得被替换的div
            var div_3 = document.getElementById("div_3");
            //2 创建img元素对象<img />
            var img = document.createElement("img");
            //3 为img添加属性
            img.setAttribute("src", "mn.jpg");
            img.setAttribute("width", "300");
            //4 找到爹
            var parent = div_3.parentNode;
            //5 替换
            parent.replaceChild(img, div_3);
        }
        //克隆节点
        function copyNode(){
            // 1.获得div4
            var div_4 = document.getElementById("div_4");
            // 2.调用克隆方法克隆
            var div_copy = div_4.cloneNode(true);
            // 3.获得父亲\
            var parent = div_4.parentNode;
            // 4.添加到最后一个div之前
            //parent.appendChild(div_copy);
            parent.insertBefore(div_copy, div_4);
        }
</script>

</html>

Thingvellir

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JAVA EE-JS

JAVASCRIPT 笔记整理即使是一个智慧的地狱，也比一个愚昧的天堂好些。 —— 雨果ECMAScript实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的： 1. 核心（ECMAScript） 2. 文档对象模型（DOM） Document object model(整合js和html和css) 3. 浏览器对象模型（BOM） Broswer ob
复制链接

扫一扫