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. 洛谷 P4112 [HEOI2015]最短不公共子串 解题报告

    P4112 [HEOI2015]最短不公共子串 题目描述 在虐各种最长公共子串.子序列的题虐的不耐烦了之后,你决定反其道而行之. 一个串的"子串"指的是它的连续的一段,例如bcd是 ...

  2. python之旅：异常处理

    一 什么是异常 异常就是程序运行时发生错误的信号(在程序出现错误时,则会产生一个异常,若程序没有处理它,则会抛出该异常,程序的运行也随之终止),在python中,错误触发的异常如下 一个异常分为三部分 ...

  3. 日志备份的shell脚本

    以前工作中写的日志备份的脚本,现记录一下日志备份脚本代码,以后工作中遇到遇到需要备份或者清理日志的时候可以拿来简单修改一下使用,减少工作量. 把备份脚本添加到Linux定时任务中,可以定时执行. 日志 ...

  4. Javascript面向

    一.前言 面向对象:专注于由哪一个对象来解决这个问题,编程特点是出现了一个类,从类中拿到对象,由这个对象去解决具体问题.       对于调用者来说,面向过程需要调用者自己去实现各种函数.而面向对象, ...

  5. P3089 [USACO13NOV]POGO的牛Pogo-Cow

    P3089 [USACO13NOV]POGO的牛Pogo-Cow FJ给奶牛贝西的脚安装上了弹簧,使它可以在农场里快速地跳跃,但是它还没有学会如何降低速度. FJ觉得让贝西在一条直线的一维线路上进行练 ...

  6. css拾遗（一）（inline-block,absolute）

    一:inline-block中不要嵌套其他block标签,不然会破坏布局 <style> .left{ float:left; } .hide{ display:none; } a{ di ...

  7. spring JMS在接收消息的时候总是报错

    spring JMS在接收消息的时候总是报错 org.springframework.jms.UncategorizedJmsException: Uncategorized exception oc ...

  8. [整理]win7下VS2010遇到内存不足解决方发

    电脑重装Win7 64bit不久后,一天内VS2010使用久了,就会出现内存不足,实际内存使用情况却不是,显示内存已使用70%.以前没有遇到过,经网上查找,貌似是VS2010对内存计算会在某些情况下计 ...

  9. HTML5 defer和async的区别

    在HTML页面中插入Javascript的主要方法,就是使用<script>元素.这个元素由Netscape创造并在Netscape Navigator 2中首先实现.后来,这个元素就被加 ...

  10. Spring Mvc Web 配置拦截规则与访问静态资源 (三)

    拦截规则配置 1. *.do <!-- Processes application requests --> <servlet> <servlet-name>app ...