jQuery基础学习5——JavaScript方法获取页面中的元素

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <title></title>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script type="text/javascript">
             window.onload = function(){//页面所有元素加载完毕
                 var items = document.getElementsByTagName("p");//获取页面中的所有<p>元素
                 for(var i=0;i < items.length;i++){    //对<p>元素进行循环(因为获取的是数组对象)
                     items[i].onclick = function(){  //给每一个<p>添加onclick事件
11                         //doing something...
12                         alert("suc!");
13                     }
                 }
             }
         </script>
     </head>
     <body>
         <p>测试1</p>
         <p>测试2</p>
     </body>
 </html>

1. 使一个特定的表格隔行变色

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <title></title>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script type="text/javascript">
             window.onload = function(){ //页面所有元素加载完毕
                 var item  =  document.getElementById("tb");            //获取id为tb的元素(table)
                 var tbody =  item.getElementsByTagName("tbody")[0];    //获取表格的第一个tbody元素
                 var trs =   tbody.getElementsByTagName("tr");            //获取tbody元素下的所有tr元素
                 for(var i=0;i < trs.length;i++){//循环tr元素
                     if(i%2==0){        //取模. (取余数.比如 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1)
                         trs[i].style.backgroundColor = "#888"; // 改变 符合条件的tr元素 的背景色.
                     }
                 }
             }
         </script>
     </head>
     <body>
     <table id="tb">
         <tbody>
             <tr><td>第一行</td><td>第一行</td></tr>
             <tr><td>第二行</td><td>第二行</td></tr>
             <tr><td>第三行</td><td>第三行</td></tr>
             <tr><td>第四行</td><td>第四行</td></tr>
             <tr><td>第五行</td><td>第五行</td></tr>
             <tr><td>第六行</td><td>第六行</td></tr>
         </tbody>
     </table>
     </body>
 </html>

1. 对多选框进行操作，输出选中的多选框的个数。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <title></title>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script type="text/javascript">
             window.onload = function(){//页面所有元素加载完毕
                 var btn = document.getElementById("btn");  //获取id为btn的元素(button)
                 btn.onclick = function(){                   //给元素添加onclick事件
                     var arrays = new Array();              //创建一个数组对象
                     var items = document.getElementsByName("check");  //获取name为check的一组元素(checkbox)
                     for(i=0; i < items.length; i++){  //循环这组数据
                         if(items[i].checked){      //判断是否选中
                             arrays.push(items[i].value);  //把符合条件的 添加到数组中. push()是javascript数组中的方法.
                         }
                     }
                     alert( "选中的个数为："+arrays.length  );
                 }
             }
         </script>
     </head>
     <body>
     <form method="post" action="#">
         <input type="checkbox" value="1" name="check" checked="checked"/>
         <input type="checkbox" value="2" name="check" />
         <input type="checkbox" value="3" name="check" checked="checked"/>
         <input type="button" value="你选中的个数" id="btn"/>
     </form>
     </body>
 </html>

上面的几个例子都是用传统的JavaScript方法进行操作，中间使用了getElementById()、getElementsByTagName()和getElementsByName等方法，然后动态地给元素添加行为或者样式。