DOM实例
2024-08-28 17:36:41
同一种功能两种方法:
<script type='text/javascript'>
<!-- var tag = document.creatElement("a");
tag.href = 'http://www.baidu.com';
tag.innerText = '点我啊'; var id1 = document.getElementById('t1');
id1.appendChild(tag); --> var tag = '<a href="http://baidu.com">zouni</a>'
var id1=document.getElementById('t1')
id1.appendChild(tag)
</script> 上述方法可以使用html的很多操作,例如css的属性可以通过此方式修改,标签可以插入,标签的属性修改,标签的内容可以插入。
<body> <form id='f1' action='https://www.sogou.com/web?' method='GET'> <input id='query' type='text' name='query'/> //在服务器端一般都是通过name来获取我要发送的值,name就类似于key
<!--<input type='submit' value='提交'>--> //这个是默认就会提交
<input type='button' value=‘伪提交' onclick='foo();'/> //这个是利用button来提交,这个一般没有什么效果,所以在foo()函数中使用提交,在foo()函数中可以定义我需要识别内容,可以让这个函数内部检查我是否输入正确,是否输入合适的字符。 </form> <script type='text/javascript'> function foo(){ document.getElementById('f1').submit(); } </script> <script type='text/javascript'>alert('bill');</script>
</body>
搜索框实例:
<html>
<head>
<meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
<style>
.black{
color:black;
}
.gray{
color:gray;
}
</style>
</head> <body>
<input type='text' class='gray' id='tip' value='请输入关键字' onfocus='enter();' onblur='leave();'/> //但鼠标落在框里与框外的区别
<script type='text/javascript'> function enter(){ var id = document.getElementById('tip');; id.className = 'black'; if(id.value=='请输入关键字'|| id.value.trim()==''){ //trim()用于消除字符串两端的空白字符 id.value='';
}
} function leave(){ var id = document.getElementById('tip') var val = id.value; if (val.length==0 || id.value.trim()==''){ id.value='请输入关键字';
id.className='gray'; }else{
id.className='black';
}
}
</script>
</body>
</html>
滚动条:
<div style='width:500px;background-color:red;'>
<div id='nima' style='width:10%;background-color:green;height:10px;'></div>
</div> <script type='text/javascript'> tmp=10;
function foo(){
var id = document.getElementById('nima');
tmp=tmp+10;
if(tmp>100){
clearInterval(interval);
}else{
id.style.width=tmp+'%';
}
}
interval=setInterval('foo()',500); //每半秒钟执行一次,setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
</script> 如果此时我将setInterval改成setTimeout,此时就变成0.5秒后再执行一次就不执行了。
最新文章
- java HashMap那点事
- Int16, Int32, Int64 范围
- POJ 2853 Sequence Sum Possibilities
- [转]excel set drop-down values based on vlookup
- java集合类(四)About Set
- Spring execution 表达式
- 时空分割的画面--用xcode命令行回忆turbo c
- 一台机器,运行两个mysql版本 实例
- 关于IoCallDriver
- Debain 7.2安装配置
- java.util.Timer demo good
- Android 打造任意层级树形控件 考验你的数据结构和设计
- JS学习实践(1) JavaScript 修改图像灯泡
- c++ 实现哈夫曼树中遇见的问题
- linux下安装mysql解决乱码、时间差、表的大小写问题
- flex常用快捷键
- Makefile生成器,使用C++和Boost实现
- I/O复用服务器端+回声客户端
- poj 3616(动态规划)
- Java中equals()、equalsIgnoreCase()和==的区别
热门文章
- shell编程sed笔记
- db_keep_cache_size參数的控制范围測试
- Spring MVC第一课:用IDEA构建一个基于Spring MVC, Hibernate, My SQL的Maven项目
- Android Intent 用法全面总结(转载)
- EJB的优点有哪些?(选择2项)
- 位集合类BitSet
- Matrix_tree Theorem 矩阵树定理学习笔记
- 下载VMware
- iOS开发之--Mac终端命令大全
- 面试题思考:什么是基于注解的切面实现?(AOP是Aspect Oriented Program的首字母缩写)