arguments的使用

arguments展示形式是一个伪数组，因此可以进行遍历。伪数组 具有以下特点：

  • 具有length属性
  • 按索引方式存储数据
  • 不具有数组的push,pop等方法
1
2
3
4
5
6
7
8
9
<script>
        //只有函数才有arguments对象 而且是每个函数都内置好了argument
        function fn() {
            console.log(arguments); //里面存储了所有传递过来的实参
            console.log(arguments.length);
            console.log(arguments[2])
        }
        fn(1, 2, 3);
    </script>

翻转数组

1
2
3
4
5
6
7
8
9
10
11
<script>
        function reverse(arr) {
            var newArr = [];
            for (var i = arr.length - 1; i >= 0; i--) {
                newArr[newArr.length] = arr[i];
            }
            return newArr;
        }
        console.log(reverse([1, 2, 3, 4, 5, 6]));
		//也可以使用翻转字符串数组
    </script>

函数的两种声明方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
        //函数的2种声明方式
        //1.利用函数关键字自定义函数(命名函数)
        function fn() {

        }
        fn();
        //2.函数表达式(匿名函数)
        // var 变量名 = function () { };
        var fun = function (aru) {
            console.log('我是函数表达式');
            console.log(aru);
        }
        fun('花花');
        //1.fun是变量名 不是函数名
        //2.函数表达式声明方式和声明变量差不多，变量里面存的是值，而函数表达式里面存的是函数
        //3.函数表达式也可以传递参数
    </script>

作用域

现阶段的js没有块作用域

作用域链

  • 只要是代码，就至少有一个作用域
  • 写在函数内部的局部作用域
  • 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
  • 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链。
1
2
3
4
5
6
7
8
9
10
11
12
<script>
        //作用链域：内部函数访问尾部函数的变量，采取的是链式查找的方式来决定取哪个值 这种结构我们称为作用域链
        var num=10;

        function fu () {//外部函数
            var num =20;

            function fun() {//内部函数
                console.log(num);
            }
        }
    </script>

创建对象的三种方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
        var obj = {
            uname: '张三丰',
            age: 18,
            sex: '男',
            sayHi: function () {
                console.log('hi~');
            }
        }
        //1.里面属性或者方法采取键值对的形式
        //2.多个属性或者方法中间用逗号隔开
        //3.方法冒号后面跟的是一个匿名函数

        //使用对象
        //1.调用对象的属性 我们采取 对象名.属性名
        console.log(obj.uname);
        //2、调用属性还有一种方法 对象名['属性名']
        console.log(obj['age']);
        //3.调用对象的方法 对象名.方法名
        obj.sayHi();
    </script>

利用new Object创建对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script>
        var obj = {
            uname: '张三丰',
            age: 18,
            sex: '男',
            sayHi: function () {
                console.log('hi~');
            }
        }
        //1.里面属性或者方法采取键值对的形式
        //2.多个属性或者方法中间用逗号隔开
        //3.方法冒号后面跟的是一个匿名函数

        //使用对象
        //1.调用对象的属性 我们采取 对象名.属性名
        console.log(obj.uname);
        //2、调用属性还有一种方法 对象名['属性名']
        console.log(obj['age']);
        //3.调用对象的方法 对象名.方法名
        obj.sayHi();

        var dog = {
            umame: '可可',
            type: '阿拉斯加犬',
            age: 5,
            color: 'red',
            bark: function () {
                console.log('汪汪汪~');
            }
            showFile: function () {
                console.log('演电影~');
            }

        }
        console.log(dog.umame);
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
       //利用new object创建对象
       var obj = new Object();//创建了一个空对象
       obj.uname = '张三丰';
       obj.age = 18;
       obj.sex = '男';
       obj.sayHi = function () {
           console.log('hi~');
       }
       //利用等号= 赋值的方法 添加对象的属性和方法
       //每个属性和方法之间用分号结束
       console.log(obj.uname);
       console.log(obj['sex']);
       obj.sayHi();

       var ming = new Object();
       ming.uname = '鸣人';
       ming.sex = '男';
       ming.age = 19;
       ming.skill = function () {
           console.log('影分身术');
       }
       console.log(ming.age);

   </script>

利用构造函数创建对象

function 构造函数() {

​ this.属性=值 ;

​ this.方法=function() {}

}

​ new 构造方法()；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
        function Star(umame, age, sex) {
            this.name = umame;
            this.age = age;
            this.sex = sex;
            this.sing = function (sang) {
                console.log(sang);
            }
        }
        var ldh = new Star('刘德华', 18, '男');
        console.log(typeof ldh);
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.sing('冰雨');
    </script>

内置对象

查文档

MDN

提供有关开放网络技术的信息，包含HTML,CSS和万维网及HTML5应用的API

MDN Web Docs (mozilla.org)

Math对象

math绝对值方法：

可以把字符串型隐式转换为数值型

Math.PI //圆周率

Math.floor() //向下取整

Math.ceil() //向上取整

Math.round() //四舍五入
Math.abs() //绝对值

得到一个两数之间的随机整数，包括两个数在内

Math.floor(Math.random()*(max-min+1))+min

日期对象

日期格式化

数组对象

创建数组的两种方式

1
2
3
4
5
6
7
8
9
10
11
12
<script>
        //创建数组的两种方式
        //1.利用数组字面量
        var arr = [1, 2, 3];
        console.log(arr[0]);
        //2.利用new Array()
        // var arr1 = new Array(); //创建了一个空数组
        var arr1 = new Array(2); //这个2表示数组长度为2  里面有两个空的数组元素
        console.log(arr1);
        var arr2 = new Array(2, 3)
        console.log(arr2); //等价于创建了[2,3]
    </script>

检测数组元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
        //翻转数组
        function reverse(arr) {
            if (arr instanceof Array) {
                var newArr = [];
                for (var i = arr.length - 1; i > -0; i--) {
                    newArr[newArr.length] = arr[i];
                }
                return newArr;
            }
            else {
                return '这个格式必须是数组格式';
            }

        }
        console.log(reverse([1, 2, 3]));
        console.log(reverse(1, 2, 3));
        //检测是否为数组
        // instanceof 运算符 它可以用来检测是否为数组
        var arr = [];
        var obj = {};
        console.log(arr instanceof Array);
        console.log(obj instanceof Array);
        console.log(Array.isArray(arr));//h5新增属性，ie9以上版本支持
    </script>

末尾追加

arr.push(1);

前面添加

arr.unshift(‘1’);

删除数组最后的元素

arr.pop()

返回删除的元素

删除数组的第一个元素

arr.shift(1);

返回删除的元素

追加数组元素

newArr.push(arr[i])

数组翻转

arr.reverse();

数组排序

arr.sort();

1
2
3
4
5
6
7
<script>
        var arr = [13, 4, 77, 1, 7];
        arr.sort(function (a, b) {
            return a - b; //升序
        });
        console.log(arr);
    </script>

返回数组元素索引方法

arr.indexOf(‘blue’);//只返回第一个满足条件的元素，找不到返回-1

arr.lastindexOf(‘blue’) //从后面往前面查找

数组去重

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
        function unique(arr) {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
                if (newArr.indexOf(arr[i]) === -1) {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
        var demo = unique(['blue', 'green', 'blue']);
        console.log(demo);
    </script>

数组转换为字符串

toString()

arr.toString()//默认逗号分隔
join(‘分隔符’)

arr.join(‘-‘)

concat()连接两个或者多个数组-返回一个新数组，原数组不影响

slice()数组截取slice(begin,end) 返回被截取项目的新数组

splice(第几个开始，要删除的个数)数组删除 返回删除项目的新数组，会影响原数组

字符串对象

字符串本身不可变，不要拼接大量字符串，会造成内存卡顿

字符串查找

var str=’江畔何人初见月，江月何年初照人’；

console.log(str.indexOf(‘月’));

console.log(str.indexOf(‘月’，3))；//后面的参数是开始查找的位置

lastindexOf同理

字符串返回字符

str.charAt(i);

返回相应索引字符的ASCII码

str.charCodeAt(i)

str[i]; //h5新增

截取

substr(‘截取的起始位置’,’截取几个’)

替换

replace(‘被替换的字符’,’替换为字符’)

字符串转换为字符

split(‘分隔符’)

Web APIs阶段

Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和 DOM)

https://developer.mozilla.org/zh-CN/docs/Web/API

DOM

获取元素

根据id获取

getElementById

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <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);
        //打印我们返回元素的对象 更好地查看里面的属性和方法
        console.dir(timer);
    </script>
</body>

根据标签名获取

getElementsByTagName()

注意父元素必须是单个对象（必须指明是哪一个元素对象）获取的时候不包括父元素自己

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<body>
    <ul>
        <li>知否知否，应是绿肥红瘦1</li>
        <li>知否知否，应是绿肥红瘦</li>
        <li>知否知否，应是绿肥红瘦</li>
        <li>知否知否，应是绿肥红瘦</li>
        <li>知否知否，应是绿肥红瘦</li>
    </ul>
    <ol>
        <li>孤身只影我向谁去1</li>
        <li>孤身只影我向谁去</li>
        <li>孤身只影我向谁去</li>
        <li>孤身只影我向谁去</li>
        <li>孤身只影我向谁去</li>
    </ol>
    <script>
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        //如果页面中只有一个li，返回的还是伪数组的形式
        //如果没有元素，返回空的伪数组
        var ols = document.getElementsByTagName('ol');
        for (var i = 0; i < ols.length; i++) {
            console.log(ols[i].getElementsByTagName['li']);
        }
    </script>
</body>

通过html5新增方法获取

document.getElementsByClassName(‘类名’); //根据类名返回元素对象集合

document.querySelector(‘选择器’); //根据指定选择器返回第一个元素

document.querySelectorAll(‘选择器’); //根据指定选择器返回

获取特殊元素

1
2
3
4
5
6
7
8
9
10
<script>
        //获取body元素
        var bodyEle = document.body;
        console.log(bodyEle);
        // console.dir(bodyELe);
        //2.获取html元素
        // var htmlEle = document.html;
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>

事件基础

事件三要素：事件源 事件类 事件处理程序

1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <button id="btn">唐伯虎</button>
    <script>
        //事件源 事件被触发的对象 谁 按钮
        var btn = document.getElementById('btn');
        //事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
        //事件处理程序 通过一个函数赋值的方式 完成
        btn.onclick = function () {
            alert('点秋香');
        }
    </script>
</body>

执行事件的步骤

  1. 获取事件源
  2. 注册时间（绑定事件）
  3. 添加事件处理程序（采取函数赋值形式）

常见鼠标事件

鼠标事件 触发条件
onclick 鼠标点击左键触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获取鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发

操作元素

js的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容，属性等。注意以下都是属性。

改变元素内容

element.innerText

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

element.innerHTML

起始位置到终止位置的全部内容，包含html标签，同时保留空格和换行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<title>Document</title>
    <style>
        div,
        p {
            width: 300px;
            height: 30px;
            line-height: 30px;
            color: #fff;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>显示当前系统事件</button>
    <div>某个时间</div>
    <p>1223</p>
    <script>
        //获取元素
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        //注册时间
        btn.onclick = function () {
            div.innerText = getDate();
        }
        function getDate() {
            var date = new Date();
            console.log(date.getFullYear());// 返回当前日期的年
            console.log(date.getMonth() + 1);//返回的月份小一个月
            console.log(date.getDate()); //返回当日
            console.log(date.getDay());
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            return '今天是' + year + '年' + month + '月' + day + '日';
        }
        //我们元素可以不用添加事件
        var p = document.querySelector('p');
        p.innerText = getDate();
    </script>

innerText和innerHTML的区别

innerText不识别html标签

1
2
var div = document.querySelector('div');
div.innerText='<strong>今天是：</strong> 2019';

innerHTML 识别html标签

1
div.innerHTML='<strong>今天是：</strong> 2019';

常用元素的属性操作

  1. innerText、innerHTML 改变元素内容
  2. src、href
  3. id、alt、title

修改元素属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
       <button id="one">one</button>
       <button id="two">two</button>
       <img src="images/two.jpg" alt="">

       <script>
           //修改元素属性 src
           //1.获取元素
           var one = document.getElementById('one');
           var two = document.getElementById('two');
           var img = document.querySelector('img');
           //2.注册事件 处理程序
           one.onclick = function () {
               img.src = 'images/two.jpg';
           }
           two.onclick = function () {
               img.src = 'images/one.jpg';
           }
       </script>
   </body>

根据时间修改文字内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body>
    <img src="images/loading.gif" alt="">
    <div>上午好 </div>
    <script>
        //根据系统不同时间来判断 所以需要用到日期内置对象
        //利用多分支语句来设置不同的图片
        //需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
        //需要一个div元素 显示不同问候语 修改元素内容即可
        //1.获取元素
        var img = document.querySelector('img');
        var div = document.querySelector('div');

        //2.得到当前的小时数
        var date = new Date();
        var h = date.getHours();
        console.log(h);
        //3.判断小时数改变图片和文字信息
        if (h < 12) {
            img.src = 'images/loading.gif';
            div.innerHTML = '亲，上午好，好好写代码！';
        } else if (h < 18) {
            img.src = 'images/one.jpg';
            div.innerHTML = '亲，下午好，好好写代码!';
        } else {
            img.src = 'images/two.jpg';
            div.innerHTML = '亲，晚上好，好好写代码！';
        }
    </script>
</body>

京东密码案例

  1. 核心思路：点击眼睛按钮，把密码类型改为文本框就可以看见里面的密码
  2. 一个按钮两个状态，点击一次，切换文本框，继续点击一次切换为密码框
  3. 算法：利用一个flag变量，来判断flag值，如果是1就切换为文本框，flag设置为0.如果是0就切换为密码框，flag设置为1
1

修改样式属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        //1.获取元素
        var div = document.querySelector('div');
        //2，注册事件 处理程序
        div.onclick = function () {
            //div.style 里面的属性采取驼峰命名法
            this.style.backgroundColor = 'blue';
            this.style.width = '250px';
        }
    </script>
</body>

注意：

  1. JS里面的样式采取驼峰命名法 比如fontSize，backgroundColor
  2. JS修改style样式操作，产生的是行内样式，CSS权重比较高

淘宝二维码隐藏案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px;
            margin: 100px;
            font-size: 12px;
            text-align: center;
            color: #f40;
            /*  display: block;写不写都是默认的*/
        }

        .box img {
            width: 60px;
            margin-top: 5px;
        }

        .close-btn {
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        淘宝二维码
        <img src="images/taobao.png" alt="">
        <i class="close-btn">×</i>
    </div>
    <script>
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        btn.onclick = function () {
            box.style.display = 'none';
        }
    </script>
</body>

循环实现淘宝精灵图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<style>
        .box {
            width: 250px;
            margin: 100px auto;
        }

        .box li {
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 15px;
            background: url(images/sprites.png) no-repeat;
            list-style-type: none;
        }
    </style>

</head>

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>
</body>

显示隐藏文本框 的内容

当鼠标点击文本框时，里面默认的文字隐藏，当鼠标离开文本框时，里面的文字显示。

  1. 表单需要两个事件，获得焦点onfocus 失去焦点onblur
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>
        input {
            color: #999;
        }
    </style>
</head>

<body>
    <input type="text" value="手机">
    <script>
        //1.获取元素
        var text = document.querySelector('input');
        text.onfocus = function () {
            console.log('得到了焦点');
            if (this.value === '手机') {
                this.value = '';
            }
            //获得焦点需要把文字变黑
            this.style.color = '#333';
        }
        text.onblur = function () {
            console.log('失去了焦点');
            if (this.value === '') {
                this.value = '手机';
            }
            this.style.color = '#999';
        }
    </script>
</body>

className

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .change {
            background-color: purple;
            color: #fff;
            font-size: 25px;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="first">文本</div>
    <script>
        var test = document.querySelector('div');
        test.onclick = function () {
            // this.className = 'change';
            // 如果想要保留原先的类名 则使用多类名
            this.className = "first change";
        }
    </script>
</body>

密码框格式提示错误信息

用户如果离开密码框，里面输入的个数不是6~16，则提示错误信息，否则提示输入正确信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }

        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }

        .box img {
            position: absolute;
            width: 24px;
            top: 2px;
            right: 2px;
            width: 24px;
        }
    </style>
</head>

<body>
    <div class="box">
        <label for="">
            <img src="images/cannotsee.png" alt="" id="eye">
        </label>
        <input type="password" name="" id="pwd">

    </div>
    <script>
        //1.获取元素
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        //2.注册事件 处理程序
        var flag = 0;
        eye.onclick = function () {
            if (flag == 0) {
                pwd.type = 'text';
                eye.src = 'images/eye.png';
                flag = 1;
            } else {
                pwd.type = 'password';
                flag = 0;
                eye.src = 'images/cannotsee.png';
            }
        }
    </script>
</body>

通过className更改元素样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .change {
            background-color: purple;
            color: #fff;
            font-size: 25px;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="first">文本</div>
    <script>
        var test = document.querySelector('div');
        test.onclick = function () {
            // this.className = 'change';
            // 如果想要保留原先的类名 则使用多类名
            this.className = "first change";
        }
    </script>
</body>

仿新浪注册页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<style>
        div {
            position: relative;
            width: 600px;
            margin: 100px auto;
        }

        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            padding-left: 20px;
            text-align: center;
            background: url(images/提示.png) no-repeat left center;
        }

        .wrong {
            color: red;
            background: url(images/错误.png) no-repeat left center;
        }

        .right {
            color: rgb(131, 199, 131);
            background: url(images/正确.png) no-repeat left center;
        }
    </style>
</head>

<body>
    <div class="register">
        <input type="password" name="" id="" class="ipt">
        <p class="message">请输入6~16位密码</p>

    </div>
    <script>
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        ipt.onblur = function () {
            if (this.value.length < 6 || this.value.length > 16) {
                // console.log('错误');
                message.className = 'message wrong';
                message.innerHTML = '你输入的密码个数不正确 要求6~16位';
            } else {
                message.className = 'message right';
                message.innerHTML = '设置密码成功';
            }
        }
    </script>
</body>

操作元素总结

![img](C:\Users\lenovo\Documents\Tencent Files\3032964348\Image\C2C\Image2\E7L85X)0B)]$YKX3X[NPY6.png)

作业：

世纪佳缘

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<head>
	<style>
        input {
            color: #ccc;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <input type="text" value="邮箱/ID/手机号" class="id">
    <input type="text" value="密码" class="pwd">
    <script>
        var text = document.querySelector('input');
        var pwd = document.querySelector('.pwd');
        text.onfocus = function () {

            if (this.value === '邮箱/ID/手机号') {
                this.value = '';

            }
            this.style.color = '#999';
            this.style.borderColor = 'pink';
            this.style.outline = 'none';

        }
        text.onblur = function () {
            if (this.value === '') {
                this.value = '邮箱/ID/手机号';

            }
            this.style.borderColor = '#ccc';
        }
        pwd.onfocus = function () {
            console.log('得到了焦点');
            if (this.value === '密码') {
                this.value = '';

            }
            this.style.color = '#999';
            this.style.borderColor = 'pink';
            this.style.outline = 'none';

        }
        pwd.onblur = function () {
            if (this.value === '') {
                this.value = '密码';

            }
            this.style.borderColor = '#ccc';

        }
    </script>
</body>

京东广告隐藏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
    <style>
        .box {
            position: relative;

        }

        .btn-close {
            position: absolute;
            height: 20px;
            width: 20px;
            background-color: rgb(88, 19, 173);
            right: 450px;
            color: rgb(114, 53, 192);
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="images/jingdong.png" alt="">
        <i class="btn-close">×</i>
    </div>
    <script>
        var btn = document.querySelector('.btn-close');
        var img = document.querySelector('img');
        btn.onclick = function () {
            img.style.display = 'none';
            this.style.display = 'none';
        }
    </script>
</body>

排他思想

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
 
<body>
    
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        // 1. 获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        // btns得到的是伪数组  里面的每一个元素 btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // (2) 然后才让当前的元素背景颜色为pink 留下我自己
                this.style.backgroundColor = 'pink';
 
            }
        }
      
        //2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想
    </script>
</body>
 
</html>

百度换肤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<style>
        ul {
            width: 520px;
            margin: 50px auto;
            list-style: none;
        }
        
        li {
            width: 130px;
            height: 80px;
            float: left;
        }
        
        ul li img {
            width: 130px;
            height: 80px;
        }
        
        body {
            background: url(./images/1.jpg) no-repeat;
        }
    </style>
<ul class="huanfu">
        <li><img src="./images/1.jpg" alt=""></li>
        <li><img src="./images/2.jpg" alt=""></li>
        <li><img src="./images/3.jpg" alt=""></li>
        <li><img src="./images/4.jpg" alt=""></li>
        <script>
            var imgs = document.querySelector('.huanfu').querySelectorAll('img');
            // console.log(imgs);
            for (var i = 0; i < imgs.length; i++) {
                imgs[i].onclick = function() {
                    // console.log(this.src);
                    document.body.style.backgroundImage = 'url(' + this.src + ')';
                }
            }
        </script>
    </ul>

隔行变色效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table td,table th{
            width: 170px;
            height: 40px;
            text-align: center;
            border-bottom: 1px solid rgb(195, 195, 195);
        
        }
 
        thead{
            color:  rgb(6, 6, 161);
            background: rgb(220, 220, 255);
        }
 
       td:nth-child(1), td:nth-child(2){
            color: rgb(6, 6, 161);
        }
 
        td:nth-child(6){
            color:red;
        }
 
        .bg{
            background: pink;
        }
    </style>
</head>
<body>
    <table cellspacing="0" cellpadding="0">
        <thead>
            <tr class="top">
                <th>代码</th>
                <th>名称</th>
                <th>最新净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
                <th>公布日期</th>
            </tr>
        </thead>
        <tbody>
         <tr>
             <td class="but">00325</td>
             <td>广发理财30天债券</td>
             <td>0.958</td>
             <td>3.389</td>
             <td>0.000</td>
             <td>0.000%</td>
             <td>2019-01-16</td>
         </tr>
         <tr>
            <td>00325</td>
            <td>广发理财30天债券</td>
            <td>0.958</td>
            <td>3.389</td>
            <td>0.000</td>
            <td>0.000%</td>
            <td>2019-01-16</td>
        </tr>
        <tr>
            <td>00325</td>
            <td>广发理财30天债券</td>
            <td>0.958</td>
            <td>3.389</td>
            <td>0.000</td>
            <td>0.000%</td>
            <td>2019-01-16</td>
        </tr>
        <tr>
            <td>00325</td>
            <td>广发理财30天债券</td>
            <td>0.958</td>
            <td>3.389</td>
            <td>0.000</td>
            <td>0.000%</td>
            <td>2019-01-16</td>
        </tr>
        <tr>
            <td>00325</td>
            <td>广发理财30天债券</td>
            <td>0.958</td>
            <td>3.389</td>
            <td>0.000</td>
            <td>0.000%</td>
            <td>2019-01-16</td>
        </tr>
        <tr>
            <td>00325</td>
            <td>广发理财30天债券</td>
            <td>0.958</td>
            <td>3.389</td>
            <td>0.000</td>
            <td>0.000%</td>
            <td>2019-01-16</td>
        </tr>
        </tbody>
    </table>
</body>
<script>
    var trs=document.querySelector('tbody').querySelectorAll('tr');
    for(var i=0;i<trs.length;i++){
        trs[i].onmouseover=function(){
            this.className="bg";
        }
        trs[i].onmouseout=function(){
            this.className=' ';
        }
    }
</script>
</html>

全选反选

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font-size: 16px ;
            color: #fff;
        }

        td {
            font-size: 14px;
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
</style>
<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="theadInp" />
            </th>
            <th>英雄名</th>
            <th>国籍</th>
        </tr>
        </thead>
        <tbody id="tbody">
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>拉克丝</td>
            <td>德玛西亚</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>德莱文</td>
            <td>诺克萨斯</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>蒙多</td>
            <td>祖安</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>艾希</td>
            <td>弗雷尔卓德</td>
        </tr>
        </tbody>
    </table>
</div>
<script>
        window.onload = function () {
            var topInp = document.getElementById("theadInp");
            var tbody = document.getElementById("tbody");
            var botInpArr = tbody.getElementsByTagName("input");

    //绑定事件
            topInp.onclick = function () {
   //优化版（被点击的input按钮的checked属性值，直接作为下面的所有的input按钮的checked属性值）
                for(var i=0;i<botInpArr.length;i++){
                    botInpArr[i].checked = this.checked;
                }
            }
            for(var i=0;i<botInpArr.length;i++){
                botInpArr[i].onclick = function () {
                    //定义一个标识是true还是false的变量
                    //默认它为true
                    var bool = true;
                    //检测每一个input的checked属性值。
                    for(var j=0;j<botInpArr.length;j++){
                        if(botInpArr[j].checked == false){
                            bool = false;
                        }
                    }
                    topInp.checked = bool;
                }
            }
        }

    </script>

</body>

自定义属性

获取属性值

  • element.属性 获取属性值 (获取内置属性值)

  • element.getAttribute(‘属性’)；（获得自定义的属性）

设置属性值

  • element.属性=’值’
  • element.setAttribute(‘属性’,’值‘)；

div.className=”navs”

div.setAttribute(‘class’,’footer’);

移除属性

div.removeAttribute(‘index’);

tab栏切换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tab切换</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			li {
				list-style-type: none;
			}
			
			.tab {
				width: 978px;
				margin: 100px auto;
			}
			
			.tab_list {
				height: 39px;
				border: 1px solid #ccc;
				background-color: #f1f1f1;
			}
			
			.tab_list li {
				float: left;
				height: 39px;
				line-height: 39px;
				padding: 0 20px;
				text-align: center;
				cursor: pointer;
			}
			
			.tab_list .current {
				background-color: #c81623;
				color: #fff;
			}
			
			.item_info {
				padding: 20px 0 0 20px;
			}
			
			.item {
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="tab">
			
			<div class="tab_list">
				<ul>
					<li class="current">商品介绍</li>
					<li>规格与包装</li>
					<li>售后保障</li>
					<li>商品评价（50000）</li>
					<li>手机社区</li>
				</ul>
			</div>
			
			<div class="tab_con">
				<div class="item" style="display: block;">
					商品介绍模块内容
				</div>
				<div class="item">
					规格与包装模块内容
				</div>
				<div class="item">
					售后保障模块内容
				</div>
				<div class="item">
					商品评价（50000）模块内容
				</div>
				<div class="item">
					手机社区模块内容
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
			//获取元素
			var tab_list = document.querySelector(".tab_list");
			var lis = tab_list.querySelectorAll("li");
			var items = document.querySelectorAll(".item");
			
			//为li设置属性
			for (var i = 0; i < lis.length; i++) {
				lis[i].setAttribute("index",i);
				lis[i].onclick = function() {

					//切换菜单
					for (var i = 0; i < lis.length; i++) {
						lis[i].className = "";
					}
					this.className = "current";
					
					//处理内容
					var index = this.getAttribute("index");
					for (var i = 0; i < items.length; i++) {
						items[i].style.display = "none";
					}
					items[index].style.display = "block";
				}
			}
		</script>
	</body>
</html>
h5自定义属性
data-index=”1”

或者用js设置

element.setAttribute(‘data-index’,2)

获取属性值

h5新增：

div.dataset.index

data-list-name

多个-,dataset必须要用驼峰 命名法

div.dataset[‘listName’]

节点操作

逻辑性更强，但是兼容性稍差

节点概述

  • 元素节点 nodeType 为1
  • 属性节点 nodeType 为2
  • 文本节点 nodeType 为3(文本节点包含文字，空格，换行等)

父级节点

node.parentNode

  • parentNode属性可返回某节点的父结点，注意时最近的一个父结点
  • 如果没有指定的节点则返回null

子节点

ul(父结点).chilren //获取所有元素的节点

ul.firstElementChild(兼容性问题)

ul.lastElementChild

实际开发写法

ol.children[0];

ol.children[ol.chilren.length-1]

兄弟节点

div.nextElementSibling

div.previousElementSibling

创建和添加节点

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
    <ul></ul>
    <script>
        //1.创建元素节点
        var li = document.createElement('li');
        //2.添加节点 
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        //3.添加节点 node.insertBefore(child,指定元素)
        var lili = document.childElementCount('li');
        ul.insertBefore(lili, ul.children[0]);
    </script>
</body>

node.removeChilde(child) 删除一个子节点，返回删除

删除留言案例

1
2
3
4
5
6
7
8
var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        //删除的是li，当前a所占的li
                        ul.removeChild(this.parentNode);

                    }
                }

复制结点

node.cloneNode()

返回调用该方法的节点的一个副本。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        //1.node.cloneNode(); 括号里内容为空或为false，浅拷贝 只赋值标签不复制内容
        //2.node.cloneNode(true); 括号为true。 深拷贝 赋值标签里面的内容
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </script>
</body>

注册事件的两种方式

实际开发中用addEventListener()

​ attachEvent 只有ie9以前版本支持