1、表格选择框--全选，反选，取消

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <input type="button" value="全选" onclick="checkAll();"/>
  9.     <input type="button" value="反选" onclick="reverseAll();"/>
  10.     <input type="button" value="取消" onclick="cancleAll();"/>
  11.     <table border="">
  12.         <thead>
  13.             <tr><th>选项</th><th>IP</th><th>端口</th></tr>
  14.         </thead>
  15.         <tbody id="i1">
  16.             <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
  17.             <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
  18.             <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
  19.             <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
  20.             <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
  21.         </tbody>
  22.     </table>
  23.     <script src="jquery-1.12.4.js"></script>
  24.     <script>
  25.         function checkAll(){
  26.             $("#i1 :checkbox").prop('checked', true);
  27.         }
  28.         function cancleAll(){
  29.             $('#i1 :checkbox').prop('checked',false);
  30.         }
  31.         function reverseAll(){
  32.             $('#i1 :checkbox').each(function(){
  33.                 //this，代指当前循环的每一个元素
  34.                 //k是循环的下标
  35.                 //console.log($(this));
  36.                 if(this.checked){this.checked=false} else{
  37.                     this.checked=true
  38.                 };
  39.             })
  40.         }
  41.  
  42.     </script>
  43. </body>
  44. </html>

上面HTML代码中，this代指每次的循环，this.checked判断标签是否被选中，选中则为true；未选中则为false。$().prop()设置隐藏，显示，选中或未选中。prop("checked",true)   prop("checked",false)   prop("disable",none)设置隐藏。

　下面通过JQuery来实现，如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <input type="button" value="全选" onclick="checkAll();"/>
  9.     <input type="button" value="反选" onclick="reverseAll();"/>
  10.     <input type="button" value="取消" onclick="cancleAll();"/>
  11.     <table border="">
  12.         <thead>
  13.             <tr><th>选项</th><th>IP</th><th>端口</th></tr>
  14.         </thead>
  15.         <tbody id="i1">
  16.             <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
  17.             <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
  18.             <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
  19.             <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
  20.             <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
  21.         </tbody>
  22.     </table>
  23.     <script src="jquery-1.12.4.js"></script>
  24.     <script>
  25.         function checkAll(){
  26.             $("#i1 :checkbox").prop('checked', true);
  27.         }
  28.         function cancleAll(){
  29.             $('#i1 :checkbox').prop('checked',false);
  30.         }
  31.         function reverseAll(){
  32.             $('#i1 :checkbox').each(function(){
  33.                 //this，代指当前循环的每一个元素
  34.                 //k是循环的下标
  35.                 //console.log($(this));
  36.                 //if(this.checked){this.checked=false} else{
  37.                     //this.checked=true
  38.                 //};
  39.                 if($(this).prop('checked')){
  40.                     $(this).prop('checked',false);
  41.                 } else{
  42.                     $(this).prop('checked',true);
  43.                 };
  44.             })
  45.         }
  46.  
  47.     </script>
  48. </body>
  49. </html>

　$().prop("checked")，一个参数代表获取值，判断是选定，checked的话，返回true；否则返回false；$().prop("checked",true)代表设置值。

三元运算，即判断，var v = 条件(true)?false:true   如果条件为真(true)，则v=false；否则条件为假(false)，则v=true

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <input type="button" value="全选" onclick="checkAll();"/>
  9.     <input type="button" value="反选" onclick="reverseAll();"/>
  10.     <input type="button" value="取消" onclick="cancleAll();"/>
  11.     <table border="">
  12.         <thead>
  13.             <tr><th>选项</th><th>IP</th><th>端口</th></tr>
  14.         </thead>
  15.         <tbody id="i1">
  16.             <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
  17.             <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
  18.             <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
  19.             <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
  20.             <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
  21.         </tbody>
  22.     </table>
  23.     <script src="jquery-1.12.4.js"></script>
  24.     <script>
  25.         function checkAll(){
  26.             $("#i1 :checkbox").prop('checked', true);
  27.         }
  28.         function cancleAll(){
  29.             $('#i1 :checkbox').prop('checked',false);
  30.         }
  31.         function reverseAll(){
  32.             $('#i1 :checkbox').each(function(){
  33.                 //this，代指当前循环的每一个元素
  34.                 //k是循环的下标
  35.                 //console.log($(this));
  36.                 //if(this.checked){this.checked=false} else{
  37.                     //this.checked=true
  38.                 //};
  39. //                if($(this).prop('checked')){
  40. //                    $(this).prop('checked',false);
  41. //                } else{
  42. //                    $(this).prop('checked',true);
  43. //                };
  44.                 //三元运算
  45.                 //var v = 条件为真，真值，假值,如果为真，则设置为false；如果为假，则设置为真
  46.                 var v = $(this).prop('checked')?false:true;
  47.                 $(this).prop('checked',v);
  48.             })
  49.         }
  50.  
  51.     </script>
  52. </body>
  53. </html>

上面三元运算中，$().条件?false:true；false一定要写在前面，如果为真，则为false；如果为假，则为真；

　实例二、下拉内容点击展开，关闭的操作，如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .header{
  8.             background-color:black;
  9.             color:wheat;
  10.         }
  11.         .content{
  12.             min-height:50px;
  13.         }
  14.         .hide{
  15.             display:none;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div style="height:400px;width:200px;border:1px solid #dddddd">
  21.         <div class="item">
  22.             <div class="header">标题1</div>
  23.             <div class="content">内容1</div>
  24.         </div>
  25.         <div class="item">
  26.             <div class="header">标题2</div>
  27.             <div class="content hide">内容2</div>
  28.         </div>
  29.         <div class="item">
  30.             <div class="header">标题3</div>
  31.             <div class="content hide">内容3</div>
  32.         </div>
  33.     </div>
  34.     <script src="jquery-1.12.4.js"></script>
  35.     <script>
  36.         //click是给选定的标签绑定一个点击事件，所有选中的标签
  37.         $(".header").click(function(){
  38.             //获取当前点击的标签$(this)
  39.             //点击的去掉hide,没有点击的加上hide,隐藏标签
  40.             //获取某个标签的下一个标签
  41.             //获取某个标签的父标签
  42.             //获取所有的兄弟标签
  43.             //this是DOM对象
  44.             //$().addClass('hide')  添加class属性，如果存在，则不会添加.内部自动加循环，每个自动循环添加
  45.             //$().removeClass("hide")  删除标签中的class属性值
  46.             //筛选器$().next()当前标签的下一个标签
  47.             //$(this).next().removeClass('hide');
  48.             $//(this).parent().siblings().find('.content').addClass('hide');
  49.             $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
    　　　　　　　//$(this).next().removeClass('hide').parent().siblings().children('.content').addClass('hide');等价与上面
  1. //JQuery支持链式编程 //find()是查找标签下面的标签，等价与($("p span")==>$('p').find('span')等价与空格  }) </script> </body> </html>

$().find()是查找子标签满足条件的标签，

day17--JQuery实例的更多相关文章

  1. jQuery实例——jQuery实现联动下拉列表查询框--转http://www.cnblogs.com/picaso/archive/2012/04/08/2437442.html#undefined

    jQuery实例--jQuery实现联动下拉列表查询框   在查询与列表显示的时候经常用到联动列表显示,比如一级选项是国家,二级选项是省,三级是市,这样的联动是联系的实时导出的,比如你不可能选择了四川 ...

  2. 值得 Web 开发人员学习的20个 jQuery 实例教程

    这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...

  3. jQuery使用（十一）：jQuery实例遍历与索引

    each() children() index() 一.jQuery实例遍历方法each() jQuery实例上的each()方法规定要运行的函数,并且给函数传入两个参数:index,element. ...

  4. 基础 jQuery 实例

    基础 jQuery 实例 jQuery 原则: 由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护: 把所有 jQuery 代码置于事件处理函 ...

  5. 三种动态加载js的jquery实例代码另附去除js方法

    !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...

  6. python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式

    python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...

  7. JSON和JSONP （含jQuery实例）（share）

    来源:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 前言: 说到AJAX就会不可避免的面临两个问 ...

  8. jQuery实例属性和方法

    jQuery.fn = jQuery.prototype = {  //添加实例属性和方法   jquery : 版本   constructor : 修正指向问题   init() : 初始化和参数 ...

  9. JSONP 含jquery 实例

     前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Soc ...

  10. 【前端】:jQuery实例

    前言: 今天2月最后一天,写一篇jQuery的几个实例,算是之前前端知识的应用.写完这篇博客会做一个登陆界面+后台管理(i try...) 一.菜单实例 最开始的界面: 点击菜单三后的界面: < ...

随机推荐

  1. 六道JavaScript测验题

    1.找出数字数组中最大的元素(使用Match.max函数) var a=[123,23432,345,3,34]; console.log(Math.max.apply(null,a)); 2.转化一 ...

  2. JavaScript之DOM概念

    一.DOM概念 1.DOM是什么? 1.1 起源.DOM起源于Netscape与Microsoft 公司的DHTML(动态HTML). 1.2 名词解释.Document Object Model,文 ...

  3. UE4中Bebavior Tree中Delay及其后面代码失效的原因

    具体原因是因为节点的执行过程中,该节点及其父节点的Decorator条件不满足,而节点又受到flow control的影响,导致中途强制结束了Task节点的执行,具体如下. UE4中的Behavior ...

  4. 第16月第24天 find iconv sublime utf-8

    1. find . -type f -exec echo {} \; find src -type f -exec sh -c "iconv -f GB18030 -t UTF8 {} &g ...

  5. D - 文理分科 HYSBZ - 3894(最小割)

    题目链接:https://cn.vjudge.net/contest/281959#problem/D 题目大意:中文题目 具体思路: 首先说一下最小割:在最小代价的前提下,删除一些边之后,能够使得整 ...

  6. js中，for循环里面放ajax，ajax访问不到变量以及每次循环获取不到数据问题总结

    想在点击"终端控制"的时候能够开启多个窗口对多个终端进行管理: /**提交事件**/ $("#terminalControl").bind("clic ...

  7. ssh Jetson tk1

    背景: 因为TK1要放到智能车上,不方便打开roscore和各个节点,因此需要PC远程控制. 方法: 在PC端用ssh命令登录: (1)命令sudo ssh tegra-ubuntu.local(te ...

  8. Windows和Mac上NodeJS和Express的安装

    一.安装NodeJS,官网上下载,https://nodejs.org/en/ 直接下一步安装就行了. 打开命令行工具,输入 node -v 则会出现node的版本,则成功了. 下面我们介绍如何安装e ...

  9. aliyun添加数据盘parted方式分区格式化和lvm挂载及数据盘的扩容

    一.普通磁盘分区管理方式 1.对磁盘进行分区 列出磁盘 # fdisk -l # fdisk /dev/vdb Welcome to fdisk (util-linux 2.23.2). Change ...

  10. HTTP基础知识2

    引言 HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW中使用的是HTTP/1. ...