JavaScript_01_基本语法，DOM树的操作，事件介绍

最新推荐文章于 2024-07-26 20:46:33 发布

gmx_holic

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量165

点赞数

分类专栏： JavaScript 文章标签：脚本语言 javascript 前端

本文链接：https://blog.csdn.net/weixin_48672332/article/details/106938260

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JavaScript_01_基本语法，DOM树的操作，事件介绍

简介

1.JavaScript 是一种客户端脚本语言。运行在客户端浏览器中，每一个浏览器都具备解析 JavaScript 的引擎。

2.脚本语言：不需要编译，就可以被浏览器直接解析执行了。

3.核心功能就是用于网页的交互，让网页变得更加生动，提高用户的体验

4.语言组成

组成部分	作用
ECMA Script	所有脚本语言规范，构成了JavaScript语法基础
BOM	Browser Object Model 浏览器对象模型，用来操作浏览器中各种对象
DOM	Document Object Model 文档对象模型，用来操作网页中各种元素

5.标签

导入方式：

a.内部方式：<script></script>

b.外部方式：<script src=js文件路径></script>

两个属性：

a. src 导入外部js脚本

b. type 指定脚本的类型，可选

基本语法

1.注释

// 单行注释

多行注释

2.变量和常量

JavaScript 属于弱类型的语言，定义变量时不区分具体的数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量和常量</title>
</head>
<body>
    
</body>
<script>
    //1.定义局部变量
    let name = "张三";
    let age = 23;
    //document.write()在网页输出内容
    document.write(name + "," + age +"<br>");

    //2.定义全局变量
    {
        let l1 = "aa";//定义局部变量
        var l2 = "bb";//定义全局变量
        l3 = "cc";//定义全局变量
    }
    //document.write(l1);会报错Uncaught ReferenceError: l1 is not defined
    document.write(l2 + "<br>");//bb
    document.write(l3 + "<br>");//cc

    //3.定义常量
    const PI = 3.1415926;
    //PI = 3.15;会报错Uncaught TypeError: Assignment to constant variable.
    document.write(PI);
</script>
</html>

3.原始数据类型

关键字	说明
number	数值型，包括整数和浮点数
boolean	布尔类型，true或false
string	字符串类型，可以使用单引号，双引号，反引号
object	对象类型
undefined	未定义的类型
bigint	大整数，例如：let num = 10n;

用typeof方法查看数据类型

<script>
    let l1 = true;
    document.write(typeof(l1) + "<br>");    // boolean
    let l2 = null;
    document.write(typeof(l2) + "<br>");    // object  js原始的一个错误
    let l3;
    document.write(typeof(l3) + "<br>");    // undefined
    let l4 = 10;
    document.write(typeof(l4) + "<br>");    // number
    let l5 = "hello";
    document.write(typeof(l5) + "<br>");    // string
    let l6 = 100n;
    document.write(typeof(l6) + "<br>");    // bigint
</script>

4.运算符

算数运算符

+加，-减，*乘，/除，%取余，++自增，–自减
赋值运算符

=赋值，+=相加后赋值，-=，*=，/=，%=
比较运算符

==判断值是否相等，===判断数据类型和值是否相等，>，>=，<，<=，!=
逻辑运算符

&&双与，||双或，!取反
三元运算符

（比较表达式a)?表达式1:表达式2

a为真取1，a为假取2

5.流程控制和循环语句

if语句，switch语句，for语句，while语句

<script>
    //if语句
    let month = 3;
    if(month >= 3 && month <= 5) {
        document.write("春季");
    }else if(month >= 6 && month <= 8) {
        document.write("夏季");
    }else if(month >= 9 && month <= 11) {
        document.write("秋季");
    }else if(month == 12 || month == 1 || month == 2) {
        document.write("冬季");
    }else {
        document.write("月份有误");
    }
    document.write("<br>");

    //switch语句
    switch(month){
        case 3:
        case 4:
        case 5:
            document.write("春季");
            break;
        case 6:
        case 7:
        case 8:
            document.write("夏季");
            break;
        case 9:
        case 10:
        case 11:
            document.write("秋季");
            break;
        case 12:
        case 1:
        case 2:
            document.write("冬季");
            break;
        default:
            document.write("月份有误");
            break;
    }

    document.write("<br>");

    //for循环
    for(let i = 1; i <= 5; i++) {
        document.write(i + "<br>");
    }

    //while循环
    let n = 6;
    while(n <= 10) {
        document.write(n + "<br>");
        n++;
    }
</script>

6.数组

<script>
    //定义数组
    let arr = [10,20,30];
    //arr[3] = 40;  js中的数组长度可变，增加长度
    //arr.length = 2; //长度变成2
    //遍历数组
    for(let i = 0; i < arr.length; i++) {
        document.write(arr[i] + "<br>");
    }
    document.write("==============<br>");

    //元素类型：因为JS是弱类型，数组中每个元素类型是可以不同的
    let arr1 = ["abc", true, 50, 3.6];
    document.write(arr1 + "<hr/>");
    document.write("==============<br>");
    
    // 数组高级运算符 ...
    //复制数组
    let arr2 = [...arr];
    //遍历数组
    for(let i = 0; i < arr2.length; i++) {
        document.write(arr2[i] + "<br>");
    }
    document.write("==============<br>");

    //合并数组
    let arr3 = [40,50,60];
    let arr4 = [...arr2 , ...arr3];
    //遍历数组
    for(let i = 0; i < arr4.length; i++) {
        document.write(arr4[i] + "<br>");
    }
    document.write("==============<br>");

    //将字符串转成数组
    let arr5 = [..."helloworld"];
    //遍历数组
    for(let i = 0; i < arr5.length; i++) {
        document.write(arr5[i] + "<br>");
    }
</script>

7.函数

<script>
    //无参无返回值的方法
    function println(){
        document.write("hello js" + "<br>");
    }
    //调用方法
    println();

    //有参有返回值的方法
    function getSum(num1,num2){
        return num1 + num2;
    }
    //调用方法
    let result = getSum(10,20);
    document.write(result + "<br>");

    //可变参数  对n个数字进行求和
    function getSum(...params) {
        let sum = 0;
        for(let i = 0; i < params.length; i++) {
            sum += params[i];
        }
        return sum;
    }
    //调用方法
    let sum = getSum(10,20,30);
    document.write(sum + "<br>");

    //匿名函数
    let fun = function(){
        document.write("hello");
    }
    fun();

DOM树操作

Document：文档对象、Element：元素对象、Attribute：属性对象、Text：文本对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-csUlpaKf-1592964823038)(C:\Users\de’l’l\AppData\Roaming\Typora\typora-user-images\image-20200623191529752.png)]

1.Element元素对象

获取元素的方法	作用
document.getElementById(“id”)	通过id得到一个元素
document.getElementsByTagName (“标签名”)	通过标签名得到一组元素
document.getElementsByName(“name”)	通过name属性得到一组元素
document.getElementsByClassName(“类名”)	通过类名得到一组元素
子元素.parentElement属性	获取当前元素的父元素
创建元素的方法
document.createElement(“标签名”)	创建一个元素
将元素挂到DOM树上的方法
父元素.appendChild(子元素)	将元素追加成最后一个子元素
父元素.removeChild(子元素)	通过父元素删除子元素(他杀)
replaceChild(新元素, 旧元素)	用新元素替换子元素

<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div class="cls">div3</div>
    <div class="cls">div4</div>
    <input type="text" name="username"/>
    <hr>
    <select id="s">
        <option>---请选择---</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
    </select>
</body>
<script>
    //1. getElementById()   根据id属性值获取元素对象
    let div1 = document.getElementById("div1");
    //alert(div1);
    
    //2. getElementsByTagName()   根据元素名称获取元素对象们，返回数组
    let divs = document.getElementsByTagName("div");
    //alert(divs.length);

    //3. getElementsByClassName()  根据class属性值获取元素对象们，返回数组
    let cls = document.getElementsByClassName("cls");
    //alert(cls.length);

    //4. getElementsByName()   根据name属性值获取元素对象们，返回数组
    let username = document.getElementsByName("username");
    //alert(username.length);

    //5. 子元素对象.parentElement属性   获取当前元素的父元素
    let body = div1.parentElement;
    // alert(body);
    
    //6. createElement()   创建新的元素
    let option = document.createElement("option");
    //为option添加文本内容
    option.innerText = "深圳";

    //7. appendChild()     将子元素添加到父元素中
    let select = document.getElementById("s");
    select.appendChild(option);

    //8. removeChild()     通过父元素删除子元素
    //select.removeChild(option);

    //9. replaceChild()    用新元素替换老元素
    let option2 = document.createElement("option");
    option2.innerText = "杭州";
    select.replaceChild(option2,option);
</script>

2.Attribute属性对象

方法	作用
setAtrribute(属性名, 属性值)	设置属性
getAtrribute(属性名)	根据属性名获取属性值
removeAtrribute(属性名)	根据属性名移除指定的属性
style属性	为元素添加样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性的操作</title>
    <style>
        .aColor{
            color: blue;
        }
    </style>
</head>
<body>
    <a>点我呀</a>
</body>
<script>
    //1. setAttribute()    添加属性
    let a = document.getElementsByTagName("a")[0];
    a.setAttribute("href","https://www.baidu.com");

    //2. getAttribute()    获取属性
    let value = a.getAttribute("href");
    //alert(value);

    //3. removeAttribute()  删除属性
    //a.removeAttribute("href");

    //4. style属性   添加样式
    //a.style.color = "red";

    //5. className属性   添加指定样式
    a.className = "aColor";

</script>
</html>

3.Text文本对象

属性名	说明
innerText	添加文本内容，不解析标签
innerHTML	添加文本内容，解析标签

事件

事件指当某些组件执行了某些操作后，会触发某些代码的执行

事件介绍

事件名	说明
onload	页面完成加载
onsubmit	表单提交
onclick	单击
ondblclick	双击
onblur	元素失去焦点
onfocus	元素得到焦点
onchage	用户改变域的内容
onmouseover	鼠标移上
onmouseout	鼠标移出
onmouseup	鼠标按键松开
onmousedown	鼠标按键按下
onkeyup	键盘按键松开
onkeydown	键盘按键按下
onkeypress	键盘按键按下或按住

事件绑定

绑定方式：

1.通过标签中的事件属性进行绑定。

2.通过 DOM 元素属性绑定。document.getElementById(“btn”).onclick = 执行的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件练习</title>
</head>
<body>
    <button id="bt">点我一下试试</button>
    <button onclick="clickMe()">敢点我吗？</button>
</body>
<script>
    //命名函数
    // 方式一：在button标签中属性定义一个事件，属性值为方法
    function clickMe(){
        alert("我是命名函数方式一！")
    }
    //方式二：得到button元素，通过元素对象绑定属性
    // let bt = document.getElementById("bt");
    // bt.onclick = clickMe;
    // bt.onclick = clickMe();//加上括号会马上执行方法里的内容，导致事件失效

    //匿名函数
    //方式三：
    let nm = function(){
        alert("我是匿名函数方式三")
    }
    let bt = document.getElementById("bt");
    bt.onclick = nm;
    //bt.onclick = nm();//加上括号会马上执行方法里的内容，导致事件失效

    //方式四：
    // document.getElementById("bt").onclick = function(){
    //     alert("我是匿名函数方式四")
    // }
</script>
</html>

gmx_holic

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript_01_基本语法，DOM树的操作，事件介绍

JavaScript_01_基本语法，DOM树的操作，事件介绍简介1.JavaScript 是一种客户端脚本语言。运行在客户端浏览器中，每一个浏览器都具备解析 JavaScript 的引擎。2.脚本语言：不需要编译，就可以被浏览器直接解析执行了。3.核心功能就是用于网页的交互，让网页变得更加生动，提高用户的体验4.语言组成组成部分作用ECMA Script所有脚本语言规范，构成了JavaScript语法基础BOMBrowser Object Model 浏览器对象模
复制链接

扫一扫

专栏目录