4 BOM编程

编程基础

全称 Browser Object Model，浏览器对象模型。

JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。

为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。

1.1. BOM对象：

1.2. window 对象

Window 对象是 JavaScript 层级中的顶层对象。

Window 对象代表一个浏览器窗口或一个框架。

Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。

1.2.1. window中的方法

document 对 Document 对象的只读引用

location 用于窗口或框架的 Location 对象

history 对 History 对象的只读引用。

document.tilte 设置网页的标题

moveto() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。

moveby() 相对于目前的位置移动。

resizeTo() 调整当前浏览器的窗口。

open() 打开新窗口显示指定的URL（有的浏览器中是打一个新的选项卡）

setTimeout(vCode, iMilliSeconds) 超时后执行代码。

setInterval(vCode, iMilliSeconds) 定时执行代码，第一次也是先待，到时再执行。

2. 事件

a) 事件说明

基本上所有的HTML元素中都可以指定事件属性。

每个元素支持什么样事件应查询文档。

所有的事件属性都是以on开头，后面的是事件的触发方式，如：

onclick，表示单击

onkeydown，表示键按下

...

b) 常用的事件类型：

鼠标点击相关：

onclick 在用户用鼠标左键单击对象时触发。

ondblclick 当用户双击对象时触发。

onmousedown 当用户用任何鼠标按钮单击对象时触发。

onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。

鼠标移动相关：

onmouseout 当用户将鼠标指针移出对象边界时触发。

onmousemove 当用户将鼠标划过对象时触发。

焦点相关的：

onblur 在对象失去输入焦点时触发。

onfocus 当对象获得焦点时触发。

其他：

onchange 当对象或选中区的内容改变时触发。

onload 在浏览器完成对象的装载后立即触发。

onsubmit 当表单将要被提交时触发。

location 对象

Location 对象是由 JavaScript runtime engine 自动创建的，包含有关当前 URL 的信息。

location中的重要方法：

href属性设置或获取整个 URL 为字符串。

reload() 重新装入当前页面

1.2.2. screen 对象

Screen 对象是由 JavaScript runtime engine 自动创建的，包含有关客户机显示屏幕的信息。

属性：

availHeight 获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。

availWidth 获取系统屏幕的工作区域宽度，排除 Windows 任务栏。

height 获取屏幕的垂直分辨率。

width 获取屏幕的水平分辨率。

示例：

document.write("屏幕工作区: " + screen.availHeight + ", " + screen.availWidth + "<br>");

document.write("屏幕分辨率: " + screen.height + ", " + screen.width + "<br>");

1.2.3. document对象

该对象代表整个文档页面

对象的集合：

all 获取页面所有元素对象

forms 获取页面所有表单对象

images 获取页面所有图片对象

links 获取所有超链接或area对象

Code Window对象

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
 
    <script type="text/javascript">
        function showAd() {
            open("ad.html", "_blank", "height=400px,width=400px,toolbar=no,location=no,top=200px");
        }
        setTimeout("showAd()", 2000);
         //var id = window.setInterval("showAd()",2000);
        function small() {
            resizeTo(300, 200); //相对于原本窗口改变指定的大小。
        }
 
        function move() {
            for (var i = 0; i < 100; i++) {
                window.moveBy(50, 0); // 相对于原来的窗口移动指定的x、y值。
                moveBy(0, 50);
                window.moveBy(-50, 0);
                window.moveBy(0, -50);
            }
        }
 
        function move2() {
            window.moveTo(500, 200);
        }
 
        function clearTest() {
            window.clearInterval(id);
        }
    </script>
 
    <body>
        <input type="button" onclick="showAd()" value="下载电影" />
        <input type="button" onclick="small()" value="变小" />
        <input type="button" onclick="move()" value="moveBy" />
        <input type="button" onclick="move2()" value="moveTo" />
        <input type="button" onclick="clearTest()" value="取消定时任务" />
    </body>
 
</html>

事件：
        注册事件的方式：

            方式一：直接在html元素上注册
                <body onload="ready()">

                function ready(){
                    alert("body的元素被加载完毕了..");
                }


            方式二：可以js代码向找到对应的对象再注册。推荐使用。

           var bodyNode = document.getElementById("body");

           bodyNode.onload = function(){
               alert("body的元素被加载完毕");
           }

常用的事件：

鼠标点击相关：
       onclick 在用户用鼠标左键单击对象时触发。
       ondblclick 当用户双击对象时触发。
       onmousedown 当用户用任何鼠标按钮单击对象时触发。
       onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。

鼠标移动相关：
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。

焦点相关的：
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。

其他：
       onchange 当对象或选中区的内容改变时触发。
       onload 在浏览器完成对象的装载后立即触发。
       onsubmit 当表单将要被提交时触发。

Code

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
 
    <script type="text/javascript">
        function clickTest() {
            alert("单击..");
        }
 
        function dbClick() {
            alert("双击..");
        }
 
        function showTime() {
            var timeSpan = document.getElementById("timeSpan");
            var date = new Date().toLocaleString();
            timeSpan.innerHTML = date.fontcolor("red");
        }
 
        function hideTime() {
            var timeSpan = document.getElementById("timeSpan");
            timeSpan.innerHTML = "";
        }
 
        function showInfo() {
            var timeSpan = document.getElementById("userName");
            timeSpan.innerHTML = "用户名是由6位的英文与数字组成".fontcolor("green");
        }
 
        function hideInfo() {
            var timeSpan = document.getElementById("userName");
            timeSpan.innerHTML = "";
        }
 
        function change() {
            alert("城市改变了..");
        }
    </script>
 
    <body>
 
        <input type="button" onclick="clickTest()" value="单击" />
        <input type="button" ondblclick="dbClick()" value="双击" />
        <span onmousemove="showTime()" onmouseout="hideTime()">查看当前系统时间：</span><span id="timeSpan"></span> 用户名
        <input type="text" onfocus="showInfo()" onblur="hideInfo()" /> <span id="userName"></span>
 
        <select onchange="change()">
            <option>广州</option>
            <option>深圳</option>
            <option>上海</option>
        </select>
 
    </body>
 
</html>

地址栏对象(Location)
href : 设置以及获取地址栏的对象
reload() 刷新当前的页面

Code

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
 
    <script type="text/javascript">
        function showURL() {
            alert(location.href);
        }
 
        function download() {
            location.href = "http://www.baidu.com";
        }
 
        function rafresh() {
            location.reload();
        }
        window.setInterval("rafresh()", 1000);
    </script>
 
    <body>
 
        <input type="button" onclick="showURL()" value="显示地址栏" />
        <span onclick="download()">下载电影</span>
 
    </body>
 
</html>

Screen(屏幕)对象
   availHeight   获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。
   availWidth   获取系统屏幕的工作区域宽度，排除 Windows 任务栏。
   height       获取屏幕的垂直分辨率。
   width       获取屏幕的水平分辨率。

Code

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
 
    <script type="text/javascript">
        document.write("获取系统屏幕的工作区域高度：" + screen.availHeight + "<br/>");
        document.write("获取系统屏幕的工作区域宽度：" + screen.availWidth + "<br/>");
        document.write("获取屏幕的垂直分辨率：" + screen.height + "<br/>");
        document.write("获取屏幕的水平分辨率：" + screen.width + "<br/>");
    </script>
 
    <body>
 
    </body>
 
</html>

DOM(Document Object Model) 文档对象模型

   一个html页面被浏览器加载的时候，浏览器就会对整个html页面上的所有标签都会创建一个对应的
   对象进行描述，我在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到
   对应的对象操作对象的属性，则可以改变浏览器当前显示的内容。

var allNodes = document.all;   //获取html文件中的所有标签节点。
   for(var i = 0; i<allNodes.length ; i++){
       alert(allNodes[i].nodeName);   //标签的名字 nodeName;
   }

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
 
    <script type="text/javascript">
        function writeUrl() {
            var links = document.links; // 获取文档中含有href的属性的标签。
            for (var i = 0; i < links.length; i++) {
                links[i].href = "http://www.baidu.cn";
            }
        }
    </script>
 
    <body>
        <a href="#">标题1</a>
        <a href="#">标题2</a>
        <a href="#">标题3</a>
        <input type="button" onClick="writeUrl()" value="设置a标的地址" />
    </body>
 
</html>

Code 属性找标签

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
 
    <script type="text/javascript">
        function checkAll(allNode) {
            //找到所有的的选项
            var items = document.getElementsByName("item");
            //找到全选按钮的对象
            //var allNode = document.getElementsByName("all")[0];
            for (var i = 0; i < items.length; i++) {
                items[i].checked = allNode.checked;
            }
        }
 
        function getSum() {
            var items = document.getElementsByName("item");
            var sum = 0;
            for (var i = 0; i < items.length; i++) {
                if (items[i].checked) {
                    sum += parseInt(items[i].value);
                }
            }
            var spanNode = document.getElementById("sumid");
            spanNode.innerHTML = ("&nbsp;&nbsp;&nbsp;&yen;" + sum).fontcolor("green");
        }
    </script>
 
    <body>
        <div>商品列表</div>
        <input type="checkbox" name="item" value="3000" />笔记本电脑3000元
        <br />
        <input type="checkbox" name="item" value="1800" />笔记本电脑1800元
        <br />
        <input type="checkbox" name="item" value="300" />笔记本电脑300元
        <br />
        <input type="checkbox" name="item" value="3000" />笔记本电脑3000元
        <br />
        <input type="checkbox" name="item" value="3000" />笔记本电脑3000元
        <br />
        <input type="checkbox" name="item" value="3000" />笔记本电脑3000元
        <br />
        <input type="checkbox" name="all" onclick="checkAll(this)" /> 全选
        <br />
        <input type="button" value="总金额：" onclick="getSum()" /><span id="sumid"></span>
    </body>
 
</html>

通过关系(父子关系、兄弟关系)找标签。
       parentNode   获取当前元素的父节点。
       childNodes   获取当前元素的所有下一级子元素。
       firstChild   获取当前节点的第一个子节点。
       lastChild   获取当前节点的最后一个子节点。
------------------------------------------------------------
       nextSibling       获取当前节点的下一个节点。（兄节点）
       previousSibling   获取当前节点的上一个节点。（弟节点）

我们可以通过标签的类型进行判断筛选：

   文本节点的类型： 3
   注释的节点类型： 8
   标签节点的类型： 1

创建字节入插入节点、设置节点的属性。

document.createElement("标签名")       创建新元素节点
   elt.setAttribute("属性名", "属性值")   设置属性
   elt.appendChild(e)                       添加元素到elt中最后的位置

Code

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
 
    <script type="text/javascript">
        var num = 1;
 
        function add() {
            var inputNode = document.createElement("input"); //创建一个指定标签名字的节点。
            //setAttribute:设置节点的属性
            inputNode.setAttribute("type", "button");
            inputNode.setAttribute("value", "按钮" + num);
            num++;
            var bodyNode = document.getElementsByTagName("body")[0];
            bodyNode.appendChild(inputNode); //appendChild 添加子节点。
        }
    </script>
 
    <body>
        <input type="button" onclick="add()" value="添加" />
    </body>
 
</html>

插入目标元素的位置
   elt.insertBefore(newNode, oldNode);           添加到elt中，child之前。
   注意： elt必须是oldNode的直接父节点。

   elt.removeChild(child)                   删除指定的子节点

   注意： elt必须是child的直接父节点。

Code

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
 
    <script type="text/javascript">
        function addFile() {
                //先要创建一个tr对象
                var trNode = document.createElement("tr");
                //创建td对象
                var tdNode1 = document.createElement("td");
                var tdNode2 = document.createElement("td");
                //
                tdNode1.innerHTML = "<input type='file'/>";
                tdNode2.innerHTML = "<a href='#' onclick='delFile(this)' >删除附件</a>";
                //把td的节点添加到tr节点上
                trNode.appendChild(tdNode1);
                trNode.appendChild(tdNode2);
                ];
                var lastRow = document.getElementById("lastRow");
                tbodyNode.insertBefore(trNode, lastRow);
            }
            //删除附件
 
        function delFile(aNode) {
            var trNode = aNode.parentNode.parentNode;
            ];
            tbodyNode.removeChild(trNode);
        }
    </script>
 
    <body>
        <table>
            <tr>
                <td>
                    <input type="file" />
                </td>
                <td><a href="#" onclick="delFile(this)">删除附件</a></td>
            </tr>
 
            <tr id="lastRow">
                <td colspan=">
                    <input onclick="addFile()" type="button" value="添加附件" />
                </td>
            </tr>
        </table>
    </body>
 
</html>

城市的联动框

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
 
    <script type="text/javascript">
        function showCity() {
            //维护一个二维数组存储省份对应的城市
            var citys = [
                [],
                ["广州", "佛山", "湛江", "中山"],
                ["长沙", "衡阳", "岳阳", "郴州"],
                ["南宁", "桂林", "贵港", "柳州"]
            ];
            //获取省份对应的节点
            var provinceNode = document.getElementById("province");
            //获取省份选中的选项
            var selectIndex = provinceNode.selectedIndex;
            //获取对应的城市
            var cityDatas = citys[selectIndex];
            //找到city节点
            var cityNode = document.getElementById("city");
            /*
            //先清空city框所有option
            var children = cityNode.childNodes;
            for(var i = 0; i<children.length ; ){
                cityNode.removeChild(children[i]);
            }
            */
            //设置options的个数。
            cityNode.options.length = 1;
            //遍历对应的所有城市然后创建对应的option添加到city上。
            for (var index = 0; index < cityDatas.length; index++) {
                var option = document.createElement("option");
                option.innerHTML = cityDatas[index];
                cityNode.appendChild(option);
            }
        }
    </script>
 
    <body>
        省份
        <select id="province" onchange="showCity()">
            <option>省份</option>
            <option>广东</option>
            <option>湖南</option>
            <option>广西</option>
        </select>
        城市
        <select id="city">
            <option>城市</option>
        </select>
    </body>
 
</html>

验证码

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
 
    <script type="text/javascript">
         //产生一个四位的验证码。
        function createCode() {
            var datas = ['A', 'B', '何', '敏', '凡', '江', '1', '9']; // 0-7  长度8
            var code = "";
            for (var i = 0; i < 4; i++) {
                //随机产生四个索引值
                var index = Math.floor(Math.random() * datas.length); // random 0.0-1.0（不包括1.0）
                code += datas[index];
            }
            var spanNode = document.getElementById("code");
            spanNode.innerHTML = code;
            spanNode.style.fontSize = "24px";
            spanNode.style.color = "red";
            spanNode.style.backgroundColor = "gray";
            spanNode.style.textDecoration = "line-through";
        }
 
        function ready() {
            createCode();
        }
    </script>
 
    <body onload="ready()">
        <span id="code"></span><a href="#" onclick="createCode()">看不清，换一个</a>
    </body>
 
</html>

正则表达式

正则表达式的创建方式：
       ""

   方式1：
       /正则表达式/模式

   方式2：
       new RegExp("正则表达式",模式);

正则表达式对象常用的方法：
   test() 使用正则对象去匹配字符串如果匹配成功返回ture，否则返回false.
   exec() 根据正则表达式去查找字符串符合规则的内容。

模式：
g （全文查找出现的所有 pattern）
i （忽略大小写）

var str = "hello123";
var reg = /^[A-Z0-9]+$/i;
alert("匹配吗？"+reg.test(str));

Code

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
 
    <script type="text/javascript">
        var str = "da jia hao hao xue xi a";
        var reg = /\b[a-z]{3}\b/gi;
        var line = "";
        while ((line = reg.exec(str)) != null) {
            document.write(line + "<br/>")
        }
    </script>
 
    <body>
 
    </body>
 
</html>

4 BOM编程的更多相关文章

4、BOM编程/正则表达式
1. BOM编程 1.1. BOM编程基础全称 Browser Object Model,浏览器对象模型. JavaScript是由浏览器中内置的javascript脚本解释器程序来执行jav ...
javascript bom 编程
javascript bom 编程 BOM: 浏览器对象模型 DOM Window :窗口Window Document 属性: status :状态栏 self:自己 ...
JavaScript的BOM编程，事件-第4章
目标 BOM编程 window和document对象 window对象的属性和方法 document对象的属性和方法 JavaScript中对象的分类浏览器对象:window对象 window对象, ...
BOM编程
1 BOM编程 1.1 入门 BOM就是浏览器对象模型编程,通过javascript引擎提供的四个浏览器对象,操作浏览器,这叫BOM编程 1.2 window对象(重点) window代表的是一个窗口 ...
javascript之BOM编程Screen(屏幕)对象
这个对象属性相对比较简单.掌握四个方法即可. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
Bom和Dom编程以及js中prototype的详解
一.Bom编程: 1.事件练习: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
day4 DOM，BOM
1. BOM编程 1.1. BOM编程基础全称 Browser Object Model,浏览器对象模型. JavaScript是由浏览器中内置的javascript脚本解释器程序来执行ja ...
javascript之BOM对象总结
BOM编程基础全称 Browser Object Model,浏览器对象模型. JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的. 为了便 ...
Java开发基础
天数课程 01 Java基础回顾集合泛型 IO流多线程 Junit Properties HTML JavaScript JavaScript BOM编程 XML基础 ...

随机推荐

ubuntu-E:Encountered a section with no Package: header的解决办法
刚才打开ubuntu,我的版本是12.04.正想使用sudo apt-get install build-essential 时,出现了如下错误: E:Encountered a section wi ...
miniUI子窗口调父窗口方法
window.Owner.XXX 其中XXX是父窗口里的方法名
跟我一起Django - 01 安装和初始化
跟我一起Django - 01 安装和初始化 python环境 C:\Python27\Lib\site-packages>python --versionPython 2.7.5 安装setu ...
mean函数
求平均值 th> a=torch.zeros(,) [.0002s] th> a [torch.DoubleTensor of size 1x3] [.0003s] th> a[{, ...
enc
enc [问题背景] zhx 和他的妹子聊天. [问题描述] 考虑一种简单的加密算法. 假定所有句子都由小写英文字母构成,对于每一个字母,我们将它唯一地映射到另一个字母.例如考虑映射规则: a-> ...
shell脚本例子集锦（习题总结）
练习一:写一个脚本 .设定变量FILE的值为/etc/passwd .依次向/etc/passwd中的每个用户问好,并且说出对方的ID是什么形如:(提示:LINE=`wc -l /etc/passw ...
MySQL PLSQL Demo - 005.IF THEN ELSEIF THEN ELSE END IF
drop procedure if exists p_hello_world; create procedure p_hello_world(in v_id int) begin ) then sel ...
IOS Bug分析
异常代码是SIGABRT.通常, SIGABRT 异常是由于某个对象接收到未实现的消息引起的. 或者,用简单的话说,在某个对象上调用了不存在的方法. iOS应用崩溃日志分析分析iOS Crash文 ...
eclipse 恢复SVN无法还原的文件 svn使用了还原，但本地的没有提交找回没提交代码的方法
http://blog.sina.com.cn/s/blog_750167060102vd2n.html
iOS日常工作之常用宏定义大全
前言: 在工作中, 很多小伙伴都会在PCH文件定义一些常用的宏,但是又怕写这些简单的宏浪费时间,又有时候忘记怎么定义了怎么办?本人在工作中也是如此.所以在这里给大家分享一些常用的宏定义,喜欢的小伙伴可 ...

4 BOM编程

编程基础

1.1. BOM对象：

1.2. window 对象

1.2.1. window中的方法

2. 事件

a) 事件说明

b) 常用的事件类型：

location 对象

1.2.2. screen 对象

1.2.3. document对象

4 BOM编程的更多相关文章

随机推荐

热门专题