JavaScript的各种对象

最新推荐文章于 2021-12-02 08:57:09 发布

苏柳凝烟

最新推荐文章于 2021-12-02 08:57:09 发布

阅读量1k

点赞数 1

分类专栏： JavaScript 文章标签： window对象 DOM对象 BOM对象事件注册

本文链接：https://blog.csdn.net/slny1921394421/article/details/51971385

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

{===========1window对象============}

window 代表了一个新开的窗口

window对象常用的方法：

open()   打开一个新的窗口。

setInterval() 每经过指定毫秒值后就会执行指定的代码。
clearInterval() 根据一个任务的ID取消的定时任务。
setTimeout() 经过指定毫秒值后执行指定 的代码一次。

注意：使用window对象的任何属性与方法都可以省略window对象不写的。

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 clearTest(){
    window.clearInterval(id);   
}

<input type="button" onclick="showAd()" value="下载电影"/>

<input type="button" onclick="clearTest()" value="取消定时任务"/>

{=====事件的注册======}

方式一：直接在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 当表单将要被提交时触发。

* 示例

    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("城市改变了..");   
    }

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

{=========location对象=========}

href : 设置以及获取地址栏的对象

reload() 刷新当前的页面

function showURL(){
    alert(location.href);   
}

function download(){
    location.href="http://www.baidu.com";
}

function rafresh(){
    location.reload();  
}

window.setInterval("rafresh()",1000);

* html

下载电影

{================Screen(屏幕)对象================}

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

* 示例

    document.write("获取系统屏幕的工作区域高度："+screen.availHeight+"<br/>");
    document.write("获取系统屏幕的工作区域宽度："+screen.availWidth+"<br/>");
    document.write("获取屏幕的垂直分辨率："+screen.height+"<br/>");
    document.write("获取屏幕的水平分辨率："+screen.width+"<br/>");

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

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

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

function writeUrl(){
    var links = document.links; // 获取文档中含有href的属性的标签。
    for(var i = 0; i<links.length ; i++){
        links[i].href = "http://www.baidu.cn";      
    }
}

{====通过html元素的标签属性找节点==}

    document.getElementById("html元素的id") 
    document.getElementsByTagName("标签名") 
    document.getElementsByName("html元素的name")

    function showText(){
        var inputNode = document.getElementById("userName");  //根据ID属性值找元素
        inputNode.value = "设置好了文本";
    }
    //InnerHTml是用于设置标签体的内容的。 value是用于设置标签的value属性值.


    function showImage(){
        var images = document.getElementsByTagName("img"); //根据标签名获取所有的标签对象。
        for(var i = 0 ; i<images.length ; i++){
            images[i].src = "33.jpg";
            images[i].width="100";
            images[i].height="100";
        }
    }


    function showDiv(){
        var divs = document.getElementsByName("info"); //根据标签的name属性值取找对应的标签，返回的是一个数组。
        for(var i = 0 ; i<divs.length ; i++){
            divs[i].innerHTML = "哈哈".fontcolor("red");  
        }
    }

html

<body>  
    <input type="text" id="userName" value="请输入用户名..." /><input type="button" onclick="showText()" value="设置文本"/>
    <hr/>

    <img src="" />
    <img src="" />
    <img src="" />
    <input type="button" onclick="showImage()" value="显示图片"/>
   <hr/>
    <div name="info"></div>
    <div name="info"></div>
    <div name="info"></div>
     <input type="button" onclick="showDiv()" value="设置div内容"/>

</body>

{=====根据属性找标签练习=====}

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");
}

html

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

{通过关系(父子关系、兄弟关系)找标签}

    parentNode  获取当前元素的父节点。
    childNodes  获取当前元素的所有下一级子元素。
    firstChild  获取当前节点的第一个子节点。
    lastChild   获取当前节点的最后一个子节点。
    nextSibling     获取当前节点的下一个节点。（兄节点）
    previousSibling 获取当前节点的上一个节点。（弟节点）

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

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

* js

    var bodyNode = document.getElementsByTagName("body")[0];

    //查看父节点。
    var parentNode = bodyNode.parentNode;
    alert("父节点的名称："+parentNode.nodeName);

    //找子节点:childNodes 获取所有的子节点，返回的是一个数 组。 注意： 获取子节点的时 候是包括了空文本或者是注释。
    var children = bodyNode.childNodes; 
    for(var i = 0 ; i<children.length ; i++){
        if(children[i].nodeType==1){
            alert("节点的名字："+children[i].nodeName+" 对象的类型:"+children[i].nodeType);    
        }
    }


    alert("第一个子节点："+bodyNode.firstChild.nodeName); 
    alert("最后一个子节点："+bodyNode.lastChild.nodeName); 


    //找兄弟节点
    var inputNode = document.getElementById("userName");
    alert("下个兄弟节点："+inputNode.nextSibling.nodeName); //下一个兄弟节点。
    alert("上一个兄弟节点："+inputNode.previousSibling);

苏柳凝烟

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的各种对象

{===========1window对象============}window 代表了一个新开的窗口window对象常用的方法：open() 打开一个新的窗口。setInterval() 每经过指定毫秒值后就会执行指定的代码。clearInterval() 根据一个任务的ID取消的定时任务。setTimeout() 经过指定毫秒值后执行指定的代码一次。注意：使用window对
复制链接

扫一扫