获取元素:
document.getElementById 通过id获取一个元素
obj.getElementsByTagName 通过标签名获取一组元素
obj.getElementsClassName 通过Class获取一组元素，不兼容低版本浏览器
操作属性：
. 只能操作已有的属性，更简单
[] 更灵活，点能做的，方括号都能做。方括号中放的是字符串，还能放变量
判断苹果手机和安卓手机：
<script>
window.onload = function () {
alert("1");
var u = navigator.userAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
alert("安卓手机");
// window.location.href = "mobile/index.html";
} else if (u.indexOf('iPhone') > -1) {//苹果手机
// window.location.href = "mobile/index.html";
alert("苹果手机");
} else if (u.indexOf('Windows Phone') > -1) {//winphone手机
alert("winphone手机");
// window.location.href = "mobile/index.html";
}
}
</script>
操作样式
.style 操作行间样式
.className 操作class
变量:
如果变量声明了，没有赋值，那么 undefined;
如果声明了变量，没有使用，那么报错 is not defined;
函数：
两个阶段：
定义 告诉浏览器有这个函数，但是不会真正执行。
调用 执行函数
如果只有定义，没有调用，那么什么也不会发生;
如果只有调用，没有定义，那么会报错;
事件 用户的操作
onclick 点击事件
onmouseover 鼠标移入
onmouseout 鼠标移出
onmousedown 鼠标按下
onmouseup 鼠标抬起
onchange 状态改变 select 99%加的都是onchange事件
onload 加载完成
onscroll 滚动条滚动事件
onresize 改变窗口大小事件
obj.onfocus 获取焦点事件 （焦点事件用于text\文本输入框被选中的时候）
obj.onblur 失去焦点事件
ondblclick 双击事件
onmousemove 鼠标移动事件
onpropertychange属性改变
oncontextmenu 右键菜单
onsubmit 提交表单
onmousewheel 鼠标滚轮事件
oninput 输入事件 兼容高版本浏览器
obj.onpropertychange 兼容IE的
这两个事件本身没有over和out的bug
onmouseenter 代替移入
onmouseleave 代替移出
解决onmouseover的bug
oDiv.onmouseover=function(ev){
var oEvent = ev||event;
var oFrom = oEvent.fromElement||oEvent.relatedTarget;
if(oDiv.contains(oFrom)){
return;
}
alert('移入le');
};
循环:
while 当次数不固定时使用while
for 当次数固定时使用for
请写出流程控制语句？
if判断 swith判断
.....
获取非行间样式
obj.currentStyle.样式名 ie系列
getComputedStyle(obj,false).样式名 高级浏览器
获取随机数
Math.random() 0-1的随机小数，但是不包括1
n-m
parseInt(n+Math.random()*(m-n));
返回值 是函数的一部分
特性:
1.阻断后面的程序执行
2.如果写return，但是没有值，会返回undefined
3.如果没写return，会返回undefined
return的作用：
封装函数
阻断程序
定时器:
setInterval(函数,ms); 每隔一段时间就执行一次，连续执行
clearInterval(timer); 关闭定时器
setTimeout(函数,ms); 过了一段时间就执行一次，只执行一次
clearTimeout(timer); 关闭定时器
****开定时器（一定要先清，后开）。
日期对象
new Date()； 值不会自己改变。什么时候new的，这个时间永远都是那个时候。
获取
odate.getFullYear() 获取年；
odate.getMonth() 获取月，比现实月小1 odate.getMonte+1;
odate.getDate() 获取天；
odate.getDay() 获取星期,星期日是0；
odate.getHours() 获取小时；
odate.getMinutes() 获取分钟；
odate.getSeconds() 获取秒；
注：大写代表 年月日，小写代表 时分秒
倒计时
得到目标时间
当前时间
时间差=目前时间-当前时间；
oDate.getTime(); 格林威治时间戳
格林威治时间：
1970.1.1 0点0分0秒0毫秒
如何得到目标时间的时间戳；
把时间调到目标时间；
设置
oDate.setFullYear(y,m,d); 设置年月日，设置日期的时候月份要减1；
oDate.setFullYear(y,m); 设置年月；
oDate.setFullYear(y); 设置年；
oDate.setHours(h,m,s,ms); 设置时分秒毫秒；
oDate.setHours(h,m,s); 设置时分秒；
oDate.setHours(h,m); 设置时分；
oDate.setHours(h); 设置时；
oDate.setMoth(m,d); 设置月日；
oDate.setMoth(m); 设置月；
oDate.setDate(d); 设置日；
oDate.setMinutes(m,s,ms); 设置分秒毫秒；
oDate.setMinutes(m,s); 设置分秒；
oDate.setMinutes(m); 设置分；
oDate.setSeconds(s,ms); 设置秒毫秒；
oDate.setSeconds(s); 设置秒；
星期不能设置；
日期对象在设置时，如果给比较变态的数字，自己会进位找。
获取目标时间戳；
短信发送倒计时
表单元素属性：
disabled 让元素失效；
redadonly 只读，不能操作在JS中；
事件名绝对禁止大写。
命名规范：
驼峰命名法：除第一个单词，剩下的都要首字母大写。
匈牙利命名法
开头有前缀，第二个单词开始首字母大写。
必须遵守的
o object 一个对象 obtn 一个按钮
a array 一组对象 abtn 一组按钮
可以遵守的
s string 一个字符串 sName 一个名字
i int 一个整字 iNum 一个整数
b boolean 一个布尔值 bOK 一个布尔值
不用管的
f float 一个小数 fPrice 一个价格
v 一个变体变量
re RegEXp 一个正则
fn function 一个函数 fnShow 一个函数
语言基础：
代码调试：
软调试：借助工具。
浏览器自带的：
chrome F12或者右键审查属性；
firefox F12 插件firebug
IE F12
点击-inter选项-高级-禁用脚本调试勾掉
IETester 安装插件
硬调试：
alret();
document.title 标题 数值变化的时候使用
document.body body
document.write() 写
console.log() 控制台日志
数据类型：
Number 数字
undefined 未定义
object 对象
String 字符串
boolean 布尔值
function 函数
undefined什么时候出现？
1.变量只声明，带没有赋值，就是undefined；
2.有参数，但是没有传值
3.访问一个，没有的属性
数据类型转换：
parseInt(); 转整数
parseFloat(); 转小数
Number(); 转数字，更严格
NaN not a number
是Number类型
NaN不等于任何东西，包括自己
检测NaN用:isNaN() 如果是NaN就是true，否则是false
eval 把字符串中的语句，解析成可执行的语句
作用域：
局部 只能在声明它的函数内使用
全局 哪都能用
闭包 子函数可以使用父函数的东西
i的问题:
1.循环中加事件，事件中使用i
自定义属性，封闭空间
2.循环中加定时器，定时器中使用i
封闭空间
封闭空间
(function(){
})();
(function(index){
})(i);
作用：
解决i的问题
解决变量名冲突的问题
必须要会的
*toDou *
*rnd *
*getStyle *
*setStyle *
*findInArr *
*sort *
*getByClass *
*json2url *
*url2json *
- 前面加0
function toDou(inum){
return inum<10?'0'+inum:inum;
}
随机数
function rnd(n,m){
return parseInt(n+Math.random()(m-n));
}
*获取行间样式
function getStyle(obj,sName){
if(obj.currentStyle){
return obj.currentStyle[sName]
}else{
return getComputedStyle(obj,false)[sName]
}
}
*设置行间样式
function setStyle(){
if(arguments.length==2){
for(var name in arguments[1]){
arguments[0].style[name]=arguments[1][name]
}
}else{
arguments[0].style[arguments[1]]=arguments[2]
}
}
- 从数组中查找是否用相同的
function findInArr(arr,num){
for(var i=0;i<arr.length;i++){
if(arr[i]==num){
return true;
}
}
return false;
}
*sort排序
arr.sort(function(n1,n2){
return n1-n2; 从小到大排序；
return n2-n1; 从大到小排序；
})
getByClass
function findInArr(arr,item){
for(var i=0;i<arr.length;i++){
if(arr[i]==item){
return true;
}
}
return false;
}
function getByClass(obj,sClass){
if(obj.getElementsByClassName){
return obj.getElementsByClassName(sClass);
}else{
var aResult = [];
var aEle = obj.getElementsByTagName('');
for(var i=0;i<aEle.length;i++){
var aClass = aEle[i].className.split(' ');
if(findInArr(aClass,sClass)){
aResult.push(aEle[i]);
}
}
return aResult;
}
}
*josn2url
var json={'a':'1','b':'2','c':'3'}
var arr=[];
for (var i in json) {
arr.push(i+'='+json[i]);
}
document.write(arr.join('&'));
*url2josn
var url='a=1&b=2&c=3';
var arr=url.split('&');
var json={};
for (var i=0;i<arr.length;i++) {
var arr2=arr[i].split('=');
json[arr2[0]]=arr2[1];
}
console.log(json);
换肤
选项卡
双色球
倒计时
简易秒表
数字时钟
图片时钟
简易游戏
拍卖倒计时
按钮控制选项卡
自动播放选项卡
联动全选
延迟选项卡
无限下拉延迟版
arguments 实参参数的数组； 当参数的个数不固定时；
批量设置样式
obj.style.cssText
不是好东西，有瑕疵，有问题；
会覆盖行间样式
不用。
with(obj.style){
样式名=样式值；
}
不是好东西，因为会干扰作用域；
不用。
获取浏览器的详细信息：
window.navigator.userAgent
字符串常用方法：
str.charAt(); 在字符串中查找某一位置字符；
str.indexOf(); 从前往后找，查找在某一小字符串在大字符串中第一次出现的位置。如果找到了返回位置，否则返回-1；
str.lastIndexOf(); 从后往前找，查找在某一小字符串在大字符串中第一次出现的位置。如果找到了返回位置，否则返回-1；
str.substring(开始位置,结束位置); 截取字符串，从开始位置截取到结束位置，但不包括结束位置；
str.substring(开始位置); 截取 字符串，从开始位置截取到最后；
str.toLowerCase(); 把字符串变成小写；
str.toUpperCase(); 把字符串变成大写；
str.split(); 把一个字符串拆分成数组；
获取字符串编码：
str.charCodeAt(下标)； 获取某一位置的编码
通过编码得到字符：
string.fromCharCode(编码)
关于字符串比较;
字母 按照字典序;
数字 按照字典序;
汉字 编码顺序，乱来。
数组常用的方法：
关于后面的操作：
arr.push(); 在数组的后面添加一个
arr.pop(); 在数组的后面删除一个，把删掉的东西返回。
关于前面的操作：
arr.unshift(); 在数组的前面添加一个
arr.shift(); 在数组的前面删除一个，把删掉的东西返回。
关于中间的操作：
arr.splice(); 删除、插入、替换
删除
arr.splice(开始位置，length);
插入
arr.splice(开始位置，0，插入的内容);
替换
arr.splice(开始位置,length,替换的内容);
arr.join(); 把数组变成字符串；
arr.reverse(); 数组翻转；
arr.concat(); 数组连接；
arr.sort(); 数组的排序；
sort排列数字
arr.sort(function(n1,n2){
if(n1>n2){
return 1; 正数
}sele if(n1<n2){
return -1; 负数
}sele {
return 0;
}
});
arr.sort(function(n1,n2){
return n1-n2; 从小到大排序；
return n2-n1; 从大到小排序；
});
Math常用方法：
Math.random(); 获取0-1的随机小数，不包括1；
取整：
Math.ceil(); 向上取整
Math.floor(); 向下取整
Math.round(); 四舍五入
其他：
Math.abs(); 取正数
Math.sqrt(); 开方
Math.pow(); 幂（n次方）
Math.max(); 求最大值
Math.min(); 求最小值
json 装东西的
格式： 像把一堆变量打了一个包
json={名字：值，名字：值，名字：值.....};
名字和值成对出现的。
console.log（）; 从console.log查看json;
arr json
[1,2,3] [a:1,b:2,c:3]
有长度 没有长度
[下标] ['名字']（字符串） .名字
while/for for...in...
for...in循环：
for(var i in json){
//i代表的是 名字
//json[i] 值
}
不只json能用，数组也可以用；
数组不推荐使用for...in,for...in循环性能差;
例题：
var josn={name：小明，job：前端工程师，age：18岁，address：杭州，family：[
{name：小红，age：26岁，job:java工程师}
{name：小花，age:23岁，job:设计}
]}
标准写法：
var josn={'name'：'小明'，'job'：'前端工程师'，'age'：'18岁'，'address'：'杭州'，'family'：[
{'name'：'小红'，'ag'e：'26岁'，'job':'java工程师'}
{'name'：'小花'，'age':'23岁'，'jo'b:'设计'}
]}
select 下拉框
select 99%加的都是onchange事件
如何完美的添加一个新的选项：
创建一个新的选项
new Option(文本，value);
插入
oS.add();
当前选中项的索引
oS.selectedIndex;
获取到select中所有的选项
oS.options
option有属性：
.value
.text 文本
删除一个选项
oS.remove();
数组
new Array
var arr=[1,2,3]
var arr=new Array(1,2,3)
区别：没有区别。
数组的length是可以修改的。
字符串的length不可以修改。
数组清空：
1.arr.length=0;
2.arr= [];
3.arr.splice(0,arr.length)
4.while
arr.pop||arr.shift
eval深入
eval 把字符串里面的语句，解析成可执行的语句
eval 解析json的时候，json两边要加括号
eval 解析函数的时候，函数两边要加括号
数组排序，怎么排的
自己写排序：
算法：解决问题的方法。
快排、冒泡、桶排、推排、二叉树。。。
var arr[12,5,3,100,8,23,9,21]
如何找最小，交换位置
网友评论