2.4 javascript2
2024-04-20 03:02:06
2.4 javascript
- 2.4 javascript
- 1.window对象
- 2.history对象
- 3.location
- 4.document
- open/close窗口
- 6.定时函数
- 7.dom操作
- 8.table操作
- 9.String对象
- 10.math 对象
- 11.Date 对象
- 12.Array对象
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标签浏览器地址栏直接输入表单提交 getlocation.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数组 类型不限 个数不限 arraylistjs中获取元素集合 数组遍历*/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>
2.4 javascript2相关推荐
- javascript2秒后再执行_停车后5秒，车祸发生了！高速公路上你别再这样做了！| 一线微观...
近日,济青北线发生一起交通事故, 一辆行驶在超车道的商务车, 在匝道口附近突然刹车减速并停车, 不到5秒钟的时间, 后方一辆轿车躲闪不及, 在采取紧急避险措施之后, 还是撞上了这辆突然停车的商务车, ...
- JavaScript-2（数组与字符串的方法）
变量声明时如果不使用 var 关键字,那么它就是一个全局变量,即便它在函数内定义. 闭包是可访问上一层函数作用域里变量的函数,即便上一层函数已经关闭. 数组 var a=["a", ...
- JavaScript2谁刚开始学习应该知道4最佳实践文章（翻译）
原版的:24 JavaScript Best Practices for Beginners (注:阅读原文的时候没有注意公布日期,觉得不错就翻译了,翻译到JSON.parse那一节觉得有点不正确路才 ...
- JavaScript-2：初体验JS
行内式JS 直接写到元素的内部 <input type="button" name="" id="" value="唐伯虎& ...
- Day42 JavaScript-2
JavaScript 学习网站:http://www.w3school.com.cn/html/index.asp JavaScript由三部分组成:EMCAScript.DOM.BOM. DOM是一 ...
- 前端页面之JavaScript2
JavaScript中的DOM 1.DOM:document object model的简写,文档对象模型.将整个html页面看作倒挂的 树,html页面每个标签看作树的节点对象. 2.DOM的作用: ...
- JavaScript2.2
* Math对象 常用方法 方法 说明 示例 ceil() 对数进行上舍入 Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25 floor() 对数进行下舍入 Ma ...
- 《JavaScript高级程序设计》（第2版）上市
本书是技术畅销书<JavaScript高级程序设计> 的第2版,几乎全部更新.重写 了上一版的内容,融入了作者近几年来奋战在前端开发一线的宝贵经验 , 是学习和提高JavaScript ...
- CSS3蓝色宽屏二级下拉菜单DEMO演示
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
最新文章
- Python中使用数据库SQLite和MySQL
- VC++ ATL 学习总结
- pku 2195 Going Home 最小费最大流问题
- 【拯救赵明】 安全方案 超简单
- 工控设备 如何将数据发送到串口_嵌入式无风扇工控机在水质监测系统中的应用...
- [Python爬虫] Selenium实现自动登录163邮箱和Locating Elements介绍
- mysql查询每月、每天订单金额
- JS在页面限制checkbox最大复选数
- sysctl mysql_Sysctl
- docker使用网桥网络
- coreos mysql_CoreOS 实战：在 UOS上体验CoreOS 操作全记录
- Java 运行环境的安装、配置与运行
- 红外光通信装置数字部分思路点睛 2013年国赛f题
- selenium使用AutoIt工具上传附件
- “指付通”还是“支付痛”？-【软件和信息服务】2014.10
- python程序控制结构实验报告_20193227 实验二《Python程序设计》实验报告
- BufferedImage 图片打水印
- linux vfe框架,bsp内核的摄像头使用
- 影响谷歌排名的10个重要因素【重点关注】
- ROS - MoveIt 学习