6-11js学习总结

最新推荐文章于 2022-03-18 17:03:13 发布

jiuzhouy

最新推荐文章于 2022-03-18 17:03:13 发布

阅读量135

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/jiuzhouy/article/details/109648018

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Js

对象
创建对象

通过字面量创建对象

var obj = {
    name : "小雪",
    age : "18",
    show : function (friend) {
        console.log(this.name + "的好朋友是" + friend);
    }
};

注意: 属性名字可以加双引号也可以不加双引号。

通过new object创建对象

var obj = new Object();
// 添加属性
obj.name = "钉钉";
// 添加方法
obj.begin = function () {
    console.log(this.name + "开始直播");
};

通过构造函数创建对象

// 注意：此处建议方法名首字母大写

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.say = function(name) {
        console.log("你好: " + name + "!");
    };
}

// 创建两个Person对象
var person1 = Person("edde", 10);
var person2 = Person("susan", 20);

遍历对象

var obj={
name: 'pink老师'，
age: 18,
sex:'男'
}
// console . log(obj . name );
// console. log(obj .age);
// console . log(obj.sex);
// for in遍历我们的对象
//for(变量in对象){

//}
for(var k in obj) {
console.1og(k); // k变量输出得到的是 属性名
console.1og(obj[k]); // obj[k] 得到是属性值
}

1.对象可以让代码结构更加清晰
2.对象复杂数据类型object
3.本质:对象就是一组无序的相关属性和方法的集合。
4.构造函数泛指某一类,比如苹果,不管是红色苹果还是绿色苹果,都统称为苹果。
5.对象实例特指一个事物 ,比如这个苹果、正在给你们讲课的pink老师等。
6. for…in语询用于对对象的属性进行循环操作。

内置对象

JS中的对象分为3种：自定义对象、内置对象、浏览器对象
前两种对象是JS基础内容，属于ECMAScript；浏览器对象是JS独有的
内置对象就是JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本的功能（属性和方法）
JavaScript提供了多个内置对象：Math、Date、Array、String

Math对象

Math对象是一个内置对象，不是构造函数，不需要new来调用，可以直接使用里面的属性和方法。跟数学相关
的运算（求绝对值，取值，最大值等）可以使用Math中的成员

Date()日期对象
Date()概述

Date对象和Math对象不一样，它是一个构造函数，所以需要实例化后才能使用 Date实例用来处理日期和时间，返回的为年月日和时分秒

date()方法的使用

如果Date没有输入任何参数，则Date的构造器会依据系统设置的当前时间来创建一个Data对象

获取日期的正文

Date对象是基于1970年1月1日（世界标准时间）起的毫秒数我们经常利用总的毫秒数计算时间，因为它更精确
获得Date总的毫秒数(时间戳)，距离1970年1月1日的毫秒数

数组(Array)

数组也是对象（内建对象）它和我们普通对象功能类似，也是用来存储一些值的不同的是普通对象使用字符串作为属性名而数组是使用数字来作为索引操作元素

字符串对象
基本包装类型

为了方便操作基本数据类型，JavaScript提供了三个特殊的引用类型（包装类型）：String、Number和Boolean
基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

字符串的不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间

根据字符返回位置

字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操纵完成就会返回一个新的字符串。

传参
简单类型传参
函数的形参也可以看做是一个变量 ,当我们把一个值类型变量作为参数传给函数的形参时,其实是把变量在栈空间里的值复制了一份给形参 ,那么在方法内部对形参做任何修改,都不会影响到的外部变量。

function fn(a) {
    a++;
    console. log(a) ;
}
var x=10;
fn(x);
console.log(x);

函数的形参也可以看做是一个变量,当我们把引用类型变量传给形参时,实是把变量在栈空间里保存的堆地址复制给了形参,形参和实参其实保存的同一个堆地址,所以操作的是同一个对象。

function Person (name) {
    this.name = name;
}
function f1(x) { //x= p
	console.log(x.name); // 2.这个输出什么?x.name = "张学友";
	console.log (x.name); // 3.这个输出什么?
}
var P = new Person ("刘德华");
console.1og (p.name) ;// 1.这个输出什么?
f1 (p);
console.log (P .name) ;// 4.这个输出什么?

web APIs

获取元素
1.根据ID获取
语法：document.getElementById(id)
作用：根据ID获取元素对象
参数：id值，区分大小写的字符串
返回值：元素对象或 null

 <div id="time">2019-9-9</div>
    <script>
        // 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
        // 2. get 获得 element 元素 by 通过 驼峰命名法 
        // 3. 参数 id是大小写敏感的字符串
        // 4. 返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>

2.根据标签名获取元素
语法：document.getElementsByTagName(‘标签名’) 或者 element.getElementsByTagName(‘标签名’)

<body>
    <ul>
        <li>知否知否，应是等你好久11</li>
        <li>知否知否，应是等你好久22</li>
        <li>知否知否，应是等你好久33</li>
        <li>知否知否，应是等你好久44</li>
        <li>知否知否，应是等你好久55</li>
    </ul>
    <ul id="nav">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ul>
    <script>
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // 3. element.getElementsByTagName()  可以得到这个元素里面的某些标签
        var nav = document.getElementById('nav'); // 这个获得nav 元素
        var navLis = nav.getElementsByTagName('li');
        console.log(navLis);
    </script>
</body>

H5新增获取元素方式

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        // 1. getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        
        // 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);

        // 3. querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    <script>
<body>

4 获取特殊元素（body，html）

// 1.获取body 元素
    var bodyEle = document.body;
    console.log(bodyEle);
    console.dir(bodyEle);
    // 2.获取html 元素
    // var htmlEle = document.html;
    var htmlEle = document.documentElement;
    console.log(htmlEle);