day13 JS Dom

js两种存在形式
1:文件
2:块
放到body标签底部 防止加载js超时页面反应慢的问题

声明变量
name = "sb"; //全局变量
var age=18; //局部变量

字符串
var name = "alex"
name.charAt(1) //获取第一个元素
name.substring(0,3) //切片
name.indexOf('a') //获取'a'的下标
name.length //获取name长度

数组 字典
var li= [11,22,33] //var li = Array('11,22,33') 创建效果一样
li.push(44) //往后插入44
li.unshift(00) //往前插入00
li.splice(1,0,'sb') //往指定位置(下标为1)插入'sb' 中间元素必须是0
li.pop() //从后面移除一个
li.shif() //前边移除一个
li.splice(1,2) //从第一个下标拿走两个,2指的是个数
li.slice() //切片拿
concat //合并 n=['test'] m=li.concat(n)
li.reverse() //反转

var dic = {'k1':'v1'}


序列化反序列化
JSON.stringify(dic) //序列化
JSON.parse(s) //反序列化

循环语句(列表两种for循环,字典一种)
li = [11,22,33,44];
for (var item in li){
console.log(item,li[item]);
} //循环出来的是li列表的下标或字典的key

for (var i=0;i<li.length;i++){
console.log(i,li[i])
}


异常处理
try{

}catch(e){

}finally{

}


函数
普通函数
function func1(arg){
console.log(arg);
return "sb";
}
var ret = func1(123);
console.log(ret);
匿名函数
自执行函数
(function(arg){
console.log(111,arg); })('SB');
面向对象
http://www.cnblogs.com/wupeiqi/articles/5369773.html


第二篇:Dom
document
1查找元素 基本的有三个
tags = document.getElementsByTagName('h1'); //通过tag找
document.getElementById //通过Id找
document.getElementsByClassName //通过class找

document.getElementsByName(username) //通过name获取,用于input标签
2操作元素
tags[0].innerText = '123'


innerText 对div中间的内容的值进行获取修改用




例子:按钮,数字自加
<body>
<div>
<div id="num">1</div>
<input type="button" value="+1" onclick="Add()" >
</div>
<script>
function Add() {
var nid = document.getElementById('num');
var text= nid.innerText;
text = parseInt(text);
text +=1;
nid.innerText = text;

}
</script>
</body>




例子:搜索框 onfocus onblur
<body>
<input type="text" id="search" value="please input keywords" onfocus="Focus();"onblur="Blur();" >
<script>
function Focus(){
var nid = document.getElementById('search'); //找到它
var value = nid.value; //获取他的内容
if (value =="pelease input keywords"){
nid.value = "";
}
}

function Blur(){
var nid = document.getElementById('search'); //找到它
var value = nid.value; //获取他的内容
if (!value.trim()){
nid.value="please input keywords"
}
}

</script>
</body>




创建标签(两种方式)
<body>
<div id="container"></div>
<a href="http://www.sou.com" onclick="return AddElement();">添加</a>
<script>
function AddElement(){
/*
//创建标签,添加至container中
var nid = document.getElementById('container');
var tag = "<input type='text'>";
nid.innerHTML = tag;
return false
*/
var createObj = document.createElement('a'); //通过对象的方式创建标签
createObj.href = "http://www.so.com";
createObj.innerText = "搜索";

var nid=document.getElementById('container');
nid.appendChild(createObj);

console.log(createObj);
return false;

}
</script>
</body>




标签属性
<div> 没有name属性,如果要设置默认不存在时的属性(自定义属性) 需要用 setAttribute('name','aaa')
className = class //obj.classNmae = '';
对于style, nid.style.fontSize = ''; //-后的字母换成大写去掉杠
对于所有标签属性都的可以用 getAttribute get... del...


提交表单
//可以用submit 还可以用js 加onclick实现
//搜狗的地址:https://www.sogou.com/web?query=aa
<body>
<form id="form1" action="https://www.sogou.com/web" method="get">
<input name="query" type="text"/>
<div onclick="Submit();">提交</div>
</form>
<script>
function Submit(){
document.getElementById('form1').submit();
}
</script>
</body>

第二个例子

<body>
<form id="form1" action="https://www.sogou.com/web" method="get">
<input name="query" type="text"/>
<input type="submit" onclick="return MySubmit();" value="提交"/>
</form>
<script>
function MySubmit(){
var q =document.getElementsByName('query')[0];
if(q.value.trim()){
return true;
}else{}
alert("输入内容")
return false
}
</script>
</body>



定时器跑马灯
//setInterval
//clearInterval
//setTimeout

<head>
<meta charset="UTF-8">
<title>你有新短消息</title>
</head>
<body>
<script>
setInterval("Func()",1000);
function Func(){
var text = document.title;
var firstChar = text.charAt(0);
var subText = text.substring(1,text.length);
var newTitle = subText + firstChar;
document.title = newTitle
}
</script>
</body>




http://www.cnblogs.com/wupeiqi/articles/5369773.html
原文地址:https://www.cnblogs.com/dribs/p/5430766.html