JavaScript基础二：定义函数、变量的作用域、局部作用域 let、Date、JSON、面向对象编程、继承、操作Dom对象、jQuery

遗憾无人似你

于 2020-02-08 23:46:38 发布

阅读量149

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/qq_39870032/article/details/104228772

版权

JavaWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

三、代码（续）

定义函数

方法一：常规写法

function run{
 alert("常规写法") //这里是你函数的内容
}

//调用
run()

方法二：匿名函数写法

var run = function(){
    alert("这是一种声明函数的写法,左边是一个变量,右边是一个函数的表达式,
　　意思就是把一个匿名函数的表达式赋值给了一个变量run,只是声明了一个变量指向了一个函数对象")
　　//这里是你函数的内容
}

//调用
run()

方法三：将方法作为一个对象

//作为对象方法,函数写法,这里创建了两个函数外面用{}包裹起来
var Text = {
    run1 : function(){
        alert("这个必须放在一个对象内部,放在外边会出错")//这里是函数内容
    },
    run2 : function(){
        alert("这个必须放在一个对象内部,放在外边会出错")//这里是函数内容
    }
}

//调用
Text.run1()//调用第一个函数
Text.run2()//调用第二个函数

arguments关键字：
当我们在调用函数的时候，我们通常都会给这个函数传递参数，在JavaScript中把传入到函数的全部参数都存储在arguments中，也就是说，每个函数都默认拥有arguments，那么arguments到底是什么

arguments是一个类数组对象

arguments是按照传入参数的顺序来存储参数的，第1个参数的属性名是’0’，第2个参数的属性名是’1’（相当于数组中的下标），以此类推，并且它还有length属性，length的值是当前传入函数参数的个数

在Javascript没有重载函数的功能，但arguments对象能够模拟重载函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    var abs = function (x) {
        console.log('x=>'+x);
        for (var i = 0;i<arguments.length;i++){
            console.log(arguments[i]);
        }
        
	//相当于函数function的重载
        if (arguments.length==2){
            //当function的参数个数是2时，执行这里面的代码
        }else if (arguments.length==3){
            //当function的参数个数是3时，执行这里面的代码
        }
 }
</script>

</body>
</html>

在这里插入图片描述

变量的作用域

在函数体中声明，则在函数体外不可以使用

function czx() {
    var x = 1;
    x = x + 1;
}
x = x + 2; //Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function czx() {
    var x = 1;
    x = x + 1;
}

function czx2() {
    var x = 'A';
    x = x + 1;
}

内部函数可以访问外部函数的成员，反之则不行

function czx() {
    var x = 1;
    // 内部函数可以访问外部函数的成员，反之则不行
    function czx2() {
        var y = x + 1;  // 2
    }
    var z = y + 1; // Uncaught ReferenceError: y is not defined
}

内部函数变量和外部函数的变量重名时

function qj() {
    var x = 1;
    function qj2() {
        var x = 'A';
        console.log('inner'+x); 
    }
    console.log('outer'+x); 
    qj2()
}
qj()

在JavaScript中函数查找变量从自身函数开始，由 ‘’内‘’ 向 ‘’外‘’ 查找，如若内部有需要的变量，那么函数会屏蔽外部的同名变量（就近原则）
在这里插入图片描述

局部作用域 let

问题：i 出了这个作用域还可以使用

function aaa() {
    for (var i = 0; i < 100; i++) {
        console.log(i)
    }
    console.log(i+1); //101    i出了这个作用域还可以使用
}

ES6 let 关键字，解决局部作用域冲突问题

function aaa() {
    for (let i = 0; i < 100; i++) {
        console.log(i)
    }
    console.log(i+1); //Uncaught ReferenceError: i is not defined
}

方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

var czx= {
    name: 'zhangsan',
    bitrh: 1997,
    // 方法
    age: function () {
        // 今年 - 出生的年
        var now = new Date().getFullYear();
        return now-this.bitrh;
    }
}
//属性
czx.name
//方法,  记得带()
czx.age()

在这里插入图片描述
那么，this又代表了什么呢

function getAge() {
    // 今年 - 出生的年
    var now = new Date().getFullYear();
    return now-this.bitrh;
}

var czx= {
    name: 'zhangsan',
    bitrh: 1997,
    age: getAge
}

在这里插入图片描述
this是无法指向的，是默认指向调用它的那个对象，在js 中apply可以控制 this 指向

Date

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    var now = new Date();   //Sat Jan 04 2020 10:49:35 GMT+0800 (中国标准时间)
    console.log(now.getFullYear());      //年
    console.log(now.getMonth());         //月  0~11
    console.log(now.getDate());          //日
    console.log(now.getDay());           //星期
    console.log(now.getHours());         //时
    console.log(now.getMinutes());       //分
    console.log(now.getSeconds());       //秒

    now.getTime();          //时间戳 1970.1.1 0:00:00 毫秒数

    console.log(new Date(1578106175991));         //时间戳转换成时间

</script>

</body>
</html>

在这里插入图片描述

JSON

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率

JSON字符串和 JS 对象的转化：

var user = {
    name: "czx",
    age: 20,
    sex: '男'
}

//对象转化为json字符串 {"name":"czx","age":20,"sex":"男"}
var jsonUser =  JSON.stringify(user);

//json 字符串转化为对象 参数为 json 字符串
var obj = JSON.parse('{"name":"czx","age":20,"sex":"男"}');

在这里插入图片描述

面向对象编程

简单来说就是：我们创建一个对象，称为原型。然后我重新创建另一个对象，让另一个对象匹配到原型上，这样我们创建的对象就可以拥有原型中的属性和方法

//我们创建Student当作原型
var Student = {
    name: "czx",
    age: 20,
    run: function () {
        console.log(this.name + "is running");
    }
};
var xiaoming = {
    name: "xiaoming"
};
//原型对象
xiaoming.__proto__ = Student;

在这里插入图片描述

继承

class关键字，是在ES6引入的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    class Student {
        constructor(name) {
            this.name = name;
        }
        hello() {
            alert('hello');
        }
    }

    class XiaoStudent extends Student {
        constructor(name, gride) {
            super(name);
            this.gride = gride;
        }
        myGride() {
            alert('我是一名小学生');
        }
    }
    var xiaoming = new Student('xiaoming');
    var xiaohong = new XiaoStudent('xiaohong', 1);
</script>

</body>
</html>

在这里插入图片描述

操作Dom对象

获得Dom节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="father">
    <h1>一级标题</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');

    var childrens = father.children;    //获取父节点下的所有子节点
</script>



</body>
</html>

更新节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="id1">

</div>

<script>
    var id1 = document.getElementById('id1');
    id1.innerText = 'abc';

</script>

</body>
</html>

插入节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaMe</p>
</div>

<script>
    var list = document.getElementById('list');
    list.appendChild(js);
</script>

</body>
</html>

在 list 节点中插入 js 这个节点
在这里插入图片描述

jQuery

jQuery库，里面存在大量的Javascript函数
公式：$(选择器).事件(事件函数)
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.4.1.js"></script>
</head>
<body>

<a href="" id="test-jquery">点我</a>

<script>
    //选择器就是css的选择器
    $('#test-jquery').click(function () {
        alert('hello,jquery');
    })
</script>
</body>
</html>

在这里插入图片描述
选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    //原生js，选择器少，不好记
    //标签
    document.getElementsByTagName();
    //id
    document.getElementById();
    //类
    document.getElementsByClassName();

    //jQuery中， css里面所有的选择器都能用
    $('p').click();     //标签选择器
    $('#id1').click();  //id选择器
    $('.class1').click();   //class选择器


</script>

</body>
</html>

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.4.1.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--需求 获取鼠标的一个坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>

<script>
    $(function () {
            $('#divMove').mousemove(function (e) {
                $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
            })
        }
    );
</script>
</body>
</html>

在这里插入图片描述
操作Dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

<script>
    $('#test-ul li[name=python]').css("color","red");
</script>

</body>
</html>

在这里插入图片描述

遗憾无人似你

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础二：定义函数、变量的作用域、局部作用域 let、Date、JSON、面向对象编程、继承、操作Dom对象、jQuery

三、代码（续）定义函数方法一：常规写法function run{ alert("常规写法") //这里是你函数的内容}//调用run()方法二：匿名函数写法var run = function(){ alert("这是一种声明函数的写法,左边是一个变量,右边是一个函数的表达式,　　意思就是把一个匿名函数的表达式赋值给了一个变量run,只是声明了一个变量指向了一个函数对...
复制链接

扫一扫

专栏目录