python全栈开发day44-js、DOM、BOM

JS的三大部分

一、ECMAJavaScript基础语法：

　　　　1.javascript的引入方式

　　　　　　　1) 行内式

　　　　　　　　<script>

　　　　　　　　　　alert(1)

　　　　　　　　</script>

　　　　　　　2） 引入式

　　　　　　　　<script src='test.js'> </script>

　　　 2.javascript基础语法

　　　　　　1） 几个简单的函数

　　　　　　　　alert()、 # 警告对话框

　　　　　　　　confirm()、# 确认对话框

　　　　　　　　prompt()、 # 输入对话框，接收的为字符串

　　　　　　　　console.log() #  控制台 输出

　　　　　　　　console.dir() #  可以显示一个对象的所有属性和方法

　　　　　　　　document.write() # 向网页文档中输出了一段文字

　　　　　　　　typeof(变量) # 类型查询

　　　　　　　　语法规则：JavaScript对换行、缩进、空格不敏感，语句末尾加分号，单行注释// 多行注释/*  */

　　　　　  2) 直接量、变量

　　　　　　　　（1） 直接量：数字99和字符串“99”　　

　　　　　　　　（2） 变量的定义、赋值、命名规范

　　　　　　　　　　　var a　；

　　　　　　　　　　　a = 1 ；

·　　　　　　　　　　 变量名的命名规范：只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字。并且区分大小写。

　　　　　　　　　　　　Camel 标记法

首字母是小写的，接下来的字母都以大写字符开头。例如：
var myTestValue = 0, mySecondValue = "hi";
Pascal 标记法
首字母是大写的，接下来的字母都以大写字符开头。例如：
Var MyTestValue = 0, MySecondValue = "hi";
匈牙利类型标记法
在以 Pascal 标记法命名的变量前附加一个小写字母（或小写字母序列），说明该变量的类型。例如，i 表示整数，s 表示字符串，如下所示“
Var iMyTestValue = 0, sMySecondValue = "hi";

 

　　　　　 3） 数据类型

　　　　　　　　基础数据类型：

　　　　　　　　String：模板字符串·模板字符串&{name}·

　　　　　　　　Number：

　　　　　　　　　　Number.MAX_VALUE,Number.MIN_VALUE.

　　　　　　　　　　NaN不等于NaN

　　　　　　　　　　isNaN('test') #true

　　　　　　　　　　Infinity

　　　　　　　　Boolean：

　　　　　　　　Null：

　　　　　　　　Undefined：

　　　　　　　　引用数据类型：

　　　　　　　　 Array：数组

　　　　　　　　　　(1) 数组的创建：

　　　　　　　　　　　　字面量方式：var a = ['a','b']

　　　　　　　　　　　　构造函数：var a = new Array();

　　　　　　　　　　 (2) 赋值

　　　　　　　　　　　　a[0] = 'a';

　　　　　　　　　　　　a[1] = 'b';

　　　　　　　　　　  (3) 方法：

　　　　　　　　　　　　　concat():把几个数组合并成一个数组；

　　　　　　　　　　　　　join():返回字符串，将数组中的元素，用指定的字符串连接起来

　　　　　　　　　　　　　pop()：删除数组最后一个元素并返回

                                               push()：向数组的末尾添加一个或更多元素，并返回新的长度。

　　　　　　　　　　　　　shift() :删除并返回数组的第一个元素；

　　　　　　　　　　　　    unshift()：向元组的开头添加一个或多个元素，并返回新数组的长度。

　　　　　　　　　　　　　sort()：对数组的数据进行排序。

　　　　　　　　　　　　    reverse()：颠倒数组中的元素的顺序。

　　　　　　　　　　　　　slice()：切片，左闭右开

　　　　　　　　　　　　　splice()： 删除元素，个数，添加新元素。

　　　　　　　　　　　　　toString():将数组中所有的元素合在一块用逗号隔开，便构成一个长字符串。

　　　　　　　　　　　　   isArray():

                                              indexOf(): 索引位置或-1

　　　　　　　　　　　(4) 属性

　　　　　　　　　　　　  length

　　　　　　　　　　　　  prototype　　　　　

　　　　　　　　 String：

　　　　　　　　　　　(1) 创建

　　　　　　　　　　　(2) 赋值

　　　　　　　　　　　(3) 属性

　　　　　　　　　　    (4) 方法

　　　　　　　　　　　　　charAt() : 返回指定索引的位置的字符；

　　　　　　　　　　　　　concat():返回新字符串，将两个或多个字符串拼接。

　　　　　　　　　　　　　match():返回正则表达式模式对字符串进行查找，并将包含查找结果作为结果返回。

　　　　　　　　　　　　　replace（a,b） 字符串b替换a

　　　　　　　　　　　　　search() 指明是否存在相应的匹配，存在则返回这个匹配距离字符串开始的偏移量。如果没有找到匹配，返回-1

　　　　　　　　　　　　　slice():切片

　　　　　　　　　　　　　split('a',1):分割字符串，并制定返回数组的长度

　　　　　　　　　　　　　substr(）:截取子字符串

　　　　　　　　　　　　　toUpperCase():

　　　　　　　　　　　　　toLowerCase():

　　　　　　　　 Date：

　　　　　　　　　　1.创建，只有构造方法一个方式，Date()

　　　　　　　　　　2.方法

　　　　　　　　　　     getDate():（1-31）一个月的第几天

　　　　　　　　　　　  getDay():（0-6）一个星期的第几天

　　　　　　　　　　　 getMonth():（0-11）一年中的第几个月

　　　　　　　　　　　 getYear():四位数年份

　　　　　　　　　　　getHours():

　　　　　　　　　　　getMinutes():

　　　　　　　　　　　getSeconds():

　　　　　　　　　mydata.toLocalString()　　　　　　　　　　　

　　　　　　　　 Object：protoType

　　　　　　　　 Math：

　　　　　　　　　　Math.floor():

　　　　　　　　　　　　.ceil()

　　　　　　　　　　　　.max(a,b)

　　　　　　　　　　　　.min(a,b)

　　　　　　　　　　　　random() 0~1包含0不包含1

　　　　　　　　　　　   max-min之间的随机数：min+Math.random()*(max-min)

　　　　　　4） 数据类型转换

• • • 数字 + 字符串：数字转换为字符串
    • 数字 + 布尔值：true转换为1，false转换为0
    • 字符串 + 布尔值：布尔值转换为字符串true或false
    • 转换成字符串：toString（）
    • 转换成数字：parseInt（）
    • 转化成浮点数：parseFloat（）
    • 强制类型转换：String（）、Boolean（）、Number（）

　　　　　　5） 流程控制

　　　　　　　#  if(){}else{}

　　　　　　　# if(){}else if(){}else{}

　　　　　　　# && ||

　　　　　　　# while(){}

　　　　　　　# do{}while()

　　　　　　　# for(var i=0;i<10;i++){}、

　　　　　　　　# switch(条件){  // 注意case穿透问题

　　　　　　　　　　case 1：

                                           执行语句；

　　　　　　　　　　　　break；

　　　　　　　　　　case 2：　　　　　　　　

             　　　　　　　　执行语句；

　　　　　　　　　　　　break；

　　　　　　　　　　。。。。。。。。

　　　　　　　　　　default:

　　　　　　　　　　　  执行语句；

　　　　　　　　　　}

　　　　　　　　6)  函数

　　　　　　　　　　　避免重复，让编程模块化。

　　　　　　　　　　 函数定义的几种形式：

　　　　　　　　　　　function 函数名(){};

　　　　　　　　　　   var 函数名= function(){};

　　　　　　　　　　　箭头形式定义：

　　　　　　　　　　　　　 var f=v=>v 等同于var f = function（v）{return V;};

　　　　　　　　　　　　　 var sum=(sum1,sum2)=>sum1+sum2;

                                                等同于:

　　　　　　　　　　　　　var sum = function(sum1,sum2){

　　　　　　　　　　　　　　          return sum1+sum2;};

　　　　　　　　　　　函数的实参数量可以大于形参数量。

　　　　　　　　　　 引申：定义类？名字首字母大写，伪面向对象。

　　　　　　　　　　　　　　function  Add(){};

　　　　　　　　　　　　　　var a = new Add()

　　　　　　　　7) 伪数组

　　　　　　　　　　有数据的长度和索引，但是没有数组的方法。

fn(2,4);
fn(2,4,6);

fn(2,4,6,8);

function fn(a,b,c) {

console.log(arguments);

console.log(fn.length); //获取形参的个数

console.log(arguments.length); //获取实参的个数

console.log("----------------");

}

 var array = [1,2,3,4,5,6];

    array.splice(0);      //方式1：删除数组中所有项目
    array.length = 0;     //方式1：length属性可以赋值，在其它语言中length是只读
    array = [];           //方式3：推荐

　　　　　　　　　　　　　　　　　　　　　　　

二、DOM 文档对象模型，操作网页上的元素的API。

　　(一)、事件

　　　　　　JS是以事件驱动为核心的一门语言。

　　　　 事件的三要素：

　　　　　　事件源、事件、事件驱动程序。

　　　　 常见事件如下：

　　　　　　onclick：鼠标单击

　　　　　　ondblclick：鼠标双击

　　　　　　onmouseover：鼠标悬停

　　　　　　onmouseout：鼠标移出

　　　　　　onkeyup：按下并释放键盘上的一个键时触发

　　　　　　onchange：文本内容或下拉菜单中的选项发送改变

　　　　　　onfocus:获取焦点，表示文本框等获得鼠标光标

　　　　　　onblur：失去焦点，表示文本框等失去鼠标光标

　　　　　　onload：网页文档加载事件

　　　　　　onunload：关闭网页时

　　　　　　onsubmit：表单提交事件、

　　　　　   onreset:重置表单时。

　　　　1.获取事件源的方式（DOM节点的获取）

　　　　　　var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签

　　　　　　var arr1 = document.getElementsByTagName("div1");     //方式二：通过 标签名 获得 标签数组，所以有s

　　　　　　var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s

　　　　2.绑定事件的方式

　　　　　 1) 直接绑定匿名函数

　　　　　　div1.onclick=function(){};

　　　　　 2) 先单独定义函数，再绑定（注意函数名不带括号）

　　　　　    div.onclick = fn；

                      function fn(){};

　　　　　3) 行内绑定(绑定函数名fn())　　

　　　　　　<div id="box1" onclick="fn()"></div>

　　　　3.事件驱动程序

　　　　　　1） 操作标签属性和样式

　　　　　　　　注意两点：

　　　　　　　　（1） 在js里写属性值时，要用引号

　　　　　　　　 （2） 在js里写属性名 -变成驼峰形式，backgroud-color->backgroudColor

　　　　　　　　 标签自带属性class-》className

　　　　　　 2） onload事件

　　　　　　　　当文档加载（先文本后图片）完毕的时候，触发onload事件　　　　　　　　

有一点我们要知道：js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。

建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前。

　　(二)、DOM

1.DOM树

　 1） 节点

　　　元素节点：HTML标签

　　    文本节点：标签中的文字（比如标签之间的空格、换行）

　　　 属性节点：标签的属性

        整个html文档是一个文档节点。所有的节点都是object

　2） DOM节点有啥用？　　

• • • • 找对象（元素节点）

      • 设置元素的属性值

      • 设置元素的样式

      • 动态创建和删除元素

      • 事件的触发响应：事件源、事件、事件的驱动程序

　　　　　　　　　（3）DOM节点的三种获取方式

　　　　　　　　　（4） DOM访问关系的获取

　　　　　　　　　　　　父节点：

　　　　　　　　　　　　　 parentNode

　　　　　　　　　　　　兄弟节点：

　　　　　　　　　　　　　　nextSibling

　　　　　　　　　　　　　　nextElementSibling

　　　　　　　　　　　　　　previousSibling

　　　　　　　　　　　　　　previousElementSibling

                                           子节点：

　　　　　　　　　　　　　　firstChild

　　　　　　　　　　　　　　firstElementChild

　　　　　　　　　　　　　　lastChild

　　　　　　　　　　　　　　lastElementChild

　　　　　　　　　　　　所有子节点：

　　　　　　　　　　　　　　childNodes

　　　　　　　　　　　　　　children

　　　　　　　　　　　多种浏览器支持方式：下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling

　　　　　　　　　　　节点自己.parentNode.children[index]; //随意得到兄弟节点

　　　　　　　　　这里讲一下nodeType。

nodeType == 1 表示的是元素节点（标签） 。记住：元素就是标签。

nodeType == 2 表示是属性节点 了解

nodeType == 3 是文本节点 了解

 

 

 

 

　　　　　　　　　　　　　　　　新的标签(元素节点) = document.createElement("标签名");

      插入节点：

　　　　两种方式：　　　　

 　　　　　　　　　　　　　　　　父节点.appendChild(新的子节点);

　　　　　　　　　　　　　　　　　　父节点.insertBefore(新的子节点,作为参考的子节点);

　 删除节点：

　　　　父节点.removeChild(子节点);

    复制节点：

  　　　　　　　　　　　　　　要复制的节点.cloneNode();       //括号里不带参数和带参数false，效果是一样的。

 　　　　　　　　　　　　　　 要复制的节点.cloneNode(true);

（6） 设置节点属性：

　　　a.获取节点的属性值

　　　　　方式1：　　　　

　　　　　　　　　　　　　　　　　　　　元素节点.属性;
   　　　　　　　　　　　　　　    　　元素节点[属性];

　       　　方式2： 元素节点.getAttribute("属性名称")；

　　　b.设置节点属性：

　　　　　1. myNode.src = "images/2.jpg" //修改src的属性值

   　　　　　　　　　　　　　　　　 myNode.className = "image2-box";  //修改class的name
　　　　　　　　　　　　　　　　　 2.元素节点.setAttribute(属性名, 新的属性值);

　　　　　　　　　　　　　　  c.删除节点属性
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　元素节点.removeAttribute(属性名);

  

  三、BOM

四、预习和扩展

　　　　1.innerHTML、innerText 、value

　　　　　innerHTML:获取的是当前元素下的标签和文本 +=‘<a href="#">haha</a>’;

　　　　　innerText：获取的是所有的文本 +='增加文本内容'

　　　　　value：获取的是input元素输入内容。

　　　　2 创建对象的几种常用方式

　　1.使用Object或对象字面量创建对象

　　2.工厂模式创建对象

　　3.构造函数模式创建对象

　　4.原型模式创建对象

3. 考试题练习：　　　　　　

　　　　　　47、[1,2,3]+[4,5,6]的结果是多少？

　　　　　　　　两个列表相加，等价于extend　　　　　

　　　　　　48、提高python运行效率的方法

　　1、使用生成器，因为可以节约大量内存

　　2、循环代码优化，避免过多重复代码的执行

　　3、核心模块用Cython  PyPy等，提高效率

　　4、多进程、多线程、协程

　　5、多个if elif条件判断，可以把最有可能先发生的条件放到前面写，这样可以减少程序判断的次数，提高效率

 

4. this的四种用法：

　　　　　　　　this是Javascript语言的一个关键字。

　　　　　　　　它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如，　

　　　　　　　　function test(){

　　　　　　　　　　this.x = 1;

　　　　　　　　}

　　　　　　　　随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

　

1.在一般函数方法中使用 this 指代全局对象

1
2
3
4
5
function test(){
　　　　this.x = 1;
　　　　alert(this.x);
　　}
　　test(); // 1
2.作为对象方法调用，this 指代上级对象

复制代码
function test(){
　　alert(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m(); // 1
复制代码
3.作为构造函数调用，this 指代new 出的对象

复制代码
　　function test(){
　　　　this.x = 1;
　　}
　　var o = new test();
　　alert(o.x); // 1
    //运行结果为1。为了表明这时this不是全局对象，我对代码做一些改变：
　　var x = 2;
　　function test(){
　　　　this.x = 1;
　　}
　　var o = new test();
　　alert(x); //2
复制代码
 

4.apply 调用 ，apply方法作用是改变函数的调用对象，此方法的第一个参数为改变后调用这个函数的对象，this指代第一个参数

复制代码
　　var x = 0;
　　function test(){
　　　　alert(this.x);
　　}
　　var o={};
　　o.x = 1;
　　o.m = test;
　　o.m.apply(); //0
//apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。如果把最后一行代码修改为

　　o.m.apply(o); //1