JavaScript入门

最新推荐文章于 2024-10-02 05:39:15 发布

Ting-yu

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量928

点赞数 28

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2303_78892316/article/details/136570464

版权

JavaScript用于根据用户的行为做出反应，即用于实现用户和网页的交互过程，JS代码通常写在html代码的body中

1. 基本语法

1.1 引入方式

JS和CSS类似，有三种引入方式：

行内样式：直接嵌套在html元素内部

内部样式：定义<script>标签，写在script标签中

外部样式：定义<script>标签，通过src属性引入外部文件

1.2 变量

JS有三个关键字可以声明变量：

var：声明的变量作用域在该语句的函数内：var name = 'xiaoming';
les：声明的变量作用域为该语句所在代码块：les name = 'xiaoming';
const：声明常量，声明后不能修改：const name = 'xiaoming';

JS的变量类型是不固定的，随着程序运行变量的类型可能发生改变

    <script>
        var a = 20; //数字
        a = 'hello';//字符串
    </script>

可以使用console.log(typeof a)打印a的类型：

    <script>
        var a = 20; //数字
        console.log(typeof a);
        a = 'hello';//字符串
        console.log(typeof a);
    </script>

运行html文件后点击F12在控制台即可看到打印内容

JS中有以下几种原始类型：

number：数字类型，不区分整数和小数

string：字符串类型，字符串值需要用单引号或者双引号引用起来

boolea：布尔类型，true真，false假

undefined：表示变量未初始化

1.3 运算符

JS的运算符和java用法基本相同，多了“ === ” ，和“ !== ”，===和==都是比较是否相等，== 会进行隐式类型转换后比较，===则不会，!= 和 !== 同理。

    <script>
        var a = 20;
        var b = '20';
        console.log(a == b);
        console.log(a === b);
    </script>

2. JavaScript对象

2.1 数组

数组有两种创建方式：

1. 使用 new 关键字创建

    <script>
        var arr = new Array();
    </script>

2. 使用字面量创建

    <script>
        var arr1 = [];
        var arr2 = [111, "222", true];
    </script>

JS中数组中的元素类型可以不相同，数组元素的访问和复制方式和Java相同：

    <script>
        var arr1 = [];
        var arr2 = [111, "222", true];
        console.log(arr2[1]);//222
        arr2[2] = false;
        console.log(arr2[2]);//false
    </script>

JS中可以使用下标，或者push增加数组元素：

    <script>
        var arr1 = [];
        var arr2 = [111, "222", true];
        console.log(arr2[1]);//222
        arr2[2] = false;
        console.log(arr2[2]);//false
        //打印数组长度
        console.log(arr1.length + " " + arr2.length);
        //增加元素
        arr1.push("add");
        arr2[3] = true;
        console.log(arr1.length + " " + arr2.length);
        console.log(arr1[0]);//add
        console.log(arr2[3]);//true
    </script>

可以不连续赋值，例如：

    <script>
        var arr = [111, "222", true];
        arr[100] = '100';
        console.log(arr.length);
        console.log(arr);
    </script>

直接给100号下标赋值，此时数组长度直接变为101，且中间多了97个空元素，。

复制时，下标是负数或者不是数字也能赋值成功，只不过数组长度不会变化:

    <script>
        var arr = [111, "222", true];
        arr['h'] = '100';
        arr[-1] = -1;
        console.log(arr.length);
        console.log(arr);
    </script>

使用splice方法删除元素：

    <script>
        var arr1 = [];
        var arr2 = [111, "222", true];
        console.log(arr2[1]);//222
        arr2[2] = false;
        console.log(arr2[2]);//false
        
        //打印数组长度
        console.log(arr1.length + " " + arr2.length);
        //增加元素
        arr1.push("add");
        arr2[3] = true;
        console.log(arr1.length + " " + arr2.length);
        console.log(arr1[0]);//add
        console.log(arr2[3]);//true

        arr2.splice(1, 2);//从1号下标开始，删除两个元素
        console.log(arr2);
    </script>

注意：如果读取元素越界，结果会为undefined

2.2 函数

JS 中函数使用 function 关键字声明：

    <script>
        function add(x, y) {
            console.log(x + y);
        }
    </script>

函数也是一种数据类型可以赋值给变量：

    <script>
        var a = function add(x, y) {
            console.log(x + y);
        }
    </script>

调用时，可以使用函数名或者储存它的变量加上小括号和参数即可调用，注意如果函数已经被赋值给了变量则不能使用函数名调用，所以函数声明也可简化为：

    <script>
        var add = function (x, y) {
            console.log(x + y);
        }
        add(1, 2);
    </script>

2.3 对象

对象可以包含属性和方法

创建方式：

    <script>
        var a = {};//创建了一个空对象
        var student = {
            name:"xiaoming",
            sex:"男",
            age:18,
            say:function() {
                console.log("hello");
            }
        }
    </script>

访问方式：

    <script>
        var a = {};//创建了一个空对象
        var student = {
            name:"xiaoming",
            sex:"男",
            age:18,
            say:function() {
                console.log("hello");
            }
        }
        //访问属性
        console.log(student.name);
        console.log(student["sex"]);
        console.log(student.say());

        //增加属性
        student.id = 123456;
        student["hight"] = 175;

        console.log(student);
    </script>

还可以使用new Object创建对象：

<script>
        var b = new Object();//相当于创建了一个空对象，属性需要自己添加
</script>

也可以创建一个构造函数，使用构造函数创建对象：

    <script>
        function cat(name, sex, age) {
            this.name = name;
            this.sex = sex;
            this.age = age;
        }
        var a = new cat("小白", "man", 2);
        console.log(a);
    </script>

注意使用构造方法需要用new 关键字

3. JQuery

JQuery是一个JavaScript框架，它封装了JavaScript常用的功能代码，方便了开发人员处理各种需求。

3.1 引入依赖

使用JQuery需要先引入对应的库，我们可以从官方网站获取到JQuery库所在的地址：jQuery CDN

点击uncompressed（未压缩版本）或minified（压缩版本）：

复制src属性后的url填写到script标签中即可。一般推荐把JQuery库下载到本地，复制url用浏览器打开右键点击另存为即可，使用文件路径引入库。

3.2 基本语法

JQuery语法是通过选取html元素，并对选取的元素执行某些操作。

    <script src="jquery-3.7.1.min.js"></script>
    <script>
        $(selector).action()
    </script>

$()是一个函数，用于选择和操作html元素
selector选择器，用来查询选择的html元素
action操作，执行对元素的操作

JQuery的代码通常都写在document ready函数中

document表示整个文档对象，一个页面就是一个文档对象。

    <script src="jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function(){
            
        })
    </script>

上述代码表示在文档加载完成后执行函数，如果没加载完成就执行可能会执行失败。可以简写为以下方式：

    <script src="jquery-3.7.1.min.js"></script>
    <script>
        $(function(){

        });
    </script>

JQuery语法可以理解为：元素，做什么。document就代表元素，ready代表加载完后，function函数里包含了要做什么

示例：

    <script src="jquery-3.7.1.min.js"></script>
    <script>
        $(function(){
            $("button").click(function(){
                $(this).hide();
            });
        });
    </script>

例如这个代码，页面加载完后，选择button标签，点击按钮后，选择 this 即当前对象button标签，hide表示消失，即点击后消失。

3.3 事件

网页和用户的交替的前提是网页能感知到用户的操作。

用户对于网页的操作，例如点击，选择，等都会在网页中产生一个事件。

事件由三部分组成：

事件源：哪个元素触发的。
事件类型：点击，选择，修改，例如上面的ready()和click()。
事件处理程序：事件触发后做什么。

3.4 操作元素

3.4.1 获取/设置元素内容

text()：设置或返回所选元素的文本内容
html()：设置或返回所选元素的内容，包括html标签
val()：设置或返回表单字段的值

方法有参数时代表设置内容，无参数时代表获取内容

取值示例：

    <div>
        <span>span</span>
    </div>
    <input type="text" value="hello">
    <script src="jquery-3.7.1.min.js"></script>
    <script>
        $(function(){
            var a = $("div").text();
            var b = $("div").html();
            var c = $("input").val();
            console.log(a);
            console.log(b);
            console.log(c);
        });
    </script>

注意input的取值只能使用val

赋值示例：

    <div id = "text">
        <span>span</span>
    </div>
    <div id = "html">
        <span>span</span>
    </div>
    <input type="text" value="hello">
    <script src="jquery-3.7.1.min.js"></script>
    <script>
        $(function(){
            $("#text").text("<h1>span</h1>");
            $("#html").html("<h1>span</h1>");
            $("input").val("world");
        });
    </script>

3.4.2 获取/设置元素的属性

attr()用于获取/设置元素的属性：

    <div name = "div" id = "two">这是一个div</div>
    <script src="jquery-3.7.1.min.js"></script>
    <script>
        $(function(){
            //获取属性
            var a = $("div").attr("name");
            var b = $("div").attr("id");
            console.log(a);
            console.log(b);
        });
    </script>

    <div name = "div" id = "two">这是一个div</div>
    <script src="jquery-3.7.1.min.js"></script>
    <script>
        $(function(){
            //修改属性
            $("div").attr("name", "DIV");
            $("div").attr("id", "TWO");
        });
    </script>

3.4.3 获取/返回css属性

css()方法可以设置或返回被选元素的一个或多个样式属性

    <div style = "font-size: 36px;">hello</div>
    <script src="jquery-3.7.1.min.js"></script>
    <script>
        $(function(){
            //获取
            var a = $("div").css("font-size");
            console.log(a);
            //设置
            $("div").css("font-size", "48px");
            $("div").css("color", "red");
        });
    </script>

3.4.4 添加元素

append()：在被选元素的结尾插入内容（标签内）
prepend()：在被选元素的开头插入内容（标签内）
after()：在被选元素之后插入内容（标签外）
before()：在被选元素之前插入内容（标签外）

    <div>
        <span>111</span><br/>
        <span>222</span><br/>
        <span>333</span><br/>
    </div>
    <script src="jquery-3.7.1.min.js"></script>
    <script>
        $(function(){
            $("div").append("<span>444</span><br/>");
            $("div").prepend("<span>000</span><br/>");
            $("div").after("<div>after</div>");
            $("div").before("<div>before</div>")
        });
    </script>

3.4.5 删除元素

remove()：删除被选元素

empty()：删除被选元素的子元素

    <div>
        <span>111</span><br/>
        <span>222</span><br/>
        <span>333</span><br/>
    </div>
    <script src="jquery-3.7.1.min.js"></script>
    <script>
        $(function(){
            $("div").remove();
        });
    </script>

使用remove可以看到，div和它的子元素都消失了。

    <div>
        <span>111</span><br/>
        <span>222</span><br/>
        <span>333</span><br/>
    </div>
    <script src="jquery-3.7.1.min.js"></script>
    <script>
        $(function(){
            $("div").empty();
        });
    </script>