简单的javascript学习02
来源：互联网 发布：物理tracker软件 编辑：程序博客网 时间：2024/06/05 22:45
-----------------------------------------------------------------------------------------------------------------------------------------------第三天-----------------------------------------------------------------------------------------------------------<html><head><title>简单复习</title><meta charset="UTF-8"/></head><body><h3>HTML</h3><ol><li>html的概念</li><li>三大基石</li><li>html的标准文档</li><li>html的head 标签</li><li>13个常用的文本标签</li><li>图片标签和表格标签</li><li>超链接和iframe</li><li>frameset</li><li>form标签</li><li>form登陆注册页面</li></ol><h3>CSS</h3><ol><li>css的介绍：层叠样式表</li><li>css的声明：3种----就近原则</li><li>css的选择器------3种</li><li>CSS的定位和盒子模型</li></ol><h3>js</h3><ol><li>js的历史与发展</li><li>js的引入</li><li>js的变量与声明</li><li>js的运算符</li><li>js的逻辑结构</li><li>js的数组</li><li>js的函数</li><li>常用的对象和方法</li><li>事件机制</li><li>event对象</li></ol></body></html>----------------------------------------------------------------------------------------------<html><head><title>BOM对象学习</title><meta charset="UTF-8"/><script type="text/javascript">/* window对象讲解 1、常用方法讲解 window.alert()--------警告框方法，没有返回值 window.confirm()------确认框，如果在确认的时候点击确定返回true,点击取消返回false; window.prompt(参数1,参数2)------提示框，有两个参数.参数1是对本窗口功能的说明,参数2是默认值 返回值： 如果点击确定，则将用户写的值返回 如果点击取消，则返回null; window.setTimeOut()-----定时执行 window.setInterval()----间隔执行 setTimeOut和setInterval都会开启线程，在执行的时候会将开启的线程id返回。 clearTimeOut(id)------关闭setTimeOut()启动的线程 clearInterval(id)-----关闭setInterval()启动的线程 window.open(url,newname,features)-----打开一个设置好的子窗口，既可以是网络资源也可以打开本地资源 window.open("son.html","新窗口","height=600, width=800, top=100,left=100, toolbar=no, menubar=yes, scrollbars=yes, resizable=no,location=yes, status=no"); 2、属性讲解 window.opener-----使用此属性可以调用父页面的函数； * *///警告框function test_alert(){window.alert("aaa");}//确认框function test_confirm(){var flag= window.confirm("你真的真的要离开我吗？");window.alert(flag);}//提示框function test_prompt(){var value=window.prompt("请输入昵称","例如：陶渊明");window.alert(value);}//setTimeOut定时执行function test_setTimeOut(){var num= window.setTimeout(function(){alert("好坑。。。。。");},3000);alert(num);}//setInterval间隔执行function test_setInterval(){window.setInterval(function(){alert("setInterval.......执行了");},2000);}//openfunction test_open(){window.open("http://www.baidu.com");}function test_open2(){window.open("son.html","新窗口","height=600, width=800, top=100,left=100, toolbar=no, menubar=yes, scrollbars=yes, resizable=no,location=yes, status=no");}function test_opener(){alert("我是父页面");}</script></head><body><h3>bom对象学习</h3><pre>浏览器对象模型：BOM------>协议，是用来规范各大浏览器厂商开发浏览器的，这样对于我们开发人员来讲，在使用脚本语言的时候可以不再考虑浏览器内核差异的问题。具体的实现是window对象window是浏览器厂商对外提供的可以访问其内部封装的方法的对象。</pre><hr /><h3>window对象常用方法讲解</h3><input type="button" name="" id="" value="测试警告框" onclick="test_alert();" /><input type="button" name="" id="" value="测试确认框" onclick="test_confirm();" /><input type="button" name="" id="" value="测试提示框" onclick="test_prompt();"/><hr /><input type="button" name="" id="" value="测试setTimeOut" onclick="test_setTimeOut();"/><input type="button" name="" id="" value="测试setInterval" onclick="test_setInterval();"/><hr /><input type="button" name="" id="" value="测试open方法打开网络资源" onclick="test_open();"/><input type="button" name="" id="" value="测试open方法打开本地资源" onclick="test_open2();"/></body></html>--------------------------------------------------------------------------------------------------------------<html><head><title>子页面</title><meta charset="UTF-8"/><script type="text/javascript">var id;//使用window.close()及setTimeOut方法实现页面自动关闭function test_close(){window.setTimeout(function(){window.close();},3000);}//使用setInterval()方法实现网页倒计时关闭功能function test_dj(){var f=document.getElementById("f");id=window.setInterval(function(){f.innerHTML=f.innerHTML-1;if(f.innerHTML==0){window.close();}},1000);//alert(f.innerHTML);}//使用clearInterval()方法关闭setInterval()开启的线程function test_stop(){window.clearInterval(id);}//使用window.opener打开执行父页面的函数function test_op(){window.opener.test_opener();}</script></head><body onload="test_dj();">欢迎客官光临本网站，会员费一个月10元，某宝就有卖.<font color="red" size="10px" id="f">5</font>秒后本网站会自动关闭，请客官抓紧时间。<hr /><input type="button" name="" id="" value="继续" onclick="test_dj();" /><input type="button" name="" id="" value="暂停" onclick="test_stop();"/><input type="button" name="" id="" value="测试opener方法" onclick="test_op();"/></body></html>--------------------------------------------------------------------------------------------------------<html><head><meta charset="UTF-8"><title>window属性学习</title><script type="text/javascript">/* window对象常用属性学习： 1、screen：屏幕属性，主要是用来获取用户电脑的屏幕信息的 例如：window.screen.height,获取用户屏幕的高分辨率 剩余的参照PPT了解即可 2、location:地址栏属性，主要是用来操作用户浏览器的地址栏 href:window.location.href="http://www.baidu.com"----将地址栏信息改为此值，并跳转 也可以用来获取当前地址栏中的URL * reload()：window.location.reload()刷新当前页 * 3、history:存储的是浏览器的历史记录信息 * back()：window.history.back()----相当于浏览器的后退按钮 * forward():window.history.forward()----相当于浏览器的前进按钮 * go(index):index作用将指定的历史记录的编号传进来，正数表示前进到指定的记录，负数表示后退到执行的记录，0表示刷新 *4、navigator:此属性保存的是浏览器的信息 * userAgent:window.nabigator.userAent---返回当前浏览器的信息 * */function test_screen(){alert(window.screen.width+":"+window.screen.height);}function test_location(){alert(window.location.href);//window.location.href="http://www.baidu.com";alert(window.location.pathname+":"+window.location.port);window.location.reload();}function test_history(){window.history.forward();}function test_navigator(){alert(window.navigator.userAgent+":"+"浏览器信息");alert(window.navigator.platform+"：浏览器运行的操作系统");alert(window.navigator.appName+":"+window.navigator.appVersion);}</script></head><body><h3>window属性学习</h3><input type="button" name="" id="" value="测试window的screen属性" onclick="test_screen();" /><input type="button" name="" id="" value="测试机window的location属性" onclick="test_location();"/><input type="button" id="" value="测试windwo的history属性的forward()方法" onclick="test_history();" /><input type="button" name="" id="" value="测试window的navigator属性" onclick="test_navigator();" /></body></html>-------------------------------------------------------------------------------------------------------------<html><head><title>document对象学习</title><meta charset="UTF-8"/><script type="text/javascript">/* document对象学习： 1、document对象：此对象是属于window对象的一个属性，专门用来操作HTML元素和HTML文档结构的。 * 学习内容： * 1、使用document对象获取HTML元素 * 2、操作HTML元素的属性 * 3、操作样式 * 4、操作内容 * 5、操作文档结构 * * * 使用document对象获取HTML元素对象的方式： * 直接方式： * 1、通过id： * document.getElementById("HTML的元素id") * 注意：HTML元素的id不可以重复，每个元素都可以加上id * * 2、通过HTML元素name属性： * document.getElementsByName("元素的name属性值"); * 注意:返回的是存储HTML元素对象的数组 * * 3、通过HTML的标签名： * document.getElementsByTagName("标签名");注意：返回的是存储HTML元素对象的数组。间接方式：父子关系：通过父亲找孩子---->childNodes子父关系：通过孩子找父亲---->parentNode兄弟关系：找哥哥--------->previousibling找弟弟--------->nextsibling * *//*==============直接关系=======================================================================================*///通过id方式获取HTML元素对象function test_id(){var inp=document.getElementById("uname");alert(inp);}function test_name(){var sex=document.getElementsByName("sex");alert(sex);}function test_tag(){var tag=document.getElementsByTagName("input");alert(tag);}/*===============间接关系=============================================================*/function test_chidNode(){var showdiv=document.getElementById("showdiv");var child=showdiv.childNodes;alert(child.length);}function test_parent(){var child=document.getElementById("child");var parent=child.parentNode;alert(parent);}function test_bro(){var chid=document.getElementById("child");var gg=chid.previousSibling;//找的是相邻的上一个元素alert(gg);var dd=chid.nextSibling;//找的是相邻的下一个元素alert(dd);}</script><style type="text/css">#showdiv{border: solid 2px;width: 300px;}#showdiv input{margin:3px ;}</style></head><body><h3>document对象学习</h3><input type="button" name="" id="" value="测试id获取HTML元素对象" onclick="test_id();" /><input type="button" name="" id="" value="测试name获取HTML元素对象" onclick="test_name();" /><input type="button" name="" id="" value="测试tag获取HTML元素对象" onclick="test_tag();"/><hr /><input type="button" name="" id="" value="测试父子关系" onclick="test_chidNode();" /><input type="button" name="" id="" value="测试子父关系" onclick="test_parent();" /><input type="button" name="" id="" value="测试兄弟关系" onclick="test_bro();" /><hr />用户名：<input type="text" name="uname" id="uname" value="zhangsan" /><br /><br />密码: <input type="password" name="pwd" id="pwd" value="123" /><br /><br />性别：男 <input type="radio" name="sex" id="sex" value="0" />女 <input type="radio" name="sex" id="sex" value="1" /><!--扩展知识--><br /><br /><div id="showdiv"><input type="" name="" id="" value="" /><input type="" name="" id="" value="lisi" /><input type="" name="" id="child" value="zhangsan" /><input type="" name="" id="" value="lixiaosi" /><input type="" name="" id="" value="" /><input type="" name="" id="" value="" /></div></body></html> 0 0
- 简单的javascript学习02
- javascript的简单学习
- 简单的javascript学习01
- 简单的javascript学习03
- Javascript函数的简单学习
- javaScript中闭包(closures) 的简单学习
- JavaScript学习之简单的放大镜
- JavaScript学习之简单的计算器
- Javascript中String对象的的简单学习
- Javascript中DOM技术的的简单学习
- (学习笔记)简单正则表达式的使用实例[javascript]
- javascript学习之简单实现jquery的$("div").text()。
- javascript学习笔记—简单的动态选择收件人/联系人
- CSS学习笔记----一个简单的menu（javascript）
- JavaScript学习笔记38-简单的表单验证
- javascript学习二： 简单对象
- javascript简单特效，js学习
- Javascript学习-简单测试环境
- ImageMagick编译
- 1102. Invert a Binary Tree (25)-PAT甲级真题
- 用js或者jQuery判断数组中含某个元素
- POJ 1365 Prime Land（质因数分解）
- hadoop 三个节点集群的安装部署
- 简单的javascript学习02
- HDU5818（模拟）
- Java泛型－类型擦除
- UE4控制三自由度动感平台
- HDU 2255 (KM()算法)
- 计算机快捷键
- c/c++第十三天
- 洛谷 P2383 狗哥玩木棒
- POJ 3253 Fence Repair 优先队列
