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...) 一.菜单实例 最开始的界面: 点击菜单三后的界面: < ...
随机推荐
- C# 实现Bezier曲线（vs2008）
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- String类型的方法总结
String :字符串对象的包装类型 var stringObject = new String("wanglehui"); 方法总结: 1.返回该对象表示的基本字符串值(也就是返 ...
- Python数据分析学习目录
python数据分析学习目录 Anaconda的安装和更新 矩阵NumPy pandas数据表 matplotlib-2D绘图库学习目录
- yolov3实践（一）
很多博友看了我的第一篇博客yolo类检测算法解析——yolo v3,对其有了一定的认识和了解,但是并没有贴出代码和运行效果,略显苍白.因此在把篇博客理论的基础上,造就了第一篇实践文章,也就是本文.只要 ...
- Linux下搭建gtk+2.0开发环境
安装gtk2.0 sudo apt-get install libgtk2.0-dev 查看 2.x 版本 pkg-config --modversion gtk+-2.0 #有可能需要sudo ap ...
- java字符串集合
一,java的接口跟C语言所能做到的相比确实是让人眼前一亮的东西.利用接口可以将多种东西放到一起,在编程过程中就能省略掉相同类的很多重复代码,将代码进行分类别的,统一的处理. 二,java中的字符串处 ...
- python manage.py syncdb Unknown command: 'syncdb'问题解决方法
在django1.9后的版本中,python manage.py syncdb命令修改为python manage.py migrate,执行正常. 选择sqlite可视化sqlitestudio-3 ...
- strstr函数字符串匹配问题
题目链接:http://acm.sdut.edu.cn/onlinejudge2/index.php/Home/Index/problemdetail/pid/2772.html AC代码: #inc ...
- ES系列四、ES6.3常用api之文档类api
1.Index API: 创建并建立索引 PUT twitter/tweet/ { "user" : "kimchy", "post_date&quo ...
- nagios系列(四)之nagios主动方式监控tcp常用的80/3306等端口监控web/syncd/mysql及url服务
nagios主动方式监控tcp服务web/syncd/mysql及url cd /usr/local/nagios/libexec/ [root@node4 libexec]# ./check_tcp ...