alert
- 方式一
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>js1</title>
<script src='js/js1.js'></script>
<!--
这个意思是当前文件夹文下的js文件夹下的js1.js文件
-->
</head>
<body>
</body>
</html>
#js1.js文件
alert('feitian');
- 方式二
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>js1</title>
</head>
<body>
<div style='width:500px;height:300px;border:1px solid #ddd;margin:0 auto;'>
</div>
<script type='text/javascript'>
alert('feitian')
</script>
</body>
</html>
变量和函数的声明和调用
//函数声明
name = 'feitian'
var name = 'feitian'
//加上var就局部变量
//定义函数
function Foo(name) {
console.log(name);//打印日志
}
//调用函数
Foo('feitian')
函数中的默认参数
function Foo(name) {
var arg2 = arguments[1]
//函数执行的时候取第二个参数,从0开始,0就是name,1就是feitian2
console.log(name);
console.log(arg2);
//打印日志
}
Foo('feitian','feitian2')
匿名函数
//就是将一个函数赋值给一个变量
var temp = function() {
}
自执行函数
//自执行函数就是不用调用,自动执行函数的内容
(function(name){
console.log(name);
})('feitian')
//这里name是形参,feitian是实参,行参是在第二个括号中直接传进去的
字符串相关的方法
- name.trim()
去除字符串两边的空格
feitian3
var name = ' feitian '
name
" feitian "
name.trim()
"feitian"
- name.charAt(index)
通过索引查找字符串中的字符,超过下标就是没有。
name='feitian'
"feitian"
name.charAt(0)
"f"
- name.substring(start,end)
name='feitian'
name.substring(2,3)
"i"
name.length
打印字符串的长度name.indexOf(‘i’)
通过字符查找第一个出现字符的位置
数组(js数组的索引可以不连续)
声明
- var array = Array(); 或者 var array = [];
添加
- array. push(‘ele’);
将一个或多个新元素添加到数组结尾,并返回数组新长度 - array.unshift(‘ele’);
将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度 - array.splice(index,0, ‘ele’);
将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回”“。中间的值为0,是只插入
var array=[1,2,3,4,5];
array.push('feitian');
console.log(array);
array.unshift('love');
console.log(array);
array.splice(1,0,'you');
console.log(array);
#结果
[1, 2, 3, 4, 5, "feitian"]
["love", 1, 2, 3, 4, 5, "feitian"]
["love", "you", 1, 2, 3, 4, 5, "feitian"]
删除
- array.pop();
移除最后一个元素并返回该元素值 - array.shift();
移除最前一个元素并返回该元素值,数组中元素自动前移 - array.splice(deletePos,deleteCount);
删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素
截取
- array.slice(start, end);
以数组的形式返回数组的一部分,注意不包括 end 对应的元素,如果省略 end 将复制 start 之后的所有元素
names = [1,2,3,4,5,6,7]
[1, 2, 3, 4, 5, 6, 7]
names.slice(1,5)
[2, 3, 4, 5]
names.slice(1)
[2, 3, 4, 5, 6, 7]
- array.concat(arrat());
将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组
name = [1,2,3,4]
[1, 2, 3, 4]
names = [4,5,6,7]
[4, 5, 6, 7]
name.concat(names)
"1,2,3,44,5,6,7"
name.concat([,1,2,3,4])
"1,2,3,4,1,2,3,4"
#这里合并大家一定要注意
字符串的翻转
- names.reverse()
数组字符串化
- names.join()
数组长度
- names.length
字典
dic = {'name':'feitian','age':18}
Object {name: "feitian", age: 18}
dic = {'name':{'feitian':'loveyou'},'age':18}
Object {name: Object, age: 18}
//这个可以展开,通过console.log查看起来很方便
for 循环
第一种用法
打印的是key,如果要获取值,嵌套一下
var array = [1,2,3,4,5,6]
var dict = {'name':'feitian','age':18}
for(var item in array) {
console.log(item)
}
for (var item in dict) {
console.log(item)
}
#输出结果
0
1
2
3
4
5
feitian
18
第二种用法
//和c语言一样,这里就不在说了
for(var i=0;i<10;i++) {
}
标签的相关cs操作
创建标签
- 方式1
<body>
<div id='t1'></div>
<script type='text/javascript'>
<!--
创建一个标签
-->
var tag = document.createElement('a');
tag.href = 'http://www.baidu.com';
tag.innerText = '点我呀'
<!--
找到id为t1的标签,将他放入所找的id为t1的标签中
-->
var id1=document.getElementById('t1');
id1.appendChild(tag);
</script>
</body>
- 方式2
<body>
<div id='t1'></div>
<script type='text/javascript'>
var tag = "<a href='http://baidu.com;'>揍你</a>"
var id1 = document.getElementById('t1');
id1.innerHTML=tag;
</script>
</body>
获取或者修改样式obj.className
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>js1</title>
<style>
.show {
}
.hide {
display:none;
}
</style>
</head>
<body>
<div id='t1' class='show'>内容</div>
<script type='text/javascript'>
var id1 = document.getElementById('t1');
id1.className = 'hide';
</script>
</body>
<!--
这里将id为t1的标签中的classname改为hide
-->
获取或者设置属性
- 获取obj.getAttribute()
- 修改obj.setAttribute()
<script type='text/javascript'>
var id1 = document.getElementById('t1');
console.log(id1.getAttribute('name'));
id1.setAttribute('name','loveyu');
console.log(id1.getAttribute('name'));
</script>
获取并修改样式
<body>
<div id='t1' class='show' name='feitian'>内容</div>
<div id='t2' style='width:500px;height:200px;border:2px solid #333'> </div>
<script type='text/javascript'>
var id2 = document.getElementById('t2');
var width = id2.style.width;
//得到id为id2的标签的width属性
console.log(width);
console.log(parseInt(width))
//将width转换成int类型的
id2.style.width = '200px'
//将width设置成200px
</script>
</body>
这里注意,在css中的background-colar在js中为style.background还有其他的比如font-size 和style.fontSize;margin-top和sytle.marginTop
提交表单
- 一个简单的提交,提交到搜狗的搜索。
<body>
<form action='https://www.sogou.com/sie?hdq=AQxRG-0000&' method='GET'>
<input type='text' name='query'/>
<input type='submit' value='提交'>
</form>
</body>
- 通过事件使button实现真正的提交(事件有很多,这里不列出来了,大家可以百度一下,但是写法都是一样的)
<body>
<form id='F1' action='https://www.sogou.com/sie?hdq=AQxRG-0000&' method='GET'>
<input type='text' name='query'/>
<input type='button' value='伪提交' onclick='Foo();'/>
</form>
<script type='text/javascript'>
function Foo() {
document.getElementById('F1').submit()
}
</script>
</body>
<!--
这里onclick就是事件,当你点击'伪提交的时候,他就会执行Foo函数'
-->
其他的一些函数
- console.log()
- alert()
- setInterval(“alert()”,2000) clearInterval(obj)
setInterval 每两秒去服务端请求一次,看数据完成情况
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>js1</title>
</head>
<body>
<div style='width:500px;background-color:#ddd;'>
<div id='process' style='width:10%;background-color:green;height:10px;'><div>
</div>
<script type='text/javascript'>
var proportion=10;
function Foo() {
var id = document.getElementById('process');
proportion = proportion+10;
if (proportion > 100) {
proportion = 100;
}
id.style.width = proportion+'%';
}
setInterval('Foo()',2000);
//设置两秒执行一次Foo函数
</script>
</body>
</html>
- setTimeout() clearTimeout()
setTimeout()到时间只执行一次,不管有没有循环,clearTimeout()就是取消setTimeout的动作
clearTimeout(interval)
//没到时间之前清除setTimeout的动作
interval = setTimeout('Foo()',2000);
//设置到两秒的时候执行一次Foo()函数