数组常用的方法
加内容 减内容 连接 转换
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>
<li> <div>
孩子们
childNodes 官方用法
一般情况下,我们只需要元素节点
nodeType 来 判断
nodeType == 1 元素节点
nodeType == 2 属性节点
nodeType == 3 文本节点
<a href =”xxxxx”> 内容 </a>
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 常见属性
属性 | 作用 |
data | 返回拖拽对象的URL字符串(dragDrop) |
width | 该窗口或框架的高度 |
height | 该窗口或框架的高度 |
pageX | 光标相对于该网页的水平位置(ie无) |
pageY | 光标相对于该网页的垂直位置(ie无) |
screenX | 光标相对于该屏幕的水平位置 |
screenY | 光标相对于该屏幕的垂直位置 |
target | 该事件被传送到的对象 |
type | 事件的类型 |
clientX | 光标相对于该网页的水平位置 (当前可见区域) |
clientY | 光标相对于该网页的水平位置 |
pageX clientX screenX 区别
screen X screenY
是以我们的电脑屏幕 为基准点 测量
pageX pageY
以我们的 文档 (绝对定位) 的基准点 对齐
ie678 不认识
clientX clientY
以 可视区域 为基准点 类似于 固定定位
常用事件
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(){
}
}
2. 当我们按下鼠标的时候,就要记录当前 鼠标 的位置 - 大盒子的位置
算出 bar 当前 在 大盒子内的距离 。
防止选择拖动
我们知道 按下鼠标然后拖拽可以选择文字 的。
清除选中的内容
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();