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...) 一.菜单实例 最开始的界面: 点击菜单三后的界面: < ...
随机推荐
- 虚拟机下Linux(终端)配置网络的方法
这几天在虚拟机vmware上部署centos系统,想通过内部联网用yum命令安装必需的软件,但是一直不能静态地址联网,今天终于找到一个方法centos内部设置IP,对外联网.设置过程如下: .首先是网 ...
- 动态规划之Fib数列类问题应用
一,问题描述 有个小孩上楼梯,共有N阶楼梯,小孩一次可以上1阶,2阶或者3阶.走到N阶楼梯,一共有多少种走法? 二,问题分析 DP之自顶向下分析方式: 爬到第N阶楼梯,一共只有三种情况(全划分,加法原 ...
- JAVA实现具有迭代器的线性表(单链表)
一,迭代器的基本知识: 1,为什么要用迭代器?(迭代:即对每一个元素进行一次“问候”) 比如说,我们定义了一个ADT(抽象数据类型),作为ADT的一种实现,如单链表.而单链表的基本操作中,大部分需要用 ...
- 18. Spring Boot 、注册Servlet三大组件Servlet、Filter、Listener
由于SpringBoot默认是以jar包的方式启动嵌入式的Servlet容器来启动SpringBoot的web应用,没有web.xml文件 public class MyServlet extends ...
- buildroot构建项目（三）--- u-boot 2017.11 适配开发板修改 1
当前虽然编译成功了,但是对于我们自己的目标板并不太适用.还得做一系列得修改. 一.lds 文件分析 u-boot 中最重要得链接文件即是,u-boot.lds.我们可以查看我们编译出来得 u-boot ...
- javaScript之表格操作<一:新增行>
DOM表格系列操作 /** * 添加表格行 * @function 本接口可以用于:在表格tbody部分新增任意数量,任意样式的行HTML结构; * @name addTableLines * @au ...
- BZOJ:1816 [Cqoi2010]扑克牌 （贪心或二分答案）
题面 \(solution:\) 这道题难就难在你能否读懂题目的意思,我们将它翻译一下: 现在我有n根竹子(每根竹子有\(c_i\)节,每节竹子高度为1),我可以通过消耗一点法力值使某一根竹子的某两节 ...
- 设置PHPStorm 注释
/** * Desc: xxx#if (${NAME}) * Class: ${NAME}#end#if (${NAMESPACE}) * Package: ${NAMESPACE}#end * Us ...
- C - Musical Theme （后缀数组）
题目链接:https://cn.vjudge.net/contest/283743#problem/C 题目大意:给你n个数组,然后问你是否有多个“相似”且不重叠的子串的长度大于等于5(两个子串相似当 ...
- python - wmi模块学习(windwos硬件信息获取)
获取windows操作系统的硬件信息 #!/usr/bin/env python # -*- coding: utf-8 -*- # http://www.cnblogs.com/liu-ke/ im ...