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. 【BZOJ1071】[SCOI2007]组队（神仙题）

    [BZOJ1071][SCOI2007]组队(神仙题) 题面 BZOJ 洛谷 题解 首先把式子整理一下,也就是\(A*h+B*v\le C+A*minH+B*minV\) 我们正常能够想到的做法是钦定 ...

  2. bzoj2817[ZJOI2012]波浪

    题目链接: http://www.lydsy.com/JudgeOnline/problem.php?id=2817 波浪 [问题描述] 阿米巴和小强是好朋友. 阿米巴和小强在大海旁边看海水的波涛.小 ...

  3. 网络传输---HttpURLConnection

    HttpURLConnection是java做网络传输的一种,一般用于做数据的传输如xml数据传输 1.创建及配置: 1.1创建一个url对象,并指定url的地址 URL url = new URL( ...

  4. 洛谷P3227 切糕

    最小割模板. 题意:你要在一个三维点阵的每个竖条中删去一个点,使得删去的点权和最小. 且相邻(四联通)的两竖条之间删的点的z坐标之差的绝对值不超过D. 解: 首先把这些都串起来,点边转化,就变成最小割 ...

  5. CSUOJ 1170 A sample problem

    J: A Simple Problem Submit Page   Time Limit: 1 Sec     Memory Limit: 128 Mb     Submitted: 87     S ...

  6. 数组指针与指针数组(good)

    数组指针和指针数组的区别 数组指针(也称行指针) 定义 int (*p)[n]; ()优先级高,首先说明p是一个指针,指向一个整型的一维数组,这个一维数组的长度是n,也可以说是p的步长.也就是说执行p ...

  7. Javascript中与Scroll有关的方法

    这块确实太乱了,被兼容搞的简直快要晕死,默默地总结下... 与scroll相关的方法 4个window对象下:scrollX.scrollY.scrollTo.scroll(作用和scrollTo一样 ...

  8. HDU 2112 HDU Today 最短路

    题目描述: Problem Description 经过锦囊相助,海东集团终于度过了危机,从此,HDU的发展就一直顺风顺水,到了2050年,集团已经相当规模了,据说进入了钱江肉丝经济开发区500强.这 ...

  9. 1601O_HOME

    马kaiyu   https://blog.csdn.net/debugbugbg 胡guoxin https://blog.csdn.net/qq_41995727 张yizhong  https: ...

  10. Requests中出现大量ASYNC_NETWORK_IO等待

    七夕活动,网页显示异常:504 Gateway Time-out The server didn't respond in time.开发询问数据库是否正常,当时正连接在实例上查询数据,感觉响应确实慢 ...