javascript 内置对象

其他 2018-08-19 16:33:53 阅读次数: 0

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;
        }
        div{
            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>
        <div id="main">
            <div 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>
            </div>
            <span id="date">2018.8.6</span>
        </div>
        <!--main end-->
        <div 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>
        </div>
        <!--list1 end-->
        <div 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>
        </div>
        <!--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()。

猜你喜欢

转载自blog.csdn.net/Ricardo_Y_Lu/article/details/81506344
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022