js基础
alert
- 方式一
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>js1title>
<script src='js/js1.js'>script>
head>
<body>
body>
html>
#js1.js文件
alert('feitian');
- 方式二
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>js1title>
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 = '点我呀'
var id1=document.getElementById('t1');
id1.appendChild(tag);
script>
body>
- 方式2
<body>
<div id='t1'>div>
<script type='text/javascript'>
var tag = "揍你"
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>js1title>
<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>
获取或者设置属性
- 获取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>
其他的一些函数
- console.log()
- alert()
- setInterval(“alert()”,2000) clearInterval(obj)
setInterval 每两秒去服务端请求一次，看数据完成情况
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>js1title>
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()函数