day17--JQuery实例
1、表格选择框--全选，反选，取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="checkAll();"/>
<input type="button" value="反选" onclick="reverseAll();"/>
<input type="button" value="取消" onclick="cancleAll();"/>
<table border="">
<thead>
<tr><th>选项</th><th>IP</th><th>端口</th></tr>
</thead>
<tbody id="i1">
<tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
<tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
<tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
<tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
<tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll(){
$("#i1 :checkbox").prop('checked', true);
}
function cancleAll(){
$('#i1 :checkbox').prop('checked',false);
}
function reverseAll(){
$('#i1 :checkbox').each(function(){
//this，代指当前循环的每一个元素
//k是循环的下标
//console.log($(this));
if(this.checked){this.checked=false} else{
this.checked=true
};
})
} </script>
</body>
</html>
上面HTML代码中，this代指每次的循环，this.checked判断标签是否被选中，选中则为true；未选中则为false。$().prop()设置隐藏，显示，选中或未选中。prop("checked",true) prop("checked",false) prop("disable",none)设置隐藏。
下面通过JQuery来实现，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="checkAll();"/>
<input type="button" value="反选" onclick="reverseAll();"/>
<input type="button" value="取消" onclick="cancleAll();"/>
<table border="">
<thead>
<tr><th>选项</th><th>IP</th><th>端口</th></tr>
</thead>
<tbody id="i1">
<tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
<tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
<tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
<tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
<tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll(){
$("#i1 :checkbox").prop('checked', true);
}
function cancleAll(){
$('#i1 :checkbox').prop('checked',false);
}
function reverseAll(){
$('#i1 :checkbox').each(function(){
//this，代指当前循环的每一个元素
//k是循环的下标
//console.log($(this));
//if(this.checked){this.checked=false} else{
//this.checked=true
//};
if($(this).prop('checked')){
$(this).prop('checked',false);
} else{
$(this).prop('checked',true);
};
})
} </script>
</body>
</html>
$().prop("checked")，一个参数代表获取值，判断是选定，checked的话，返回true；否则返回false；$().prop("checked",true)代表设置值。
三元运算，即判断，var v = 条件(true)?false:true 如果条件为真(true)，则v=false；否则条件为假(false)，则v=true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="checkAll();"/>
<input type="button" value="反选" onclick="reverseAll();"/>
<input type="button" value="取消" onclick="cancleAll();"/>
<table border="">
<thead>
<tr><th>选项</th><th>IP</th><th>端口</th></tr>
</thead>
<tbody id="i1">
<tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
<tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
<tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
<tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
<tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td></td></tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll(){
$("#i1 :checkbox").prop('checked', true);
}
function cancleAll(){
$('#i1 :checkbox').prop('checked',false);
}
function reverseAll(){
$('#i1 :checkbox').each(function(){
//this，代指当前循环的每一个元素
//k是循环的下标
//console.log($(this));
//if(this.checked){this.checked=false} else{
//this.checked=true
//};
// if($(this).prop('checked')){
// $(this).prop('checked',false);
// } else{
// $(this).prop('checked',true);
// };
//三元运算
//var v = 条件为真，真值，假值,如果为真，则设置为false；如果为假，则设置为真
var v = $(this).prop('checked')?false:true;
$(this).prop('checked',v);
})
} </script>
</body>
</html>
上面三元运算中，$().条件?false:true；false一定要写在前面，如果为真，则为false；如果为假，则为真；
实例二、下拉内容点击展开，关闭的操作，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
background-color:black;
color:wheat;
}
.content{
min-height:50px;
}
.hide{
display:none;
}
</style>
</head>
<body>
<div style="height:400px;width:200px;border:1px solid #dddddd">
<div class="item">
<div class="header">标题1</div>
<div class="content">内容1</div>
</div>
<div class="item">
<div class="header">标题2</div>
<div class="content hide">内容2</div>
</div>
<div class="item">
<div class="header">标题3</div>
<div class="content hide">内容3</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
//click是给选定的标签绑定一个点击事件，所有选中的标签
$(".header").click(function(){
//获取当前点击的标签$(this)
//点击的去掉hide,没有点击的加上hide,隐藏标签
//获取某个标签的下一个标签
//获取某个标签的父标签
//获取所有的兄弟标签
//this是DOM对象
//$().addClass('hide') 添加class属性，如果存在，则不会添加.内部自动加循环，每个自动循环添加
//$().removeClass("hide") 删除标签中的class属性值
//筛选器$().next()当前标签的下一个标签
//$(this).next().removeClass('hide');
$//(this).parent().siblings().find('.content').addClass('hide');
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
//$(this).next().removeClass('hide').parent().siblings().children('.content').addClass('hide');等价与上面
//JQuery支持链式编程 //find()是查找标签下面的标签，等价与($("p span")==>$('p').find('span')等价与空格 }) </script> </body> </html>
$().find()是查找子标签满足条件的标签，
day17--JQuery实例的更多相关文章
- jQuery实例——jQuery实现联动下拉列表查询框--转http://www.cnblogs.com/picaso/archive/2012/04/08/2437442.html#undefined
jQuery实例--jQuery实现联动下拉列表查询框 在查询与列表显示的时候经常用到联动列表显示,比如一级选项是国家,二级选项是省,三级是市,这样的联动是联系的实时导出的,比如你不可能选择了四川 ...
- 值得 Web 开发人员学习的20个 jQuery 实例教程
这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...
- jQuery使用（十一）：jQuery实例遍历与索引
each() children() index() 一.jQuery实例遍历方法each() jQuery实例上的each()方法规定要运行的函数,并且给函数传入两个参数:index,element. ...
- 基础 jQuery 实例
基础 jQuery 实例 jQuery 原则: 由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护: 把所有 jQuery 代码置于事件处理函 ...
- 三种动态加载js的jquery实例代码另附去除js方法
!-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...
- python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式
python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...
- JSON和JSONP （含jQuery实例）（share）
来源:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 前言: 说到AJAX就会不可避免的面临两个问 ...
- jQuery实例属性和方法
jQuery.fn = jQuery.prototype = { //添加实例属性和方法 jquery : 版本 constructor : 修正指向问题 init() : 初始化和参数 ...
- JSONP 含jquery 实例
前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Soc ...
- 【前端】:jQuery实例
前言: 今天2月最后一天,写一篇jQuery的几个实例,算是之前前端知识的应用.写完这篇博客会做一个登陆界面+后台管理(i try...) 一.菜单实例 最开始的界面: 点击菜单三后的界面: < ...
随机推荐
- Socket 连接建立过程
阻塞模式下: 1,客户端向服务器端发起请求建立连接时,服务器端只需要运行到 serverSocket = ); 客户端注册的 SelectionKey.OP_CONNECT 事件就能够发生. 也就是 ...
- jquery 兼容的滚轮事件
// jquery 兼容的滚轮事件 $(document).on("mousewheel DOMMouseScroll", function (e) { ? : -)) || // ...
- java程序在windows后台执行的办法
1.新建run.txt文件 2.在文件中输入一下内容: @echo off start javaw -jar xx.jar exit 3.保存,修改文件名为run.bat4.双击即可 5.删除wind ...
- DNS缓存欺骗攻击
1.受影响的无线网络设备 一些D-link.TP-Link.Belkin.Linksys及IPTime等品牌无线路由器存在安全隐患. 2.漏洞描述 攻击者向DNS服务器注入非法网络域名地址,如果服务器 ...
- 20155332 2016-2017-2 《Java程序设计》第9周学习总结
20155332 2016-2017-2 <Java程序设计>第9周学习总结 教材学习内容总结 了解JDBC架构 掌握JDBC架构 掌握反射与ClassLoader 了解自定义泛型和自定义 ...
- linux matlab2016 安装
1. 下载Matlab 2016b 下载文件夹中包含三个文件:Matlab 2016b Linux64 Crack.rar,R2016b_glnxa64_dvd1.iso,R2016b_glnxa64 ...
- Node.jsでMySQLを使うメモ
インストール npm install mysql コネクション var mysql = require('mysql'); var connection = mysql.createConnectio ...
- Paramiko 操作远端时无法切换目录的问题
最近在用Paramiko 开发一款远程测试调试框架,结果发现目录怎么都无法切换,查了下原因,在http://bbs.chinaunix.net/thread-1675446-1-1.html看到了 P ...
- activemq 消息类型
//文本消息 TextMessage textMessage = session.createTextMessage("文本消息"); producer.send(textMess ...
- Flutter学习笔记与整合
1.Dart 面向对象语言,与java类比学习 非常适合移动和Web应用程序 1.dart官网 2.Dark2 中文文档 3.Dart语法学习 4.极客学院Dart学习 5.Flutter与Dart ...