js笔记整理02
来源:互联网 发布:saber软件芯片tl494 编辑:程序博客网 时间:2024/05/17 06:57
数组常用的方法
加内容 减内容 连接 转换
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年的毫秒数
vardate = newDate(); //声明
console.log(date.getTime()); // 提倡使用的
console.log(date.valueOf());
// 直接使用
console.log(Date.now());
console.log(+newDate());
常用的日期的方法
获取日期和时间
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
所以 采取兼容性的写法 :
varevent =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();
- js笔记整理02
- js笔记的整理
- JS笔记整理(一)
- JS笔记整理(二)
- JS笔记整理(三)
- JS笔记整理(四)
- JS笔记整理(五)
- js学习笔记整理
- JS基础学习笔记整理
- JS基础加强整理笔记
- Ext Js 开发笔记整理
- JS基础学习笔记整理
- JS数组学习笔记整理
- JS笔记3-笔记整理自智能社JS教程
- DWR util.js 学习笔记 整理
- js--Array遍历--有道笔记整理
- js事件大全--有道笔记整理
- JS初体验(笔记整理)
- fbxsdk 的 JNI 库
- Retrofit2 完全解析 探索与okhttp之间的关系
- 关于水平居中,垂直居中的三种办法
- ace在linux下编译
- 树的直径学习总结
- js笔记整理02
- 大数据IMF传奇行动绝密课程第20课:Top N彻底解秘
- AsyncTask异步从网上下载图片
- gitlab安装 vmware ubuntu16 linux 虚拟机 dns无法解析
- 汉字取首字母
- 优雅地实现 Android Toolbar 及沉浸式状态栏(二)
- ACM-括号配对问题
- 读书每日记8-2
- uva 11609Teams