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. Mountainous landscape

    Description 现在在平面上给你一条折线 \(P_1P_2 \cdots P_n\) . \(x\) 坐标是严格单调递增的.对于每一段折线 \(P_iP_{i+1}\) ,请你找一个最小的 \ ...

  2. 前端学习 -- Css -- 盒子模式

    框模型: CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里. 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.我们只需要将相应的盒子摆放到网页 ...

  3. 【洛谷P1341】无序字母对

    题目大意:给定 n 个各不相同的无序字母对(区分大小写,无序即字母对中的两个字母可以位置颠倒).请构造一个有 n+1 个字母的字符串使得每个字母对都在这个字符串中出现. 题解:每个无需字母对可以看成无 ...

  4. 【洛谷P1214】等差数列

    题目大意:列出从一个给定上界的双平方数集合中选出若干个数,组成长度为 N 的等差数列的首项和公差. 题解:首先,因为是在双平方数集合上的等差数列,而且根据题目范围可知,上界不超过 2e5,可以先打表, ...

  5. 21天实战caffe笔记_第三天

    1 深度学习工具汇总 (1)  caffe : 由BVLC开发的基于C++/CUDA/Python实现的卷积神经网络,提供了面向命令行.Matlab和Python的绑定接口.特性如下: A 实现了前馈 ...

  6. Linux掉电处理

    在嵌入式设备中,掉电处理一直是一项比较麻烦的工作,在具有Linux系统的设备中,系统的种种数据的处理更是增加掉电处理的难度.现在做以下几点总结,再遇到类似问题可以做个参考. 1,系统启动的处理 在系统 ...

  7. solr与mysql数据同步的方案

    1.使用activeMQ http://blog.csdn.net/zhou2s_101216/article/details/77855413 2.通过配置实现定时同步 http://blog.cs ...

  8. ubuntu ssh root登陆

    原文:https://blog.csdn.net/wy_97/article/details/78294562 1.默认使用ubuntu用户登录,密码为服务器配置时设置的密码,可在重置密码中修改 2. ...

  9. JAVA (字符串学习)

    String类 String类是不可改变的,所以你一旦创建了String对象,那它的值就无法改变了. 如果需要对字符串做很多修改,那么应该选择使用StringBuffer&StringBuil ...

  10. Java远程访问接口的几种方式

    一.Java访问远程url接口并获取结果 1.原生JavaAPI获取 package com.util; import java.io.DataOutputStream; import java.io ...