js笔记整理02

ゞ浴缸里的玫瑰 2022-09-24 15:19 157阅读 0赞

数组常用的方法

加内容   减内容      连接    转换

push();     向数组的后面添加内容

var arr = \[1,2\]    arr.push(“你好吗”);        结果 \[1,2,”你好吗”\];

unshift()   数组的前面添加

var arr = \[1,2\]    arr.unshift(“我很好”)   结果   \[“我很好”,1,2\]’

删除

1. pop()    删除最后一个元素

var arr = \[1,2\]    arr.pop();      \[1\]

2. shift()   删除第一个元素

var  arr = \[1,2\]    arr.shift()      \[2\]

注意：

var arr = \[1,2,3,4\];

console.log(arr.push(8));     结果是  5      返回改数组的长度

如果这么写：

var arr = \[1,2,3,4\];

arr.push(8);

console.log(arr);      结果 就是  【1,2,3,4,8】

var arr = \[1,2,3,4,5,6,12\];

console.log(arr.pop());     结果是 12  返回最后一个元素

var arr = \[1,2,3,4\];

arr.pop();

console.log(arr);      结果 就是  【1,2,3】

连接    concat

join()    把数组转换为字符串

var  arr = \[1,2,3,4\];

var test = arr.join(“-”);

console.log(test)    1-2-3-4

var arr = \[1,2,3,4\];

arr.join(“\*”);

console.log(arr);      \[1,2,3,4\]

split()   把字符串转换为 数组

var  txt = “1-2-3”;

var  test = txt.split(“-”)

console.log(test)     \[“1”,”2”,”3”\];

4. dom

我们操作最多的就是  元素节点      标签节点    标签    li span

5. 节点的访问关系

父级      parentNode

this.parentNode     ==  我的父亲

兄弟     nextSibling

<ul>

孩子们

childNodes       官方用法

一般情况下，我们只需要元素节点

nodeType  来  判断

nodeType == 1    元素节点

nodeType == 2    属性节点

nodeType == 3    文本节点

children    不是官方写法       所有的孩子   亲儿子

ie 678 把注释节点 也算  可以避免

## **设置节点属性 ** ##

1.  获取节点属性

getAttribute(属性)      获取属性

通过这个方法，可以得到 某些元素的  某些属性 。

alert(demo.getAttribute("title"));

2. 设置节点属性

setAttribute(“属性”,”值”);

比如说，我们想要把 一个 类名  改为   demo

div.setAttribute(“class”,”demo”);

3. 删除某个属性

removeAttribute(“属性”);

demo.removeAttribute(“title”)

## ** 内置对象** ##

内置对象：  内置对象就是指这个语言自带的一些对象，供开发者使用，这些对象提供了一些常用的或是最基本而必要的功能。

## ** 日期函数  ( Date() )** ##

这个函数 （对象） 可以设置我们本地 日期。   年月日 时分秒

### ** 声明日期 ** ###

var  date = new Date();

创造声明一个新的日期函数   赋值给了  date

var arr = new Array();

### ** 使用函数 ** ###

得到 毫秒数    ms        s   m   h

从 1970  年1 月1号      unix      32位      68年

2038     千年虫       64 位

var  date = new Date();

date.getTime();

date.valueOf();        得到 距离 1970年的毫秒数

var date  = new Date();  // 声明  
**console**.log(date.getTime());  // 提倡使用的  
**console**.log(date.valueOf());  
  
// 直接使用  
**console**.log(Date.now());  
**console**.log(\+new Date());

## **常用的日期的方法   ** ##

获取日期和时间

getDate()                  获取日 1-31

getDay ()                  获取星期 0-6

getMonth ()                获取月  0-11

getFullYear ()             获取完整年份（浏览器都支持）

getHours ()                获取小时 0-23

getMinutes ()                获取分钟 0-59

getSeconds ()                获取秒  0-59

getMilliseconds ()            获取当前的毫秒

getTime ()        返回累计毫秒数(从1970/1/1午夜)

如果是上午  ，我打开页面   页面中显示的是

上午好，好好学习     显示的是上午的图片

如果是下午  我打开页面   页面中显示的是

下午好，天天向上     显示的是下午的图片

根据当前的小时来判断     if

## **定时器 ** ##

window.setInterval(“执行的函数”,间隔时间)

正确的写法:

setInterval(fun, 1000);      1000 ms   毫秒

每隔1秒钟，就去执行一次 fun 这个函数.

setInterval(“fun()”,1000)     可以用

setInterval( function()\{\} , 1000 )

setInterval(fun(),1000)  错误的

定时器 特别的像  for 循环，但是我 的定时器最大的特点在于， 自动，可以设定时间。

var endTime = new Date(“2015/12/12”);

如果date 括号里面写日期  就是 自己定义的时间

如果 date括号里面不写日期 ， 就是当前时间 。

new Date(“2015/12/12 17:30:00”);

日期和时分秒中间 有空格隔开

旋转

1     hour.style.WebkitTransform = "rotate("+ h\*30 +"deg)";

2         second.style.MozTransform = "rotate("+ s\*6 +"deg)";

## ** 按钮不可用** ##

button  不可以用       disabled  不可用的意思

btn.disabled = “disabled”     ||   btn.disabled = true;

button是个双标签  所以要更改他的值， 使用 innerHTML 的，不是value。

1. 关闭定时器   clearInterval(定时器名称);    定时器不再进行

## **  this  ** ##

this 指向的是 事件的调用者 ，或者是函数的使用者。

var  btn.onclick = function() \{  this\}

## ** 定时器之  setTimeout()     ** ##

时间去哪儿了   类似于定时炸弹 。。

setTimeout(“函数”, 时间 )

setInterval(fn,5000);      每隔 5秒钟，就去执行函数fn一次

setTimeout(fn,5000);     5秒钟之后，去执行 fn 函数， 只执行一次

setInterval是排队执行的

JS 页面跳转: window.location.href = ”http://www.itcast.cn” ;     BOM

### **arguments 对象** ###

function fn(a,b,c) \{  console.log(a+b+c); alert(arguments.length;)\}

fn(1,3,4,6);

arguments.length;  返回的是  实参的个数。

但是这个对象有讲究，他只在正在使用的函数内使用。

arguments.callee;

返回的是正在执行的函数。 也是在函数体内使用。 在使用函数递归调用时推荐使用arguments.callee代替函数名本身。

function fn() \{  console.log(arguments.callee); \}

这个callee 就是 ：   function fn()

1.  a&&b   结果是什么？

如果a 为假 ，则返回 a

如果a 为真 ，则返回 b

var aa  =   0&&1;

alert(aa)    // 0

var bb =  1&&0;

alert(bb);  //0

var cc =  1&&10;

alert(cc);  // 10

2. a||b

如果 a 为假   则返回b

如果 a 为真   则返回a

**console**.log(0||1);   1  
**console**.log(1||0);   1  
**console**.log(1||5);   1  
**console**.log(5||1);   5

var a = 1 && 2 && 3;

console.log(a);   3

var b = 0 && 1 && 2;

console.log(b);  0

var c = 1 && 0  && 2;

console.log(c);  0

a+=3

a = a % 3;

### **转换为字符串** ###

1. + “”       2+ “”  =  “2”    2+”ab”   =  “2ab”

2. String()    转换为字符串

3. toString（基数）  ;    基数就是进制

var txt = 10;

txt.toString(2)       二进制      1010

### **获取字符位置方法** ###

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

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

var txt = “abcedf”;

比如，  txt.charAt(4);    索引号一定是从0开始    返回的结果是 d

我们根据我们输入的 位数 返回相应的 字符 。

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

indexOf(“字符”);

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

var txt = “abcdef”;

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

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

### **    var  txt = “abcdef” ;** ###

txt.lastIndexOf(“d”);     3

## **网址编码 ** ##

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

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

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

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

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

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

## **操作字符串** ##

合并字符串   取字符串

### **concat() 连接字符串** ###

var  txt1 = “abc”;

var txt2 = ”123”;

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

### **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

### ** 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);

## **保留小数位数** ##

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位 小数

## **大小写转换** ##

asdf   =  ASDF

ASDF  --   asdf

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

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

asdf.toUpperCase()   结果就是：     ASDF

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

把txt 的值 转换为大写

## **无缝滚动** ##

原理：

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

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

完整代码：

3  <script>

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

5     var ul = scroll.children\[0\];

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

7     var timer = null;  // 定时器

8     timer = setInterval(autoPlay,20);

9     function autoPlay() \{

10         num--;

11         //console.log(num);

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

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

14     \}

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

16         clearInterval(timer);

17     \}

18     scroll.onmouseout = function() \{

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

20     \}

21 </script>

## **缓动动画** ##

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

等差序列   :    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() \{

22         setInterval(function()\{

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

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

25         \},30)

26     \}

## **offset家族** ##

offset  自己的

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

### **offsetWidth    offsetHeight** ###

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

offsetWidth =  width  + border  +  padding

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

div.offsetWidth =  220 + 2 + 20

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

### **offsetLeft  offsetTop    ** ###

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

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

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

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

就是子盒子到定位的父盒子边框到边框的距离

### **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标签的名字

### **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 随便

## **事件对象** ##

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

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

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

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

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

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

普通浏览器支持 event

ie 678 支持 window.event

所以 采取兼容性的写法 ：

var event = event || **window**.**event**;

### **event 常见属性** ###

<table> 
 <tbody> 
 <tr> 
 <td style="background:rgb(79,129,189)"> 属性 </td> 
 <td style="background:rgb(79,129,189)"> 作用 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(208,216,232)"> data </td> 
 <td style="background:rgb(208,216,232)"> 返回拖拽对象的URL字符串（dragDrop） </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(233,237,244)"> width </td> 
 <td style="background:rgb(233,237,244)"> 该窗口或框架的高度 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(208,216,232)"> height </td> 
 <td style="background:rgb(208,216,232)"> 该窗口或框架的高度 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(233,237,244)"> pageX </td> 
 <td style="background:rgb(233,237,244)"> 光标相对于该网页的水平位置（ie无） </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(208,216,232)"> pageY </td> 
 <td style="background:rgb(208,216,232)"> 光标相对于该网页的垂直位置（ie无） </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(233,237,244)"> screenX </td> 
 <td style="background:rgb(233,237,244)"> 光标相对于该屏幕的水平位置 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(208,216,232)"> screenY </td> 
 <td style="background:rgb(208,216,232)"> 光标相对于该屏幕的垂直位置 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(233,237,244)"> target </td> 
 <td style="background:rgb(233,237,244)"> 该事件被传送到的对象 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(208,216,232)"> type </td> 
 <td style="background:rgb(208,216,232)"> 事件的类型 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(233,237,244)"> clientX </td> 
 <td style="background:rgb(233,237,244)"> 光标相对于该网页的水平位置&nbsp;（当前可见区域） </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(208,216,232)"> clientY </td> 
 <td style="background:rgb(208,216,232)"> 光标相对于该网页的水平位置 </td> 
 </tr> 
 </tbody> 
</table>

### **pageX  clientX  screenX 区别** ###

screen X   screenY

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

pageX  pageY

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

ie678 不认识

clientX   clientY

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

## **常用事件** ##

onmouseover      onmouseout   onclick

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

div.onmousemove = function() \{ 语句 \}