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. 【BZOJ1090】[SCOI2003]字符串折叠（动态规划）

    [BZOJ1090][SCOI2003]字符串折叠(动态规划) 题面 BZOJ 洛谷 题解 区间\(dp\).设\(f[i][j]\)表示压缩\([i,j]\)区间的最小长度.显然可以枚举端点转移.再 ...

  2. 洛谷 P2527 [SHOI2001]Panda的烦恼 解题报告

    P2527 [SHOI2001]Panda的烦恼 题目描述 panda是个数学怪人,他非常喜欢研究跟别人相反的事情.最近他正在研究筛法,众所周知,对一个范围内的整数,经过筛法处理以后,剩下的全部都是质 ...

  3. 【CF675D】Tree Construction

    题目大意:给定一个有 N 个数组成的序列,在此基础上构建一棵二叉排序树,求每个节点(根节点除外)的父节点的编号是多少. 题解:首先,根据二叉排序树的不稳定性,直接模拟构建二叉排序树肯定会超时,因此需要 ...

  4. SSM框架的搭建与测试

    关于框架的搭建无非就是 框架所依赖的jar包,然后就是关于各个框架的配置文件: 下面我们来看下不同层的依赖的jar包以及各个配置文件: 首先pojo这一层只需要依赖parent聚合工程 mapper层 ...

  5. python的内置模块random随机模块方法详解以及使用案例（五位数随机验证码的实现）

    1.random(self): Get the next random number in the range [0.0, 1.0) 取0到1直接的随机浮点数 import random print( ...

  6. webpack开发小总结

    webpack开发前端的时候往往是单独自己的服务器: 1.express 带上 webpack-dev-middleware(自己实现了热更新,而且在memory-fileSystem,不会产生多余文 ...

  7. 初学Python-搞了一个linux用户登录监测小工具

    这几天突发奇想,想学习一下Python.看了点基础,觉得有点枯燥,所以想搞点什么.想了想,就随便弄个检测Linux用户登录的小工具吧~ 首先,明确一下功能: 1.能够捕获 linux 用户登录的信息. ...

  8. Spark记录-org.apache.spark.sql.hive.HiveContext与org.apache.spark.sql.SQLContext包api分析

    HiveContext/SQLContext val hiveContext=new HiveContext(new SparkContext(new SparkConf().setAppName(& ...

  9. Java 在匿名内部函数中为外部函数变量赋值的解决方案

    Java匿名内部函数本人不怎么主动使用,但是经常会调用一些API,其中会调用一些接口,而这些接口是需要使用匿名内部类来实现的,于是就遇到了一些问题. 就比如okHttp3 的接口调用 OkHttpCl ...

  10. AngularJs -- 模 块

    在JavaScript中,将函数代码全部定义在全局命名空间中绝对不是什么好主意,这样做会导致冲突从而是调试变得非常困难,浪费宝贵的时间. 上一章介绍数据绑定时,就是写在全局命名空间中定义的函数. 在A ...