注册 | 登陆
您的位置:阿里西西 > 前端技术 > HTML基础 > 详细内容

适合初学者学习的一些常用html对象属性的应用方法介绍

  稿源:本站整理   2018-09-04   点击:   撤稿纠错
这篇文章给大家分享的内容是关于适合初学者学习的一些常用html对象属性的应用方法介绍
本站收录这篇文章适合初学者学习的一些常用html对象属性的应用方法介绍,详细解说文章中相关初学者 对象 属性 应用方法 技术与知识,欢迎能给大家一些在这方面的支持和帮助!下面是详细内容:

这篇文章给大家分享的内容是关于适合初学者学习的一些常用html对象属性的应用方法介绍

Form 对象

Form 对象方法

reset() :把表单的所有输入元素重置为它们的默认值。

submit() :提交表单。

Text 对象

Text 对象属性

disabled :设置或返回文本域是否应被禁用。

readOnly :设置或返回文本域是否应是只读的。

value :设置或返回文本域的 value 属性的值。

Text 对象方法

focus() :在文本域上设置焦点。

示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form>
            <input name = "wd" />
            <input type="submit" value="百度一下" onclick="sub()">
        </form>
        <script>
            var form = document.getElementsByTagName("form")[0];
            var text = document.getElementsByName("wd")[0];
            text.focus();
            function sub(){
                var text = document.getElementsByName("wd")[0];
//              text.value = "魔道";
//              text.readOnly = "true";
//              console.log(text.readOnly);
//              text.disabled = "true";
                console.log(text.disabled);
                text.focus();
            }
            //type为text、password、textarea的标签均有value、focus、disabled、readOnly
        </script>
    </body>
</html>

Radio 对象

Radio 对象属性

checked :设置或返回单选按钮的状态。

disabled :设置或返回是否禁用单选按钮。

value :设置或返回单选按钮的 value 属性的值。

Checkbox 对象

Checkbox 对象属性

checked :设置或返回 checkbox 是否应被选中。

disabled :设置或返回 checkbox 是否应被禁用。

value :设置或返回 checkbox 的 value 属性的值

Select 对象

Select 对象集合

options[] :返回包含下拉列表中的所有选项的一个数组。

Select 对象属性

disabled :设置或返回是否应禁用下拉列表。

length :返回下拉列表中的选项数目。

selectedIndex :设置或返回下拉列表中被选项目的索引号。

Select 对象方法

add() :向下拉列表添加一个选项。

remove() :从下拉列表中删除一个选项。

Option 对象

Option 对象构造方法

Option(text,value) :通过text和value值创建Option对象

Option 对象属性

selected :设置或返回 selected 属性的值。

text :设置或返回某个选项的纯文本值。

value :设置或返回被送往服务器的值。

Select对象及Option对象示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <select id="grade">
            <option  value="1">一年级</option>
            <option  value="2">二年级</option>
            <option  value="3">三年级</option>
            <option  value="4">四年级</option>
        </select>
        <input type="button" onclick="text()" value="按钮" />
        <script type="text/javascript">
            function text(){
                var select = document.getElementById("grade");
                console.log(select.disabled);
                console.log(select.length);
                console.log(select.selectedIndex);

                console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`")

                var options = select.options;
                console.log(options[select.selectedIndex].value);

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

                var option = new Option("五年级","5");
                select.add(option);
                select.remove(0);
            }   
        </script>
    </body>
</html>

注册表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <span style="color:red;" id="wrong-massage"></span><br />
        <form onsubmit="return check()">
            <table>
                <tr>
                    <td>用户名:</td>
                    <td><input id="name"  placeholder="请输入用户名" onblur="check_name()" ></td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input id="pw" type="password" placeholder="请输入密码" onblur="check_pw()"></td>
                </tr>
                <tr>
                    <td>确认密码:</td>
                    <td><input id="pw-check" type="password" placeholder="请输入确认密码"/></td>
                </tr>
            </table>
            <input type="radio" name="sex" value="0"/>男
            <input type="radio" name="sex" value="1"/>女
            <br />
            <input type="checkbox" name="hobby" value="0"/>羽毛球
            <input type="checkbox" name="hobby" value="1"/>篮球
            <input type="checkbox" name="hobby" value="2"/>乒乓球
            <input type="checkbox" name="hobby" value="3"/>足球
            <br />
            <select id="grade">
                <option value="1">大一</option>
                <option value="2">大二</option>
                <option value="3">大三</option>
                <option value="4">大四</option>
            </select>
            <br />
            <td><input type="reset" value="重置" /></td>
            <td><input type="submit" value="注册"/></td>
        </form>
        <script>
            //使用$()函数可节省代码量
            function $(id){
                return document.getElementById(id);
            }

            function check(){
                var n = document.getElementById("name");
                var w = document.getElementById("pw");
                var msg = document.getElementById("wrong-massage");
                var c = document.getElementById("pw-check");

                if(n.value.length>12){
                    msg.innerHTML = "用户名不能超过15个字符,请重新输入!";
                    n.focus();
                    return false;
                }
                if(n.value.length==0){
                    msg.innerHTML = "用户名不能为空,请重新输入!";
                    n.focus();
                    return false;
                }
                if(w.value.length>12){
                    msg.innerHTML = "密码不能超过12个字符,请重新输入!";
                    w.focus();
                    return false;
                }
                if(w.value.length==0){
                    msg.innerHTML = "密码不能为空,请重新输入!";
                    w.focus();
                    return false;
                }
                if(w.value!=c.value){
                    msg.innerHTML = "密码错误,请重新输入!";
                    c.focus();
                    return false;
                }

                var sex = document.getElementsByName("sex");
                var hobby = document.getElementsByName("hobby");
                for(var i=0;i<sex.length;i++){
                    sex[i].disabled=true;
                    console.log(sex[i].checked+" "+sex[i].value);
                }

                console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~")

                for(var i=0;i<hobby.length;i++){
                    hobby[i].checked = true;
                    console.log(hobby[i].checked+" "+hobby[i].value);
                }

                console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~")


                var select = document.getElementById("grade");
                var options = select.options;
                console.log(select.length);
                console.log(select.selectedIndex);
                console.log(options[select.selectedIndex].value);
                for(var i=0;i<options.length;i++){
                    var option = options[i];
                    console.log(option.value)
                    select.disabled = true;
                }
                return false;
            }

            function check_name(){
                var n = document.getElementById("name");
                var msg = document.getElementById("wrong-massage");

                if(n.value.length>12){
                    msg.innerHTML = "用户名不能超过15个字符,请重新输入!";
                    n.value = "";
                    n.focus();
                }
                else if(n.value.length==0){
                    msg.innerHTML = "用户名不能为空,请重新输入!";
                    n.focus();
                }
                else{
                    msg.innerHTML = " ";
                }
            }
            function check_pw(){
                var w = document.getElementById("pw");
                var msg = document.getElementById("wrong-massage");

                if(w.value.length>12){
                    msg.innerHTML = "密码不能超过12个字符,请重新输入!";
                    w.value = "";
                    w.focus();
                }
                else if(w.value.length==0){
                    msg.innerHTML = "密码不匹配,请重新输入!";
                    w.focus();
                }
                else
                {
                    msg.innerHTML = " ";
                }
            }
        </script>
    </body>
</html>

Image 对象

Image 对象属性

src:设置或返回图像的 URL。


关于适合初学者学习的一些常用html对象属性的应用方法介绍的内容写到这里就结束啦,您可以收藏本页网址http://www.alixixi.com/web/a/2018090496002.shtml方便下次再访问哦。


更多关于 初学者 对象 属性 应用方法 的文章
相关阅读

相关排行总榜

网页教程

网站运营

特效排行

教你如何使用js+CSS写出类似FLASH动画的网
一款CSS3制作的带尖角的按钮实例代码
目前主流浏览器对于HTML5与CSS3的支持情况
全面剖析前端Ajax技术原理及知识
分享一个HTML5 + JavaScript实现Flash动画
用PHOTOSHOP把美女头画像制作成漂亮的仿手
淘宝网及新浪网等几大官方IP查询API接口地
用Photoshop制作淘宝大促双十一电商促销宣
用HTML5+css3制作HTML5验证的网页表单
通过html5代码实现在网页中插入和播放mp4
如何让您的微信公众号内容快速增加阅读量
网站用户界面设计(网页设计)命名规范
分享一些企业微信营销推广的技巧与经验
可以借鉴和学习的小米模式4大经验要素
SEO优化中网站title标题优化总结及经验分
为什么说建站要从网站用户忠诚度着手,知
一个优秀的SEM进行百度搜索推广账号架构经
谈谈从了解用户开始互联网推广的营销策略
谈谈新手运营网站如何做好网站的广告位投
清理您网站上的黑链的几个招数
JS制作循环上下左右平移转圈的图层特效
原生js写的贪食蛇网页版小游戏特效代码,
用CSS3实现的addidas阿迪达斯标志LOGO特效
HTML5打造的酷炫3D 360度图片立体浏览特效
通用canvas代码实现的JS画圆圈动画特效代
通过HTML5+SVG制作奔跑的小马驹动画特效
jquery实现拖拽进度条并显示百分比的特效
用HTML5+canvas代码绘制的星空月亮图案特
简单实用的纯CSS实现的横向多级导航特效代
原生JS写的一个书架式的图片缩放滚动展示