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. POJ3485 区间问题

    题目描述有些坑.. 题意: 有一条高速公路在x轴上,从(0,0)到(L,0).周围有一些村庄,希望能够在高速公路上开通几个出口,使得每个村庄到最近的出口距离小于D,求出最少需要开通多少个出口. 解题思 ...

  2. UVa 11076 (有重元素的排列) Add Again

    n个可重复的元素的排列一共有 = All种,其中 假设这些数依次为ai,每种数字有mi个. 从右往左考虑第d位数(d≥0),第i个数字出现的次数为,那么这个数字对所求答案的贡献为 其实可以先一次求出个 ...

  3. UVa 10817 (状压DP + 记忆化搜索) Headmaster's Headache

    题意: 一共有s(s ≤ 8)门课程,有m个在职教师,n个求职教师. 每个教师有各自的工资要求,还有他能教授的课程,可以是一门或者多门. 要求在职教师不能辞退,问如何录用应聘者,才能使得每门课只少有两 ...

  4. SQL千万级数据设计和优化

    1. 数据太多.放在一个表肯定不行. 比如月周期表.一个月1000万,一年就1.2亿,如此累计下去肯定不行的.所以都是基于一个周期数据一个表.甚至一个周期数据就要分几个分表.主要是考虑实际的数据量而定 ...

  5. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  6. [Sciter系列] MFC下的Sciter–5.Sciter中GUI线程研究

    [Sciter系列] MFC下的Sciter–5.Sciter中GUI线程研究,目前MFC存在问题,win32没问题. 本系列文章的目的就是一步步构建出一个功能可用,接口基本完善的基于MFC框架的Sc ...

  7. ti processor sdk linux am335x evm /bin/commom.sh hacking

    #!/bin/sh # # ti processor sdk linux am335x evm /bin/commom.sh hacking # 说明: # 本文主要对TI的sdk中的common.s ...

  8. j2ee的13个标准

    1:JDBC(Java Database Connectivity)JDBC API为访问不同数据库提供了统一的路径,向ODBC一样,JDBC开发者屏蔽了一些细节问题,另外,JDBC对数据库的访问也具 ...

  9. $( ).focus()与$( )[0].focus()区别

    $( #id).focus()与$( #id)[0].focus()没有区别,因为id必须是唯一的.如果同一页面出现多个相同的ID(这是不符合w3c规范的),$(#id)也只会拿到第一个该ID,后面的 ...

  10. Android-AnimationDrawable（二）

    首先可以先定义一个逐帧播放的xml: <?xml version="1.0" encoding="utf-8"?> <animation-li ...