巨蟒python全栈开发数据库前端6:事件onclick的两种绑定方式&&onblur和onfocus事件&&window.onload解释&&小米商城讲解

时间 2019-11-29

标签巨蟒 python 开发数据库前端事件 onclick 两种绑定方式 onblur onfocus window.onload window onload 解释小米商城讲解栏目 Python 繁體版

原文原文链接

1.回顾上节内容(JavaScript)css

　　一.JavaScript概述html

　　　　1.ECMAScript和JavaScript的关系前端

　　　　2.ECMAScript的历史vue

　　　　3.JavaScript是一门先后端均可以写的一门语言,操做和浏览器的一些交互的内容,也能够操做文档树,html其实就是一颗文档树.python

　　　　4.ES6就是指ECMAScript6jquery

　　　　尽管ECMAScript是一个重要标准,但它并非JavaScript惟一的部分,固然,也不是惟一被标准化的部分,实际上一个完整的JavaScript实现由如下3个部分组成:vue-router

　　　　　　核心(ECMAScript)json

　　　　　　文档对象模型(DOM):Document object model(整合js,css,html)bootstrap

　　　　　　浏览器对象模型(BOM):Browser object model(整合js和浏览器),这个指的是和浏览器进行打交道.js自己能够和浏览器打交道,也就是操做浏览器,经过浏览器实现某些效果后端

　　　　5.js能够操做html对象内的全部内容

　　　　6.js引入方式,直接在html中的<script>内写,或者在引入js文件写.

　　　　7.js中的语句以分号(;)为结束符,也就是说和索引没有关系

　　　　8.JavaScript语言基础

　　　　(1)变量声明

　　　　(2)JavaScript的数据类型:数值(Number)//字符串(String)[字符串的一些操做](重点)!!!!!//布尔值(Boolean)

　　　　　　JavaScript拥有动态类型(python也是动态的)

　　　　必定要多写,多写才会明白,才会清楚

　　　　(3)NaN,表示不是一个数字(Not a Number),也就是说是一个值,但不是数字

　　　　(4)字符串中的 .trim()属性是获得一个新值,移除空白

　　　　(5)后边的项目主要是针对BOM和DOM的操做,也就是熟练前面的HTML+JS+CSS

　　　　(6)后边的jquery用的比较多,可是这个也是很重要的.

　　　　(7)js中的数值类型,不区分整形和浮点型,就只有一种数字类型.

　　　　(8)null(空)和underfined(未定义)

　　　　(9)数组类型,对比python中的列表(重点concat链接//sort排序有点复杂//splice(三个参数,删除并添加新元素),经常使用排序)

　　　　(10)for循环,循环的写法==>数组经过索引取值

　　　　(11)对象(Object):JavaScript中的全部事物都是对象:字符串,数值,数组,函数...js容许自定义对象.

　　　　　　对象只是带有属性和方法的特殊数据类型.

　　　　　　数组:(重点)对比python中的列表

　　　　(12)注意:后边项目中用的最多的仍是jquery和bootstrap.js基础仍是用获得的,js中BOM和DOM用的仍是比较少的

　　　　(13)

typeof null　　　　  //"object"
typeof undefined　　//"undefined"
typeof NaN　　　　　 //"number"

　　　　(14)foreach()　　(等学到后面再说这个)

　　　　(15)splice()

　　　　(16)map()　　　 (后面再讲)

　　　　(17)自定义对象

　　　　(18)类型查询

　　　　(19)运算符

　　　　　　算术运算符

　　　　　　比较运算符

　　　　　　逻辑运算符

　　　　　　赋值运算符

　　　　(20)流程控制

　　　　　　if-else

　　　　　　if-else if-else　　#多条件

　　　　　　switch切换

　　　　　　for遍历

　　　　　　while

　　　　　　三元运算

二.js函数:

　　1函数定义

　　(1)普通函数定义

　　(2)带参数的函数　　//内置的arguments对象

　　(3)带返回值的函数

　　(4)匿名函数方式,多和其余函数配合使用,后边会用到

　　(5)当即执行函数,页面加载到这里,这个函数就直接执行了,不须要被调用执行

　　(6)=>, 定义函数,能够理解为匿名函数,可是用的很少

　　(7)函数中的arguments参数(看一下就好了)

　注意:函数只能返回一个值,若是返回多个值,只能讲其放在数组或对象中返回

　　(8)函数的全局变量和局部变量和变量生存周期

　　(9)做用域:首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层.

　　3.闭包:内层函数调用外层函数的变量

　　(10)词法分析(深坑),把重点放在案例上,词法分析的过程不太容易懂

　　(11)内置对象和方法(下图初步分析)

　　(12)自定义对象

　　图1

　　　　建立对象:

　　图2

　　注意：

　　　　　　ES6中提供了Map数据结构。它相似于对象，也是键值对的集合，可是“键”的范围不限于字符串，各类类型的值（包括对象）均可以当作键。

　　　　　　也就是说，Object结构提供了“字符串--值”的对应，Map结构提供了“值--值”的对应，是一种更完善的Hash结构实现。

　　map的使用:（map也是了解内容，有兴趣的能够研究一下）

　　(13)扩展:JavaScript面向对象之继承:(目前做为了解)

　 (14)Date对象:

　　　　A:建立Date对象

　　　　B:Date对象的方法:

　　(15)json对象,实现先后端交互

　　(16)RE模块(RegExp对象),正则(内容不少,用到了再看),复习的时候再看

　　(17)Math对象,相似于python的内置函数

三.前端基础之BOM和DOM

　　超哥blog:

　　　　https://www.cnblogs.com/clschao/articles/10092991.html

　　(1)window对象

　　(2)navigator对象(了解便可)

　　(3)location

　　test:

　　(4)弹出框

　　能够再JavaScript中建立三种消息框:警告框,确认框,提示框.

　　alert是用来做为弹出框的,可是这个不能在浏览器中写,这个没有什么显示效果,只有返回true

　　(5)计时器

test结果:

(6)DOM

　　1.查找标签

　　直接查找

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取（能够获取多个元素，因此返回的是一个数组）
document.getElementsByTagName     根据标签名获取标签合集

代码测试1:

获取div标签

(7)间接查找

(8)节点操做

　　建立节点(就是建立标签)

　　添加节点

　　删除节点

　　替换节点

　　属性节点

var divEle = document.getElementById("d1")
divEle.innerText  #输入这个指令，一执行就能获取该标签和内部全部标签的文本内容
divEle.innerHTML  #获取的是该标签内的全部内容，包括文本和标签

　　　　attribute操做

　　　　获取值操做

　　　　class操做提取css操做

test1:

test3:

test4:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>-->
    <!--<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>-->
    <style>
        .d1{
            color:red;
        }
        .d2{
            color:blue;
        }

    </style>
</head>
<body>

<div id="d1" class="d1 d2 d3 d4"  xxx="">
    hello world
    <div>
        Nihao
    </div>

</div>

<div>
    <input type="text" id="username">
</div>

<script>


</script>

</body>
</html>

2.事件onclick的两种绑定方式

　　事件就是页面上的动态效果,DOM就是修改标签,使标签动起来,捕获这些效果.

　　onclick:左键点击一下(好比这个搜索框)

test1结果:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id="btn">提交</button>
</body>
</html>

View Code

绑定方法一:效果:点击触发改变颜色,这种方式不经常使用,由于这种方式没有和html分割开.修改事件很差改

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id="btn" onclick="f1(this);">提交</button>
    <script>
        function f1(ths) {
            ths.style.color='red';
        }
    </script>
</body>
</html>

绑定方法2:btn2 经常使用,彻底经过js绑定方式进行绑定

效果:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id="btn" onclick="f1(this);">提交</button>
    <button id="btn2">确认</button>
    <script>
        function f1(ths) {
            ths.style.color='red';
        }

        var btn2=document.getElementById('btn2');
        btn2.onclick=function () {
            this.style.color='blue';
        }
    </script>
</body>
</html>

测试三:

经过点击提交,将下面写的颜色改为其余颜色:

效果:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id="btn" onclick="f1(this);">提交</button>
    <button id="btn2">确认</button>

    <div id="xxx">大海啊,全都是水</div>

    <script>
        function f1(ths) {
            ths.style.color='red';
            var div1=document.getElementById('xxx');
            div1.style.color='yellow';
        }

        var btn2=document.getElementById('btn2');
        btn2.onclick=function () {
            this.style.color='blue';
        }
    </script>
</body>
</html>

扩展:每次点击btn3,添加一句重复的话

(1)向标签里,添加标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>-->
    <!--<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>-->
    <style>
        .c1{
            background-color: green;
        }
    </style>


</head>
<body>

    <button id="btn" onclick="f1(this);">
        提交

    </button>
    <button id="btn2">
        确认

    </button>
    <button id="btn3">
        添加

    </button>

    <div id="div2">
        <!--<p>约吗?今天情人节!</p>-->

    </div>

    <div id="xxx">
        大海啊,全是水
    </div>

    <script>
        //事件绑定方式1
        function f1(ths){

            ths.style.color='red';
            
            var div1 = document.getElementById('xxx');
            div1.style.color = 'yellow';

        }

        //事件绑定方式2
        var btn2 = document.getElementById('btn2');
        btn2.onclick = function () {
            this.style.color='blue';

        }

        var btn3 = document.getElementById('btn3');
        btn3.onclick = function () {
            var divELe = document.getElementById('div2');
            var p1 = document.createElement('p');
            //p1.classList.add('c1');
            p1.innerText = '约吗?今天情人节,我很孤单';
            divELe.appendChild(p1);
        }


    </script>

</body>
</html>

不注释倒数第三行;结果就是添加了类属性

知识点:建立p标签

3.onblur和onfocus事件

　　 onfocus:目的,点击输入框,若是输入框没有字,显示原来默认的字,若是输入框有字,则不显示,显示输入的字

onfocus        元素得到焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,表明已经输入完了,咱们能够对它进行验证.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="username" value="请输入内容">
<script>
    var inpEle=document.getElementById('username');
    inpEle.onfocus=function () {
        if (this.value === '请输入内容') {
            this.value = '';
        }
    };
    inpEle.onblur=function () {
        console.log('>>>>>>',this.value.trim());
        if(this.value.trim().length===0){
            this.value='请输入内容';
        }
    }
</script>
</body>
</html>

4.window.onload解释

5.小米商城讲解