javaScript
为什么需要使用JS?
答：编写网页特页面效，操作页面元素，和服务器交互。
怎样使用JS.
1内嵌
<script type="text/javascript">*/
document.write("hello js");
function show()
{
}
</script>
2外嵌
<script type="text/javascript" src="js/a.js" ></script>
3直接在事件中写:javascript:动作
<button onclick="javascript:alert(0)" style=" 50px;" value="">点击</button>
window.onload=function()跟随页面加载 window.onscroll=function ()跟随鼠标滚动
console.log(d);控制台输出 function定义一个方法 onclick点击
字符串方法
|
方法 |
说明 |
|
charAt(index) |
返回指定位置上的字符 |
|
inderOf(“index”) |
查找某个指定的字符串在字符串中首次出现的位置 |
|
Substring(index1,index2) |
返回从index1 到index2之间的字符串不包含index2 |
|
Split(str) |
将字符串分割成数组 |
数组方法
|
方法 |
说明 |
|
.push(“数值”); |
在数组中追加数值 |
|
.join(“*”) |
把数组按*分开为字符串 |
浏览器对象
|
对象名称 |
说明 |
|
window |
窗口对象，可以用来控制当前窗口，或打开新的窗口 |
|
screen |
屏幕对象，获取屏幕相关信息 |
|
navigator |
浏览器对象，通过这个对象可以判断用户所使用的浏览器 |
|
history |
历史对象，可以用来前进或后退一个页面 |
|
location |
地址对象，可以用来获取当前URL的信息 |
|
javaScript计时事件 |
在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行 |
|
localStorageSessionStorage |
存储对象，可以用来存储数据，和cookie相似，区别是它是为了更大容量存储设计的，在使用上也更加方便 |
列：location 方法试列
<script type="text/javascript">
//返回地址
document.write(window.location.host+"<br/>")(主机IP加端口）
document.write(window.location.hostname+"<br/>")(主机IP)
//location 方法 href加载一个页面
function cas(){
window.location.href="index.html";
}
//reload() 从新加载页面reload()(刷新)
function textreload(){
window.location.reload();
}
</script>
</head>
<body>
<button onclick="cas();">跳转</button>
<a onclick="textreload()"></a>
</body>
History对象
|
history.Back() |
加载history对象中的前一个URL |
|
|
history.Forward() |
加载history对象中的下一个URL |
|
|
history.Go() |
加载history对象中的某个具体URL |
|
|
其中 history.back() --等于-->> history.go(-1) 浏览器中的后退 History.forward() --等于-->> history.go(1) 浏览器中的前进 |
||
javaScript弹窗 不同的浏览器对弹窗有可能拦截
|
警告框 |
Window.alert() |
用于确保用户可以得到某些信息 |
|
确认框 |
Window.confirm() |
用于验证是否接受用户操作 |
|
提示框 |
Window.prompt() |
用户提示用户在进入页面输入某个值 |
列
if(confirm("是否确定")){
alert("确定")
}else{
alert("取消")
}
var d=prompt("你好马强")
if(d!=null){
alert("你刚才输入的名字为"+d)
}
Window.location对象
|
Location.href |
返回当前页面的URL url(地址) |
|
Location.pathname |
返回URL的路径名 文件 |
|
Location.assign() |
加载新的文档 |
|
Close(); |
关闭当前对象 |
|
Open(“地址”,”窗口名”,”属性”); |
弹出一个新的窗口 |
open("../html/hello.html","新窗口","height=20px,width=20px")
Open的属性
javaScript计时事件 1000=1秒
|
Setlnterval(show,2000) |
间隔指定的毫秒数不停地执行指定的代码 |
|
Clearlnterval() |
用于停止setlnterval()方法执行的函数代码 |
|
setTimeout(show,2000) |
暂停指定的毫秒数后执行指定的代码 |
|
clearTimeout() |
用于停止执行setTimeout()方法的函数代码 |
function show() {
alert(0);
}
// 间隔指定的毫秒数不停地执行指定的代码
function demo01() {
var t =setInterval(show,2000);
}
//暂停指定的毫秒数后执行指定的代码
function demo02() {
var p=setTimeout(show,2000);
}
</script>
</head>
<body>
<button onclick="fun()" >点击</button>
<a onclick="demo01();">测试Setlnterval</a>
<a onclick="demo02();">测试setTimeout</a>
Date(); 方法 var d=new Date(); var n =d.getHours();
|
.getHours() |
获得小时 |
|
.getMinutes() |
获得分钟 |
|
.getSeconds() |
获得秒数 |
Dom常用的方法
查找HTML元素
|
Document.getElementById() |
通过id获取对象 |
|
Document.getElementsByTagName() |
通过标签名获取对象 生成一个数组 |
|
Document.getElementsByName() |
通过名字获取对象 生成一个数组 |
|
Document.getElementsByClassName |
通过class获取对象 |
document.getElementById("切换前的ID").innerText="切换后的名字";
var sum=parseInt(value);把字符串转换为数字
var value=document.getElementById("re").value;查找用户输入的数值（字符串）
改变HTML元素
|
Document.write() |
改变HTML输出流 |
|
对象.innerHTML=新的HTML |
改变HTML内容 |
|
对象.attribute（属性）=新属性值 |
改变HTML属性 |
改变CSS样式
|
对象.style.property（属性）=新样式 |
通过id属性获取对象 |
Dom常用的方法
查找HTML元素
试列：
<script type="text/javascript">
function areplace() {
var obj=document.getElementById("bookname");
obj.innerText="切换后的名字";
}
//通过input获取对象 返回数组
function shoall() {
var obj=document.getElementsByTagName("input");
var strall="";
for(var i=0;i<obj.length;i++){
strall += obj[i].value+" "
}
document.getElementById("strall").innerHTML=strall;
}
//通过name获取对象 返回数组
function shows() {
var obj=document.getElementsByName("season");
var strall="";
for(var i=0;i<obj.length;i++){
strall += obj[i].value+" "
}
document.getElementById("s").innerHTML=strall;
}
</script>
</head>
<body>
<div class="bb">
<div style="float: left;width: 150px;height: 100px">
<img src="../images/1.jpg">
</div>
<div style="float: right" >
<span id="bookname">书名：岛上书店</span><br/>
<button onclick="areplace()">换换名称</button><br/>
<span>四季名城</span><br/>
<input class="a" name="season" type="text" value="春">
<input class="a" name="season" type="text" value="夏"><br/>
<input class="a" name="season" type="text" value="秋">
<input class="a" name="season" type="text" value="冬"><br/>
<input type="button" onclick="shoall()" value="input内容">
<input type="button" onclick="shows()" value="四季名称">
//清空页面
<input type="button" onclick="javascirpt:document.write('')" value="清空页面内容">
<span id="strall"></span>
<span id="s"></span>
</div>
</div>