2.4 javascript
2.4 javascript
js简图2
1.window对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
/*
window对象 当前页面
通常可以省略
*/
//js解析引擎 单线程 //console.log(window.document.getElementById("test").value);
//window.prompt("请输入");
//alert("警告框");
//confirm("确定离开me 还有xxx就可以领取大奖了")
</script>
</head>
<body>
<input id="test" type="text" value="abc123" />
</body>
</html>
2.history对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/*
history 对象 表示历史记录文档
可以在历史记录中前进后退
*/
function myBack(){
history.back();
}
function myNext(){
history.forward()();
}
function myGo(){
history.go(0);
}
</script>
</head>
<body>
<input type="button" value="后退" onclick="myBack()" />
<input type="button" value="前进" onclick="myNext()" />
<input type="button" value="go" onclick="myGo()" />
</body>
</html>
3.location
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/*
location地址栏
.href 控制浏览器地址栏跳转
.reload() 刷新
*/
function myRefesh(){
location.reload();
}
function myHref(){
location.href = "https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E6%8B%9C%E7%99%BB%E8%BF%87%E6%B8%A1%E8%BF%9B%E7%A8%8B%E6%AD%A3%E5%BC%8F%E5%BC%80%E5%A7%8B+%E7%89%B9%E6%9C%97%E6%99%AE%E5%9B%9E%E5%BA%94&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1";
/*
路径方式
1.相对路径 两个文件 之间相对的路径 ./ 当前目录 ../退回到上级 /xxx 进入xxx目录 内部资源
2.项目根路径 /
3.绝对路径 协议://地址：端口/资源地址?参数 外部资源
*/
/*
跳转方式
默认使用get方式提交
a标签
浏览器地址栏直接输入
表单提交 get
location.href
使用post方式提交
表单提交 post
*/
}
</script>
</head>
<body>
<input type="button" value="睡王最新消息" />
<div onclick="myHref()">test</div>
<input type="button" value="刷新" onclick="myRefesh()" />
</body>
</html>
4.document
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//document.title="test";
/*
document.getElementById("mybtn") 通过id获取元素 单个
document.getElementsByTagName("input") 通过标签名获取元素 数组
document.getElementsByName("hobby") 通过name获取元素 数组
document.getElementsByClassName("cls") 通过class获取元素 数组
选取元素时 可以通过元素的属性二次筛选 加判断条件
选取元素时 可以通过元素层级结构缩小查找范围
//在myspan内部查找元素
document.getElementById("myspan").getElementsByTagName("input")
*/
</script>
</head>
<body>
<input type="text" value="btn2" />
<input class="cls1 cls2 cls3" id="mybtn" type="button" value="btn1" />
<input class="cls1" id="mybtn" type="button" value="btn2" />
<hr />
<input type="button" value="全选" onclick="checkAll()" />
兴趣爱好:<input name="hobby" type="checkbox" value="1" />爬山
<input name="hobby" type="checkbox" value="2" />照相
<input name="hobby" type="checkbox" value="3" />蹦极
<span id="myspan">
<input type="text" value="btn2" />
<input type="password" value="btn2" />
<input type="text" value="btn2" />
</span>
</body>
<script>
//console.log(document.getElementById("mybtn"));
/* js中集合 数组 */
console.log(document.getElementsByTagName("input")[1].value);
/* var eles = document.getElementsByTagName("input");
for(var i = 0;i<eles.length;i++){
eles[i].style.color = "red";
} */
function checkAll(){
console.log(document.getElementsByName("hobby"));
var eles = document.getElementsByName("hobby");
for(var i = 0;i<eles.length;i++){
eles[i].checked = true;
}
}
//console.log(document.getElementsByClassName("cls1")[0].className);
console.log(document.getElementsByTagName("input"))
var eles = document.getElementsByTagName("input");
for(var i = 0;i<eles.length;i++){
if(eles[i].type == "text"){
eles[i].value = "小明";
}
}
console.log(document.getElementById("myspan").getElementsByTagName("input"));
</script>
</html>
open/close窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/*
open() 打开新广告
close() 关闭广告
*/
var mywin;
function myOpenWin(){
mywin = window.open("1window对象.html","","");
}
function myCloseWin(){
mywin.close();
}
</script>
</head>
<body>
<input type="button" value="打开窗口" onclick="myOpenWin()" />
<input type="button" value="关闭窗口" onclick="myCloseWin()" />
</body>
</html>
6.定时函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function myfun(){
console.log("hello world!!!");
}
//setInterval("myfun()",1000);//反复执行
//clearInterval(taskid) 清除interval
//setTimeout("myfun()",1000);//只执行一次
//clearTimeout(taskid) 清除setTimeout
//轮播图 倒计时 元素定时移动
/* var taskid = setInterval(function(){
console.log("hello2 world!!!");
},1000); */
var taskid = setTimeout("myfun()",2000);
function myStop(){
clearTimeout(taskid);
}
</script>
</head>
<body>
<input type="button" value="停止" onclick="myStop()" />
</body>
</html>
7.dom操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function addEle(){
/*
1.创建元素
2.设置元素
3.控制元素加载在dom树的位置
根据层次结构查找元素节点
parentNode：返回节点的父节点
childNodes：返回子节点集合,childNodes[i]
firstElementChild：返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild： 返回节点的最后一个子节点
nextElementSibling：下一个节点
previousElementSibling：上一个节点
*/
var newli = document.createElement("li");
var newinput = document.createElement("input");
//newinput.setAttribute("type","password");
newinput.type="checkbox";
newli.appendChild(newinput);
//newli.innerHTML="新文本";
//newli.innerHTML ="<u>新文本</u>";
document.getElementById("myul").appendChild(newli);
}
function addEle2(){
var newli = document.createElement("li");
var newinput = document.createElement("input");
newinput.type="checkbox";
newli.appendChild(newinput);
document.getElementById("myul").insertBefore(newli,document.getElementById("myli"));
}
function addEle3(){
//cloneNode bol决定子节点是否复制
var newli = document.getElementById("myli").cloneNode(true);
document.getElementById("myul").appendChild(newli);
}
function searchEle(){
//console.log(document.getElementById("myli").parentNode);
//console.log(document.getElementById("myul").childNodes);
//console.log(document.getElementById("myul").previousElementSibling);
console.log(document.getElementById("myul").lastElementChild);
}
function delEle(){
document.getElementById("myul").removeChild(document.getElementById("myul").lastElementChild);
}
</script>
</head>
<body>
<input type="button" value="增加节点" onclick="addEle()" />
<input type="button" value="查看节点" onclick="searchEle()" />
<input type="button" value="增加节点2" onclick="addEle2()" />
<input type="button" value="复制节点" onclick="addEle3()" />
<input type="button" value="删除节点" onclick="delEle()" />
<ul id="myul">
<li id="myli" class="xxx"><input type="password"/></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function addEle(){
document.getElementById("myul").innerHTML+='<li class="mycls123"><input type="checkbox"/></li>';
}
function delEle(){
document.getElementById("myul").removeChild(document.getElementById("myul").lastElementChild);
}
</script>
</head>
<body>
<input type="button" value="增加节点" onclick="addEle()" />
<input type="button" value="删除节点" onclick="delEle()" />
<ul id="myul">
<li id="myli" class="xxx"><input type="password"/></li>
</ul>
</body>
</html>
8.table操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function getRowVal(){
console.log(document.getElementById("mytable").rows[3].cells[0].innerHTML);
}
function createRow(){
var newrow = document.getElementById("mytable").insertRow(document.getElementById("mytable").rows.length);
var td1 = newrow.insertCell(0);
var td2 = newrow.insertCell(1);
var td3 = newrow.insertCell(2);
var td4 = newrow.insertCell(3);
td1.innerHTML="小明";
td2.innerHTML="小明";
td3.innerHTML="小明";
td4.innerHTML="小明";
}
function delRow(){
document.getElementById("mytable").deleteRow(document.getElementById("mytable").rows.length-1);
}
</script>
</head>
<body>
<input type="button" value="获取内容" onclick="getRowVal()" />
<input type="button" value="添加一行" onclick="createRow()" />
<input type="button" value="删除一行" onclick="delRow()" />
<table id="mytable" border="1" >
<caption>学员信息表</caption>
<thead>
<tr><th>姓名</th><th>年龄</th><th>班级</th><th>性别</th></tr>
</thead>
<tbody>
<tr><td>尼古拉斯·赵四</td><td>57</td><td>704B</td><td>男</td></tr>
<tr><td>宇智波·刘能</td><td>55</td><td>704B</td><td>女</td></tr>
<tr><td>金星</td><td>34</td><td>704B</td><td>?</td></tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function getRowVal(){
console.log(document.getElementById("mytable").rows[3].cells[0].innerHTML);
}
function createRow(){
var sname = document.getElementById("sname").value;
var sage = document.getElementById("sage").value;
var sroom = document.getElementById("sroom").value;
var sgender = document.getElementById("sgender").value;
var mycontent = '<tr><td>'+sname+'</td><td>'+sage+'</td><td>'+sroom+'</td><td>'+sgender+'</td></tr>'
document.getElementById("maindata").innerHTML+=mycontent;
}
function delRow(){
document.getElementById("mytable").deleteRow(document.getElementById("mytable").rows.length-1);
}
</script>
</head>
<body>
<input type="button" value="获取内容" onclick="getRowVal()" />
<input type="button" value="删除一行" onclick="delRow()" />
<hr />
<input type="button" value="添加一行" onclick="createRow()" />
<input id="sname" type="text" />
<input id="sage" type="text" />
<input id="sroom" type="text" />
<input id="sgender" type="text" />
<table id="mytable" border="1" >
<caption>学员信息表</caption>
<thead>
<tr><th>姓名</th><th>年龄</th><th>班级</th><th>性别</th></tr>
</thead>
<tbody id="maindata">
<tr><td>尼古拉斯·赵四</td><td>57</td><td>704B</td><td>男</td></tr>
<tr><td>宇智波·刘能</td><td>55</td><td>704B</td><td>女</td></tr>
<tr><td>金星</td><td>34</td><td>704B</td><td>?</td></tr>
</tbody>
</table>
</body>
</html>
9.String对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/*
indexOf
查找指定字符是否存在
substring（起,止）
substr（起,个数）
split() 根据指定字符拆分字符串 拆为数组
replace() 替换字符
*/
var mystr = "abcdefgfiier";
console.log(mystr.indexOf("fga"));
/*
if(mystr.indexOf("fga")>=0){
//xxxx
} */
console.log(mystr.substring(2,4));
console.log(mystr.substr(2,4));
var mystr = "uname=jack;uage=15;upwd=abc123"
var myarr = mystr.split(";")
console.log(myarr);
for(var i = 0;i < myarr.length;i++){
var keyAndV = myarr[i].split("=");
if(keyAndV[0]=="uage"){
console.log(keyAndV[1]);
}
}
var mystr2 = "username";
console.log(mystr2.replace("name","age"));
</script>
</head>
<body>
</body>
</html>
10.math 对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
console.log(Math.ceil(12.23)) ;
console.log(Math.floor(12.93)) ;
console.log(Math.round(12.93)) ;
console.log(Math.random()) ;
/*
获得随机数
Math.random()
1.扩倍 舍去小数
2.加减 移位
*/
</script>
</head>
<body>
</body>
</html>
11.Date 对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var nowDate = new Date("2021/12/12 11:11:11");
console.log(nowDate.getTime());
</script>
</head>
<body>
</body>
</html>
12.Array对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/*
js数组 类型不限 个数不限 arraylist
js中获取元素集合 数组
遍历
*/
var myarr = [1,true,"abc",4,new Date(),6];
myarr = [2,7,5,3,9,1];
var myarr2 = new Array();
console.log(myarr.length);
console.log(myarr.join(","));
myarr.sort(function(a,b){
return b-a;
})
console.log(myarr);
myarr.push("a");
console.log(myarr);
myarr.pop();
console.log(myarr);
myarr.unshift("b");
console.log(myarr);
myarr.shift();
console.log(myarr);
</script>
</head>
<body>
</body>
</html>