js的基础
JS的输出：
<script>
document.write("<h1>hello</h1>");
</script>
改变p标签里面现实的内容
<p id="pid">Hello</p>
<img id="imgid" src="6.jpg">
<a id="aid" href="www.baidu.com">hello</a>
<script>
document.getElementById("pid").innerHTML="world";//取得id的名字
document.getElementByTagName("p").innerHTML="world";取得p标签
document.getElementById("aid").href="www.jikexueyuan.com";//改变网页链接
document.getElementById("imgidid").src="7.jpg";//改变图片
document.getElementById("div").style.background="blue";//改变css的样式
</script>
事件：
onClick 单击事件
onMouseOver 鼠标经过事件
onMouseOut 鼠标移除事件
onChange 文本内容改变事件
onSelect 文本框选中事件
onFocus 光标聚集事件
onBlur 移开光标事件
onLoad 网页加载事件
onUnload 关闭网页事件
DOM EventListener:
方法： addEventListener();//方法用于向指定元素添加事件句柄
document.getElementById("btn").addEventListener("click",function(){alert("hello")} );
removeEventListener();//移除方法天的事件句柄
事件版本的支持
<script>
var btn=document.getElementById("btn");
if(btn.addEventListener){
btn.addEventListener("click",demo);
}else if(btn.attachEvent){
btn.attachEvent("onclick",demo);
}else {btn1.onclick=demo();
}
</script>
1事件对象：
在触发DOM事件的时候都会产生一个对象
2事件对象event：
1：type：获取事件类型
<script>
var btn=document.getElementById("btn").addEventListener("click",showType);
function showType(){
alert(event.type);
}
</script>
2：target：获取事件目标
<script>
var btn=document.getElementById("btn").addEventListener("click",showType);
function showType(){
alert(event.target);
}
</script>
3：stopPropagation（）：阻止事件冒泡
<script>
var btn=document.getElementById("btn").addEventListener("click",showType);
var btn=document.getElementById("btn").addEventListener("click",showDiv);
function showType(){
alert(event.target);
event.stopPropagation();
}
function showDiv(){
alert("div");
}
</script>
4：preventdDefault（）：阻止事件默认行为
简单的创建对象
第一种：
<script>
people=new Object();
people.name="cheng";
people.age="30";
document.write("name:"+people.name+",age:"+people.age);
</script>
第二种:
<script>
people={name:"cheng",age:"30"};
document.write("name:"+people.name+",age:"+people.age);
</script>
第三种：
<script>
function people(name,age){
this.name=name;
this.age=age;
}
son=new people("cheng",30);
document.write("name:"+son.name+",age:"+son.age);
</script>
String字符串对象：
查找字符串长度和位置：
indexOf是查找字符的从什么位置开始的：
<script>
var str="Hello World";
document.write("字符串长度："+str.length);
document.write(str.indexOf("World"));
</script>
match是用来查找一个字符串是否存在:
<script>
var str="Hello World";
document.write("字符串长度："+str.length);
document.write(str.match("World"));
</script>
replace（）替换里面的内容里面两个参数第一个是原来的参数，第二个是改变后的参数
<script>
var str="Hello World";
document.write("字符串长度："+str.length);
document.write(str.replace("World","jikexueyuan"));
</script>
字符串大小写的转换toUpperCase()/toLowerCase()
字符串转为数组：strong>split()
<script>
var str1="hello,jike,xueyuan";
var s=str1.split(",");
document.write(s[1]);
</script>
1.Date对象：
日期对象用于处理日期和时间
2.获取当日的日期
<script>
var date=new Date();
document.write(date);
</script>
3.常用的方法：
getFullYear():获取年份
<script>
var date=new Date();
document.write(date.getFullYear());
</script>
getTime():获取毫秒
<script>
var date=new Date();
document.write(date.getTime());
</script>
setFullYear();设置具体的日期
<script>
var date=new Date();
date.setFullYear(2013,1,1);
document.write(date);
</script>
getDay();获取星期
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式
事件示例：
</head>
<body onload="startTime()">
<script>
function startTime(){
var today=new Date();
var h = today.getHours();
var m =today.getMinutes();
var s =today.getSeconds();
m=checkTime(m);
s=checkTime(s);
document.getElementById("timetxt").innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){
startTime()
},500)
}
function checkTime(i){
if(i<10){
i="0"+i;
}
return i;
}
</script>
<div id="timetxt"></div>
</body>
</html>
数组常用的方法：
concat():合并数组
var a=["hello","world"];
var b=["cheng","ime"]
var c=a.concat(b);
document.write(c);
sort():排序
<script>
var a=["a","c","d","t","b","e"];
document.write(a.sort());
</script>
sort()的降序排列：
<script>
var a=["1","2","3","4","5","6"];
document.write(a.sort(function(a,b){
return b-a;}));
</script>
push():末尾追加元素
<script>
var a=["1","2","3","4","5","6"];
a.push("c")
document.write(a);
</script>
reverse():数组元素翻转
<script>
var a=["c","b","a"];
document.write(a.reverse());
</script>
1.Math对象：
执行常见算数任务
2.常用方法：
round():四舍五入
random():返回0~1之间的随机数
max():返回最高值
min():返回中的最低值
abs()：返回绝对值
parseInt(Math.random()*10):转换成int值并且是整数
DOM对象控制HTML：
1.方法：
getElementsByName()-获取name
<p name="pn">hello</p>
<p name="pn">hello</p>
<p name="pn">hello</p>
<script>
function getName(){
var count=document.getElementsByName("pn");
var p=count[0];
p.innerHTMEL="World";
}
getName();
</script>
getElementsByTagName()-获取元素
getAttribute()-获取元素属性
<a id="aid" title="得到了A标签的属性">hello</a>
<script>
function getName(){
var count=document.getElementsById("aid");
var attr= count.getAttribute("title");
alert(attr);
}
getName();
setAttribute()-设置元素属性
<a id="aid" >hello</a>
<script>
function getName(){
var count=document.getElementsById("aid");
count.setAttribute("title","动态设置a的titile属性");
var attr= count.getAttribute("title");
alert(attr)
}
getName();
</script>
childNodes()-访问子节点
parentNode()-访问父节点
createElement()-创建元素节点
createTextNode-创建文本节点
insertBefore()-插入节点
removeChild()-删除节点
offsetHeight -网页尺寸
scrollHeight -网页尺寸
window.innerWidth内部宽度
window.innerHeight内部高度
<script>
document.write("宽度："+window.innerWidth+"高度："+window.innerHeight);
</script>
window.open打开网页
function btn(){
window.open("boindex.html")
}
window.close()关闭网页
1.计时事件：
通过使用JavaScript，我们有能力作到在一个设定的事时间间隔之后来执行代码，而不是在函数被调研那个后立即执行。
2.计时方法：
1.setlnterval()-间隔制定的毫秒数不停地执行制定的代码
var mytime= setInterval(function(){
getTime();
},1000);
function getTime(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("pit").innerHTML=t;
}
</script>
clearinterval()-方法业内关于停止setlnterval()方法执行的函数代码
2.setTimeout()-战停执行的毫秒数后执行指定代码
clearTimeout()方法用于停止执行setTimeout()方法的函数代码
<script>
var win ;
function myWin(){
alert("hello")
win=setTimeout(function(){myWin()},3000);
}
</script>
1.History对象：
window.history对象包含浏览器的历史（url）的集合
2.History方法：
history.back()-与在浏览器点击后退按钮相同
history.forward()-与在浏览器中点击按钮向前相同
history.go()-进入历史中的某个页面
1.Location对象：
window.location对象用于获得当前页面的地址（url）,并把浏览器重定向到新的页面。
2.Location对象的属性：
location.hostname返回web主机的域名
location.pathname返回当前页面的路径和文件名
location.port返回web主机的端口
location.protocol返回所使用的web协议（http//或https://）
location.href属性返回当前页面的URL
location.assign()方法加载新的文档
function getloc(){
location.assign("http://www.baidu.com");
}
浙公网安备 33010602011771号