JS原生第六篇（帅哥）

复习

按钮不可用 disabled = “disabled” || true
setTimeout 只执行一次 setInterval 执行很多次
递归调用：函数自己调用自己函数递归调用不提倡用函数名而喜欢用的是 arguments.callee 返回的是正在执行的函数本身
逻辑运算符与 && 或 || 非！ ! > && > ||
2&&0 0 1&&8 0&&3 0 1||0
转换为字符型
    var num = 12345;
    num+ “”
    String(num);
    num.toString();   10进制
    num.toString(2)   二进制
根据字符位置返回字符
charAt(索引号)

var txt = “abcde”;

txt.charAt(3); d

charCodeAt(3) unicode 编码 97 100

1.1 根据字符返回位置

跟 charAt() 相反的根据字符返回的是位置

1.1.1 返回前面起第一个字符的位置

indexOf(“字符”);

它是从前面开始数（从左边开始数），而且只找第一个，然后返回改字符的位置，索引号都是从0开始的。返回的是个数值。

var txt = “abcdef”;

alert(txt.indexOf(“d”)) 结果就是 3

如果找不到该字符返回 -1

1.1.2 返回后面起第一个字符的位置

lastIndexOf(参数：索引字符串)

从后面开始数同上

var txt = “abcdef” ;

txt.lastIndexOf(“d”); 3

返回的值，还是从左边开始数的索引号。

1.2 网址编码

我们知道一个网址自己的网址，不同页面也有自己id网址，我们经常会做一些，把网址送入到后台。但是后台再处理的不认识比如换行啊等特殊符号的？

var url = “http://www.itast.cn?name=cz”

所以我们要实现编码，然后再传到后台。

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

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

var url = "http://www.itcast.cn?name=andy";
console.log(encodeURIComponent(url)); // 编码
var afterUrl = encodeURIComponent(url);
console.log(decodeURIComponent(afterUrl)); // 解码

结果：

1.3 操作字符串

合并字符串取字符串

1.3.1 concat() 连接字符串

var txt1 = “abc”;

var txt2 = ”123”;

console.log(txt1.concat(txt2)); “abc123”;

1.3.2 slice()

slice(“取字符串的起始位置”, [结束位置]) ; [] 可选的

起始位置一定要有结束位置可以省略

var txt = “abcedf”;

txt.slice(3) ; 从 txt 里面字符的第 3（索引号）个开始取结束位置省略，一直取到最后一个。

总结 slice(3) 从第3个开始取，一直取到最后

slice(3,6) 3 从第3个开始取 6 取到第6索引号的位置，还是从左边的第0个开始数。但是不包 6 。

起始位置可以是负数，如果是负数，则是从右边往左边开始取。

var txt =”asdf”;

txt.slice(-1) 结果是 f

1.3.3 substr()

substr(起始位置,[取的个数])

同上。

不写取的个数，默认从起始位置一直取到最后。

取的个数：是指从起始位置开始，往后面数几个。

var txt = “abcdefghijk”;

txt.substr(3,4);

从第3个（d）开始数 4个 defg

substr(-1) 少用 ie678 报错。尽量少用

兼容性的写法：

onBtnClick("btn7",div1.substr(div1.length-1,1)); // 兼容的写法

substring 同slice 一样的但是有一点不同

substring(3,6)

substring 始终会把小的值作为起始位置大的值作为结束位置

例如： substring(6,3) 实际中自动变成 substring(3,6);

1.4 保留小数位数

122340.12345 保留两位有效小数 122340.12

substr(0, .+3)

1.console.log(str.substr(0,str.indexOf(".")+3));

通过 indexOf 返回小数点的位置截取字符串

2 console.log(parseInt(PI*100) /100);

先乘以100 取整然后除以100

3 console.log(PI.toFixed(2));

pi.toFixed(2) 保留 2位小数

1.5 大小写转换

asdf = ASDF

ASDF -- asdf

1 toUpperCase，转换为大写（参数：无）

2 toLowerCase，转换为小写（参数：无）

asdf.toUpperCase() 结果就是： ASDF

$("txt").value.toUpperCase();

把txt 的值转换为大写

1.6 无缝滚动

原理：

首先先复制两张图片（第一张和第二张）放到最后面（本质上是第 5.6张）

ul 是盒子移动的，如果ul 的left 值大于等于 4张图片的宽度，就应该快速复原为0 。

完整代码：

1 <script>

2 var scroll = document.getElementById("scroll");

3 var ul = scroll.children[0];

4 var num = 0; //控制左侧值 left

5 var timer = null; // 定时器

6 timer = setInterval(autoPlay,20);

7 function autoPlay() {

8 num--;

9 //console.log(num);

10 num<=-1200 ? num = 0 : num;

11 ul.style.left = num + "px";

12 }

13 scroll.onmouseover = function() { // 鼠标经过大盒子停止定时器

14 clearInterval(timer);

15 }

16 scroll.onmouseout = function() {

17 timer = setInterval(autoPlay,20); // 开启定时器

18 }

19 </script>

1.7 缓动动画

匀速动画，看起来，效果太简单。

等差序列 : 2 4 6 8 10

缓动动画公式:

一个盒子初始值是 0 要走到 400 px 的位置

假如说，初始值 leader 0 target 400

box.style.left = xxxx + “px”

leader = leader + (target - leader ) /10 ;

1 btn.onclick = function() {

20 setInterval(function(){

21 leader = leader + (target - leader )/10;

22 box.style.left = leader + "px";

23 },30)

24 }

1.8

1. 根据位置返回字符 asdfg.charAt(3) f

根据字符返回位置 asdfgg.indexOf(“f”) 3 从前面索引

lastIndexOf(“g”) 5 从后面索引

2. slice(起始位置，[ 结束位置 ])

slice(3) 从第3个开始选 slice(3,6) 从索引号3开始取，数6个但是从索引号0 开始数

var arr = [1,3,5,7];

asdfghidk fgh

substr(3,6) 从3开始选从第三个开始数往后数 6个 fghidk

toFixed(2)

缓动公式 :

leader = leader + (target - leader) / 10

1.9 offset家族

offset 自己的

目的： js中有一套方便的获取元素尺寸的办法就是offset家族；

1.9.1 offsetWidth offsetHeight

得到对象的宽度和高度(自己的，与他人无关)

offsetWidth = width + border + padding

div { width:220px; border-left:2px solid red; padding:10px;}

div.offsetWidth = 220 + 2 + 20

为什么不用 div.style.width 因为东西只能得到行内的数值

1.9.2 offsetLeft offsetTop

返回距离上级盒子（最近的带有定位）左边的位置

如果父级都没有定位则以body 为准

这里的父级指的是所有上一级不仅仅指的是父亲还可以是爷爷曾爷爷曾曾爷爷。。。。

offsetLeft 从父级的padding 开始算父亲的border 不算

总结一下：就是子盒子到定位的父盒子边框到边框的距离

1.9.3 offsetParent

返回改对象的父级（带有定位）不一定是亲的爸爸

前面学过一个返回父亲(亲的) parentNode 有所区别

如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。

2、如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。

var son = document.getElementById("son");
//alert(son.parentNode.id);
alert(son.offsetParent.tagName); // tagName标签的名字

1.9.4 offsetTop style.top 的区别

一、最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。而 style.top 不可以只有定位的盒子才有 left top right

二、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。

style.left = 300px parseInt（300px）结果 300

parseInt（style.left） + parseInt（style.left）

三、offsetTop 只读，而 style.top 可读写。

四、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

五、最重要的区别 style.left 只能得到行内样式 offsetLeft 随便

1.10 事件对象

我们学过一些事件 : onmouseover onmouseout onclick .....

btn.onclick = function(event) { 语句 }

event 单词翻译过来事件的意思

event 就是事件的对象指向的是事件是 onclick

再触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。

比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。

普通浏览器支持 event

ie 678 支持 window.event

所以我们采取兼容性的写法：

var event = event || window.event;

1.10.1 event 常见属性

属性	作用
data	返回拖拽对象的URL字符串（dragDrop）
width	该窗口或框架的高度
height	该窗口或框架的高度
pageX	光标相对于该网页的水平位置（ie无）
pageY	光标相对于该网页的垂直位置（ie无）
screenX	光标相对于该屏幕的水平位置
screenY	光标相对于该屏幕的垂直位置
target	该事件被传送到的对象
type	事件的类型
clientX	光标相对于该网页的水平位置（当前可见区域）
clientY	光标相对于该网页的水平位置

1.10.2 pageX clientX screenX 区别

screen X screenY

是以我们的电脑屏幕为基准点测量

pageX pageY

以我们的文档（绝对定位）的基准点对齐

ie678 不认识

clientX clientY

以可视区域为基准点类似于固定定位

1.11 常用事件

onmouseover onmouseout onclick

onmousemove 当鼠标移动的时候就是说，鼠标移动一像素就会执行的事件

div.onmousemove = function() { 语句 }

当鼠标再div 身上移动的时候，就会执行。

得到在某个盒子内的坐标：

div.onmouseover 和 div.onmousemove 区别

他们相同点都是经过 div 才会触发

div.onmouseover 只触发一次

div.onmousemove 每移动一像素，就会触发一次

onmouseup 当鼠标弹起

onmousedown 当鼠标按下的时候

1.拖动原理 == 鼠标按下接着移动鼠标。

bar.onmousedown = function(){

document.onmousemove = function(){

}

当我们按下鼠标的时候，就要记录当前鼠标的位置 - 大盒子的位置
算出 bar 当前在大盒子内的距离。

1.11.1 防止选择拖动

我们知道按下鼠标然后拖拽可以选择文字的。

清除选中的内容

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();