使用原生JS操作网页的几个例子

来源：互联网发布：淘宝拓客助手破解版编辑：程序博客网时间：2024/06/17 00:12

1. 给网页中的所有p元素添加onclick事件：

<%@ 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>