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

    1.回顾上节内容(JavaScript)

      一.JavaScript概述

        1.ECMAScript和JavaScript的关系

        2.ECMAScript的历史

        3.JavaScript是一门前后端都可以写的一门语言,操作和浏览器的一些交互的内容,也可以操作文档树,html其实就是一颗文档树.

        4.ES6就是指ECMAScript6

        尽管ECMAScript是一个重要标准,但它并不是JavaScript唯一的部分,当然,也不是唯一被标准化的部分,实际上一个完整的JavaScript实现由以下3个部分组成:

          核心(ECMAScript)

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

          浏览器对象模型(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函数定义

      2.

      (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.小米商城讲解

  • 相关阅读:
    C语言 sprintf 函数 C语言零基础入门教程
    C语言 printf 函数 C语言零基础入门教程
    C语言 文件读写 fgets 函数 C语言零基础入门教程
    C语言 文件读写 fputs 函数 C语言零基础入门教程
    C语言 fprintf 函数 C语言零基础入门教程
    C语言 文件读写 fgetc 函数 C语言零基础入门教程
    C语言 文件读写 fputc 函数 C语言零基础入门教程
    C语言 strlen 函数 C语言零基础入门教程
    Brad Abrams关于Naming Conventions的演讲中涉及到的生词集解
    适配器模式
  • 原文地址:https://www.cnblogs.com/studybrother/p/10373209.html
Copyright © 2011-2022 走看看