Bom和Dom编程以及js中prototype的详解

首页 > 代码库 > Bom和Dom编程以及js中prototype的详解

Bom和Dom编程以及js中prototype的详解

2024-08-18 05:24:56 210人阅读

一.Bom编程：

1.事件练习：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<script>
        function getCurrentTime(){
        var date = new Date();
        var timeInfo = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
        //alert(timeInfo);
        var spanobj = document.getElementById("time");
        spanobj.innerHTML = timeInfo.fontcolor("red");
        
        }
        function showTime(){
            getCurrentTime();
            //window.setInterval("getCurrentTime()",1000);
        }
        function hideTime(){
            var spanobj = document.getElementById("time");
            spanobj.innerHTML = "";
        }
        
        function clickTest(){
            alert("单击");
        }
        function dblclick(){
            alert("双击");
        }
        function showInfo(){
            var usename=document.getElementById("username");
            usename.innerHTML="请输入账号".fontcolor("red");
        }
        function hideInfo(){
            var usename=document.getElementById("username");
            usename.innerHTML="";
        }
        //onchange
        
        function showURL(){
            alert(location.href);
        }
        function download(){
            location.href="http://handsomecui.top";
        }
        function refresh(){
            location.reload();
        }
        //setInterval("refresh()",1000);
        
        document.write("获取系统屏幕的工作区域高度："+screen.availHeight+"<br/>");
        document.write("获取系统屏幕的工作区域宽度："+screen.availWidth+"<br/>");
        document.write("获取屏幕的垂直分辨率："+screen.height+"<br/>");
        document.write("获取屏幕的水平分辨率："+screen.width+"<br/>");
    
</script>

</head>



<body onload="showTime()">
    <span onmousemove="showTime()" onm ouseout="hideTime()">显示当前系统时间。。。</span><span id="time"></span>
    <input type="button" onclick="clickTest()" ondblclick="dblclick()"  value="点击" />
    <br/>
    username:<input type="text" onfocus="showInfo()" onblur="hideInfo()" /><span id="username"></span>
    
    <input type="button" onclick="showURL()" value="显示地址栏" />
    <span onclick="download()">下载电影</span>
    
</body>


</html>

2.循环打开窗口以及浏览器的大小位置设置练习：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>BOM练习</title>
<script>
    function showAd(){
        window.open("http://baidu.com","_blank","height=400px,width=400px,toobar=no,location=no,top=200px");
    }
    function small(){
        window.resizeTo(300,200);
    }
    var id = setInterval("showAd()", 2000);
    function clearTask(){
        clearInterval(id);
    }
    //setTimeout
</script>
</head>

<body>

    <input type="Button" onclick="showAd()" value="下载电影"/>
    <input type="Button" onclick="small()" value="变小">
    <input type="Button" onclick="clearTask()", value="取消任务"/>
</body>
</html>

二. Dom编程：

1.几种找dom树节点方法的简单练习：

getElementById();

getElementsByName();

getElementsByTagName();

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<script>
    function showText(){
        var input=document.getElementById("inputtest");
        input.value="设置好了";
    }
    function showImg(){
        var images = document.getElementsByTagName("img");
        for(var i=0;i<images.length;i++){
            images[i].src="../data/1.jpg";
            images[i].width=200;
            images[i].height=200;
        }
    }
    function showdiv(){
        var mydivs=document.getElementsByName("mydiv");
        //alert(mydivs.length);
        for(var i=0;i<mydivs.length;i++){
            mydivs[i].innerHTML="哈哈哈哈".fontcolor("red");    
        }
        
    }

</script>

</head>

<body>
    <input type="text" value="请输入内容" id="inputtest" />
    <input type="button" value="显示内容" id="button" onclick="showText()" />
    <img src=""/>
    <img src=""/>
    <img src=""/>
    <input type="button" value="显示图像"  onclick="showImg()" />
    <div name="mydiv"></div>
    <div name="mydiv"></div>
    <div name="mydiv"></div>
    <input type="button" value="显示div"  onclick="showdiv()" />
    
</body>
</html>

2.通过复选框求商品价格的小练习：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>求商品价格</title>

<script>
    function allSelect(ap){
        var p=document.getElementsByName("product");
        for(var i = 0; i < p.length; i++){
            if(ap.checked == 1)
                p[i].checked = 1;
            else
                p[i].checked = 0;
        }
    }
    function count(bt){
        var p=document.getElementsByName("product");
        var sum=0;
        for(var i = 0; i < p.length;i++){
            if(p[i].checked)
                sum += parseInt(p[i].value);
        }
        bt.value="总金额为";
        var money=document.getElementsByTagName("span")[0];
        money.innerHTML=("&nbsp;&nbsp;&nbsp;&yen;"+sum).fontcolor("green");
    }
    
</script>

</head>
    
<body>
    商品列表：<br/>
    <input type="checkBox" name="product" value="2800" id="product1"/>笔记本电脑2800元<br/>
    <input type="checkBox" name="product" value="2600" id="product2"/>笔记本电脑2600元<br/>
    <input type="checkBox" name="product" value="3800" id="product3"/>笔记本电脑3800元<br/>
    <input type="checkBox" name="product" value="3600" id="product4"/>笔记本电脑3600元<br/>
    <input type="checkBox" name="product" value="2700" id="product5"/>笔记本电脑2700元<br/>
    <input type="checkBox" name="product" value="2900" id="product6"/>笔记本电脑2900元<br/>
    <input type="checkBox" name="product" value="3700" id="product7"/>笔记本电脑3700元<br/>
    <input type="checkBox" name="product" value="3900" id="product8"/>笔记本电脑3900元<br/>
    <input type="checkBox" id="allproduct" onclick="allSelect(this)" />全选<br/>
    
    <input type="button" onclick="count(this)" value="总金额：" />
    <span></span>
    
</body>
</html>

3.通过关系找标签，创建添加删除标签的练习以及实现在表格中添加删除多个文件，实现一个日期选择的联动框：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>通过关系找标签</title>

<script>
    /*
        通过关系(父子关系、兄弟关系)找标签。
        parentNode    获取当前元素的父节点。
        childNodes    获取当前元素的所有下一级子元素。
        firstChild    获取当前节点的第一个子节点。
        lastChild    获取当前节点的最后一个子节点。
------------------------------------------------------------    
        nextSibling        获取当前节点的下一个节点。（兄节点）
        previousSibling    获取当前节点的上一个节点。（弟节点)
        
        我们可以通过标签的类型进行判断筛选：
        文本节点的类型： 3
        注释的节点类型： 8
        标签节点的类型： 1
        
        
        创建字节入插入节点、设置节点的属性。
        
        document.createElement("标签名")        创建新元素节点
        elt.setAttribute("属性名", "属性值")    设置属性
        elt.appendChild(e)                        添加元素到elt中最后的位置
        elt.insertBefore(newNode,oldNode);

    */
    
    function isRun(y){
        if(y%400==0 || (y%4==0&&y%100!=0))
            return 1;
        else
            return 0;
    }
    
    function start(){
        var s="";
        var bodyNode = document.getElementsByTagName("body")[0];
    
        s = s + "body的父节点：" + bodyNode.parentNode.nodeName + "<br/>";
        
        var showText = document.getElementsByTagName("span")[0];

        var children = bodyNode.childNodes;
        s = s + "body子节点是：" + "<br/>";
        for(var i = 0; i < children.length; i++){
            s = s + children[i].nodeName + "   对象类型是: " + children[i].nodeType +"<br/>";
        }
        s = s + "span的下一个兄弟节点是：" + showText.nextSibling.nodeName + "<br/>";
        s = s + "span的上一个兄弟节点是：" + showText.previousSibling.nodeName + "<br/>";
        
        showText.innerHTML = s.fontcolor("red");
        
        var m=[0,31,28,31,30,31,30,31,31,30,31,30,31];
        var selectNodeYear = document.getElementsByTagName("select")[0];
        var selectNodeMonth = document.getElementsByTagName("select")[1];
        var selectNodeDay = document.getElementsByTagName("select")[2];
        
        
        var curDate = new Date();
        //alert(curDate.getYear());
        
        //初始化年
        for(var i=1900; i<=curDate.getFullYear(); i++){
            var newOption = document.createElement("option");
            newOption.innerHTML = i;
            if(i == curDate.getFullYear()){
                newOption.setAttribute("selected","selected");
            }
            selectNodeYear.appendChild(newOption);
        }
        
        //初始化月
        for(var i=1; i<=12; i++){
            var newOption = document.createElement("option");
            newOption.innerHTML = i;
            if(i == curDate.getMonth()+1){
                newOption.setAttribute("selected","selected");
            }
            selectNodeMonth.appendChild(newOption);
        }
        
        //初始化日
        if(isRun(curDate.getFullYear()))
            m[2] = 29;
        else
            m[2] = 28;
        //alert(m[2]);
        //alert(curDate.getDay());注意getDay是获取星期几的；
        for(var i = 1; i <= m[curDate.getMonth()+1]; i++){
            var newOption = document.createElement("option");
            newOption.innerHTML = i;
            if(i == curDate.getDate()){
                
                newOption.setAttribute("selected","selected");
            }
            selectNodeDay.appendChild(newOption);
        }
        
    }
    var num=1;
    function add(){
        var inputNode = document.createElement("input");
        inputNode.setAttribute("type", "button");
        inputNode.setAttribute("value", "新按钮"+(num++));
        var bodyNode = document.getElementsByTagName("body")[0];
        bodyNode.appendChild(inputNode);
    }
    function addfile(inputNode){
        var tbodyNode=document.getElementsByTagName("tbody")[0];
        var newtr = document.createElement("tr");
        var newtd1 = document.createElement("td");
        var newtd2 = document.createElement("td");
        newtd1.innerHTML = "<input type=‘file‘/>";
        newtd2.innerHTML = "<a href=http://www.mamicode.com/‘#‘ onclick=‘deletefile(this)‘>删除附件";
        newtr.appendChild(newtd1);
        newtr.appendChild(newtd2);
        //tableNode.appendChild(newtr);
        //alert(inputNode.parentNode.nodeName);
        tbodyNode.insertBefore(newtr,inputNode.parentNode.parentNode);//注意必须是tr的直接父节点，所以是tbody
    }
    
    function deletefile(deleteNode){
        var tbodyNode=document.getElementsByTagName("tbody")[0];
        tbodyNode.removeChild(deleteNode.parentNode.parentNode);
    }
    //月改变对应修改日的范围
    function addDay(){
        
        var m=[0,31,28,31,30,31,30,31,31,30,31,30,31];
        var selectNodeYear = document.getElementsByTagName("select")[0];
        var selectNodeMonth = document.getElementsByTagName("select")[1];
        var selectNodeDay = document.getElementsByTagName("select")[2];
        
        
        selectNodeDay.length = 0;
        /*
            if(selectNodeMonth[i].getAttribute("selected") == "selected"){
                alert(i);
            }
            这样只会找到默认显示的位置假设今天是10月那么只会找到9
            可以直接用selectedIndex属性来得到选中的月份
        */
        if(isRun(selectNodeYear.selectedIndex + 1900))
            m[2] = 29;
        else
            m[2] = 28;
        //alert(m[2]);
        //alert(curDate.getDay());注意getDay是获取星期几的；
        for(var i = 1; i <= m[selectNodeMonth.selectedIndex + 1]; i++){
            var newOption = document.createElement("option");
            newOption.innerHTML = i;
            selectNodeDay.appendChild(newOption);
        }
        
    }
    
</script>

</head>

<body onload="start()">
    <!-- gasfa -->
    <span></span>
    <input type="button" onclick="add()" value="点我" />
    <table>
    <tr>
    <td><input type="file"/></td> <td><a href="#" onclick="deletefile(this)">删除附件</a></td>
    </tr>
    <tr>
    <td><input type="button" value="添加附件" onclick="addfile(this)"/></td>
    </tr>
    </table>
    年<select onchange="addDay()"></select>
    月<select onchange="addDay()"></select>
    日<select></select>
</body>
</html>

三. prototype：

1.js中的简单练习以及完成查询对应月份的日期、通过prorotype完成字符串翻转，显示系统时间：

<html>
    <head>
        <meta charset="gb2312"/>
        <title>JavaScript Exercise</title>
        <script>
            function add(a, b){
                with(document){
                    write("a + b = " + (a+b) + "<br/>");
                    for(var index in arguments){
                        write("第" + index + "个元素是：" + arguments[index] + "<br/>");
                    }
                }
            }
            add(1, 2);
            
            function showday(){
                var m=[0,31,28,31,30,31,30,31,31,30,31,30,31];
                var inputobj = document.getElementById("month");
                alert(inputobj.value + "月的天数是：" + m[parseInt(inputobj.value)]);//这里不要parseint也可以，会自动转
            }
        </script>
    </head>
    <body>
    <script>
        var arr=new Array(17,25,10,18,1,110);
        arr.reverse();
        arr.sort(cmp);
        arr = arr.join(",");
        for(var i=0; i <arr.length; i++){
            document.write(arr[i]);
        }
        
        function cmp(num1,num2){
            return num1-num2;
        }
    </script>
    
    
    <script>
        function Person(id, name){
            this.id = id;
            this.name = name;
            this.say = function(){
                alert(name + "呵呵");
            }
        }
        var p = new Person(110,"张三");
        p.say();
        
        var tool = new ArrayTool();
        function ArrayTool(){
            this.Max = function(arr){
                var max = arr[0];
                for(var i = 1; i < arr.length; i++){
                    if(arr[i] > max){
                        max = arr[i];
                    }
                }
                return max;
            }
            this.searchEle = function(arr, Ele){
                for(var i = 0; i < arr.length; i++){
                    if(arr[i] == Ele)
                        return i;
                }
                return -1;
            }
        }
        
        Max = function(){
            var max = this[0];
            for(var i = 1; i < this.length; i++){
                if(this[i] > max){
                    max = this[i];
                }
            }
            return max;
        }
        
        
        //prototype
        Array.prototype.getMax = Max;
        Array.prototype.getindex = function(Ele){
            for(var i = 0; i < this.length; i++){
                if(this[i] == Ele)
                    return i;
            }
            return -1;
        }
        
        
        var arr = [25,12,110,26,21];
        document.write("最大值是：" + tool.Max(arr) + "     26的索引是：" + tool.searchEle(arr,26) + "<br/>");
        document.write("哈哈最大值： " + arr.getMax() + "  哈哈12的索引是：" + arr.getindex(12) + "<br/>");
    </script>
    
    
        月份：<input id="month" type="text" /><input type="button" value="查询" onClick="showday()"/>
        <br/>
        当前系统时间：<span id="time"></span>
        <script src="reverse.js" type="text/javascript"></script>
    </body>
    <script>
        function getCurrentTime(){
        var date = new Date();
        var timeInfo = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
        
        var spanobj = document.getElementById("time");
        spanobj.innerHTML = timeInfo.fontcolor("red");
        
        }
        getCurrentTime();
        window.setInterval("getCurrentTime()",1000);
    </script>
</html>

reverse.js:

    String.prototype.tocharArray = function(){
        var arr = new Array();
        for(var i = 0; i < this.length; i++){
            arr[i] = this.charAt(i);
        }
        return arr;
    }
    var str = "你们好屌啊";
    var arr = str.tocharArray();
    document.write("<br/>转化成字符数组后：" + arr.join(","));
    /*
    for(i in arr){
        document.write(arr[i]);    
    }
    */
    String.prototype.reverse = function(){
        var arr = this.tocharArray();
        arr.reverse();
        return arr.join("");
    }
    arr = str.reverse();
    document.write("<br/> 翻转后：" + arr);

欢迎访问handsomecui的blog地址：

http://www.cnblogs.com/handsomecui/

网站：handsomecui.top

Bom和Dom编程以及js中prototype的详解

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > Bom和Dom编程以及js中prototype的详解

Bom和Dom编程以及js中prototype的详解

看完仍有疑问？有类似问题直接问程序猿