DOM

1、搜索框默认值为“请输入账户",当获取焦点时清空文本内容,失去焦点时,若文本内容为空或空格,则将文档本人重置为”请输入账户"。

<script type="text/javascript">
	function Focus(){
		var a = document.getElementById("account1");
		if(a.value == "请输入账户"){
			a.value = "";
		}
	}
	function Blur(){
		var a = document.getElementById("account1");
		if(a.value.trim()==""){
			a.value="请输入账户";
		}
	}
</script>
</head>
<body>
<input id="account1" type="text" value="请输入账户" name="account" onfocus="Focus();" onblur="Blur()";/>
</body>

2、添加标签。

<div id="creatediv1" style="width:50px;height: 50px;background-color: red;></div>
<input type="button" value="添加" onclick="creatediv2();" />
<script type="text/javascript">
	function creatediv1(){
		var cobj = document.createElement("a");
		cobj.href = "http://www.baidu.com";
		cobj.innerText = "百度";
		var nid = document.getElementById("creatediv1");
		nid.appendChild(cobj)
	}
	
	function creatediv2(){
		var nid = document.getElementById("creatediv1");
		var tag = "<a href='http://www.baidu.com'>百度</a>";
                //beforeBein在div之前,beforeEnd在div内部,afterBegin在div内部,afterEnd在div后面
		nid.insertAdjacentHTML("beforeBegin",tag);
	}
</script>

3、设置获取标签属性

var n = document.getElementById("creatediv1");
n.setAttribute("sb","ooxx");
console.log(n);
b = n.getAttribute("sb");
console.log(b);

特殊:n.className,n,style.fontSize="100px"。

效果:

 4、提交表单。

    <form id="form1" action="https://www.sogou.com/web" >
        <input name="query" type="text">
    </form>
    <button onclick="Submit();">提交</button>
    <script type="text/javascript">
        function Submit(){
            document.getElementById("form1").submit();
        }
    </script>

5、修改表单默认行为。

    <form id="form1" action="https://www.sogou.com/web" >
        <input id="input1" name="query" type="text">
    </form>
    <button onclick="return Submit();">提交</button>
    <script type="text/javascript">
        function Submit(){
           var a  = document.getElementById("input1");
            if(a.value.trim()){
                return true;
            }else {
                alert("请输入内容");
                return false;
            }
        }
    </script>

6、定时器。

<head>
    <meta charset="UTF-8">
    <title>欢迎电神莅临指导</title>
</head>
<body>
    <button onclick="stop();">停止</button>
    <script type="text/javascript">
        function stop(){
            clearInterval(obj);
        }
        var obj =  setInterval("run()",1000);
        function run(){
            var a = document.title;
            var f = a.charAt(0);
            var sub = a.substring(1, a.length);
            var new_t = sub + f;
            document.title = new_t;
        }
    </script>
</body>

7、

posted @ 2016-07-20 23:39  电神  阅读(180)  评论(0编辑  收藏  举报