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 ...

随机推荐

QT7有用的尝试总结（1）
1,系统配置 1. 把系统相关的一些目录配置写到qt.conf文件里,详细情况情参考QSettings里的qt.conf部分 You can use the qt.conf file to over ...
idea2018.2.4的安装激活与热部署插件JRebel的激活方法
去Idea的官网下载如上版本的Idea安装文件并且在网上搜索下载如下破解工具放置在相应的Idea安装目录下然后在Idea中输入激活码 { "licenseId": " ...
hdu 5088 高斯消元n堆石子取k堆石子使剩余异或值为0
http://acm.hdu.edu.cn/showproblem.php?pid=5088 求能否去掉几堆石子使得nim游戏胜利我们可以把题目转化成求n堆石子中的k堆石子数异或为0的情况数.使用x ...
js-选项卡套选项卡
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
[jquery]如何实现页面单块DIV区域滚动展示
// 未实现功能的代码 1(自己写的代码) var _cur_top = $(window).scrollTop(); var num = $(".class_section"). ...
个人作业四--Alpha阶段个人总结
一.个人总结在alpha 结束之后, 每位同学写一篇个人博客, 总结自己的alpha 过程: 请用自我评价表:http://www.cnblogs.com/xinz/p/3852177.html 有 ...
List of RGBD datasets
This is an incomplete list of datasets which were captured using a Kinect or similar devices. I init ...
c# List使用中遇到的问题
最近在项目上写的方法,想通过减少访问数据层,将需要重复调用的值存入List,无意中碰到的一个巨坑,至今仍不明所以,在此写出来,一来是看看有没有同道中人,二来是看看有没有大牛能解惑. 逻辑如下: 1.从 ...
nginx windown命令
cmd进入nginx程序文件夹启动nginx:start nginx nginx -s reload|reopen|stop|quit #重新加载配置|重启|停止|退出 nginx nginx -t ...
idea使用Protobuf插件
1.protobuf简介 Protobuf是一个灵活的.高效的用于序列化数据的协议.相比较XML和JSON格式,protobuf更小.更快.更便捷.Protobuf是跨语言的,并且自带了一个编译器(p ...

JavaScript初探四

JavaScript初探四的更多相关文章

随机推荐

热门专题