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...) 一.菜单实例 最开始的界面: 点击菜单三后的界面: < ...
随机推荐
- android allowbackup
allowbackup 属性是在application 节点下,作用的设置为true,人们可以通过adb 命令备份一份应用的信息,然后在另外一个设备上,还原这份信息,是一种危险操作,所以,我们一般设为 ...
- Python异常处理和进程线程-day09
写在前面 上课第九天,打卡: 最坏的结果,不过是大器晚成: 一.异常处理 - 1.语法错误导致的异常 - 这种错误,根本过不了python解释器的语法检测,必须在程序运行前就修正: - 2.逻辑上的异 ...
- 〖C语言学习笔记 〗(二) 数据类型
前言 本文为c语言的学习笔记,很多只是留下来占位的 数据类型 助记:变量就是在内存中挖个坑并给这个坑命名,而数据类型就是挖内存的坑的尺寸 基础类型 整数类型: short int int long i ...
- VMware WorkStation9.0 安装centos-6.4
1,设置虚拟机内存为8G时,启动报内存不足错误: Not enough physical memory is available to power on this virtual machine 解决 ...
- android 简单文件操作
1.布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:too ...
- js 将很长的内容进行页面分页显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Linux - 包不同安装方式
rpm 软件包管理器 安装编译包好的二进制包 方式 rpm -ivh lynx # rpm安装 rpm -e lynx # 卸载包 rpm -e lynx --nodeps # 强制卸载 rpm -q ...
- luogu P4160 [SCOI2009]生日快乐
传送门 考虑因为每个人的蛋糕体积要相等,如果切了一刀,那么要使得分当前蛋糕的人根据分成的两部分蛋糕的体积分成两部分人,所以假设当前有n人,切的这一刀要是在x或y的\(\frac{k}{n}(k\in ...
- luogu P1070 道路游戏
传送门 这里设\(f_i\)表示时刻\(i\)的答案 转移的话在\([i-p+1,i-1]\)之间枚举j,然后考虑从哪个点走过来 复杂度为\(O(n^3)\) // luogu-judger-enab ...
- 【BUG】xml读取异常Invalid byte 1 of 1-byte UTF-8 sequence
来自http://blog.csdn.net/chenyanbo/article/details/6866941 xml读取异常Invalid byte 1 of 1-byte UTF-8 seque ...