JavaScript初探四
<!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>
2级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>
JavaScript初探四的更多相关文章
- JavaScript初探 四 （程序结构）
JavaScript 结构 JavaScript 程序结构 JavaScript支持几乎和C语言一样的程序结构 分支结构 循环结构 分支结构 条件分支 if-else if语句:判断条件为true则执 ...
- JavaScript学习（一） —— 环境搭建与JavaScript初探
1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...
- 学习javascript数据结构(四)——树
前言 总括: 本文讲解了数据结构中的[树]的概念,尽可能通俗易懂的解释树这种数据结构的概念,使用javascript实现了树,如有纰漏,欢迎批评指正. 原文博客地址:学习javascript数据结构( ...
- JavaScript初探 五
JavaScript 初探 七 JavaScript 数据类型 基本的值类型 字符串(String) 数 字(Number) 布尔值(Boolean) 对 象(Object) 函 数(Function ...
- JavaScript初探 三 （学习js数组）
JavaScript初探 (三) JavaScript数组 定义 创建数组 var 数组名 = [元素0,元素1,元素2,--] ; var arr = ["Huawei",&qu ...
- JavaScript初探 二 （了解数据）
JavaScript初探 (二) JavaScript 事件 HTML事件 HTML事件是可以在浏览器或用户做的某些事情 HTML事件的例子: HTML网页完成加载 HTML输入字段被修改 HTML按 ...
- JavaScript初探 一（认识JavaScript）
JavaScript 初探 JavaScript插入HTML中 内嵌的Js代码 <!DOCTYPE html> <html> <head> <meta cha ...
- JavaScript初探系列目录
一 系列导航 结合各方面的参考资料,整理出来以下主要目录,供方便浏览查看 (一)初探系列 JavaScript初探系列(1)——基本概念 JavaScript初探系列(2)——数 ...
- JavaScript中四种不同的属性检测方式比较
JavaScript中四种不同的属性检测方式比较 1. 用in方法 var o = {x:1}; "x" in o; //true "y" in o; //fa ...
随机推荐
- VMware Workstation “以独占方式锁定此配置文件失败。可能其它正在运行VMware进程在使用此配置文件”
VMware Workstation客户机异常关闭之后,再启动时提示“以独占方式锁定此配置文件失败...”. 解决方法: 进入客户机的安装目录(注意,非VMware的安装目录),删除所有后缀为lck的 ...
- 微信官方api & 非官方api
1.微信公众平台开发者文档 http://mp.weixin.qq.com/wiki/home/index.html 2.微信公众平台 https://mp.weixin.qq.com/ 3.第三方a ...
- Redis源码笔记-初步
目录 目录 1 1. 前言 2 2. 名词 2 3. dict.c 2 3.1. siphash算法 2 3.2. 核心函数 3 3.3. 核心宏 3 3.4. 核心结构体 3 3.4.1. dict ...
- Windows下Django环境搭建
总体示意图如下: Windows下搭建Django环境 1.安装Python版本 2.安装pip工具,一般Python安装都会自动会有这个,在你python安装命令下Scripts文件夹下 3.dj ...
- 初始Hbase
Hbase 定义 HBase是一个开源的非关系型分布式数据库(NoSQL),它参考了谷歌的BigTable建模,实现 的编程语言为 Java. 是Apache软件基金会的Hadoop项目的一部分,运行 ...
- mac上配置php开发环境
玉忠之前在我的mac上配置过,当时项目不能区分大小写,所以就没成功,我现在在他得基础上继续配置,希望成功. 教程:http://my.oschina.net/joanfen/blog/171109 以 ...
- 如何把jar包发布到maven私服
1.格式 mvn deploy:deploy-file -DgroupId=com.qiyi -DartifactId=sphinx -Dversion=1.0 -Dpackaging=jar -Df ...
- [NewCoder 3] 二维数组中的查找
题目描述 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 来分析下,假设在数 ...
- golang 本地构建包
说点废话 为小胖做一个温馨提示的功能,思路已经整理好.今天使用goquery的时候,发现已经修改了.其中需要一个golang.org/x/net/html这个包,但是官网已经被万恶的GFW给墙了.这里 ...
- C#调用haskell遭遇Attempted to read or write protected memory
1. Haskell的代码如下: 上面的代码中readMarkdown与writeHtmlString是pandoc中的函数,newString的作用是将String转换为IO CString. 2. ...