JavaScript初探 四
2018-06-22 07:46:31来源：未知 阅读 ()
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
//bom浏览器对象模型 window 类 和对象的关系
//bom编程:主要就是学习如何使用window对象里面的属性,方法,事件
//window.onload 页面资源加载完毕事件 html+css+js+图片+视频+音频等加载完毕执行
window.onload = function () {
//获取dom对象
document.getElementById("btnTest");
var peopleArr = [1, 2, 3, 4, 5];//加了var 就是局部变量,不加var 就是往window对象追加属性
}
//---------------分割线--------------------
//定时器--开启以后有一个返回值,叫做定时器id,可以通过这个id来停止这个定时器
var timeOurId = setTimeout(ForTimeOut, 2000, 10, "fox");
clearTimeout(timeOurId);
function ForTimeOut(age, name) {
alert("定时器调用");
}
//计时器--多次执行
var intervarlId = setInterval(ForTimeOut, 1000);
clearInterval(intervarlId);
//-------------分割线------------------------------
//body对象的作用域--body的本质是div 不给高度默认就一根线,根据自己内部的元素而变大
//如果需要整个页面都是作用域,那么事件应该加给window
//------------华丽分割线-------------
//------------下面是dom复习----------
//------------华丽分割线-------------
//dom文档对象模型 页面中的每一个标签元素 都是一个dom对象
//dom编程:如何使用dom对象的属性,方法,事件
//浏览器解析完页面html+css+js,从上到下创建dom对象,生成dom树 放在 window.document
//----------分割线-----------获取dom元素
var domTest = document.getElementById()//只拿一个,如果有相同id ,从上往下取,取到第一个为止
document.getElementsByClassName();//class 返回的是dom数组
document.getElementsByTagName();//标签名 标签名就是 标签的 第一个字母(绝大多数)
//---------分割线----------修改dom元素的属性
domTest.innerHTML//修改双标签之间的文本值 直接覆盖原始值 innerText
domTest.value//单标签 通过.value修改文本值(一般是input标签)
domTest.style.任意样式//修改高度,宽度 等需要单位的 必须加上px
domTest.getAttribute()//获取自定义属性
domTest.setAttribute("littleStar", "爸爸去哪儿");
domTest.removeAttribute("littleStar");//注意,英语能力提升,学习编程会更快
//--------分割线---------创建dom元素
document.createElement("input").type="button";//input标签的默认形态 就是文本框
//只有上面这个方法,方法的返回值是,创建好的dom元素
domTest.cloneNode(true)//克隆dom元素 false 只克隆元素本身(没有子元素) true:子元素一并克隆
//克隆元素跟之前的一模一样,id也是一样,如果又需要根据id获取元素的 必须把id改掉
document.createElement("table").insertRow().insertCell()//快速创建table 不常用--了解即可
//------------分割线-----------删除dom元素
domTest.parentNode.removeChild(domTest);//dom元素不能自己删除自己需要父元素把他删除
domTest.innerHTML = "";//暴力型删除,全部清空
//上面的删除,只是将dom元素从dom树里面移除,页面中看不到了,但是还在内存里面
//-----------分割线---------加入到dom树里面
domTest.appendChild(新元素)//为某一个元素追加子节点,在最后追加
domTest.insertBefore(新元素, 位置元素)//在指定元素之前,插入新元素
domTest.innerHTML = "<input type='text' value='马上下课了'>";
//---------分割线----------dom事件
//在满足某些情形的时候触发方法
//winform中是以 控件对象.onclick 的方式设置
domTest.onclick = function () { }
</script>
</head>
<body style="background-color: yellow">
<span><input type="button" /></span>
<input type="button" value="我是一个按钮" id="btnTest" foxName="smallFox" />
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
window.onload = function () {
document.getElementById("button01").onclick = function () {
alert("我是通过dom元素.onclick设置的"+this);
}
alert(document.getElementById("button01").onclick);
alert(document.getElementById("button02").onclick);
}
//---------封装的方法
function sayYeah() {
alert("oh_Yeah!"+this);
}
</script>
</head>
<body>
<input type="button" id="button01" value="document设置"/>
<input type="button" id="button02" value="写在标签里面" onclick="sayYeah();"/>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
//事件参数的由来
//点击某个dom元素的时候.浏览器知道,浏览器就去检查是否有点击事件
//如果有点击事件 就调用 dom.onclick(传入事件参数); 同时传入事件参数
//事件参数的作用,阻断冒泡(*),获取鼠标位置,按键信息等
//常用属性
//offsetX Y 是鼠标在当前这个控件偏离原点的坐标
//窗体加载事件
window.onload = function () {
document.getElementById("btnTestEvent").onclick = function (event) {
//offset 是鼠标在当前这个dom元素的内部的坐标 ,左上角是原点
alert(event.offsetX + "||" + event.offsetY);
}
}
window.onmousemove = function (evt) {
// alert(evt.offsetX + "|" + evt.offsetY);
//设置按钮的value值
document.getElementById("showInfo").value = evt.x + "|" + evt.y;
document.getElementById("happyTwo").style.top = evt.y + "px";
document.getElementById("happyTwo").style.left = evt.x + "px";
//document.getElementById("divBox").style.top = evt.x + "px";
//document.getElementById("divBox").style.left = evt.y + "px";
}
</script>
</head>
<body>
<label id="happyTwo" style="position: absolute;">快乐的小二逼</label>
<input type="text" id="showInfo" />
<input type="button" value="测试事件参数" id="btnTestEvent" />
<span style=" border: 1px solid #0094ff" id="divBox">
<img src="img/q.bmp" id="imgBox" />
</span>
</body>
</html>
事件冒泡
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div {
border: 1px solid #0094ff;
width: 80%;
margin: 0 auto;
}
#div01Pao {
height: 500px;
background-color: #00ffe0;
}
#div02Pao {
height: 80%;
background-color: #f500ff;
}
</style>
<script type="text/javascript">
//0级dom事件冒泡,触发了某个子元素的某个事件后，同时会依次逐级触发父元素的同名事件`
//事件参数里面的 evt.stopPropagation();这个方法 只要在事件中执行,就能够阻断冒泡
window.onload = function () {
//分别为 div01 div02 按钮添加点击事件
document.getElementById("div01Pao").onclick = function (evt) {
alert(this.id + "点击事件被触发");
}
document.getElementById("div02Pao").onclick = function (evt) {
alert(this.id + "点击事件被触发");
}
document.getElementById("btnPao").onclick = function (evt) {
evt.stopPropagation();
alert(this.id + "点击事件被触发");
}
//为body添加点击事件
document.body.onclick = function (evt) {
alert("body的onclick事件被触发");
}
}
</script>
</head>
<body>
<div id="div01Pao">
我是div01Pao
<div id="div02Pao">
我是div02Pao
<input type="button" id="btnPao" value="btnPao" />
</div>
</div>
</body>
</html>
二级DOM事件
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function () {
document.getElementById("btnTest").onclick = function (evt) {
alert("123");
alert("234");
}
document.getElementById("btnTest").onclick = function (evt) {
alert("456");
}
//0级dom事件后注册的会覆盖先注册的-
//-----------分割线-------------演示二级dom事件
//二级dom事件 增加 使用 dom元素.addEventListener(事件类型,方法,);
//二级dom事件可以多次增加,不会覆盖,执行的顺序,是注册的顺序
//二级跟0级可以共存,执行的顺序是注册的顺序
//二级dom事件移除 使用removeEventListener("事件类型",方法地址)//这里使用匿名函数,就无法移除
document.getElementById("btnTwo").onclick = function (evt) { alert("0级dom事件被触发"); }
document.getElementById("btnTwo").addEventListener("click", sayTwo);
document.getElementById("btnTwo").addEventListener("click", function (evt) { alert("第二次注册二级dom事件"); });
document.getElementById("btnTwo").removeEventListener("click", sayTwo);
}
//-------------封装的方法
function sayTwo(evt) {
alert("二级dom事件");
}
</script>
</head>
<body>
<input type="button" id="btnTest" value="0级dom事件" />
<input type="button" id="btnTwo" value="二级dom事件" />
</body>
</html>
二级DOM事件冒泡
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div {
border: 1px solid #0094ff;
width: 80%;
margin: 0 auto;
}
#div01Pao {
height: 500px;
background-color: #00ffe0;
}
#div02Pao {
height: 80%;
background-color: #f500ff;
}
</style>
<script type="text/javascript">
window.onload = function () {
//二级dom事件也会冒泡
//二级dom事件注册的时候 第三个参数如果传了true 那么事件就不在冒泡,而是捕获
//捕获,是从外往里执行,如果元素有事件,那么就执行,如果没有,就不执行
//如果第三个参数给的是 false 那么就是冒泡
//先执行捕获阶段的事件,再执行冒泡阶段的事件
//如果不写第三个参数,默认是false
document.getElementById("btnPao").addEventListener("click", function (evt) { alert(this.id + "二级事件被触发"); }, true);
document.getElementById("div02Pao").addEventListener("click", function (evt) { alert(this.id + "二级事件被触发"); }, false);
document.getElementById("div01Pao").addEventListener("click", function (evt) { alert(this.id + "二级事件被触发"); }, true);
}
</script>
</head>
<body>
<div id="div01Pao">
我是div01Pao
<div id="div02Pao">
我是div02Pao
<input type="button" id="btnPao" value="btnPao" />
</div>
</div>
</body>
</html>
阻断默认行为
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
//事件参数里面 有一个方法preventDefault() 可以用来阻断默认行为,--一半用在 a标签 或者是 提交按钮
window.onload = function () {
document.getElementById("aPao").onclick = function (evt) {
alert("123");
//使用事件参数的阻断默认行为
evt.preventDefault();
}
//document.getElementById("btnSub").onclick = function (evt) {
// evt.preventDefault();
//}
//表单元素的 onsubmit事件,会在 点击表单中 的submit按钮时触发
document.getElementById("formUser").onsubmit = function (evt) {
alert("表单即将被提交,要不要再次验证数据的合理性呢?");
}
alert("兄弟稍等一会");
//直接调用表单元素的 submit()方法 不会触发 onsubmit事件
document.getElementById("formUser").submit();
}
</script>
</head>
<body>
<a href="p040级事件冒泡.html" id="aPao">去看冒泡</a>
<form action="p08接受get请求.html" method="post" id="formUser">
<label>用户名:</label>
<input type="text" name="userName" /><br />
<label>密码:</label>
<input type="password" name="userPass" /><br />
<label>性别:</label><input type="radio" name="userSex" id="man" value="man" /><label for="man">男</label><input type="radio" name="userSex" id="woman" value="woman" /><label for="woman">女</label>
<br />
<input type="submit" id="btnSub" />
</form>
</body>
</html>
正则表达式
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
//定义正则的标准
var reg = /(.+)@(.+)/;//使用 / 这里写正则标准/
var mailStr = "橡胶果实@qq.com";//字符串
alert(reg.test(mailStr));//调用 标准的.text(字符串) 会返回true 或者false 分别对应,匹配,不匹配
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
window.onload = function () {
document.getElementById("btnTest").onclick = function (evt) {
//修改自己的class
//通过className来修改元素的 class属性
this.className = "itcast";
}
}
</script>
</head>
<body>
<input type="button" value="我是按钮" class="btnButton" id="btnTest"/>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onbeforeunload = function () {
alert("你确定要离开我了");
}
window.onload = function () {
document.getElementById("btnShow").onclick = function (evt) {
window.showModelessDialog("p020级dom事件.html");
}
}
</script>
</head>
<body>
<input type="button" name="button" value="显示模态窗口" id="btnShow" />
</body>
</html>
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：MVC4 批量删除数据
相关文章
- asp.net及javascript判断是否手机访问的方法 2019-11-27
- C#后台调用前台javascript的方法 2019-09-08
- 什么是JavaScript闭包？ 2018-06-22
- 【SignalR学习系列】7. SignalR Hubs Api 详解（JavaScript 2018-06-22
- JavaScript中清空数组的三种方式 2018-06-22
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
热门词条
最新资讯
热门关注
热门标签