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等方法，然后动态地给元素添加行为或者样式。

jQuery基础学习5——JavaScript方法获取页面中的元素的更多相关文章

  1. JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）

    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...

  2. 使用HTML5的JavaScript选择器操作页面中的元素

    <!doctype html><html lang="en"> <head>     <meta charset="UTF-8& ...

  3. 一行JavaScript代码获取页面中的所有超链接地址

    因为我喜欢收集Web开发类的网址,平时对网址就很敏感. 我总结了一下我收集网址的几个阶段: 1.纯手工阶段,傻傻的阶段. 在这个阶段,主要是收集一些在页面中展现出来的网址,就是说,如果网址出现在HTM ...

  4. jQuery 基础学习笔记总结（一）

    Jquery 学习笔记 总结 感想: 此前在做站点时用到过jquery相关,特别是Ajax相关技术.但是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料基本的了解下Jquery的特 ...

  5. salesforce零基础学习（八十七）Apex 中Picklist类型通过Control 字段值获取Dependent List 值

    注:本篇解决方案内容实现转自:http://mysalesforceescapade.blogspot.com/2015/03/getting-dependent-picklist-values-fr ...

  6. JavaScript、jQuery获取页面及个元素高度、宽度

    Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.client ...

  7. JQuery基础学习总结

    JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...

  8. 【总结整理】JQuery基础学习---动画

    jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的st ...

  9. 【总结整理】JQuery基础学习---样式篇

    进入官方网站获取最新的版本 http://jquery.com/download/    中文 https://www.jquery123.com/ <!--JQuery:轻量级的JavaScr ...

随机推荐

  1. C#调用java程序

    前言: 最近跟项目组的人合作一个项目,由于之前我用的是java写的一个与android通信的程序,现在另一个同事来编写界面程序,由于C#编写起来比较方便,而我又不想重新写之前java的那段代码,于是需 ...

  2. JasperReports+iReport打印为excel表头重复问题解决

    iReport版本:3.7.4 解决方法很简单,无奈我就是纠结了一个多小时... 首先,点击文件根目录 移到  属性 框里面,找到Ignore pagination项,勾上,忽略分页,一切就OK了.

  3. Selenium Tutorial (1) - Starting with Selenium WebDriver

    Starting with Selenium WebDriver Selenium WebDriver - Introduction & Features How Selenium WebDr ...

  4. iphone 如何清空UIWebView的缓存

      iphonecachingapplicationcookiescacheperformance I actually think it may retain cached information ...

  5. HDU 4607 Park Visit (DP最长链)

    [题目]题意:N个城市形成一棵树,相邻城市之间的距离是1,问访问K个城市的最短路程是多少,共有M次询问(1 <= N, M <= 100000, 1 <= K <= N). [ ...

  6. nginx - ssl 配置 - globelsign ssl

    前提: 3个文件 - domain.csr.domain.key.xxx.cer 简述: 1. 本地生成 .key文件  [附件] 2. 再利用key文件,生成csr(certificate Secu ...

  7. 省常中模拟 Test3 Day1

    tile 贪心 题意:给出一个矩形,用不同字母代表的正方形填充,要求相邻的方块字母不能相同,求字典序(将所有行拼接起来)最小的方案. 初步解法:一开始没怎么想,以为策略是每次填充一个尽量大的正方形.但 ...

  8. <摘录>TS，PS，PES包格式

    PES是打包过的ES,已经插入PTS和DTS,一般是一个pes包为一帧图像 PES包格式: PES再打包成TS流或PS流,往往一个PES会分存到多个ts包中, start_code: 0x00 00 ...

  9. 调用DirectDraw接口和调DirectDraw7接口的不同点对比

    调用DirectDraw接口步骤: 1.       包含链接库ddraw.lib 2.       初始化窗口类型(全屏独占时类型用popup). 3.       在初始化窗口后初始化Direct ...

  10. angular+rails集成实战

    http://start.jcolemorrison.com/setting-up-an-angularjs-and-rails-4-1-project/ 1. 添加gemgem 'sprockets ...