JavaScript一篇文章就够了

文章目录

      • 一:第一个JS代码
        • 1.为什么是JavaScript
        • 2. 第一个JavaScript程序
      • 二:JS基本语法
        • 1. 使用var定义变量,条件控制,多行注释,控制台输出
        • 2. 数据类型介绍,对象的定义
        • 3. use strict严格检查模式
        • 4. 字符串数据类型和方法详解
        • 5. 数组类型和方法详解
        • 6. 对象类型及相关操作
        • 7. 流程控制
        • 8. Map和Set集合
        • 9. 函数的定义和使用
        • 10. 对象的作用域
        • 11. 对象的行为
        • 12. 常用对象(Data等)
        • 13. ES6后的面向对象编程
      • 三:操作BOM和DOM
        • 1. 操作Bom对象 (Browser Object Model)
        • 2. 操作Dom对象 (Document Object Model)
        • 3. 获取表单值
      • 四:Jquery

一:第一个JS代码

1.为什么是JavaScript
  • JavaScript和Java毫无关系,初始为了蹭热度命名为JavaScript
  • JavaScript运行在网页的客户端,能被用来设计和编程网页在事件发生时的行为。(一句话:可实现纯前端的动态交互)
  • 即面向过程,又面向对象
  • 用的人多,易于学习
2. 第一个JavaScript程序

既可以直接在html使用script标签写,也可以单独写一个js文件,在需要使用的前端页面中引入即可

<!--外部引入,注意别自闭和引入-->
<script src="js/qj.js"></script>

<!--script标签中,写js代码-->
<script>
    alert("hello world");
</script>

<!--不用显式写js,也会默认js-->
<script type="text/javascript">
</script>

二:JS基本语法

1. 使用var定义变量,条件控制,多行注释,控制台输出
<script>
    //1 : 定义变量 变量类型 变量名 = 变量值;
    var num = 1;
    alert(num)
    //2 : 条件控制
    if (2>1){
        // 其中也可以嵌套控制和else
        alert("true");
    }
    var score = 1;
    if (score>60&&score<70){
        alert("60-70");
    }else if(score>70&&score<80){
        alert("70-80")
    }else {
        alert("80+");
    }
    // 3 : 多行注释
    /**
     * sd
     */
    //4 : console.log(score) 在浏览器控制台打印变量
</script>
2. 数据类型介绍,对象的定义
 <script>
    /*js不区分整数和小数,都为Number类型*/
    123 //整数123
    123.1 //浮点数123.1
    1.123e3 //科学计数法
    -99 // 负数
    NaN //Not a Number
    Infinity //无穷数(无限大,一般不能遇到)

    /*字符串*/
    "abc" / 'abc'

    /*布尔值*/
    true / false

    /*逻辑运算符*/
    // && || ! //与或非

    /*比较运算符,坚持不使用==*/
    /**
     * = 赋值运算
     * == 等于 类型不一样,值一样,会判断为true
     * === 绝对等于 类型一样,值一样,判断为true
     */

    // 注 NaN === NaN NaN与所有东西比较,都返回false,如果需要判断是否是NaN,使用isNaN
    isNaN(NaN) //返回true

    // 浮点数问题
    console.log((1/3)===(1-2/3)) //返回为false,因为会有浮点数精度问题,可以使用这样比较完成功能
    Math.abs(1/3-(1-2/3))<0.000000000001

    // null 和 undefined

    // 数组:可以放入不同类型,java中必须是相同类型对象
    var arr = [1,2,3,4,"add",null]
    // 定义数组
    new Array(1,2,3,4,5)

    // 数组下标越界 会undefined

    // 对象,数组是中括号,对象是大括号
    var person = {
        name:"chelsea",
        age:3,
        tags:[1,2,3,"java"]
    }
    person.age //打印对象属性值
</script>
3. use strict严格检查模式
<!--
    'use strict' 必须写在第一行
    局部变量建议let定义(必须支持ES6-->
<script>
    /*加上这句话,配置严格检查模式,建议每次js代码都加这句话,这样的话下面i = 1会报错*/
    'use strict';

    // 默认是全局变量,直接在控制台可以打印,这在业务中来说是不应该被允许的
    var i = 1;
    // 局部变量建议使用let 关键字
    let j = 1;
</script>
4. 字符串数据类型和方法详解
<!--字符串数据类型讲解-->
<script>
    'use strict';
    //正常字符串使用单引号或双引号包裹
    //可以使用转义字符打印单引号或双引号\' \"
    //多行字符串编写(tab键上面的斜引号包裹 可以包裹多行字符串)
    var msg = `
    chelsea
    chelsea
    `;
    // 模板字符串,类似于el表达式,必须使用``来包裹。
    let name = "chelsea";
    let age = 3;
    let msg = `你好呀,${name}`;

    // 字符串长度等方法,注意js中字符串也是不可变类型
    var student = "student";
    student.length;
    student[1];
    student.toUpperCase();
    student.toLowerCase();
    student.indexOf("t");
    student.substring(1,3); //tu 包前不包后
    student.substring(1); // 从第一个截取到最后
</script>
5. 数组类型和方法详解
<!--数组类型详解-->
<script>
    'use strict';
    var arr = [1,2,3,4,5,6];
    arr.length;//长度可变,内容也可变
    // 数组大小发生变化,但后面的值都为undefined
    arr.length = 10;
    // 数组长度变小 数据会丢失
    arr.indexOf(2); // 通过元素获取下标索引,和字符串方法一样
    // 数组版的substring() 数组切片
    arr.slice(1,5);
    // push给数组中添加元素,压入尾部
    arr.push("aaa","bbb");
    // pop 数组中弹出元素,弹出最后一个,弹出后数组中没这个元素
    arr.pop();
    // 头部添加弹出元素
    arr.unshift("aaaa","asdasd");
    arr.shift();
    // 数组排序
    arr.sort();
    //元素反转
    arr.reverse();
    // 数组拼接到后面,返回一个新的数组,原数组内容不变
    arr.concat([1,2,3,4,5]);
    // 连接符。打印拼接数组,使用特定的字符串连接。
    arr.join("-");
    // 多维数组,和java取值一样
    arr = [[1,2,3,4],[3,4,5]];
</script>
6. 对象类型及相关操作
<!--对象类型,若干个键值对形式-->
<script>
    /*定义一个person对象,用大括号包起来,属性用逗号隔开,有三个属性*/
    var person = {
        name:"chelsea",
        age:3,
        prop:"yaoshi"
    };
    // 使用一个不存在的对象属性,不会报错,为undefined
    // 动态删减属性
    delete person.name;
    // 动态添加属性,直接给新属性赋值即可
    person.email = "[email protected]";
    // 判断属性值是否在这个对象中 使用in关键字
    "age" in person; // 会返回true
    "tostring" in person; //也会返回true,继承上层对象
    // 判断一个属性是否是这个对象自身拥有的,使用hasOwnProperty方法
    person.hasOwnProperty("toString");//返回false
    person.hasOwnProperty("age");//返回true
</script>
7. 流程控制
<!--流程控制-->
<script>
    let age = 3;
    if (age>3){
        alert("haha");
    }else {
        alert("kua~");
    }

    while (age<100){
        age += 1;
    }

    for (let i = 0; i < 10; i++) {
        age += 1;
    }

    /*数组forEach循环*/
    var age = [1,2,3,4,4,5,6];
    age.forEach(function (value) {
        console.log(value);
    });
    /*返回的是一个索引 通过索引获取数据*/
    for (var num in age){
        console.log(age[num]);
    }
</script>
8. Map和Set集合
<!--Map和Set-->
<script>
    var map = new Map([["tom",80],["chelsea",100]]);
    /*通过key获得value*/
    console.log(map.get("chelsea"));
    /*给map中添加键值对*/
    map.set("admin",99);
    map.delete("tom");

    /*set:无序不重复集合*/
    var set = new Set([3,1,1,1,1]);//结果只有3,1
    /*添加数值*/
    set.add(2);
    set.delete(1);
    set.has(3); //返回true

    /*使用iterator遍历set和map*/
    var arr = [1,2,3];
    /*上述for in获取到的是下标,这次for of 获取到的是值*/
    for (var value of arr){
        console.log(value);
    }

    for (var x of map){
        console.log(x);//打印出每一对键值对
    }
    for (var x of set){
        console.log(x);//打印set内容
    }
</script>
9. 函数的定义和使用
<!--函数-->
<script>
    /*定义方式一:定义一个绝对值函数*/
    function abs(x) {
        /*此判断防止传错参或者不传参*/
        if(typeof x!=="number"){
            throw "Not a Number!";
        }
        if(x>=0){
            return x;
        }else {
            return -x;
        }
    }
    /*如果没有执行return 函数执行也会返回结果 就是undefined*/
    /*定义方式二:匿名函数*/
    var abs = function (x) {
        if(x>=0){
            return x;
        }else {
            return -x;
        }
    }
    /*函数调用,直接调用即可*/
    /*js可以传任意个参数,也可以不传参,不会报错,返回结果不理想而已*/


    /*arguments包含所有的参数,有时候想使用对于的参数来进行附加操作,使用此关键字来接收传入的所有参数*/
    function aaa(a,b,...rest) {
        console.log("a"+a);
        console.log("b"+b);
        // if(arguments.length>2){
        //     console.log(arguments[2]);
        // }
        // 默认rest为多余的参数,如果只传入需要的个数,则rest为空
        // rest参数只能写在最后面,必须要用...标识
        console.log(rest);
    }
</script>
10. 对象的作用域
<!--变量的作用域-->
<script>
    function qj() {
        var x = 1;
        x = x+1;
    }
    x = x+2; //会报错:x is not defined;
    function f() {
        // 此处和上面函数中的x不冲突;
        var x = 1;
        x = x+2;
    }
    //js的执行引擎,自动提升了变量声明,但不会提升变量y的赋值,如下
    function f1() {
        // 此处不会报错,但y的值第一时间没有赋进去
        var x = "x"+y;
        console.log(x);
        y = "y";
    }
    //由上述得:所有的变量定义都放在方法头部

    /*全局变量window*/
    var z = "xxx";
    alert(z);
    alert(window.z);//此处两种方式等价,由此可见alert这个函数也是一个全局变量,可直接调用

    // for循环建议使用let来创建变量,如果是var,则for循环外也可使用

    // 常量
    // ES6之前:按照规定,变量名全为大写的默认为常量,但本质还是可以改变的
    // ES6:引入了const关键字,const PI = '3.14' 只读变量,不可更改
</script>
11. 对象的行为
<!--对象行为-->
<script>
    var person = {
        name:"chelsea",
        birth:"2020",
        age:function () {
            var now = new Data().getFullYear();
            return now-this.birth;
        }
    };
    // 调用方法时需要加括号
    person.age();
</script>
12. 常用对象(Data等)
<!--特殊对象-->
<script>
    /*Data对象*/
    var now = new Data(); //标准时区时间
    now.getFullYear(); //年
    now.getMonth(); //月0-11
    now.getDate();  //日
    now.getDay();   //星期几
    now.getHours();
    now.getMinutes();
    now.getSeconds();
    now.getTime();  //时间戳
    now.toLocaleString();//2021/7/21 下午10:49:35
    /*时间戳转为时间*/
    console.log(new Data(12352342432))
</script>
13. ES6后的面向对象编程
<!--面向对象-->
<script>
    var user = {
        name:"chelsea",
        age:10,
        run:function () {
            console.log(this.name+"run!");
        }
    };
    var xiaomign = {
        name:"xiaoming"
    };
    /*本来小明没有run,这样类似于继承,小明也有了run行为,ES6之前就这样*/
    xiaomign.__proto__ = user;


    /*ES6之后有了明确的类class*/
    class Student{
        constructor(name) {
            this.name = name;
        }
        hello(){
            alert("hello");
        }
    }
    var xiaoming = new Student("xiaoming");
    /*继承,和ES6之前的原型模式一样*/
    class xiaoStudent extends Student{
        constructor(name,grade) {
            super(name);
            this.grade = grade;
        }
        mygrade(){
            alert("i am xiao student");
        }
    }
</script>

三:操作BOM和DOM

1. 操作Bom对象 (Browser Object Model)
<!--操作Bom对象 Browser Object Model-->
<script>
     /*window对象:代表浏览器窗口*/
     window.alert(111);
     /*获取浏览器内外高宽*/
     window.innerHeight;
     window.innerWidth;
     window.outerWidth;
     window.outerHeight;

     /*Navigator封装了浏览器的信息*/
     Navigator.appName;//浏览器名称
     Navigator.userAgent;

     /*代表全屏幕属性,宽高等*/
     screen.width;
     screen.height;

     /*location代表当前页面的url信息*/
     location.host;//主机
     location.href;//指向的页面
     location.protocol;//协议
     location.reload();//重新加载网页
     location.assign("codelearing.life");//设置网页跳转

     /*document代表当前页面*/
     document.title;//标题
     document.getElementById("app");//获取网页所有节点
     document.cookie;//获取网页的cookie

     /*history对象*/
     history.back();//
     history.forward();//前进后退
 </script>
2. 操作Dom对象 (Document Object Model)
<!--操作Dom对象 Document Object Model-->
<script>
    /*得到Dom后进行增删改查*/
    var father1 = document.getElementsByTagName("h1");
    var father2 = document.getElementById("p1");
    var father3 = document.getElementsByClassName("myClass");
    var childrens = father2.children;//获取父节点下的所有子节点
    /*只要能定位到一个节点,就可以获取到其他所有节点*/

    /*更新节点*/
    var id1 = document.getElementById("id1");
    id1.innerText = "123";//修改文本值
    id1.innerHTML = "";//向节点内部插入超文本
    id1.style.color = "red";//设置标签的style
    id1.style.margin = "200px";

    /*删除节点:先获取父节点,在父节点中删除子节点*/
    var father = document.getElementById("father");
    father.removeChild(p1);//获取后进行删除
    var father1 = document.getElementById("children").parentElement;

    /*注:删除节点的时候,节点是在动态持续变化的*/

    /*插入、追加节点*/
    var js = document.getElementById("js");
    var list = document.getElementById("list");
    var newP = document.createElement("p");
    newP.id = "newP";
    newP.innerText = "newP";
    newP.setAttribute("href","www.baidu.com");
    list.appendChild(js);
    list.appendChild(newP);
</script>
3. 获取表单值
<!--操作表单-->
<script>
    /*文本框 下拉框 单选框 多选框 隐藏于 密码框 text select radio checkbox hidden password*/
    /*得到输入框的值*/
    var username = document.getElementById("username").value;//也可以赋值.value = 123312
</script>

四:Jquery

Jquery本质上就是一个封装好的JS类库,可以直接调用人家写好的方法,因为直接使用JS开发部分代码冗余,操作不方便,就产生了Jquery。
Jquery官网下载地址:https://jquery.com/
JqueryApi介绍文档:http://jquery.cuishifeng.cn

<!--Jquery-->
<script>
    /*封装了大量js代码的库*/
    /*选择器*/
    $("#submit").click(function () {
        alert("123");
    })

    /*标签选择器*/$("span");
    /*类选择器*/$(".myclass");
    /*id选择器*/$("#myId");
    /*Jquery文档:http://jquery.cuishifeng.cn*/

    /*鼠标事件 键盘事件*/
    $("#submit").mousedown(function () {
        alert("点击了")
    });
    /*网页加载完毕后响应时间*/
    $(function () {
        alert("网页加载完毕")
    });
</script>

<!--操作Dom-->
<script>
    $("#test-ul li[name=python]").text();//获得值
    $("#test-ul li[name=python]").text("addtest");
    $("#test-ul li[name=python]").html("addtest");

    $("#test-ul li[name=python]").show();//显示
    $("#test-ul li[name=python]").hidden;//隐藏
</script>

你可能感兴趣的:(web,javascript)