搜尋

首頁  >  文章  >  web前端  >  javascript 內建物件（部分內容）

javascript 內建物件（部分內容）

php是最好的语言
php是最好的语言原創
2018-08-09 15:32:021572瀏覽

text物件

Text 物件代表 HTML 表單中的文字輸入域。在HTML 表單中input type=”text 每出現一次，Text 物件就會被建立。
disabled  設定或傳回文字網域是否應停用。（只有true和false兩個值）
readOnly 設定或傳回文字域是否應是唯讀（只能讀取，不能被修改）的。（只有true和false兩個值）
value 設定或傳回文字域的value 屬性的值。
focus() 在在文字網域上設定焦點。
eg：

        <form>
            <input name="wd" />
            <input type="button" onclick="onesubmit()" value= "搜索" />
        </form>
        <script>
            var form = document.getElementsByTagName("form")[0];
            form.action = "https://www.baidu.com/s";            var text = document.getElementsByName("wd")[0];            function onesubmit(){
                text.value = "中国";//设置或返回文本域的 value 属性的值
                console.log(text.value);
                text.focus();//在文本域上设置默认焦点
                text.readOnly = true;//设置或返回文本域是否应是只读的 即不能更改
                text.disabled = true;//设置或返回文本域是否应被禁用,即不能使用
            }        </script>

radio物件

Radio 物件代表HTML 表單中的單選按鈕。

checked 設定或傳回單選按鈕的狀態。（true 和false）
disabled 設定或傳回是否停用單選按鈕。
value 設定或傳回單選按鈕的value 屬性的值。

checkbox物件

Checkbox 物件代表一個HTML 表單中的一個選擇框。

checked 設定或傳回多選按鈕的狀態。
disabled 設定或傳回某個按鈕是否應停用。
value 設定或傳回checkbox 的value 屬性的值。

eg：

<body>
        <form onsubmit="return check()">
            用户名<input name="user_name" id="user_name" /><br />
            密码<input name="password" id="password" type="password" /><br />
            确认密码<input name="pw_check" id="pw_check" type="password" /><br />
            <input type="reset" value="重置" />
            <input type="submit" value="注册" />
            <input type="radio" name="sex" value="男" />男            <input type="radio" name="sex" value="女" />女            <input type="checkbox" name="hobby" value="篮球" />篮球            <input type="checkbox" name="hobby" value="羽毛球" />羽毛球            <input type="checkbox" name="hobby" value="乒乓球" />乒乓球            <input type="checkbox" name="hobby" value="足球" />足球            <select name="choose" id="choose">
                <option value="gaoyi">高一</option>
                <option value="gaoer">高二</option>
                <option value="gaosan">高三</option>
            </select>
        </form>
        <span id="msg" style="color: red;"></span>

        <script>

            function $(id){
                return document.getElementById(id);
            }            function check(){
                var selects = document.getElementById("choose");
                selects.disabled=true;
                console.log(selects.length);
                console.log(selects.selectedIndex);                var options = selects.options;                for(var i=0;i<options.length;i++){
                    console.log(options[i].value)
                }
                console.log("$$$$$$$$$$$$$$$$$$$$$$$$$$$$");                var radios = document.getElementsByName("sex");                for(var i=0;i<radios.length;i++){

                    console.log(radios[i].checked+radios[i].value);
                }
                radios[0].cheked=true;
                radios[0].disabled=true;

                console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");                var checkboxes = document.getElementsByName("hobby");                for(var i=0;i<checkboxes.length;i++){

                    console.log(checkboxes[i].checked+checkboxes[i].value)
                }
                checkboxes[2].checked=true;
                checkboxes[2].disabled=true;
                console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");                var user_name = $("user_name").value;                var password = $("password").value;                var pw_check = $("pw_check").value;                if(user_name.length==0){
                    $("msg").innerHTML = "用户名不能为空";                    return false;
                }                else if(user_name.length>12){
                    $("msg").innerHTML = "用户名不能超过12个字符";                    return false;
                }                if(password.length==0){
                    $("msg").innerHTML = "密码不能为空"
                    return false;   
                }                else if(password.length>15){
                    $("msg").innerHTML = "密码不能超过12个字符";                    return false;
                }                if(password!=pw_check){
                    $("msg").innerHTML = "密码不一致";                    return false;
                }
                console.log("注册成功")                return false;
            }        </script>
    </body>

Select物件

Select 物件代表HTML 表單中的一個下拉清單。

options[ ] 傳回包含下拉清單中的所有選項的一個陣列。
disabled 設定或傳回是否應停用下拉清單。
length 傳回下拉清單中的選項數目。
selectedIndex 設定或傳回下拉清單中被選項目的索引號。（從0開始）
add() 向下拉列表新增一個選項。
remove() 從下拉清單中刪除一個選項。

option物件

Option(text,value)  透過text（即option標籤之間的值）和value值建立Option物件
selected 設定或傳回selected 屬性的值。(true或false，即是否已選取）
text 設定或傳回某個選項的純文字值。
value 設定或傳回被送到伺服器的值。
eg:

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <select id="selected">
            <option value="小学一年级">一年级</option>
            <option value="小学二年级">二年级</option>
            <option value="小学三年级">三年级</option>
            <option value="小学四年级">四年级</option>
            <option value="小学五年级">五年级</option>
            <option value="小学六年级">六年级</option>
        </select>
        <input type="button" onclick="test()" value="按钮" />
        <script>
            function test(){
                var selects = document.getElementById("selected");
                console.log(selects.disabled);
                console.log(selects.selectedIndex);
                console.log(selects.length);
                console.log("@@@@@@@@@@@@@@@@@@@@@@@@");                var options = selects.options;
                console.log(options[selects.selectedIndex]);
                console.log("$$$$$$$$$$$$$$$$$");                for (var i=0;i<options.length;i++){
                    console.log(options[i].value);
                    console.log(options[i].selected);
                    console.log(options[i].text);
                }
                console.log("######################");                var option1 = new Option("初一","初中一年级");                var option2 = new Option("初二","初中二年级");                var option3 = new Option("初三","初中三年级");
                selects.add(option2);
                selects.add(option1);
                selects.remove(6);
                selects.add(option2);
                selects.add(option3);
                selects.remove(0);
                selects.remove(0);
                selects.remove(0);
                selects.remove(0);
                selects.remove(0);
                selects.remove(0);
            }        </script>
    </body></html>

element 物件

在HTML DOM中，Element對象表示HTML元素，該物件可以擁有類型為元素節點、文字節點、註解節點的子節點。透過Document物件的getElementById()方法、getElementsByTagName()或getElementsByName()方法取得Element物件。

element.className 設定或傳回元素的 class 屬性。
element.innerHTML 設定或傳回元素的內容。
element.style   設定或傳回元素的 style 屬性。
element.parentNode 以Node 物件方式傳回元素的父節點。

eg:

    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        function news(){
            var elements1 = document.getElementById("news");
            elements1.className = "selected";            var elements2 = document.getElementById("see");
            elements2.className = "fault";            var elements3 = document.getElementById("list1");
            elements3.className = "visited";            var elements3 = document.getElementById("list2");
            elements3.className = "unvisited";
        }        function see(){
            var elements = document.getElementById("news");
            elements.className = "fault";   
            var elements2 = document.getElementById("see");
            elements2.className = "selected";            var elements3 = document.getElementById("list1");
            elements3.className = "unvisited";            var elements3 = document.getElementById("list2");
            elements3.className = "visited";
        }    </script>
    <style>
        body {            color: #333;            padding: 5px 0;            font: 12px/20px "SimSun","宋体","Arial Narrow",HELVETICA;            background: #fff;        }
        a{            color: #666;            text-decoration: none;        }
        a:visited{            color:#666;        }
        p{            display: block;        }
        #main{            position: relative;            display: block;            height: 34px;            width: 356px;            border: 1px solid #dbdee1;            line-height: 34px;            background: url(img/bg1px.png) 0 -33px repeat-x;            zoom: 1; /*缩放比例*/
        }
        #main:after{            content: ".";            display: block;            height: 0;            clear: both;            visibility: hidden;/*隐藏h2标签*/
        }
        #main #menu{            float: left;            margin-left: -2px;        }
        #main #menu span{            float: left;            height: 35px;            line-height: 35px;            font-size: 16px;            font-family: "Microsoft YaHei","微软雅黑","SimHei","黑体";            padding: 0 13px;            margin-top: -1px;        }
        #main #menu .selected{            height: 33px;            line-height: 29px;            border-top: 3px solid #ff8400;            border-left: 1px solid #dbdee1;            border-right: 1px solid #dbdee1;            background-color: #fff;            _position: relative;            _margin-bottom: -1px;            padding: 0 12px;            border-left: 0;            padding-left:13px ;        }
        #main #date{            float: right;            display: inline;            margin-right: 10px;        }
        #list1{            position: absolute;        }
        #list2{            position: absolute;        }
        #list1 a{            color: #122e67;            text-decoration: none;        }
        #list1 a:visited{            color: #52687e;            text-decoration: none;        }
        #list2 a{            color: #122e67;            text-decoration: none;        }
        #list2 a:visited{            color: #52687e;            text-decoration: none;        }
        .visited{            display: block;        }
        .unvisited{            display: none;        }
        ul{            height: auto;            height: 208px;            overflow: hidden;            clear: both;            list-style: none;            display: block;        }
        ul li{            padding-left: 10px;            line-height: 26px;            height: 26px;            overflow: hidden;            font-size: 14px;            background: url(//i0.sinaimg.cn/home/main/index2013/0403/icon.png) no-repeat 0 -881px;            _zoom: 1;        }
    </style>
    <body>
        <p id="main">
            <p id="menu">
                <span id="news" class="selected" onmouseover="news()">
                    <a href="http://news.sina.com.cn/" target="_blank">新闻</a>
                </span>
                <span id="see" class="fault" onmouseover="see()">
                    <a href="http://henan.sina.com.cn/" target="_blank">看河南</a>
                </span>
            </p>
            <span id="date">2018.8.6</span>
        </p>
        <!--main end-->
        <p id="list1" class="visited">
            <ul>
                <li>
                    <a target="_blank" href="http://news.sina.com.cn/c/xl/2018-08-06/doc-ihhhczfc3414364.shtml">习近平对王继才先进事迹作出重要指示</a>
                </li>       
                <li>
                    <a target="_blank" href="http://news.sina.com.cn/gov/xlxw/2018-08-06/doc-ihhhczfc3730191.shtml">习近平引领科技强军路</a>
                </li>       
                <li>
                    <a target="_blank" href="http://news.sina.com.cn/c/2018-08-06/doc-ihhhczfc1300781.shtml">构建更加紧密的中非命运共同体</a>
                    <a target="_blank" href="http://news.sina.com.cn/zt_d/djbl/">大江奔流</a>
                </li>       
                <li>
                    <a target="_blank" href="http://news.sina.com.cn/o/2018-08-06/doc-ihhhczfc1539880.shtml">人民日报评论员：积极进取 引领中国经济行稳致远</a>
                </li>       
                <li>
                    <a target="_blank" href="http://news.sina.com.cn/c/nd/2018-08-06/doc-ihhhczfc6968447.shtml">百白破你真的了解吗？</a>
                    <a target="_blank" href="http://news.sina.com.cn/o/2018-08-06/doc-ihhhczfc6967406.shtml">关于免疫和疫苗安全的问答</a>
                </li>       
                <li>
                    <a target="_blank" href="http://news.sina.com.cn/c/nd/2018-08-05/doc-ihhhczfc0144855.shtml">经济日报连发五文 解读当前经济形势</a>
                    <a target="_blank" href="http://news.sina.com.cn/o/2018-08-06/doc-ihhhczfc1656430.shtml">三大关键词</a>
                </li>       
                <li><a target="_blank" href="http://news.sina.com.cn/o/2018-08-06/doc-ihhhczfc1674641.shtml">用不靠谱的手段耍弄世界 注定不能让美国再次伟大</a>

                </li>       
                <li><a target="_blank" href="http://news.sina.com.cn/c/2018-08-06/doc-ihhkusks5999396.shtml">全国网络安全员法制与安全知识竞赛报名网站已开启</a>

                </li>       
                <li>
                    <a target="_blank" href="http://news.sina.com.cn/c/2018-08-06/doc-ihhhczfc3323403.shtml">特朗普揶揄中国股市 但不小心暴露自己一个硬伤</a>
                </li>       
                <li>
                    <a target="_blank" href="http://news.sina.com.cn/zx/2018-08-06/doc-ihhhczfc6757917.shtml">上海机场(集团)有限公司董事长吴建融被查</a>
                </li>
            </ul>
        </p>
        <!--list1 end-->
        <p id="list2" class="unvisited">
            <ul>
                <li>
                    <a href="http://henan.sina.com.cn" target="_blank">177家违规网站被通报 河南全面清退县级以下政府网站</a>
                </li>
                <li>
                    <a target="_blank" href="http://henan.sina.com.cn">河南四家长联名举报质疑考生答题卡掉包 官方回应</a>
                </li>
                <li>
                    <a target="_blank" href="http://henan.sina.com.cn/news/z/2018-08-07/detail-ihhkusks7863084.shtml">央视新闻联播聚焦河南 34条洲际航线扩展开放触角</a>
                </li>
                <li>
                    <a target="_blank" href="http://henan.sina.com.cn/news/m/2018-08-07/detail-ihhkusks7805180.shtml">河南开展幼儿园"小学化"治理:幼儿园严禁教小学课程</a>
                </li>
                <li>
                    <a target="_blank" href="http://wx.sina.com.cn/news/2018-08-06/detail-ihhhczfc2526781.shtml">百城致敬40年：专注粮油研究半个世纪</a>
                </li>
                <li>
                    <a target="_blank" href="http://henan.sina.com.cn/news/zhuazhan/2018-08-07/detail-ihhkusks7771435.shtml">周末夜查+夜间突击检查 河南"夜查"行动将持续至年底</a>
                </li>
            </ul>
        </p>
        <!--list2 end-->
    </body>

上例是模仿新浪頁面滑鼠移動切換標籤和顯示內容的效果。

window物件

事實上，常用的history,document等物件都屬於window物件中，只是window物件是一個全域變量，在使用中「window.」一般被省略。

document物件

domain 傳回目前文件的域名，例如：www.blue-bridge.com
URL 傳回目前文件的URL，例如：http://www.blue- bridge.com/venus/login.jsp
getElementById() 傳回對擁有指定id 的第一個物件的參考。
getElementsByName() 傳回帶有​​指定名稱的物件集合。
getElementsByTagName() 傳回帶有​​指定標籤名的物件集合。

history物件

back() 載入 history 清單中的前一個 URL，同「後退」按鈕。
forward() 載入 history 清單中的下一個 URL，同「前進」按鈕。
go() 載入 history 清單中的某個特定頁面，history.go(-1)//等同於back()。

相關推薦：

處理文字部分內容的TextRange物件應用實例

《JavaScript闖關記》之單體內建物件

以上是javascript 內建物件（部分內容）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：Vue中的scoped的實作原理以及scoped穿透的用法（附程式碼）下一篇：Vue中的scoped的實作原理以及scoped穿透的用法（附程式碼）

相關文章

看更多