使用原生JS操作网页的几个例子
2013-12-01 16:02
501 查看
1. 给网页中的所有p元素添加onclick事件:
2. 使一个特定的表格隔行变色:
![](http://img.blog.csdn.net/20131201164159078?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY29uZmlybUFuYW1l/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
3. 对多选框进行操作,输出选中的多选框个数:
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>Insert title here</title> <!-- <script src="jQuery/jquery-1.10.2.js"></script>--> <script type="text/javascript"> window.onload=function(){ var items=document.getElementsByTagName("p"); for(i=0;i<items.length;i++){ items[i].onclick=function(){ alert("单击成功..."); } } } </script> </head> <body> <p>测试段落一...</p> <p>测试段落二...</p> <p>测试段落三...</p> </body> </html>
2. 使一个特定的表格隔行变色:
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>Insert title here</title> <!-- <script src="jQuery/jquery-1.10.2.js"></script>--> <script type="text/javascript"> window.onload=function(){ var item=document.getElementById("tb"); var tbody=item.getElementsByTagName("tbody")[0]; var trs=tbody.getElementsByTagName("tr"); for(var i=0;i<trs.length;i++){ if(i%2==0){ trs[i].style.backgroundColor="green"; } } } </script> </head> <body> <table id="tb" border="1"> <tbody> <tr><td>第一行</td></tr> <tr><td>第二行</td></tr> <tr><td>第三行</td></tr> <tr><td>第四行</td></tr> <tr><td>第五行</td></tr> <tr><td>第六行</td></tr> </tbody> </table> </body> </html>
3. 对多选框进行操作,输出选中的多选框个数:
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>Insert title here</title> <!--<script src="jQuery/jquery-1.10.2.js"></script> --> <script type="text/javascript"> window.onload=function(){ var btn=document.getElementById("btn"); btn.onclick=function(){ var arrays=new Array(); var items=document.getElementsByName("check"); for(var i=0;i<items.length;i++){ if(items[i].checked){ arrays.push(items[i].value); } } alert("选中的个数为:"+arrays.length); } }; </script> </head> <body> <input type="checkbox" value="apple" name="check"> <input type="checkbox" value="banana" name="check"> <input type="checkbox" value="pear" name="check"> <input type="button" value="输出你选中的个数" id="btn"> </body> </html>
相关文章推荐
- 使用Js实现网页表格操作
- 原生JS操作网页给p元素添加onclick事件及表格隔行变色
- 如何使用js把网页适配为一屏的几个技巧
- IE浏览器使用原生JS操作ajax无效
- 原生JS实现几个常用DOM操作API
- js禁止浏览器使用backspace键后退网页及禁止所有后退操作
- JS与Objective-C交互(网页与原生交互---使用UIWebviewDelegate)
- 原生js实现下拉级联操作+通过disabled对下拉框不使用
- DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
- h5微网页向上滑动屏幕加载跟多数据例子(原生js)
- JS与Objective-C交互(网页与原生交互---使用JavaScriptCore)
- js原生的url操作函数,及使用方法。(附:下边还有jquery对url里的中文解码函数)
- 原生JS实现几个常用DOM操作API实例
- 使用原生JS编写ajax操作XMLHttpRequst对象
- JS原生父子页面操作
- 21 个在网页设计中漂亮的颜色使用的例子
- 如何使用js懒加载图片|如何使用jquery.lazyload.js|网页优化|如何提高网页加载速度
- JS中常见原生DOM操作API【总结整理)