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. 【Todo】深入理解Javascript系列

    真的很好,要看 http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html

  2. Catalan数推导（转载）

    Raney引理: 设整数序列A = {Ai, i=1, 2, …, N},且部分和Sk=A1+…+Ak,序列中所有的数字的和SN=1,在A的N个循环表示中,有且仅有一个序列B,满足B的任意部分和Si均 ...

  3. WebService教程和分析

    1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求, ...

  4. 使用mp4v2将H264+AAC合成mp4文件

    录制程序要添加新功能:录制CMMB电视节目,我们的板卡发送出来的是RTP流(H264视频和AAC音频),录制程序要做的工作是: (1)接收并解析RTP包,分离出H264和AAC数据流: (2)将H26 ...

  5. 动态加载so文件

    在开发过程中,经常会用到第三方库,比如地图.视频.文档编辑.图表之类.依赖这些库,需要添加其SDK,有时需要用到jni层的So文件,比如百度地图等. 那么问题来了,如果两个不同的库之间的so文件发生冲 ...

  6. SharePoint 2013让页面显示错误

    转:http://blog.csdn.net/zmoneyz/article/details/20460263 1. 在网站端口下,如80端口下的Web.config修改 (1)将<custom ...

  7. 【转】一个windows线程池实现

    #ifndef _ThreadPool_H_ #define _ThreadPool_H_ #pragma warning(disable: 4530) #pragma warning(disable ...

  8. redis错误汇总

    1.redis因为内存不够而启动失败 Microsoft Open Tech group 在 GitHub上开发了一个REDIS Win64的版本,项目地址是:https://github.com/M ...

  9. IOS CAShapeLayer CAGradientLayer UIBezierPath 使用实例

    CGRect rect = CGRectMake(100, 100, 100, 100); UIView * bgView = [[UIView alloc]initWithFrame:rect]; ...

  10. e2e 自动化集成测试 架构 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step （六） 自动化测试结构小节

    上一篇‘e2e 自动化集成测试 架构 京东 商品搜索 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step (五) 如何让窗体记录登录 ...