1、变量的定义 、输出、类型
//变量的定义
var
a = 1;
//输出-弹出
alert(a);
//输出-控制台
console.log(a);
//输出-页面
document.write(a);
//检索 变量类型
var type = typeof a(变量)
//变量类型
type:String、number、boolean、undefined、null、object
2、doc获取元素
//通过ID获取元素
document.getElementById(
'id'
);
//通过Class获取元素
document.getElementsByClassName(
'class'
);
//通过标签获取元素
document.getElementsByTagName(
'tag'
);
//通过name获取元素
document.getElementsByName('name');
3、事件
//单击事件: onclick
对象.onclick =
function
(){
};
document.getElementById(
'id'
).onclick =
function
(){
};
//双击事件: ondblclick
对象.ondblclick =
function
(){
}
//鼠标移入事件: onmouseover
对象.onmouseover =
function
(){
}
//鼠标移出事件: onmouseout
对象.onmouseout =
function
(){
}
4、js动态控制
(1)控制html值
HTML 操作非表单和按钮元素 如 div p a span 等标签
//改变对象内的HTML内容
对象.innerHTML = 内容;
//获得对象内的HTML内容
var
data = 对象.innerHTML;
Value 操作表单 如 input textarea 等标签
//改变对象内的内容
对象.value = 内容;
//获得对象内的内容
var
data = 对象.value;
(2)控制css样式
//改变对象的class
对象.className = class;
//改变对象的id
对象.id = id;
//改变对象的样式
对象.style.width = 宽度;
对象.style.backgroundColor = 颜色;
5、定时器
//时间
1000毫秒 = 1秒
//一次定时器
设置:
var
timer = setTimeout(
function
(){
},时间/毫秒);
清除: clearTimeout(timer);
//循环定时器
设置:
var
timer = setInterval(
function
(){
},时间/毫秒);
清除: clearInterval(timer);
// 获取元素的子元素
父级.children;
父级.childNodes; 获取子节点 不兼容 把空格也算上一个节点
// 获取父元素
子级.parentNode;
// 获取兄弟节点
下一个兄弟节点
obj.nextSibling 兼容 ie 6 7 8 算上了空格
obj.nextElementSibling 兼容 IE9+ FF Chrome
|| 或的用法
obj.nextElementSibling || obj.nextSibling
上一个兄弟节点
obj.previousSibling 兼容 ie 6 7 8 算上了空格
obj.previousElementSibling 兼容 IE9+ FF Chrome
// 首节点
obj.firstChild 兼容 ie 6 7 8 算上了空格
obj.firstElementChild 兼容 IE9+ FF Chrome
obj.firstElementChild || obj.firstChlid
// 尾节点
obj.lastChild
obj.lastElementChild
7、创建插入子元素
//创建子div元素
var
oDiv = document.createElement(
'div'
);
oDiv.id = id;
oDiv.className = class;
oDiv.style....
//插入子元素
父级.appendChild(子级);
实例1:
document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
代码如下:
<script type="text/javascript">
var board = document.getElementById("board");
var e2 = document.createElement("select");
e2.options[0] = new Option("加载项1", "");
e2.options[1] = new Option("加载项2", "");
e2.size = "2";
var object = board.appendChild(e2);
</script>
e.size == e.setAttribute("size","2")
效果:在标签board中加载一个下拉列表框,属性值为“加载项1”和“加载项2”。
实例2:
在下面这个div中插入一个子节点P时:<div id="test"><p id="x1">Node</p><p>Node</p></div>
代码如下:
<script type="text/javascript">
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,refChild);
</script>
效果:这个例子将在x1节点前面插入一个新的节点
8、
自定义属性标签
定义和用法
getAttribute() 方法返回指定属性名的属性值。
//定义属性标签
对象.setAttribute(
'标签名'
,值);
//获得属性标签
var
变量 = 对象.getAttribute(
'标签名'
);
获得链接的 target 属性:
document.getElementsByTagName("a")[0].getAttribute("target");
结果:
_blank9、获取屏幕宽度、高度
//高度
var
高度 = document.documentElement.clientHeight || document.body.clientHeight;
//宽度
var
宽度 = document.documentElement.clientWidth || document.body.clientWidth;
数组的定义
var
a=[]; 性能高 ,因为短
var
a=
new
Array();
length 是可以获取,也可以设置
如果数组里面有6个值,你设置a.length=3;那么数组就会被定义成3个,后面的3个值,将不存在
可以快速清空一个数组 直接让length等于0就ok了
一个数组里面最好只存一种类型的数据
//末尾
arr.push(‘1’,‘2’); 往数组的末尾添加一位
相反
arr.pop();删除数组末尾的最后一位
//开头
arr.unshift(); 往数组头部添加一位
arr.shift(); 删除数组头部一位
delete
a[1];
//splice 可以从数组中间添加东西
splice(起点,删除长度,元素1,元素2,...);
splice(起点,删多少个);删除元素
splice(起点,0,
'a'
,
'b'
); 插入元素
//替换
splice(起点,2
'b'
,
'c'
); 先删除2个元素,在添加2个元素
//数组链接
concat();
var
a=[1,2,3];
var
b=[4,5,6];
a.concat(b);
a.concat(b).concat(c);
//链接多个= a.concat(b,c,'11'); 如果放字符串也可以链接上,系统会做隐式转换
如果想让b数组在前面
b.concat(a);
//join 链接数组间的元素,并变成字符串 数组转字符串
var
a=[1,2,3,4];
arr.join(
'-'
); 中间的-随意
arr.join(
''
); 引号里面不传值 默认一个一个链接
结果 1-2-3-4
//sort 数组内元素排序
var
a=[
'float'
,
'width'
,
'zoom'
,
'left'
];
arr.sort();
//按首字母排序
alert(arr);
var
b=[11,24,45,7];
arr.sort();
会把数组里的元素当成字符串,不认识数字
出来的结果会是按第一位进行排序 把所有第一位是1的放在前面
解决办法:
arr.sort(
function
(n1,n2){
//比较函数
if
(n1n2){
return
1; 只要是整数就行
}
else
{
return
0;
}
另外一种写法
return
n1-n2;
});
// reverse(); 翻转数组 [1,2,3] => [3,2,1]
arr.reverse();
//JSON的定义
var
json = {键:值,键:值....};
//一维JSON的写法
var
json1 = {
'name'
:
'名字'
,
'age'
,
'值'
};
//一维JSON的访问
对象.键名
值 =
json1.名字
//二维JSON的写法
var
json2 = {
name:
'tom'
,
age:
'18'
borther:{
name:
'jerry'
,
age:
'16'
}
}
//二维JSON的访问
对象.一维JSON的键名.二维JSON的键名
//解析JSON的两种方式 eval() , JSON.parse()
//eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码
var
data = eval(
'('
+json+
')'
);
//实例:
eval("2+3") // 返回 5
//JSON转换成对象
//parse 用于从一个字符串中解析出json 对象。例如
var
str=
'{"name":"名字","age":"1","type":"普通"}'
经 JSON.parse(str) 得到:
Object: type:"普通"
age:
"1"
name:
"东翌学院"
单引号写在{}外,每个属性都必须双引号,否则会抛出异常
//JSON转换成字符串
stringify用于从一个对象解析出字符串,例如
var
a={a:1,b:2}
经 JSON.stringify(a)得到:
'{
"a"
:1,
"b"
:2}
12、循环语句
1,
for
循环
for
(初始化,条件,自增){
//条件成立执行代码
}
for
(
var
a=0;a< 10;a++){
console.log(a);
}
2,
for
in
循环 *专门用来循环json
for
(初始化
in
值){
//条件成立执行代码
}
for
(
var
a
in
json){
console.log(a);
// a 为键
console.log(json[a]);
// json[a] 为值
}
//判断语句
if
else
/
if
else
if
/
switch
if
(判断){
成立
}
else
{
不成立
}
if
(判断){
成立
}
else
if
(再判断){
成立
}
else
{
不成立
}
switch
(值){
case
'对比值1'
:
成立 语句
break
;
case
'对比值2'
:
成立 语句
break
;
default
: 默认
语句
break
;
}
//三元运算符
a > b ? 正确的:错误的
14、字符串操作
//字符串
str.length 字符串长度
str[下标值] ECMAScript 5 可以通过访问数组的方式,通过下标访问字符串的值
str.charAt(1); 字符串下标
str.indexOf(
'a'
); 找a在字符串中的位置 从左向右找 ,区分大小写
找到第一个的位置,就结束寻找,
str.indexOf(
'abc'
); 找不到时出现-1
str.lastIndexOf(); 从右向左找
str.substring(开始的位置,结束的位置) 截取扩展名 .jpg 注 不包含截取的那个字符串
str.substring(开始的位置) 从开始位置一直截取到最后
.html str.substring(n+1) +1 就是让索引前进以为 截取的是 html
//字符串转数组
str.split(切的方式); 如果没有切的方式,会按一个一个字母来切
//替换
str.replace(被替换的值,替换为某个值);
//字符串大小写转换
str.toUpperCase(); 转大写
str.toLowerCase(); 转小写
15、break/continue区别
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
break
是用来跳出循环的
for
(
var
a=0;a<10;a++){
console.log(a);
if
(a == 5){
break
;
//本次循环结束
}
}
结果
1,2,3,4,5
continue
是跳出本次循环
for
(
var
a=0;a<10;a++){
if
(a == 5){
continue
;
}
console.log(a);
}
结果
1,2,3,4,6,7,8,9
|
//函数的定义
function
函数名称(){
}
//函数的调用
函数名称();
//返回值
return
1,函数向外界返回东西
2,
return
之后的代码就不执行;
什么时候用
return
?
需要返回东西
//匿名函数
(
function
(){
})();
//函数的嵌套
function
a(){
return
function
b(){
return
1;
}
}
//变量作用域
var
a = 0;
(
function
(){
alert(a);
var
a = 10;
alert(a);
})();
a = 20;
alert(a);
//传参
function
say(name){
return
name;
}
say(
'啊啊'
);
//回调
function
register(name,password,succFn,errorFn){
if
(name ==
'啊啊啊'
&& password ==
'123'
){
succFn();
}
else
{
errorFn();
}
}
register(
'啊啊啊'
,
'123'
,
function
(){
},
function
(){
});