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

最新推荐文章于 2023-11-22 22:01:47 发布

原创最新推荐文章于 2023-11-22 22:01:47 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文通过三个实例介绍如何使用原生JavaScript操作网页：1. 给所有p元素添加点击事件；2. 实现表格行交替颜色效果；3. 动态获取并统计选中多选框的数量。

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>