2018-08-07 javascript中的一些HTML对象

HTML对象：
Text对象：
Text对象属性：今天学习了disabled；readOnly;value.
disabled：设置或返回文本域是否应被禁用。
readOnly：设置或返回文本域是否应是只读的。
value：设置或返回文本域的 value 属性的值。
例：

< html>
< head>
< meta charset=”utf-8” />
< title>< /title>
< /head>
< body>
< form>
< input name=”wd” />
< input type=”button” οnclick=”submitForm()” value=”百度一下” />
< /form>
< script>
var form=document.getElementsByTagName(“form”)[0];
form.action=”https://www.baidu.com/s”;

        var text=document.getElementsByName("wd")[0];
        function submitForm(){
            var text=document.getElementsByName("wd")[0];
            console.log(text.value);
            text.value="kaixin";
            text.readOnly=true;
            text.disabled=true;
            console.log(text.disabled);

        }
    </script>
</body>

< /html>
Text对象方法：
focus（）：在文本域上设置焦点。
< !DOCTYPE html>
< html>
< head>
< meta charset=”utf-8” />
< title>< /title>
< /head>
< body>
< form>
< input name=”wd” />
< input type=”button” οnclick=”submitForm()” value=”百度一下” />
< /form>
< script>
var form=document.getElementsByTagName(“form”)[0];
form.action=”https://www.baidu.com/s”;

        var text=document.getElementsByName("wd")[0];
        text.focus();
        function submitForm(){
            var text=document.getElementsByName("wd")[0];
            console.log(text.value);
            text.value="kaixin";
            console.log(text.disabled);
        }
    </script>
</body>

< /html>

说明：Password 对象和Textarea 对象都有value属性、disabled属性和readOnly属性，都有focus方法；Hidden 对象有value属性，没有disabled属性、readOnly属性和focus方法；

利用以前的所学和今天刚刚学的text对象，可以实现表单校验：

< html>
< head>
< meta charset=”UTF-8”>
< title>< /title>
< /head>
< body>
实现表单校验:< br />
1、用户名不能为空；长度不能超过12个字符；如果不满足条件，则将焦点定位到该控件；< br />
2、密码不能为空；长度不能超过15个字符；如果不满足条件，则将焦点定位到该控件；< br />
3、确认密码必须和密码一致；< br />
< br />
< span id=”msg” style=”color: red;”>< /span>
< br />
< form οnsubmit=”return check( )”>
< br />
< input type=”password” placeholder=”请输入密码” name=”password” id=”passworrd”/>< br />
< input type=”password” placeholder=”请输入确认密码” name=”re_password” id=”repassworrd”/>< br />
< input type=”submit” value=”注册” />
              
< input type=”reset” value=”撤销”/>

        <input type="radio" name="sex" value="0" />男
        <input type="radio" name="sex" value="1" />女

        <input type="checkbox" name="hobby" value="0" />篮球
        <input type="checkbox" name="hobby" value="1" />足球
        <input type="checkbox" name="hobby" value="2" />乒乓球



        <select id="grade">
            <option value="0">一年级</option>
            <option value="1">二年级</option>
            <option value="2">三年级</option>
        </select>


    </form>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        function check(){


            var select=document.getElementById("grade");
            console.log(select.length);
            console.log(select.selectedIndex);

            var options=select.options;
            console.log(options[select.selectedIndex].value);
            for(var i=0;i<options.length;i++){
                var option=options[i];
                console.log(option.value);
            }






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

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


            var userName=$("user_name").value;
            var password=$("passworrd").value;
            var rePassword=$("repassworrd").value;
            //var msg=document.getElementById("msg");
            if(userName.length==0){
                $("msg").innerHTML="用户名不能为空！";
                $("user_name").focus();
                return false;
            }
            if(userName.length>12){
                $("msg").innerHTML="用户名不能超过12个字符！";
                $("user_name").focus();
                return false;
            }
            if(password.length==0){
                $("msg").innerHTML="密码不能为空！";
                $("passworrd").focus();
                return false;
            }
            if(password.length>15){
                $("msg").innerHTML="密码不能超过15个字符！";
                $("passworrd").focus();
                return false;
            }
            if(password!=rePassword){
                $("msg").innerHTML="密码与确认密码不一致！";
                $("repassworrd").focus();
                return false;
            }
            console.log("注册成功");
            return true;
        }

    </script>
</body>

< /html>

最后还学了div格式：

< html>
< head>
< meta charset=”UTF-8”>
< title>< /title>
< style>
.square{
background-color: pink;
width: 100px;
height: 100px;
}
< /style>
< /head>
< body>
< div class=”“>< /div>
< script>
//第一种：获取相应标签对应的javascript对象.style
/*(function(){
var div=document.getElementsByTagName(“div”)[0];
div.style.backgroundColor=”pink”;
div.style.width=”100px”;
div.style.height=”100px”;

        })();*/
        //第二种：获取相应标签对应的javascript对象.className
        var div=document.getElementsByTagName("div")[0];
        div.className="square";
    </script>
</body>

< /html>
今天学了这几个，还要再多复习。