一 ***** windows禁止页面跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js控制页面跳转</title>
</head>
<body>
<a href='javascript:;' ondblclick='fn1()'>js控制页面跳转</a>
<a href='javascript:void(0)' ondblclick='fn2()'>js控制页面跳转</a>
<br/>
请输入*<input type='text' id='t' value='输入1跳转淘宝 输入2跳转京东'>
<br/>
<button id='btn'>按钮</button>
<script type='text/javascript'>
function fn1(){
location.href='http://www.baidu.com';
}
function fn2(){
window.loaction.hreef='http://www.jd.com';
}
var t=document.getElementById('t')
var btn=document.getElementById('btn');
btn.onclick=function(){
switch(t.value){
case '1':
location.href='http://www.baidu.com';
break;
case '2':
window.location.href='http://www.jd.com';
break;
default:
window.alert('输入错误');
break;
}
}
</script>
</body>
</html>
二 **** document元素展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id='title'>水果</h1>
<ul>
<li class="fruit">苹果</li>
<li class="fruit">桃子</li>
<li class="fruit">香蕉</li>
<li class="fruit">凤梨</li>
</ul>
<form action="#" method="post" >
<fieldset>
<legend>表单1</legend>
名字: <input type="text" name="uname" value="aa" />
</fieldset>
</form>
<form action="#" method="post" >
<fieldset>
<legend>表单2</legend>
名字: <input type="text" name="uname" value="bb" />
</fieldset>
</form>
<script type="text/javascript">
//根据id找标题
var title = document.getElementById('title');
console.log(title.innerHTML);
//根据标签名找,所有水果
var all = document.getElementsByTagName('li');
console.log('个数:'+all.length);
for(var i=0;i<all.length;i++){
console.log("第"+(i+1)+"个水果名字:"+all[i].innerHTML)
}
//根据类名找水果
console.log('根据类名找:')
var all2 = document.getElementsByClassName('fruit');
for(var i=0;i<all2.length;i++){
console.log("第"+(i+1)+"个水果名字:"+all2[i].innerHTML)
}
//表单对象
console.log('第1个表单中内容:'+document.forms[0].uname.value);
console.log('第2个表单中内容:'+document.forms[1].uname.value);
//新增:根据选择器名找! [了解]
console.log('新增的根据选择器名找:')
var all3 = document.querySelectorAll('.fruit');
for(var i=0;i<all3.length;i++){
console.log("第"+(i+1)+"个水果名字:"+all3[i].innerHTML)
}
</script>
</body>
</html>
