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...) 一.菜单实例 最开始的界面: 点击菜单三后的界面: < ...
随机推荐
- Mac改键软件Karabiner使用教程
Mac改键软件Karabiner使用教程 目前Mac上比较好用的改键软件是Karabiner,不过对于最新的Sierra系统,Karabiner失效了.这里介绍的实际上是Karabiner-Eleme ...
- 51nod1222 最小公倍数计数
题目来源: Project Euler 基准时间限制:6 秒 空间限制:131072 KB 分值: 640 定义F(n)表示最小公倍数为n的二元组的数量. 即:如果存在两个数(二元组)X,Y(X & ...
- VS中空项目、win32项目、控制台程序的区别（转）
空项目,大多数想单纯创建c++工程的新同学,打开vs后很可能不知道选择创建什么工程,这时候请相信我,空项目是你最好的选择.因为空工程不包含任何的源代码文件,接下来你只需要在相应的源代码文件夹和头文件文 ...
- luogu P1600 天天爱跑步
传送门 1A此题暴祭 (下面记点\(x\)深度为\(de_x\),某个时间点记为\(w_x\)) 首先,每条路径是可以拆成往上和往下两条路径的 对于往上的路径,假设有个人往上跑,\(w_y\)在点\( ...
- luogu P2662 牛场围栏
传送门 因为一个木板可以切掉最多\(m\),所以可以先预处理哪些长度的木板可用,开个桶,然后对\([l-m,l]\)打标记,再把打了标记的数取出来 假设可用长度\(a_1,a_2,,,a_n\)从小到 ...
- luogu P2900 [USACO08MAR]土地征用Land Acquisition
写这道题时,预处理部分少打了等号,吓得我以为斜率优化错了或者被卡精了 mmp 首先有一个很明显的结论(逃),就是一个土地如果长(\(x\))与宽(\(y\))都比另一个土地小,那么这个土地一定可以跟那 ...
- 第16月第15天 glut
1. https://tokoik.github.io/opengl/libglut.html https://github.com/wistaria/wxtest/tree/master/C htt ...
- idea的起步配置
工欲善其事,必先利其器 1.安装 https://www.jetbrains.com/idea/download/#section=windows 可以选择不同平台的安装包,版本一般Ultimate, ...
- drozer工具的安装与使用：之二使用篇
如果英文好的同学可以直接查看官方文档 官方文档连接:https://labs.mwrinfosecurity.com/assets/BlogFiles/mwri-drozer-user-guide ...
- 2018-2019-2 网络对抗技术 20165227 Exp2 后门原理与实践
2018-2019-2 网络对抗技术 20165227 Exp2 后门原理与实践 (1)例举你能想到的一个后门进入到你系统中的可能方式? 接收邮件的方式 (2)例举你知道的后门如何启动起来(win及l ...