javascript 第七篇(入门篇)

 

        javascript 第七篇(入门篇)

目录2

第1章 DOM详解3

1.1DOM案例3

1.2属性获取修改和删除（属性绑定）3

1.3节点关系。（父节点、兄弟节点、子节点、所有子节点）4
 DOM详解

1.1 DOM案例

0.显示二维码

 1.禁用文本框和获取失去焦点输入事件。

2.表单处理。Input取值赋值和select选水果。   

 3.验证账号密码，高亮显示。

4.全选反选

1.2 属性获取修改和删除（属性绑定）

1.teb栏。（排他思想）（简单写法和兼容写法）

1.点亮盒子。

（第三种体验双重for循环，第一种打印三角形，第二种冒泡排序）

2.弹出索引值。

3.属性绑定。

4.两个for循环变一个

2.自定义属性（兼容写法）

1.直接绑定属性：不会再标签中显示（没有的属性）；

2.标签中的自定义属性，不能box.aaa获取

（火狐谷歌IE9+）(IE678可以获取)

3.get/setAttribute（）；可以

1.3 节点关系。（父节点、兄弟节点、子节点、所有子节点）

1.子节点。（京东头）

2.nodeType/nodeName/nodeValue:    

元素/属性/文本    123/标签:属性名:#text/null:属性值:内容

3.childNodes实现各行变色index = 0;

4.父节点/所有子节点/兄弟节点

 

   

                 javascript 第八篇

 
                

目录2

第1章 DOM详解3

1.1DOM案例3

1.1.1菜单练习3

1.1.2之前之后的所有兄弟节点（封装，菜单案例）3

1.1.3style属性设置和获取（$方法的封装）3

（style是一个对象，不能获取内嵌和外链）3

1.1.4input获取高亮。    隔行变色。（style实现）（记录color）4

1.1.5改变位置。（奶茶妹：隐藏盒子方法：改变宽高等属性）4

1.1.6祝愿墙：定位，left，top，层级.4

1.2DOM元素操作4

1.2.1生成标签，3钟方法4

1.2.2创建添加删除元素4

第1章
 DOM详解

1.1 DOM案例

1.1.1 菜单练习

1.1.2 之前之后的所有兄弟节点（封装，菜单案例）

1.1.3 style属性设置和获取（$方法的封装）

（style是一个对象，不能获取内嵌和外链）

1.样式少的时候使用

2.style是对象

3.值是字符串，没有设置值是“”；

4.命名规则，驼峰命名。和css不一样

5.设置了类样式不能获取。（只和行内式交互，和内嵌和外链无关）

6.box.style.cssText =“字符串形式的样式”；

1.1.4 input获取高亮。    隔行变色。（style实现）（记录color）

1.1.5 改变位置。（奶茶妹：隐藏盒子方法：改变宽高等属性）

1.2 DOM元素操作

1.2.1 生成标签，3钟方法

案例：

1.点击高亮显示

2.祝愿墙

1.2.2 创建添加删除元素

案例：水果案例

问题：直接操作元素会导致长度原来越短。不会让所有元素都移动到另一侧。解决：反过来。添加的时候用insertBefore()或者数组。

1.2.3 表格操作（了解）

 内置对象

1.1 Date

案例：日历、倒计时

1.2 String/Number/Boolean

1.2.1 给索引查字符(charAt/charCodeAt)

1 charAt，获取相应位置字符（参数： 字符位置）

注释：字符串中第一个字符的下标是 0。如果参数index不在0与string.length之间，该方法将返回一个空字符串。

2 charCodeAt获取相应位置字符编码（参数： 字符位置）

charAt()方法和charCodeAt()方法用于选取字符串中某一位置上的单个字符

区别：charCodeAt()方法，它并不返回指定位置上的字符本身，而是返回该字符在Unicode字符集中的编码值。如果该位置没有字符，返回值为NaN.

字符/字符编码 = Str.charAt/charCodeAt(索引值);

1.2.2 给字符查索引（indexOf/lastIndexOf）

1 indexOf，从前向后索引字符串位置（参数： 索引字符串）

从前面寻找第一个符合元素的位置

2 lastIndexOf，从后向前索引字符串位置（参数：索引字符串）

从后面寻找第一个符合元素的位置

找不到则返回 -1

索引值 = str.indexOf/lastIndexOf(想要查询的字符);

1.2.3 url编码和解码（了解）

URI (Uniform ResourceIdentifiers,通用资源标识符)进行编码，以便发送给浏览器。有效的URI中不能包含某些字符，例如空格。而这URI编码方法就可以对URI进行编码，它们用特殊的UTF-8编码替换所有无效的字符，从而让浏览器能够接受和理解。

encodeURIComponent()函数可把字符串作为URI组件进行编码

decodeURIComponent()函数可把字符串作为URI组件进行解码

1.2.4 字符串的链接

新字符串 = str1.concat(str2)； 链接两个字符串

1.2.5 字符串的截取

1. slice，截取字符串（参数：1，截取位置【必须】，2终结点）

字符串 = str.slice（索引1，索引2); 两个参数都是索引值。

(1).（2,5）  正常包左不包右。

(2). ( 2 )   从指定的索引位置剪到最后。

(3).（-3）   从倒数第几个剪到最后.

(4).（5,2）  前面的大，后面的小，空。

 

2. substr，截取字符串（参数：1，截取位置【必须】，2截取长度）

字符串 = str.substr（参数1，参数2); 1索引值,2长度。

第一个参数为从索引位置取值，第二个参数返回字符长度。

(1).（2,4）    从索引值为2的字符开始，截取4个字符。

(2).（1）     一个值，从指定位置到最后。

(3).（-3）    从倒数第几个剪到最后.

(4).不包括前大后小的情况。

3. substring同slice

字符串 = str.substring（参数1，参数2); 两个参数都是索引值。

  不同1：参数智能调转位置。

  不同2：参数负值，将全部获取字符串。

   （1）.（2,5）    正常包左不包右。

    (2).   ( 2 )      从指定的索引位置剪到最后。

    (3).  （-3）    获取全部字符串.

    (4).  （5,2）   前面的大，后面的小，不是空。（2,5）

1.2.6 特殊方法简介

trim()     //只能去除字符串前后的空白

replace()  //替换   str.replace(/aaa/gi,“bbb”);

split()    //字符串变数组

1.3 Math

Math.abs();       取绝对值

Math.floor();      向下取整

Math.ceil();       向上取整

Math.round();     四舍五入取整

Math.random();   随机数0-1

1.4 addEventListenner（兼容绑定、移除、原理）

1.使用方法

2.实现原理

3.兼容性。

5.移除事件

1.bnt.onclick = null;

2.btn.removeEventListener(...);

3.btn.detachEvent(...);(attachEvent)

4.封装