Day42 JavaScript-2

JavaScript

学习网站：http://www.w3school.com.cn/html/index.asp
JavaScript由三部分组成：EMCAScript、DOM、BOM。
DOM是一个使程序和脚本有能力动态地访问和更新文档的内容，结构以及样式的平台和语言中立的接口。而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。首先应该清楚的是两者皆为接口定义。

DOM是W3C的标准（所有浏览器公共遵守的标准）
BOM是各个浏览器厂商根据DOM在各自浏览器上的实现
window是BOM对象，而非JavaScript对象，不过恰好为EMCAScript中所定义的Global对象

01-js的常用方法和对象学习

<html><head><title>js的常用方法和对象学习</title><meta charset="UTF-8"/> <!--js的常用方法和对象学习:String对象：操作字符的。使用：字符串.函数名即可大小写转换：toUpperCase()   转换大写toLowerCase()   转换小写字符串截取substr(0,1)     从指定开始位置截取指定长度的子字符串substring(0,1)  从指定位置开始到指定的结束位置的子字符串（含头不含尾）查找字符位置indexOf         返回指定字符第一次出现的位置。lastIndexOf     返回指定字符最后一次出现的位置。Date对象：使用： var 变量名=new Date();注意：获取的是客户端的时间，不能作为系统功能校验的时间的。参照：APIMath对象：使用：Math.函数名random()round()ceil()floor()Global对象eval()isNaN()parseInt()parseFloat()--><script type="text/javascript">//String对象function testString(){//创建字符串var str="abcdefg";//大小写转换alert(str.toUpperCase()+":"+str.toLowerCase());//字符串截取alert(str.substr(0,1)+":"+str.substring(0,1));alert(str.substr(0,1).toUpperCase()+str.substr(1,str.length));}//Date对象function testDate(){//创建日期对象var d=new Date();//操作日期和时间//获取年份alert(d.getYear());//返回从1900年起算距今的年分数alert(d.getFullYear());//返回当前的年份//获取月份alert(d.getMonth()+1);//获取当前的月份数（注意：要+1）//获取日期alert(d.getDate());//返回当前的日期//获取星期数alert(d.getDay());//返回星期数，注意星期日返回0//获取小时数alert(d.getHours());//返回当前的小时数//获取分钟数alert(d.getMinutes());//返回当前的分钟数//获取秒数alert(d.getSeconds());//返回当前的秒数}//Math对象function testMath(){//随机数字alert(Math.floor(Math.random()*9000+1000));//可以作为验证码}//Global对象function testGlobal(){//eval方法  将字符串转换为js代码执行eval("var a='123';");alert(a);//isNaN 判断Number强转后是否是数字。if(!isNaN(a)){alert("是数字")}else{alert("不是数字")}}</script></head><body><h3>js的常用方法和对象学习</h3><hr /><input type="button" id="" value="测试String对象" onclick="testString()"/><input type="button" id="" value="测试Date对象" onclick="testDate()"/><input type="button" id="" value="测试Math对象" onclick="testMath()"/><input type="button" id="" value="测试Global对象" onclick="testGlobal()"/></body>
</html>

02-js的window对象学习-方法（1)

<html><head><title>js的window对象学习</title><meta charset="UTF-8"/><!--问题:浏览器是由浏览器厂商来发明创造的，不同的浏览器厂商的浏览器对外提供的能让程序员直接调用的方法不同，这样就造成程序员在书写浏览器脚本语言时，需要同时写好几套，极大的阻碍了互联网的发展。解决：BOM浏览器对象模型：其实就一种规范规范浏览器的对开发语言的支持。实现:浏览器对外提供对象：window对象作用：封存了浏览器对外提供的操作HTML和其他特效的方法。使用：window对象的常用方法：框体方法：警告框:alert("内容");确认框:confirm("内容");提示用户是否继续进行选择的操作。确定：true取消：fasle文本框：prompt("提示语")收集用户数据如果用户书写了内容点击确定则返回用户数据点击取消则返回null定时方法：定时执行:作用：间隔指定的时间后执行指定的函数。window.setTimeOut(函数,时间);//返回当前线程的id中止执行方法：clearTimeOut(number id)间隔执行：作用：每间隔指定的时间后指定指定的函数window.setInterval(函数,时间);//返回当前线程的id中止执行方法：clearInterval(number id)子页面方法：window.open()作用:打开子页面使用: window.open("资源路径","newwindow","参数配置")参数配置："height=200, width=500, top=200,left=400, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=yes, status=yes"window.close()作用:关闭子页面注意：此函数只能关闭open打开的页面。window对象的常用属性:opener属性作用：实现在子页面中调用父页面的函数，保证父子页面的数据的一致性。使用：在父页面声明函数在子页面使用window.opener.父页面函数名()调用即可。window对象的document对象--><script type="text/javascript">//框体方法://警告框function testAlert(){window.alert("我是警告框");}//确认框function testConfirm(){alert(window.confirm("你确定要离开我吗?"));}//文本框function testPrompt(){alert(window.prompt("请输入昵称","例如：李白"));}//定时方法//定时执行function testSetTimeOut(){window.setTimeout(function(){alert("我是定时执行");},2000);}//间隔执行function testSetInterval(){window.setInterval(function(){alert("我是间隔执行");},2000);}//打开子页面function testOpen(){window.open("son.html","newwindow","height=400, width=600, top=200,left=400, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=yes, status=yes");}//声明函数function testOpener(){alert("我是父页面函数");}</script></head><body><h3>js的window对象学习</h3><hr /><input type="button" id="" value="测试alert" onclick="testAlert()" /><input type="button" id="" value="测试确认框" onclick="testConfirm()" /><input type="button" id="" value="测试文本框" onclick="testPrompt()" /><hr /><input type="button" id="" value="测试定时执行-setTimeOut" onclick="testSetTimeOut()"/><input type="button" id="" value="测试定时执行-setInterval" onclick="testSetInterval()"/><hr /><input type="button" id="" value="测试打开子页面--open" onclick="testOpen()"/></body>
</html>

son页面：

<html><head><title>子页面</title><meta charset="UTF-8"/><script type="text/javascript">var id;/*实现网页倒计时*/function testTime(){id=window.setInterval(function(){//获取font标签对象var f=document.getElementById("num");f.innerHTML=f.innerHTML-1if(f.innerHTML==0){window.close();}},1000);}//停止指定的间隔执行函数function testClear(){window.clearInterval(id);}//使用opener属性调用父页面函数function test(){window.opener.testOpener();}</script>   </head><body onload="testTime()"><h3>我是子页面</h3><hr />请抓紧时间浏览器网页信息，本网页将在<font id="num" color="red" size="20px">5</font>秒后自动关闭.<br /><input type="button" id="" value="暂停" onclick="testClear()"/><input type="button" id="" value="测试调用父页面函数--opener" onclick="test()"/></body>
</html>

03-js的window学习-属性学习(2)

<html><head><title>window对象的属性学习</title><meta charset="UTF-8"/><!--window对象的属性学习opener属性location属性：作用：地址栏属性，该属性是一个对象，封存了浏览器对地址栏的操作信息例如：url使用：URL操作:window.location.href//返回当前网页的URL信息window.location.href="资源路径"//跳转指定的URL资源。页面刷新：作用:重新加载页面资源。window.location.reload();-----------------------------------------------history属性：forward()//前进，相当于浏览器中的前进功能back()//后退，相当于浏览器中的后退功能go()//跳转指定的历史记录screen属性window.screen.widthwindow.screen.height获取分辨率           --><script type="text/javascript">//location属性//URL操作function testLocation(){alert(window.location.href);//查看当前网页的URL信息//window.location.href="http://www.jd.com";window.location.href="02-js的window对象学习（1).html"//调转指定的资源}//页面刷新function testRefresh(){window.location.reload();}//history属性function testHistory(){//前进//window.history.forward();//前进，相当于浏览器中的前进功能//后退//window.history.back();//后退，相当于浏览器中的后退功能//跳转指定历史记录window.history.go(0);   //跳转指定的历史记录}//Screen属性function testScreen(){alert(window.screen.width+":"+window.screen.height);}</script></head><body><h3>window对象的属性学习</h3><hr /><input type="button" id="" value="测试location属性--URL操作" onclick="testLocation()"/><input type="button" id="" value="测试location属性--刷新页面" onclick="testRefresh()"/><hr /><input type="button" id="" value="测试history" onclick="testHistory()"/><hr /><input type="button" value="测试Screen" onclick="testScreen()"/></body>
</html>

04-js的window对象-document-获取HTML元素

<html><head><title>js的document对象学习</title><meta charset="UTF-8"/><!--documnet对象学习：解释:document对象是浏览器对外提供的封存了当前运行的HTML文档信息的一个对象通过此对象可以让我们灵活的操作HTML文档，达到修改，完善HTML文档的目的。使用：document获取HTML元素对象直接 方式：通过IDvar 变量名=document.getElementById("uname");//返回指定的HTML元素对象注意：此对象中封存了HTML元素标签的所有信息。   通过namevar 变量名=document.getElementsByName("name属性值");注意：获取的是相同name属性的HTML元素对象的数组。通过标签名var 变量名=document.getElementsByTagName("标签名");注意：返回的是存储了该网页中指定的标签的所有对象的数组。间接方式：父子关系:先获取父级节点(参照直接方式)通过父级节点获取子节点数组var 变量名=父节点对象.childNodes;注意：子节点数组中会包含文本节点，可以使用nodeType属性筛选出来所有的HTML节点(nodeType值为1)子父关系：先获取子元素对象(参照直接方式)通过子元素对象获取父元素对象var 变量名=子元素对象.parentNode兄弟关系：先获取当前元素根据兄弟关系选择对应的获取方式var 变量名=元素对象.previousSibling; //兄var 变量名=元素对象.nextSibling;   //弟document操作元素对象的属性document操作元素对象的样式document操作元素对象的文档结构--><script type="text/javascript">//document获取HTML元素对象//通过ID获取function testById(){var inp=window.document.getElementById("uname");alert(inp.value);}//通过name获取function testByName(){var favs=document.getElementsByName("fav");alert(favs[0].value);}//通过标签function testByTagName(){var inps=document.getElementsByTagName("input");alert(inps.length); }/*-------------------------------------------------*///间接方式//父子关系function testGetChild(){//先获取父级元素对象var p=document.getElementById("showdiv");//获取子元素对象数组var clds=p.childNodes;//遍历var arr=[];for(var i=0;i<clds.length;i++){if(clds[i].nodeType==1){arr.push(clds[i]);}}alert(arr.length);}//子父关系function getParent(){//获取子元素对象var child=document.getElementById("un");//获取父元素对象var p=child.parentNode;alert(p)}//兄弟关系//兄关系function getPreEle(){//获取当前元素对象var un=document.getElementById("un");//获取兄元素对象var inp=un.previousSibling;alert(inp);}//弟关系function getNextEle(){//获取当前元素对象var un=document.getElementById("un");//获取兄元素对象var inp=un.nextSibling;alert(inp);}</script></head><body><h3>js的document对象学习</h3><hr /><input type="button" id="" value="测试通过ID获取" onclick="testById()"/><input type="button" id="" value="测试通过name获取" onclick="testByName()"/><input type="button" id="" value="测试通过标签名获取" onclick="testByTagName()"/><hr />用户名：<input type="text" name="" id="uname" value="张三" /><br />爱好：<br /><input type="checkbox" name="fav" id="" value="1" />唱歌<br /><input type="checkbox" name="fav" id="" value="1" />跳舞<br /><input type="checkbox" name="fav" id="" value="1" />旅游<br /><input type="checkbox" name="fav" id="" value="1" />吃鸡<br /><hr /><input type="button" id="" value="测试父子关系" onclick="testGetChild()" /><input type="button" id="" value="测试子父关系" onclick="getParent()" /><input type="button" id="" value="测试兄关系" onclick="getPreEle()" /><input type="button" id="" value="测试弟关系" onclick="getNextEle()" /><hr /><div id="showdiv" style="border: solid 1px; background-color: orange; width: 300px; height: 300px;" ><input type="text" value="张三" id="un" style="margin: 10px;"/><input type="text" value="李思思"style="margin: 10px;"/><input type="text" value="王五"style="margin: 10px;"/><input type="text" value="赵信"style="margin: 10px;"/><input type="text" value="慎"style="margin: 10px;"/></div></body>
</html>

05-js的document操作元素属性

<html><head><title>操作元素属性</title><meta charset="UTF-8"/><!--获取HTML元素对象操作元素属性：获取：元素对象.属性名//返回属性值修改：元素对象.属性名=值注意：不要修改标签的name和id属性--><script type="text/javascript">//获取元素属性function getFieldData(){//获取HTML元素对象var inp=document.getElementById("uname");//获取元素属性alert(inp.type+":"+inp.name+":"+inp.id+":"+inp.value);}//修改元素属性function updateFiledData(){//获取HTML元素对象var inp=document.getElementById("uname");//修改元素属性inp.type="button";inp.id="un";}</script></head><body><h3>操作元素属性</h3><input type="button" id="" value="操作属性--获取" onclick="getFieldData()" /><input type="button" id="" value="操作属性--修改" onclick="updateFiledData()" /><hr />用户名：<input type="text" name="uname" id="uname" value="zhangsan" /></body>
</html>

06-js的doument操作元素内容

<html><head><title>操作元素内容</title><meta charset="UTF-8"/><!--获取HTML元素对象操作元素的内容获取：元素对象.innerHTML返回所有的内容包括HTML标签元素对象.innerText返回所有的文本内容，不包括HTML标签修改：元素对象.innerHTML="新的内容"HTML标签会被解析，覆盖原有内容元素对象.innerText="新的内容"HTML标签不会被解析，覆盖原有内容注意：如果在修改是需要保留原有内容，则使用：元素对象名+="新的内容";--><script type="text/javascript">//操作元素内容//获取function getData(){//获取HTML元素对象var showdiv=document.getElementById("showdiv");//获取元素内容alert(showdiv.innerHTML); //返回所有的内容包括HTML标签alert(showdiv.innerText);//返回所有的文本内容，不包括HTML标签}//修改function updateData(){//获取HTML元素对象var showdiv=document.getElementById("showdiv");//修改元素内容//showdiv.innerHTML+="<u>你的，去前面探路的干活</u>";//HTML标签会被解析，覆盖原有内容showdiv.innerText="<u>你的，去前面探路的干活</u>";//HTML标签不会被解析，覆盖原有内容}</script><style type="text/css">#showdiv{border:solid 1px;width:200px;height:200px;background-color:orange;}</style></head><body><h3>操作元素内容</h3><input type="button" id="" value="操作元素内容---获取" onclick="getData()"/><input type="button" id="" value="操作元素内容---修改" onclick="updateData()"/><hr /><div id="showdiv"><b>皇军，前面有八路的干活儿</b></div></body>
</html>

07-js的document操作元素样式

<html><head><title>操作元素样式</title><meta charset="UTF-8"/><!--获取HTML元素对象操作样式：添加样式：元素对象名.style.样式名=样式值修改样式：元素对象名.style.现有样式名=新的样式值注意：还以通过元素对象.className="类选择器名"来添加样式。--><script type="text/javascript">//操作元素样式//添加样式function addCss(){//获取元素对象var showdiv=document.getElementById("showdiv");//添加样式showdiv.style.border="solid 1px";showdiv.style.width="200px";showdiv.style.height="200px";showdiv.style.backgroundColor="orange";}//使用类选择器添加function addCssByClass(){//获取元素对象var showdiv=document.getElementById("showdiv");//添加样式showdiv.className="common";}//修改样式function updateCss(){//获取元素对象var showdiv=document.getElementById("showdiv");//修改样式showdiv.style.backgroundColor="darkcyan";}var arr=["red","darkcyan","orange","blue","gray"];//闪图function testColor(){window.setInterval(function(){//获取元素对象var showdiv=document.getElementById("showdiv");//随机var num=Math.floor(Math.random()*5); //修改背景色showdiv.style.backgroundColor=arr[num]},100);}</script><style type="text/css">.common{border:solid 1px;width:200px;height:200px;background-color:red;}</style></head><body><h3>操作元素样式</h3><input type="button" id="" value="添加样式---style" onclick="addCss()"/><input type="button" id="" value="添加样式--classnName" onclick="addCssByClass()"/><input type="button" id="" value="修改样式" onclick="updateCss()"/><input type="button" id="" value="开始闪现模式" onclick="testColor()" /><hr /><div id="showdiv"></div></body>
</html>

08-js的document操作文档结构

<html><head><title>操作文档结构</title><meta charset="UTF-8"/><!--文档结构:指的是HTML文档的树形结构。节点：HTML文档树中的基本元素单位称为一个节点。获取HTML元素对象操作文档结构新建节点:var 变量名=document.createElement("标签名")//返回创建的HTML元素对象添加节点    节点对象.appendChild(节点对象);删除节点节点对象.removeChild(节点对象);--><script type="text/javascript">//文档操作function operDocu(){//获取元素对象var showdiv=document.getElementById("showdiv");//创建节点var inp=document.createElement("input");inp.type="file";//设置类型//创建节点--换行符var br=document.createElement("br");//创建节点--删除按钮var bt=document.createElement("input");bt.type="button";bt.value="删除";bt.onclick=function(){showdiv.removeChild(inp);showdiv.removeChild(bt);showdiv.removeChild(br);}//将节点添加到指定的节点中showdiv.appendChild(inp);showdiv.appendChild(bt);showdiv.appendChild(br);}</script></head><body><h3>操作文档结构</h3><input type="button" id="" value="点击上传" onclick="operDocu()"/><hr /><div id="showdiv" style="border: solid 1px;"></div></body>
</html>

09-js-百度-360双搜索实现

<html><head><title>双搜</title><meta charset="UTF-8"/><style type="text/css">/*设置标题样式*/h1{font-size:60px;margin-top:40px;}/*设置div样式*/#showdiv{margin:auto;width:700px;text-align:center;margin-bottom:20px;}input[type=text]{width:500px;height:40px;}input[type=button]{width:100px;height:40px;}</style><script type="text/javascript">//双搜function doubleSearch(){//获取搜索框对象var search=document.getElementById("search");var sval=search.value;//获取百度和360的搜索框var wd=document.getElementById("wd");var q=document.getElementById("q");//赋值wd.value=sval;q.value=sval;//提交表单//获取表单对象var bf=document.getElementById("bf");var qf=document.getElementById("qf");//提交bf.submit();qf.submit();}</script></head><body><h1 align="center">欢迎使用百度-360双搜</h1><!--声明form表单用来进行数据的提交--><form action="http://www.baidu.com/s" method="get" target="_baidu" id="bf"><input type="hidden" name="wd" id="wd"/></form><form action="http://www.so.com/s" method="get" target="_q" id="qf"><input type="hidden" name="q" id="q"/></form><!--声明div用来划分搜索框--><div id="showdiv"><input type="text" name="" id="search" value="" /><input type="button" id="" value="牛逼一下" onclick="doubleSearch()"/></div><!--声明div用来划分iframe--><div id="div01"><iframe src="" width="49%" height="500px" name="_baidu"></iframe><iframe src="" width="49%" height="500px" name="_q"></iframe></div></body>
</html>

小结

01-js的常用方法和对象学习
02-js的window对象学习-方法（1)
03-js的window学习-属性学习(2)
04-js的window对象-document-获取HTML元素
05-js的document操作元素属性
06-js的doument操作元素内容
07-js的document操作元素样式
08-js的document操作文档结构
09-js-双搜

小技能点：

1.$快捷键  document对象
2。 window.setInterval("timer()",1000);记得要写"";
3.用JS设置样式的时候    showdiv.style.border="solid 1px";  记得写""
4.<span></span> 行内元素
5.eval方法  将字符串转换为js代码执行
6.Prompt  提示框
7.使用opener属性调用父页面函数window.opener.testOpener();
8.//获取父元素对象
var p=child.parentNode;
9.//获取兄元素对象var inp=un.previousSibling;
10.//获取弟元素对象var inp=un.nextSibling;
11.//父子关系function testGetChild(){//先获取父级元素对象var p=document.getElementById("showdiv");//获取子元素对象数组var clds=p.childNodes;//遍历var arr=[];for(var i=0;i<clds.length;i++){if(clds[i].nodeType==1){arr.push(clds[i]);}}alert(arr.length);}

Day42 JavaScript-2相关推荐

Java学习笔记-Day42 HTML概述
Java学习笔记-Day42 HTML概述一.前端简介二.HTML 语言 1.简介 2.HTML的编写规范 3.HTML标签的声明 4.HTML的调试 5.标记语言的特点 6.头标签head 7. ...
【AJAX】JavaScript的面向对象
Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...
【JavaScript总结】JavaScript语法基础：JS高级语法
作用域链: 1.JS中只有函数能够限定作用域的范围: 2.变量处理在制定的函数范围内,还有一个特殊的作用域,就是没有用var 声明的全局作用域 3.js中的作用域链是为了清晰的表示出所有变量的作用范围 ...
【JavaScript总结】JavaScript语法基础：DOM
->DOM的理解:文档对应dom树 ->有了DOM能做什么:DOM的操作 html文档做为DOM树模型,DOM树的节点就是对象.对象会触发事件来执行一些事件代码. C#中的事件是一个委托变 ...
【JavaScript总结】JavaScript语法基础：JS编码
运算符数学:+. -. *. / 逻辑:>. < .>= .<=. == . !=.&&.|| . === .!==(完全等于) 对象相关 new delet ...
【JavaScript总结】JavaScript语法基础：数据类型
------>数据类型有哪些? ->基本类型:数字类型,布尔类型,字符串类型 ->引用类型:对象类型,函数类型 ->空类型:null 和 undefined ->运算符: ...
【JavaScript总结】JavaScript发展与学习内容
发展: 最初浏览器是为大学里浏览文档用,从地址栏输入文档地址,找到文档显示. 后来各种需求(购物网站,个人博客)出现,已有功能不能满足需求. 可人们依旧在努力满足这种需求,但实现后的效果很不尽人意. ...
Python：模拟登录、点击和执行 JavaScript 语句案例
案例一:网站模拟登录 # douban.pyfrom selenium import webdriver from selenium.webdriver.common.keys import Keys ...
[JavaScript] JavaScript数组挖掘，不只是讲数组哟(2)
课程来源:后盾人上一篇的内容:[JavaScript] JavaScript数组挖掘,不只是讲数组哟数组引用类型分析,多维数组,用Array.of为数组创建细节,类型检测与转换,在一个数组后面加一 ...
[JavaScript] JavaScript 数组挖掘，不只是讲数组哟
课程来源:后盾人数组引用类型分析数组的定义 const array = new Array('hello', 'dust', 1, 2, 3, 4, 5) console.log(array) l ...