1.需求

　　点击所有的 p 节点, 能够弹出其对应的文本内容

　　使第一个 table 隔行变色

　　点击 button, 弹出 checkbox 被选中的个数

2.程序

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <script type="text/javascript" SRC="jquery-3.2.1.min.js"></script>

 <script type="text/javascript">

     $(function(){

         //点击所有的 p 节点, 能够弹出其对应的文本内容

         $("p").click(function(){

             alert($(this).text());

         })

         //使第一个 table 隔行变色

         $("table:first tr:even").click(function(){

             $(this).css("background","#fab");

         });

         //点击 button, 弹出 checkbox 被选中的个数

         $("button").click(function(){

             var len=$(":checkbox:checked").length;

             alert(len);

         })

     })

 </script>

 </head>

 <body>

     <p>段落1</p>

     <p>段落2</p>

     <p>段落3</p>

     <table>

         <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>

     </table>

     <br>

     <hr>

     <br>

     <table>

         <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>

     </table>

     <input type="checkbox" name="test" />

     <input type="checkbox" name="test" />

     <input type="checkbox" name="test" />

     <input type="checkbox" name="test" />

     <input type="checkbox" name="test" />

     <input type="checkbox" name="test" />

     <button>您选中的个数</button>

 </body>

 </html>

010 使用jquery实现小需求练习-------对应选择器的练习的更多相关文章

  1. 分析一个类似于jquery的小框架

    在网上下了一个类似于jQuery的小框架,分析源码,看看怎么写框架. 选择器Select //用沙箱闭包其整个代码,只有itcast和I暴漏在全局作用域 (function( window , und ...

  2. jquery mobile小案例

    ---恢复内容开始--- [jquery mobile小案例]效果图如下: 首先先创建一个页面主要使用data-role="page"这个指令,我们给它起个id="pag ...

  3. jQuery拼图小游戏

    jQuery拼图小游戏 最后样式 核心代码部分 <script type="text/javascript" > $(function () { $("td& ...

  4. [需求设计]从一个小需求感受Redis的独特魅力

    分享一个简单的小需求应该怎么设计实现以及有关Redis的使用 Redis在实际应用中使用的非常广泛,本篇文章就从一个简单的需求说起,为你讲述一个需求是如何从头到尾开始做的,又是如何一步步完善的.之前写 ...

  5. Kendo UI for jQuery自定义小部件第一弹！不得不看的入门指南

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  6. 从一个小需求感受Redis的独特魅力

    分享一个简单的小需求应该怎么设计实现以及有关Redis的使用 Redis在实际应用中使用的非常广泛,本篇文章就从一个简单的需求说起,为你讲述一个需求是如何从头到尾开始做的,又是如何一步步完善的. 需求 ...

  7. 彻底抛弃PeopleEditor，SharePoint中利用Jquery Chosen创建新的人员选择器

    彻底抛弃PeopleEditor,SharePoint中利用Jquery Chosen创建新的人员选择器 基于SharePoint平台开发时,人员选择器使用频率是非常高的,但是原生的人员选择器使用太麻 ...

  8. JQuery第一天——入门概述与选择器

    一.什么是JQuery 一个流行的js库 核心理念:write less , do more 优势:  轻量级 强大的选择器 出色的 DOM 操作的封装 可靠的事件处理机制 完善的 Ajax 出色的浏 ...

  9. jquery总结01-基本概念和选择器

    dom元素和jquery元素的区别 dom元素支持dom元素自带的属性和方法,jquery元素支持jquery元素自带的属性和方法 dom                  var div = doc ...

随机推荐

  1. 【BZOJ1055】[HAOI2008]玩具取名（动态规划）

    [BZOJ1055][HAOI2008]玩具取名(动态规划) 题面 BZOJ 洛谷 题解 裸的区间\(dp\),设\(f[i][j][W/I/N/G]\)表示区间\([i,j]\)能否由某个字母替换过 ...

  2. fidder及Charles使用

    1. fidder抓https包的基本配置,可参见以下博文 http://blog.csdn.net/idlear/article/details/50999490 2. 遇到问题:抓包看只有Tunn ...

  3. Qt ------ QTableView QTableWidget

    QTableView model提供数据    view提供视图   view用来显示model的数据   必须将model绑定到某个view中才能显示 QStandardItemModel* mod ...

  4. python oracle使用心得

    Oracel安装(windows 64位) 1. 首先确定版本. 2. 下载instantclient,下载地址:http://www.oracle.com/technetwork/database/ ...

  5. Java基础-SSM之Spring的POJO（Plain Old Java Object）实现AOP

    Java基础-SSM之Spring的POJO(Plain Old Java Object)实现AOP 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 上次我分享过Spring传统的A ...

  6. HTTP header location 重定向 URL

    http头信息 头信息的作用很多,最主要的有下面几个:1.跳转当浏览器接受到头信息中的 Location: xxxx 后,就会自动跳转到 xxxx 指向的URL地址,这点有点类似用 js 写跳转.但是 ...

  7. timer.Interval用法简介

    这个东东呢是我在做windows服务的时候碰到的,总结了一下她的用法,如下: 一.指定时间间隔 写一个每隔一分钟就执行一次的吧 public partial class PSJCService : S ...

  8. cin,cout,printf,scanf效率对比

    From:http://www.cnblogs.com/killerlegend/p/3918452.html Author:KillerLegend Date:2014.8.17 杭电OJ之3233 ...

  9. NP难问题求解综述

    NP难问题求解综述 摘要:定义NP问题及P类问题,并介绍一些常见的NP问题,以及NP问题的一些求解方法,最后最NP问题求解的发展方向做一些展望.   关键词:NP难问题 P类问题 算法 最优化问题   ...

  10. inline-block的间距问题

    张鑫旭的博客有提到,解决的方法有很多,先贴下,回头再做整理. http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove ...