jQuery基础学习5——JavaScript方法获取页面中的元素
- 给网页中的所有<p>元素添加onclick事件
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <script type="text/javascript"> 7 window.onload = function(){//页面所有元素加载完毕 8 var items = document.getElementsByTagName("p");//获取页面中的所有<p>元素 9 for(var i=0;i < items.length;i++){ //对<p>元素进行循环(因为获取的是数组对象) 10 items[i].onclick = function(){ //给每一个<p>添加onclick事件 11 //doing something... 12 alert("suc!"); 13 } 14 } 15 } 16 </script> 17 </head> 18 <body> 19 <p>测试1</p> 20 <p>测试2</p> 21 </body> 22 </html>
- 使一个特定的表格隔行变色
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <script type="text/javascript"> 7 window.onload = function(){ //页面所有元素加载完毕 8 var item = document.getElementById("tb"); //获取id为tb的元素(table) 9 var tbody = item.getElementsByTagName("tbody")[0]; //获取表格的第一个tbody元素 10 var trs = tbody.getElementsByTagName("tr"); //获取tbody元素下的所有tr元素 11 for(var i=0;i < trs.length;i++){//循环tr元素 12 if(i%2==0){ //取模. (取余数.比如 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1) 13 trs[i].style.backgroundColor = "#888"; // 改变 符合条件的tr元素 的背景色. 14 } 15 } 16 } 17 </script> 18 </head> 19 <body> 20 <table id="tb"> 21 <tbody> 22 <tr><td>第一行</td><td>第一行</td></tr> 23 <tr><td>第二行</td><td>第二行</td></tr> 24 <tr><td>第三行</td><td>第三行</td></tr> 25 <tr><td>第四行</td><td>第四行</td></tr> 26 <tr><td>第五行</td><td>第五行</td></tr> 27 <tr><td>第六行</td><td>第六行</td></tr> 28 </tbody> 29 </table> 30 </body> 31 </html>
- 对多选框进行操作，输出选中的多选框的个数。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <script type="text/javascript"> 7 window.onload = function(){//页面所有元素加载完毕 8 var btn = document.getElementById("btn"); //获取id为btn的元素(button) 9 btn.onclick = function(){ //给元素添加onclick事件 10 var arrays = new Array(); //创建一个数组对象 11 var items = document.getElementsByName("check"); //获取name为check的一组元素(checkbox) 12 for(i=0; i < items.length; i++){ //循环这组数据 13 if(items[i].checked){ //判断是否选中 14 arrays.push(items[i].value); //把符合条件的 添加到数组中. push()是javascript数组中的方法. 15 } 16 } 17 alert( "选中的个数为："+arrays.length ); 18 } 19 } 20 </script> 21 </head> 22 <body> 23 <form method="post" action="#"> 24 <input type="checkbox" value="1" name="check" checked="checked"/> 25 <input type="checkbox" value="2" name="check" /> 26 <input type="checkbox" value="3" name="check" checked="checked"/> 27 <input type="button" value="你选中的个数" id="btn"/> 28 </form> 29 </body> 30 </html>
上面的几个例子都是用传统的JavaScript方法进行操作，中间使用了getElementById()、getElementsByTagName()和getElementsByName等方法，然后动态地给元素添加行为或者样式。
