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

时间：2022-12-13 23:58:48
  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"> &lt ...

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

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

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

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

随机推荐

  1. &num;20145205 《Java程序设计》第4周学习总结

    教材学习内容总结 1.面对对象中,因为我们需要设计多个模块,但是有不能像C语言中那样进行分块设计,所以我们用父类和子类进行模块的设计,我们在设计一个较大的程序时,在一个项目中建立不同的文件,用关键字e ...

  2. Git系列教程一 入门与简介

    一.版本控制引入 可能我们都会有这样的经历:创建了一个文件,并对它做了多次更改,当我们想回到其中的某一次更改的时候,由于时间太长记不得那次更改的内容,于是我们在每次大的更改的时候,会创建一个文件的副本 ...

  3. HTTP请求中的form data和request payload的区别

    HTML <form> 标签的 enctype 属性 在下面的例子中,表单数据会在未编码的情况下进行发送: <form action="form_action.asp&qu ...

  4. SimpleAdapter类使用方法

    SimpleAdapter的构造函数是: public SimpleAdapter (Context context, List<? extends Map<String, ?>&g ...

  5. PHP中最容易忘记的一些知识点总结

    1.require 和require_once 区别: 前者遇到即包含文件,后者会判断是否已经包含过了,如果包含过了,则不再包含文件.一可以节省资源,二可以避免重复定义的错误. 2.include 和 ...

  6. 函数buf&lowbar;pool&lowbar;get

    根据space ,offset 获取 buff pool的实例 下标 /**************************************************************** ...

  7. Hibernate查询方法总结

    1. HQL查询 HQL是Hiberante官方推荐的Hibernate检索方式,它使用类似SQL的查询语言,以面向对象的方式从数据库中查询.可以使用HQL查询具有继承.多态和关 联关系的数据.在检索 ...

  8. 浏览器扩展系列————在WPF中定制WebBrowser快捷菜单

    原文:浏览器扩展系列----在WPF中定制WebBrowser快捷菜单 关于如何定制菜单可以参考codeproject上的这篇文章:http://www.codeproject.com/KB/book ...

  9. 【转】关于&OpenCurlyDoubleQuote;ORA-01653&colon; 表 SYS&period;AUD&dollar; 无法通过 128 &lpar;在表空间 SYSTEM 中&rpar; 扩展”的错误

    SQL*Plus: Release 11.1.0.6.0 - Production on 星期一 5月 17 18:31:08 2010 Copyright (c) 1982, 2007, Oracl ...

  10. RecyclerView详解

    RecyclerView是support-v7包中的新组件,是一个强大的滑动组件,与经典的ListView相比,同样拥有item回收复用的功能,但是直接把viewholder的实现封装起来,用户只要实 ...

相关文章