HTML--JS基础知识

最新推荐文章于 2024-09-10 14:35:29 发布

无所事事的程序员

最新推荐文章于 2024-09-10 14:35:29 发布

阅读量225

点赞数

本文链接：https://blog.csdn.net/qq_43616001/article/details/105534123

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

特点：
1，交互性（它可以做的就是信息的动态交互）
2，安全性（不允许直接访问本地硬盘）
3，跨平台性（只要可以解释js的浏览器都可以执行，和平台无关）

使用方式：

1：在head或body使用script标签

    <script type="text/javascript">
                alert("在吗")
            </script>

2，使用script标签引入单独的Javascript代码文件

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

    注意： 但是功能只能用一个（意思要么执行标签里面的代码，要么执行js文件的代码）

3，JavaScript的变量类型：
    数据类型：number
    字符串类型：string
    对象类型：object
    布尔类型：boolean
    函数类型：function

    特殊的值：
    undefined：  未定义，所有js变量未赋予初始值的时候，默认值都是undefined
    null：       空值
    NAN：        全称：Not a Number。 非数字。非数值

    JS的定义变量格式：
        var 变量名;
        var 变量名=值;

    例子：

      <script type="text/javascript">
                    var i;
                    alert(i)

                    i=12;
                    alert(typeof(i))

                </script>

              返回NAN
                <script type="text/javascript">
                       var i=12;
                       var j="asd";
                       alert(i*j);
                   </script>

  4，关系运算符

     <script type="text/javascript">
                    var i=12;
                    var j="12";
                    alert(i==j);//true
                    alert(i===j);//false
               </script>

5，数组:
    数组会根据最大下标进行扩容

            <script type="text/javascript">
                    var arr=[];
                    arr[0]=12;
                    arr[2]="abc"
                    alert(arr.length);
                    for(var i=0;i<arr.length;i++){
                        alert(arr[i]);
                    }
                </script>

6，函数：

    可以使用function关键字来定义函数，也可以var 函数名=function......
        使用格式如下：
            function 函数名(形参列表){
                函数体
            }

        例：

             <script type="text/javascript">
                    function f() {
                        alert("在吗")
                    }
                    f();//记得要调用函数
                </script>

        在JS中，如果要返回值，直接return返回值即可

                <script type="text/javascript">
                    function f(a,b) {
                        result=a+b;
                        return result;
                    }
                    alert(f(1,2))
                </script>

7，重载
    不允许重载；如果两个函数名一样，直接覆盖上一次的定义


8，隐形参数arguments（只在function函数内）
    就是在function函数中不需要定义，但却可以直接用来获取所有参数的变量。

            <script type="text/javascript">
                function f() {
                    alert(arguments[0]);
                    alert(arguments[1]);
                    alert(arguments.length)
                }
                f(1,2,3)
            </script>

9，对象
    Object形式的自定义对象，也可也用{}形式自定义对象：

      {}形式定义自定义对象：
        var 变量名={
            属性名:值,
            属性名:值
       }

   <script type="text/javascript">
            var a=new Object();
            a.name="Tom"
            a.age=12;
            alert(a.name+"-----"+a.age);
        </script>

10,事件

    常用事件：
        onload： 加载完成       页面加载完成之后，常用于做页面js代码初始化
        onclick：单击事件       常用于按钮点击响应操作
        onblur： 失去焦点       常用于输入框失去焦点后验证其输入内容是否合法
        onchange：内容改变      常用于下拉列表和输入框内容发生改变后操作
        onsubmit：表单提交      常用于表单提交前，验证所有表单项是否合法


    事件注册：
        静态注册：通过html标签的事件直接赋予事件响应后的代码

            <body onload="alert('静态注册事件')">
            </body>

        动态注册：先通过js标签得到标签的dom对象，然后通过dom对象.事件名=function(){}这种形式赋予事件响应后的代码
            1，获取标签对象
            2，标签对象.事件名=function(){}

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

                    <script type="text/javascript">
                        window.onload=function () {
                           var btn = document.getElementById("btn");
                           alert(btn);
                        }
                    </script>

                </head>
                <body>
                    <button id="btn">按钮</button>
                </body>

    getElementsByName练习:

            <head>
                <meta charset="UTF-8">
                <title>Title</title>
                <script type="text/javascript">
                    function oncheck() {
                        var one = document.getElementsByName("test");
                        for(var i=0;i<one.length;i++){
                            one[i].checked=true;
                        }
                    }
                </script>

            </head>
            <body>
                <input type="checkbox" name="test" checked="false" value="1">
                <input type="checkbox" name="test" checked="false" value="2">
                <input type="checkbox" name="test" checked="false" value="2">

                <button onclick="oncheck()"></button>
            </body>

注意：document对象的三个查询方法，如果有id属性，优先使用getElementsById方法进行查询
     如果没有id属性，则优先使用getElementsByName方法进行查询
     如果没有name和id属性，则最后按标签查询getElementsByTagName


11，节点的常用属性和方法：
    方法：
        getElementsByTagName()：获取当前节点的指定标签名孩子节点
        appendChild(onChildNode)：可以添加一个子节点，onChildNode是要添加的孩子节点

    属性：
        childNodes：获取当前节点的所有子节点
        firstChild：获取当前节点的第一个子节点
        lastChild：获取当前节点的最后一个子节点
        parentNode：获取当前节点的父节点
        nextSibling：获取当前节点的下一个节点
        previousSibling：获取当前节点的上一个节点
        className：用于获取或设置标签的class属性值
        innerHTML：表示获取/设置起始标签和结束标签中的内容
        innerTest：表示获取/设置起始标签和结束标签中的文本