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++STL 之排列

    固然我们可以自己使用递归编写全排列程序,但是既然STL里面已将有了这个功能为什么不直接用呢,下面就写一下直接使用C++ STL生成全排序的程序 函数名:next_permutation 包含头文件:a ...

  2. Huge CSV and XML Files in Python, Error: field larger than field limit (131072)

    Huge CSV and XML Files in Python January 22, 2009. Filed under python twitter facebook pinterest lin ...

  3. 自己动手实现STL：前言

    一.前言 最近,刚看完<STL源码剖析>,深深被实现STL库的那些的大牛们所折服.同时又感觉自己与大牛们差距之大,便萌生深入学习之意.如果仅仅只是看看<STL源码剖析>的话,又 ...

  4. WebService只能在本地使用，无法通过网络访问的解决办法

    问题描述:WebService只能在本地使用,无法通过网络访问. 解决方案:在web.config的<system.web></system.web>中间加入如下配置节内容: ...

  5. wdcp系统升级mysql5.7.11

    1.下载解压 下载地址为:http://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.12-linux-glibc2.5-x86_64.tar.gz ...

  6. Java [Leetcode 70]Climbing Stairs

    题目描述: You are climbing a stair case. It takes n steps to reach to the top. Each time you can either ...

  7. 用C/C++开发基于VLC SDK的视频播放器

    在windows系统如果开发万能播放器,一般都是基本DirectShow来开发,开发也很简单,但缺点也很多,一个文件格式是否能够播放完全取决于你 是否安装了正确的解析器和解码器,即使现在有了万能解器安 ...

  8. oracle等待事件以及解决方案

    我们可以通过视图v$session_wait来查看系统当前的等待事件,以及与等待事件相对应的资源的相关信息,从而可确定出产生瓶颈的类型及其对象. v$session_wait的p1.p2.p3告诉我们 ...

  9. 安装服务Memcached+Nginx+Php linux下安装

    Memcached安装 1.      源码安装libevent(下载地址:http://monkey.org/~provos/libevent/) 2.      源码安装memcached(下载地 ...

  10. JS实现连接方式的菜单

    <html> <head><meta http-equiv="Content-Language" content="zh-cn"& ...