JavaScript快速入门(二)

文件中引入JavaScript

嵌入到HTML文件中

在body或者head中添加script标签

<script>
    var age = 10;
    console.log(age);
</script>

引入js文件

创建一个js文件

var age = 20;
console.log(age);

在html文件中src引入改文件

<body>
    <script src="./age.js"></script>
</body>

引入网络来源文件,和引入本地的js文件一样,通过src

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</body>

 数据类型

原始数据类型:基本的数据类型(数值、字符串、布尔值)

复合数据类型:对象(一个对象可以看做是存放各种值得容器,由基础数据类型组成)

var user = {
    "name":"ming",
    age:20,
    is_register:True
} 

特殊数据类型:null和undefined

typeof可以用来判断基础数据类型

<body>
    <script>
        var age = 20;
        console.log(typeof age);
    </script>
</body>

算数运算符

加减乘除取余:+ 、-、*、/、%

自增或者自减相当于当前值+1或者-1

<body>
    <script>
        var num = 20;
        console.log(++num);
        console.log(--num);
    </script>
</body>

自增自减需要注意,有两种写法一种运算符号在前,一种运算符号在后,两种效果不一样

运算符号在前是先自增再运行,运算符号在后是先运行在自增

<body>
    <script>
        var num = 20;
        console.log(++num); // 21
        var num1 = 20;
        console.log(num1++); // 20
    </script>
</body>

 赋值运算符

赋值运算符 表达式
= 赋值运算符
+= x +=y 等同于 x= x+y
-= x -=y 等同于 x = x-y
*= x *= y 等同于 x = x*y
/= x /= y 等同于 x = x/y
%= x %= y 等同于 x = x % y

比较运算符

比较运算符 描述
< 小于
> 大于
<= 小于或者等于
>= 大于或者等于
== 相等
=== 严格相等
!= 不相等
!== 严格不相等

== 和 ===区别

<body>
    <script>
        var num = 20;
        var num1 = 20;
        var num2 = "20";
        console.log(num == num1); // True
        console.log(num == num1); // True
        console.log(num == num2); // True
        console.log(num === num2);// 严格比较数值和类型 False
        console.log(num != num2);// False
        console.log(num !== num2);// True 类型不一致
    </script>
</body>

布尔运算符

取反运算符(!)

<body>
    <script>
        var flag = true;
        console.log(!flag);
    </script>
</body>

提示 undefind 、null、false、0、NaN、空字符串 取反都为true

且运算符(&&)

<body>
    <script>
        console.log(10<20 && 10>5); // True
    </script>
</body>

活运算符(||)

<body>
    <script>
        console.log(10>20 || 10>5); // True
    </script>
</body>

 用Switch简化多个if...else....

swith后面跟表达式,case后面记得一定要加上break,不加上break会把后续的都执行,最后default就是以上case都不是执行

<body>
    <script>
        var day = 3;
        switch(day){
            case 0:
                console.log("今天周一");
                break;
            case 1:
                console.log("今天周二");
                break;
            case 2:
                console.log("今天周三");
                break;
            default:
                console.log("今天不是周一、二、三")
        }
    </script>
</body>

 用三目运算符来代替if...else...

<表达式>?y :x

表达式正确返回y,错误则返回x

<body>
    <script>
        var num = 10;
        var result = num % 2 == 0 ? "是偶数" : "是奇数";
        console.log(result)
    </script>
</body>

 字符串

<body>
    <script>
        //字符串要么使用单引号嵌套双引号,要么使用双引号嵌套单引号
        var str1 = '我说"你好呀"';
        //如果想使用双引号嵌套双引号,单引号嵌套单引号或者换行就需要用到反斜杠
        var str2 = '我说\'你好呀\'';
        var str3 = "今天天气真好,\
        我想出去玩";
        console.log(str1,str2,str3);
    </script>
</body>

用属性length来查看字符串长度

<body>
    <script>
        var str3 = "今天天气真好,\
        我想出去玩";
        console.log(str3.length);
    </script>
</body>

charAT查看索引位置的字符串

<body>
    <script>
        var str = "yetangjian的博客园";
        console.log(str.charAt(1)); // 查看索引1位置的字符串e
        console.log(str.charAt(str.length -1));//查看最后一位的字符园
        //如果索引不存在会打印出来空字符串
        console.log(str.charAt(-1));
        console.log(str.charAt(str.length+1));
    </script>
</body>

concat连接两个字符串,创建新的字符串,不影响老的字符串(拼接的如果不是字符串,也会先转为str再拼接)

同样也可以用“+”拼接

<body>
    <script>
        var str = "yetangjian的博客园";
        var str1 = "丰富多彩呀~~";
        var result = str.concat(str1);
        document.write(result);//页面上展示出来拼接后的
        // 可以接收多个参数拼接
        var str3 = "看的停不下来了";
        document.write(str.concat(str1,str3));
    </script>
</body>

concat和+号的区别

+号会先运算数字类型在转,所以下方会先做1+2后再转字符串

concat不管什么,都会转字符串拼接

<body>
    <script>
        var num1 = 1;
        var num2 = 2;
        var str3 = "3";
        document.write("".concat(num1,num2,str3)); // 123
        document.write(num1+num2+str3);// 33
    </script>
</body>

substring截取字符串,两个参数,参数1开始的位置的索引,第二个参数结束位置的索引(结束索引位置不取,左闭右开)

<body>
    <script>
        var str = "yetangjian的博客园";
        // 截取博客园三个字,左闭右开
        document.write(str.substring(11,str.length));
        // 省略第二个参数,直接取到最后
        console.log(str.substring(11)); //博客园
        //在substring中参数如果是负数,直接当索引0用
    </script>
</body>

substr用法基本和substring一样,区别是第二个参数不在是结束位置的索引,而是字符串的长度

<body>
    <script>
        var str = "yetangjian的博客园";
        var result = str.substr(11,3);//从索引位置11开始取,截取长度为3
        document.write(result);//博客园
        //如果省略第二个参数,直接取到结尾,如果第二个参数是个负数,会变为0即字符串长度为0的空字符串
        console.log(str.substr(11));//博客园
        console.log(str.substr(11,-4));//空字符串
        //如果第一个参数是负数,则从后向前计算字符位置,这个和之前的字符串不太一样
        console.log(str.substr(-3));
    </script>
</body>

indexof查询字符串第一次出现的位置,不存在则返回-1

<body>
    <script>
        var str = "yetangjian的博客园";
        // 判断上述字符换中是否存在博客园
        if (str.indexOf("博客园") > -1){
            console.log("存在");
        }else{
            console.log("不存在");
        }
        // 参数2位置开始索引位置
        console.log(str.indexOf("博客园",12));//从12索引位置不存在了,所以返回-1
    </script>
</body>

trim方法去除首尾两端的空格,包括\r \n \t都能去掉

<body>
    <script>
        var str = "   yetangjian的博客园   ";
        console.log(str);//   yetangjian的博客园   
        console.log(str.trim());//yetangjian的博客园
    </script>
</body>

split方法是按分隔符,返回一个分割出来的字符串数组

<body>
    <script>
        var str = "yetangjian|的|博客园";
        var result = str.split("|");
        console.log(result);// ["yetangjian", "的", "博客园"]
        console.log(str.split(""));//["y", "e", "t", "a", "n", "g", "j", "i", "a", "n", "|", "的", "|", "博", "客", "园"]
        //存在第二个参数可以设置获取数组的长度
        console.log(str.split("",2));//["y", "e"]
    </script>
</body>

 数组

查询、追加

<body>
    <script>
        var arr = [];
        arr[1] = 1 // 通过下标加入数组值
        console.log(arr)
        console.log(arr[1])//1
        console.log(arr.length)//2
    </script>
</body>

遍历

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing"]
        // for 
        for (var i=0;i<city.length;i++){
            console.log(city[i]);
        }
        // while
        i = 0
        while (i < city.length){
            console.log(city[i]);
            i++
        }
        // for in 
        for (var i in city){
            console.log(city[i]);
        }
    </script>
</body>

数组静态方法Array.isArray():判断是否为数组

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing"]
        console.log(typeof(city));//object
        console.log(Array.isArray(city));//true
    </script>
</body>

push()/pop()方法:改变原数组末尾增加或删除

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing"]
        //push
        city.push("nanjing");
        city.push("fujian","xiamen");//向尾部添加一个或多个
        console.log(city);
        //pop
        var deleteend = city.pop();
        console.log(deleteend);//"xiamen"
        console.log(city);//["shanghai", "guangzhou", "beijing", "nanjing", "fujian"]
    </script>
</body>

shift()/unshift:改变原数组在数组起始位置添加或删除

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing"];
        //shift
        var shiftfirst = city.shift();
        console.log(shiftfirst);//shanghai
        console.log(city);//["guangzhou","beijing"]
        //unshift
        city.unshift("hefei","chongqing");
        console.log(city);// ["hefei", "chongqing", "guangzhou", "beijing"]
    </script>
</body>

join按指定分隔符拼接数组成员,默认都是逗号

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing"];
        //join
        document.write(city.join());//shanghai,guangzhou,beijing
        document.write(city.join("|"));//shanghai|guangzhou|beijing
        document.write(city.join(""));//shanghaiguangzhoubeijing
        //join可以把数组拼成字符串,split可以把字符串拆成数组
        var result = city.join("|");
        console.log(result);
        var newArr = result.split("|");// shanghai|guangzhou|beijing
        console.log(newArr);//["shanghai", "guangzhou", "beijing"]
    </script>
</body>

concat数组合并

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing"];
        var contry = ["China","Japan"]
        //concat和+号区别
        console.log(city + contry);//变为字符串了shanghai,guangzhou,beijingChina,Japan
        console.log(city.concat(contry));//还是数组["shanghai", "guangzhou", "beijing", "China", "Japan"]
        //使用concat数组追加,注意看下面例子
        console.log(city.concat(1,2,3,[4,5,6]));// ["shanghai", "guangzhou", "beijing", 1, 2, 3, 4, 5, 6]
    </script>
</body>

reverse翻转

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing"];
        console.log(city.reverse());//["beijing", "guangzhou", "shanghai"]
        //翻转字符串
        var word = "apple";
        console.log(word.split("").reverse().join(""));//elppa
    </script>
</body>

indexof返回元素在数组中第一次出现的位置,没有则返回-1

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing","shanghai"];
        console.log(city.indexOf("shanghai"));//0
        console.log(city.indexOf("nanjing"));//-1
        //第二个参数为起始位置
        console.log(city.indexOf("shanghai",2));//3
    </script>
</body>

 Math对象

Math.abs()绝对值

<body>
    <script>
        var num = -100;
        console.log(Math.abs(num));
    </script>
</body>

max和min返回最大最小值

<body>
    <script>
        console.log(Math.max(10,0,30,-5));//30
        console.log(Math.max());//-Infinity
    </script>
</body>

向上取整,向下取整

<body>
    <script>
        var num1 = 10.1;
        console.log(Math.floor(num1));//floor地板的意思,向地板取整,10
        console.log(Math.ceil(num1));//ceil天花板的意思,向天花板取整,11
    </script>
</body>

random随机数

<body>
    <script>
        console.log(Math.random());//Math.random() >=0 && Math.random()<1
    </script>
</body>

 Date对象

<body>
    <script>
        console.log(Date.now());//时间戳:是指格林威治时间1970年1月1日 00:00:00 到现在的总秒数
        console.log(Date());//当前时间:Sun Apr 09 2023 12:56:46 GMT+0800 (中国标准时间)
        console.log(new Date().getDate());//一定要new一个出来才可以使用Date对象提供的一系列方法
        var d = new Date();
        console.log(d.getMonth() + 1); // 0表示1月
        console.log(d.getDay()); // 获取星期几,周日是0,周一是1
        console.log(d.getFullYear());//年份
        // 今年剩余多少天
        function leftDays(){
            var today = new Date();
            var endDays = new Date(today.getFullYear(),11,31,23,59,59,999); //最后一天的日期时分秒
            return Math.floor((endDays.getTime() - today.getTime()) / (24 * 60 * 60 * 1000) );
        }
    </script>
</body>

 DOM

DOM(文档对象模型)是js操作网页的接口,作用是把网页转换为js对象,从而可以通过脚本对网页元素进行操作

浏览器将HTML解析为一系列节点,再把节点组成DOM Tree,DOM的最小单位是节点node

节点类型有7种: Document:整个文档树的顶层节点;DocumentType:doctype标签;Element:网页标签;Attribute:网页属性(class=right);Text:标签和标签包含的文本;Comment:注释;DocumentFragment:文档片段

 document对象获取元素

<body>
    <div>Hello world</div>
    <div class="name">xiaojianjian</div>
    <div id="pc">haobaobao</div>
    <div class="one two">12</div>
    <div class="one two">13</div>
    <script>
        // document.getElementsByTagName搜索标签名
        var divs = document.getElementsByTagName("div")[0];
        // 把hello world改成hello
        divs.innerHTML = "Hello";
        // document.getElementsByClassName类名
        var names = document.getElementsByClassName("name")[0];
        names.innerHTML = "bigjianjian"; 
        //getElementById,id是唯一的所以不需要后面加下标
        var pc = document.getElementById("pc");
        pc.innerHTML= "huaibaobao";
        //document.querySelector()方法接受一个CSS选择器作为参数,如果存在多个返回第一个
        var one = document.querySelector(".one.two");
        one.innerHTML = 14;//修改了第一个(原来12的位置)
        var two = document.querySelectorAll(".one.two")[1];//通过查询all来所有
        two.innerHTML = 15;
    </script>
</body>

 document创建元素

<body>
    <div class = "test"></div>
    <script>
        var text = document.createElement("p");//创建一个p标签
        var content = document.createTextNode("我是文本");//创建文本信息
        //通过appendChild将内容或者子元素放入容器
        text.appendChild(content);
        console.log(text); //<p>我是文本</p>
        //增加属性
        var id = document.createAttribute("id");
        id.value = "root";
        //id的属性加入到容器中
        text.setAttributeNode(id);
        //把这个我们text放入class = test中
        var test = document.getElementsByClassName("test")[0];//先把容器读出来
        test.appendChild(text);//div容器中就会加入p标签了
    </script>
</body>

 Element对象属性

<body>
    <div class = "test" id = "box1">Hello</div>
    <script>
        var box = document.getElementById("box1");
        //改变id属性
        box.id = "box2";
        //通过id找到className并修改
        box.className = "test1 test2"; 
        //追加className
        box.classList.add("addTest");
        //移除classNmae
        box.classList.remove("test1");
        //判读是否存在addTest属性
        if (box.classList.contains("addTest")){
            console.log("存在addTest");
        }
        //toggle如果存在则移除,不存在则加入
        box.classList.toggle("addTest");
        //innerHTML
        box.innerHTML = "大家好";
        //innerHTML和innerText区别:innerHTML可以识别标签,innerText作为一个字符串
        var str = "<a href='https://www.cnblogs.com/yetangjian/p/17253215.html'>bokeyuan</a>";
        box.innerHTML = str;
        //在创建一个div标签用innerText对比:innerHTML是可以点击的链接,innerText只是一个字符串
        var newDiv = document.createElement("div");
        var content = document.createTextNode("我是文本");
        newDiv.appendChild(content);
        var setId = document.createAttribute("id");
        setId.value = "text";
        newDiv.setAttributeNode(setId);
        var getBody = document.getElementsByTagName("body")[0];
        getBody.appendChild(newDiv);
        var newId = document.getElementById("text");
        newId.innerText = str ; 
    </script>
</body>

 CSS操作

最简单的方法,直接添加元素节点属性style

<body>
    <div class="box1" id="box"></div>
    <script>
        var box = document.getElementById("box");
        box.setAttribute("style","background-color: red;height: 200px");
    </script>
</body>

通过节点的style属性

<body>
    <div class="box1" id="box"></div>
    <script>
        var box = document.getElementById("box");
        box.style.height = "300px";
        box.style.background = "red";
    </script>
</body>

还有一种写法

<body>
    <div class="box1" id="box"></div>
    <script>
        var box = document.getElementById("box");
        box.style.cssText = "height: 500px;background: red;"
    </script>
</body>

 事件处理

html事件

<body>
    <button onclick="clickHandler()">按钮</button>
    <script>
        function clickHandler(){
            console.log("点击按钮")
        }
    </script>
</body>

DOM0事件

<body>
    <button id="btn">按钮</button>
    <script>
        //DOM0事件 优点HTML和js是分离的,Html事件没有分离
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            console.log("点击按钮")
        }
    </script>
</body>

DOM2事件

<body>
    <button id="btn">按钮</button>
    <script>
        //DOM2事件:优点可以增加多个事件,只要添加一个addEventListener
        var btn = document.getElementById("btn");
        btn.addEventListener("click",function(){
            console.log("点击按钮")
        })
    </script>
</body>

 鼠标事件

<style>
    .box1{
        height: 200px;
        width: 200px;
        background: red;
    }
</style>
<body>
    <button id="btn1">按钮1</button>
    <button id="btn2">按钮2</button>
    <button id="btn3" onmouseup="clickHandler('onmouseup')">按钮3</button>
    <button id="btn4" onmousedown="clickHandler('onmousedown')">按钮4</button>
    <button id="btn5" class="box1" onmousemove="clickHandler('onmousedown')">按钮5</button>
    <script>
        var btn1 = document.getElementById("btn1");
        btn1.addEventListener("click",function(){
            console.log("单机")
        })
        var btn2 = document.getElementById("btn2");
        btn2.ondblclick = function(){
            console.log("双击");
        }

        function clickHandler(event){
            switch(event){
                case "onmousedown":
                    console.log("鼠标按下");
                    break;
                case "onmouseup": 
                    console.log("鼠标抬起");
                    break;
                case "onmousedown":
                    console.log("鼠标正在移动");
                    break;
            }
        }
    </script>
</body>

除了上方列举的这些,还有其他一些鼠标事件例如:onmouseenter,mouserover鼠标进入;onmouseleave,mouseout鼠标离开等等

 那么onmouseenter和mouserover区别在于只在父元素添加事件,是否会在子元素上触发,同理鼠标离开也是

Event事件

<body>
    <button id="btn">按钮</button>
    <a href="https://www.cnblogs.com/yetangjian/p/17320268.html" id="ytj">yetangjian</a>
    <script>
        //event事件其实就是函数的参数
        var btn = document.getElementById("btn");
        btn.onclick = function(event){
            console.log(event);
            //有两个常用属性Target和type
            console.log(event.target);//点击哪里显示哪个节点 <button id="btn">按钮</button>
            event.target.innerHTML= "点击过了"; //监听到以后就可以去操作他了
            console.log(event.type);// click
        }

        var ytj = document.getElementById("ytj");
        //点击a标签不跳转
        ytj.onclick = function(e){
            e.preventDefault();//阻止默认事件
            console.log("点击A标签");
        }
    </script>
</body>

阻止事件冒泡

<body>
    <style>
        .root{
            height: 200px;
            width: 200px;
            background: red;
        }
        .box{
            height: 100px;
            width: 100px;
            background: blue;
        }
    </style>
    <div class="root" id="root">
        <div class="box" id="box"></div>
    </div>
    <script>
        //分别给root和box添加点击事件
        //这时候点击蓝色会打印root和box因为他会事件向上传递
        var root = document.getElementById("root")
        var box = document.getElementById("box")
        root.onclick = function(){
            console.log("root");
        }
        //如果我们想点击蓝色只答打印蓝色,就需要添加阻止冒泡
        box.onclick = function(e){
            e.stopPropagation();//阻止冒泡
            console.log("box");
        }

    </script>
</body>

 

原文链接:https://www.cnblogs.com/yetangjian/p/17253215.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript快速入门(二) - Python技术站

(0)
上一篇 2023年4月18日
下一篇 2023年4月18日

相关文章

  • 详解JavaScript es6的新增数组方法

    下面就来详细讲解JavaScript ES6新增的数组方法。 简介 ES6为数组添加了很多有用而方便的方法,这些方法可以让开发者的工作更加高效。下面就来简单介绍一下ES6新增的数组方法。 新增方法 Array.from() Array.from()方法用于将类数组对象或可迭代对象转换为数组。此方法的第一个参数是要转换的对象,第二个可选参数是一个映射函数,用于…

    JavaScript 2023年5月27日
    00
  • 如何通过JS实现日历简单算法

    下面我将详细讲解如何通过JS实现日历简单算法的完整攻略。 实现思路 通过JS实现日历算法的基础思路是计算出每个月份的天数,以及每个月份的第一天是星期几,然后将这些信息展示到日历中。 代码实现 以下是通过JS实现日历算法的完整代码示例: function getDaysInMonth(year, month) { return new Date(year, m…

    JavaScript 2023年5月27日
    00
  • python爬虫之验证码篇3-滑动验证码识别技术

    Python爬虫之验证码篇3-滑动验证码识别技术 本篇文章将带领大家学习如何使用Python进行滑动验证码识别技术,让我们能够愉快地完成爬虫任务,无需被恼人的滑动验证码阻挡。 前置技能 在学习本篇文章之前,您需要学会以下技能: Python基础知识 Python爬虫入门基础 了解验证码的基本原理 滑动验证码介绍 滑动验证码通常由一张包含有缺口的图片以及一个滑…

    JavaScript 2023年6月11日
    00
  • JS截取字符串的方法详解

    JS截取字符串的方法详解 在JavaScript中操作字符串是非常常见的操作,其中一个常见的操作便是截取字符串。截取字符串的方法有很多,下面将详细讲解几种常见的方法。 方法一:使用substring()方法 substring()方法是JavaScript中最常用的截取字符串的方法。它的语法是: string.substring(start, end) st…

    JavaScript 2023年5月28日
    00
  • uniapp实现人脸识别功能的具体实现代码

    实现人脸识别功能需要用到Uniapp的uni plugins插件,其中uni.plugins.facedetect插件可以用于实现人脸识别。 下面是实现人脸识别的代码示例: 引入uni.plugins.facedetect插件 import faceDetect from ‘@/uni_modules/facedetect/js_sdk/face_detec…

    JavaScript 2023年5月19日
    00
  • 各浏览器对document.getElementById等方法的实现差异解析

    各浏览器对 document.getElementById() 等方法的实现差异是指不同的浏览器厂商对该方法的实现细节有所不同,导致在不同的浏览器中可能会出现不同的行为,从而给前端开发带来一些麻烦和不兼容问题。 具体来说,document.getElementById() 是 Document 对象的一个方法,作用是通过元素 ID 查找并返回对应的元素。虽然…

    JavaScript 2023年6月10日
    00
  • Javascript入门学习第三篇 js运算第1/2页

    以下是详细讲解“Javascript入门学习第三篇 js运算第1/2页”的完整攻略: 1. 数值运算符 在 JavaScript 中,可以使用以下数值运算符: 加法运算符(+) 加法运算符用于将两个数值相加。示例如下: var a = 10; var b = 20; var c = a + b; console.log(c); // 输出:30 减法运算符(…

    JavaScript 2023年5月17日
    00
  • JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)

    JavaScript性能优化之函数节流与函数去抖 函数节流(throttle)和函数去抖(debounce)都是 JavaScript 中常用的性能优化技巧。它们都是用来解决频繁触发回调函数导致过多计算使页面出现卡顿或资源浪费的问题。 函数节流 throttle 函数节流的基本思路是:在一定时间间隔内,只执行一次函数。通过这种方式,可以减少计算次数,提升性能…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部