- JS效果三要素:
- 时间
- 事件
- 运动轨迹(分步骤来实现先死后活法逐步来)
(1)获取元素 :
- getElementById()----静态方法,前面只能跟随document
- document.body,document.title ----页面上只有一个的元素
- getElementsByTagName()-----动态方法,前面可以是document也可以跟其他元素，返回的是一个类似数组的集合
- (1)有类似数组的length
- (2)有类似数组的应用方式例如:ali[0]
- (3)再用TagName的时候必须要加上[]
- (4)所谓的动态方法,是指通过js动态添加的元素，getElementsByTagName()也可以找到
- 但是document.getElementById是找不到的
(2)事件:
事件:鼠标事件，键盘事件,系统事件,表单事件,自定义事件等等
- onclick
- onmouseover
- onmouseleave
- onmousedown
- onmouseout
- onmouseup
- onmousemove
- ......
添加事件
元素.onmouseover
函数
函数可以理解为方法,工具比如
function abc(){
/*要做的事情*/
}
- 直接调用就是abc()
- 事件调用: 元素.事件 = 函数名
- 匿名函数
元素.onmouseover = function(){}
window.alert(1); window.alert("ok");
变量
变量就是变化的量,由数字，字母，下划线，美元($)组成.但是开头不能用数字。定义一个变量必须用var也可以用window["xxx"]
- var li = document.getElementById("list");
- var num = 123;
- var name = "leo";
JS属性操作(重点)
- 属性名
- 属性值
- 属性的读取操作:获取,找到
- 元素.属性名
- 属性的写操作:替换，修改
- 元素.属性名 = 新的值
- 添加的话需要用+=
- innerHTML读取元素内所有的HTML代码
属性读写操作的注意事项
- JS属性中不允许出现"-",例如font-size改为fontSize
- class在JS里面是保留字,在JS作用class要用className
- 4个绝对不要判断
- 1.相对路径(src ,href)
- 2.颜色值
- 3.innerHTML值也不要(IE678可能有空格)
- 4.type类型也不要判断.因为IE678下面type更改不了
- []的使用
- 点"."后面的值无法修改
- []里面的值可以修改,JS允许把.替换成[] 例如style[attr]这样的
条件判断
- if(){}
- if(){}else{}
- if(){}else if(){}else if(){}
数组
- 放数据的仓库
- 中括号[],间隔用逗号,最后一个数据不要加逗号
- 数组的length属性
自定义索引和属性
自定义属性 abtn[0].abc = 123; //自定义属性
自定义属性赋值 obj.timer = setInterval(function(){},1000); //自定义属性赋值
数据类型
6大类
- 空
- 对象
- undefined
- Boolean
- String
- number
(1)要是基础类型可以用typeOf()来判断
字符串方法charAt(),获取到字符串第几个charCodeAt()获取到UniCode编码。然后在计算。再利用fromCharCode()换算成字符
(2)要是引用类型可以用instanceOf Array;instanceOf Object 来判断
Number()方法能转化字符串数字，空，空数组，要是前面有0比如00100转化的结果就是100
parseInt()相当于把前面的数字部分转化为数字，后面的字符直接舍弃.他转化不了空，真要是转化空结果就是NaN
parseFloat()同上
isNaN()判断是不是NaN
作用域重点
- 域：空间，范围，区域
- 作用:读，写
(1)在JS找到变量前，他要做的就是先找到一些关键字 var function,参数然后在正是运行代码之前他把这些都提前付了一个值,undefined
遇到重名的只留一个
(2)逐行解读代码。每读一行就是到库里面去看看，要是有值就替换，改变表达式的值
alert(a); //弹出：function a(){alert(4);}
var a=1; //预解析中的a改为了1
alert(a); //弹出1
function a(){alert(2);}//函数声明，没有改变a的值。什么也没发生。
alert(a); //继续弹出1，因为a在预处理库里面的值没有被改过。
var a=3; //预处理中a的值变为3
alert(a); //弹出3
function a(){alert(4);} //函数声明，什么也没有发生
alert(a); //继续弹出3
a(); //报错 a is not a function
第一步:
预编译他会先找一些关键字存储到内存中。 比如var function 参数等等
他找到var a 先看左边，不看右边.上来都给他一个未定义 var a = undefined;要是function他就直接替换了
比如上面a从undefined直接变成了方法
他根本不考虑后面的值
第二步:
在一步步执行代码
要是遇见表达式（表达式就是 var a = xxx）他才会重新替换或者赋值
函数的作用域要区分全局变量和局部变量
在方法内部写var的都是局部。在方法外面的都是全局变量。要是在方法里面不加var,那他改变的就是全局的值.
特别注意的就是在JS里面只有方法有作用域。for和if里面都没有作用域
真和假
- 真:非0的数字,字符串,true,函数,object,[],{}都是真的
- 假:就记住6个为假其余都真 0,NaN,空字符串,null,false,undefined
函数返回值return
这里特别注意下:
fn1();
function fn1(){
return function(){
alert(1);
}
}
返回的值就是function(){alert(1)}
fn1()();
function fn1(){
return function(){
alert(1);
}
}
返回的值就是1
arguments参数合集
arguments表示所有的参数合集
lert(sum(1,2,3));
function sum(){
var n=0;
for(var i=0; in += arguments[i];
}
return n;
}
工具类
获取到样式
function getStyle(obj,attr)
{
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]
}
兼容IE678 获取到样式合集.获取到元素的属性值
运动函数
//封装运动函数
//既然是运动函数就需要传递几个条件(参数)
// 1.对象(你得知道让谁动吧)
// 2.方向(你得告诉他朝哪边走吧)
// 3.速度 (你得告诉他一次走多少吧)
// 4.终点(你得告诉他什么时候停止吧)
// 5.回调函数(到达终点以后干点什么吧)
function Imove(obj,attr,step,target,endfn)
{
//防止累加,越来越快。这样一上来我都从0开始计算
clearTimeout(obj.timer);
//主要是判断速度是正的还是负的，上来先比较。我的思路是要是目标的位置比初始的位置大，则速度肯定是正的，要是小则速度肯定是负的
step = target>parseInt(getStyle(obj,attr))? step:-step;
obj.timer = setInterval(function(){
var dis = parseInt(getStyle(obj,attr))+step; //获取到每次走了之后距离最开始的位置
//判断一下当走的距离要是超过了终点，则必须拉回来。要是没超过。则继续走.
if(dis>=target&&step>0||dis{
dis = target;
}
obj.style[attr] = dis+"px"; //给这个对象赋值，让他自己慢慢走。
if(dis==target) //当到达了终点了，就不让他走了。这个时候你需要清除定时器了。因为没用了。
{
clearInterval(obj.timer); //清除定时器
endfn&&endfn(); //执行回调方法
}
},100)
}
//封装运动函数结束
下面是抖动函数封装
抖动函数封装
function shake(obj,attr,endfn) {
var arr = [];
for (var i = 20; i > 0; i -= 2)
{
arr.push(i,-i);
}
arr.push(0);
clearInterval(obj.shaker);
var index = 0 ;
obj.shaker = setInterval(function(){
var speed = (parseInt(getStyle(obj,attr))+arr[index]);
obj.style[attr] = speed +"px";
++index;
if(index==arr.length)
{
clearInterval(obj.shaker);
endfn&&endfn();
}
},10)
}
下面是滤镜opacity函数封装
function doopacity(obj,step,target,endfn)
{
var first = getStyle(obj,"opacity")*100; //获取到滤镜的初始值
step = target>first?step:-step; //一步走的距离是正的是负的
clearInterval(obj.opacity); //一上来清除定时器。防止累加
obj.opacity = setInterval(function(){
var speed = getStyle(obj,"opacity")*100+step; //改变opacity
if(speed>=target&&step>0&&speed<=target&&step<0)
{
speed = target; //变成目标值
}
if(speed==target)
{
clearInterval(obj.opacity); //要是相当则清空
endfn&&endfn(); //执行回调函数
}
obj.style["opacity"] = speed/100; //DIV滤镜效果
obj.style.filter = 'alpha(opacity:' + speed + ')'; //为了兼容性
},100)
}
时间函数
- getFullYear() //获取到年份
- getMonth() //这里特别注意的一定要+1因为他从0开始
- getDate() //获取到多少号
- getDay() //获取到星期几，得到是一个数值，要是星期天，则得到数字0
- getHours() //获取到小时
- getMinutes() //获取到分钟
- getSeconds() //获取到秒数
Date对象参数
数字形式:new Date(2014,4,1,9,48,12) //特别注意月份从0开始，所以他实际找的是5月
var iNow = new Date();
var iNew = new Date(2014, 10, 26, 21, 56, 0); //获取的是11月
var t = Math.floor((iNew - iNow)/1000);
var str = Math.floor(t/86400) + '天' + Math.floor(t%86400/3600) + '时' + Math.floor(t%86400%3600/60) + '分' + t%60 + '秒';
- 天: Math.floor(t/86400);
- 时: Math.floor(t%86400/3600);
- 分:Math.floor(t%86400%3600/60);
- 秒:Math.floor(t%60);
时间戳
getTime();返回的就是格林威治时间1970年 1月1日0点0分0秒0毫秒到现在的毫秒数
字符串获取，封装，截取，查找，检测
- length 空格也算长度
- charAt()找到子字符串，括号要是什么也不写。默认找到第0个
- charCodeAt()得到指定字符串的unicode编码
- String.fromCharCode():根据字符编码。返回一个字符。例如:String.fromCharCode(22937);返回的就是妙字
- 要是想获取到多个，可以String.fromCharCode(22937,22938);
查找indexOf,lastIndexOf
- indexof()返回某个字符或字符串的位置.string.indexOf('m',5)代表从str字符串中的第5位开始以后找到m的位置.
- 如果要是找不到则返回-1
- lastIndexOf()从右边往前找，也可以带数字参数，表示从哪里找
比较类，截取类
- substring(n,m)表示从第n截取，到第m位置结束.如果没有m默认截取到最后一位,包前不包后.
- slice(n,m),str.slice(0,2)与str.slice(2,0)这样的结果完全不一样。后者找不到结果。因为slice()方法不会判断里面的参数大小并交换参数位置.
- slice(-2);截取的是从最后一位到倒数第二位,-1表示的最后一位.str.slice(-4,-2);截取的是倒数第四位到倒数第二位
- toUpperCase()转换为大写
- toLowerCase()转换为小写
- split()讲字符串切割成数组
var str = 'www.miaov.com';
str.split('.'); => [“www”, “miaov”, “com”];
var str1 = 'leo';
str1.split(); => ['leo'];
str2 = ‘leo’;
str2.split(‘’); => [“l”, “e”, “o”]；
var str3 = ‘/www.miaov.com/’;
str3.split(‘/’); => [””, “www.miaov.com”, “”]；
var str4 = ‘2013-11-29-23-07’;
str4.split(‘-‘, 3); => [“2013”, “11”, “29”]
- join方法用来把数组变成字符串
var arr = [‘aa’, ‘bb’, ‘cc];
arr.join(); => ‘aa,bb,cc’ .join()括号中什么也不写，默认就是用逗号隔开。
arr.join(‘’); => ‘aabbcc’ ；
arr.join(‘-‘); => ‘aa-bb-cc’
下面是所有的字符串操作总结
var str = '妙味课堂-WWW.miaov.com';
str.charAt(1); //味
str.charCodeAt(1); //21619
String.fromCharCode(22937, 21619); //妙味
str.indexOf('m', 3); //9
str.lastIndexOf('o'); //16
'1000' < '2' //true
'1000' > 2 //true
str.substring(0, 4); //妙味课堂
str.slice(-3); //'com'
str.toUpperCase(); //'妙味课堂-WWW.MIAOV.COM'
str.toLowerCase(); //'妙味课堂-www.miaov.com'
str.split('.', 2); //['秒微课堂-www', 'miaov']
var arr = ['www', 'miaov', 'com'];
arr.join('.'); //'www.miaov.com'
for-in 循环遍历json因为json是个对象。没有长度。类似键值对。循环的是属性
var json4 = { 'name': 'miaov', 'age': 3, 'fun': '前端开发'};
for(var attr in json4){
alert(attr);
alert(json4[attr]);
}
var json5 = {
url: ['img/1.png', 'img/2.png'],
text: ['图片一', '图片二']
};
for(var attr in json5) {
for(var i=0; i alert(json5[attr][i]);
}
}
数组
- 可以通过修改数组的length属性来清空数组。
- 从后面添加数组push() arr.push()往数组最后一位加内容..push()方法是有返回值得。返回是数组的新长度
- 前面添加数组unshift() arr.unshift()往数组的最前面添加内容，返回值为数组的新长度(IE6,7不支持)
- 删除pop() arr.pop()表示从后面删除一个数组元素。返回值就是要删除的数组
- 删除shift() arr.shift()删除数组的第一个返回值是被扔掉的值
var arr = ['TM', '钟毅', '张森', '杜鹏', 'Leo'];
arr.unshift(arr.pop()); //数组变为：['Leo', '钟毅', '张森', '杜鹏', 'TM']
或
arr.push(arr.shift()); //数组变为：['钟毅', '张森', '杜鹏', 'Leo', 'TM']
- splice()方法
- splice(a,b,c) a表示起始位置,b表示个数,c表示要替换的值
- b要是为0表示插入，c要是什么也不写表示删除。
代码见下
var arr = ['TM', '钟毅', '张森', '杜鹏', 'Leo'];
//删除
//arr.splice(0, 1); //删掉第0位，删1个。两个参数第一个是从第几位开始，第二个是删掉几个。splice删除的时候有返回值，返回的是被删除的内容
//替换
//arr.splice(0, 1, '莫涛'); //替换第0位，替换1个，替换为'莫涛'。返回的还是删除的东西
//添加
arr.splice(1, 0, '李贤'); //在第1位那里，删除0个，添加了一个'李贤'到了第1位，'钟毅'就变成了arr[2]了。后面也可以添加多个。如果splice删除了0个，那么就没有返回值。
数组去重
var arr = [1, 2, 2, 4, 2];
for ( var i=0; ifor ( var j = i+1; j if( arr[i]==arr[j] ){
arr.splice( j, 1 );
j--;
}
}
}
也可以使用indexOf
Sort排序
var arr = ['c', 'd', 'a', 'e'];
arr.sort(); // 'a', 'c', 'd', 'e' 按照unicode编码排序
var arr2 = [4, 3, 5, 76, 2, 0, 8];
// arr2.sort(); // 0, 2, 3, 4, 5, 76, 8 sort默认是将数组中的每一个按照字符串来排序的，因此出现了76排在8前面的情况
// arr2. sort(function( a, b ){
return a - b; //如果a-b返回正数，就a、b两个数字换个序。如果a-b是负数，就不换序
}) //返回数字从小到大 0, 2, 3, 4, 5, 8, 76
// arr2. sort(function( a, b ){
return b - a;
}) //返回数字从大到小 76,, 8, 5, 4, 3, 2, 0
随机数
Math.round( Math.random()*80 + 20 ); //返回20~100之间的随机整数
concat连接,表示把2个数组拼接起来
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [7, 8, 9];
arr1.concat(arr2); //[1, 2, 3, 4, 5, 6] 新数组与原来数组没什么关系。
arr1.concat(arr2, arr3); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
reverse反转
var arr1 = [1, 2, 3];
arr1.reverse();
alert(arr1); // [3, 2, 1]
分享到:
閱讀更多 南京菜菜工作室 的文章
關鍵字: 读取 编程语言 JavaScript
