jQuery经典案例
示例1：鼠标点击左侧菜单实现打开和关闭功能：
html及css代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
/*css代码*/
<style>
/*下面定义的样式是隐藏*/
.hide {
display: none;
}
</style>
</head>
<div>
<div onclick="Change(this);">菜单一</div>
<div class="content hide">
<div>一</div>
<div>二</div>
<div>三</div>
</div>
</div>
<div>
<div onclick="Change(this);">菜单二</div>
<div class="content hide">
<div>一</div>
<div>二</div>
<div>三</div>
</div>
</div>
<div>
<div onclick="Change(this);">菜单三</div>
<div class="content hide">
<div>一</div>
<div>二</div>
<div>三</div>
</div>
</div>
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/tab.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
js 代码如下：
function Change(arg){
//选择器案列：
/*找到，到底点击一个
var t=$(arg).text();
$(arg) 当前点击的标签
*/
/*
隐藏闭合标签步骤：
1找到下一个标签，移除hide 【注意：hide 是自己定义的class样式】
1）$(arg).next() 下一个标签
2）removeClass('hide') 移除标签
2.找到其他标签，将内容隐藏，添加hide
1）当前标签的父亲标签 $(arg).parent()
2) 所有父亲标签的兄弟标签 $(arg).parent('content').siblings('hide') 【注意：content 是每个子标签共有的一个样式】
*/
$(arg).next().removeClass('hide');
$(arg).parent().siblings().find('.content').addClass('hide');
}
示例2：实现全选、反选、取消 功能：
html及css代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
/*CSS代码*/
<style>
.subBorder {
position: fixed;
left: 50%;
right: 50%;
width: 400px;
height: 200px;
margin: 0 auto;
background: #999999;
}
.hide {
display: none;
}
#dialog form {
text-align: center;
}
</style>
</head>
<input type="button" onclick="CheckAll();" value="全选" />
<input type="button" onclick="CheckReverse();" value="反选" />
<input type="button" onclick="CheckCancel();" value="取消" />
<table border="2">
<thead></thead>
<tbody id="tb1">
<tr>
<td><input type="checkbox" /></td>
<td>mysql-001</td>
<td>10.10.8.10</td>
<td>15379</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>redis-001</td>
<td>10.10.9.10</td>
<td>16379</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>monitor-001</td>
<td>10.10.10.10</td>
<td>17379</td>
</tr>
</tbody>
</table>
<div id="dialog" class="subBorder hide">
<form action="" method="get">
<p>主机名：<input type="text" id="hostname"/></p>
<p>ip地址：<input type="text" id="ip" /></p>
<p>端口号：<input type="text" id="port"/></p>
<input type="submit" onclick="return SubmitForm();" value="确认"/>
<input type="button" onclick="Cancel();" value="取消"/>
</form>
</div>
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/checked.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
js 代码如下：
//全选
function CheckAll(){
//$('#tb1').find(':checkbox').attr('checked','checked');
$('#tb1').find(':checkbox').prop('checked',true);
}
//反选
function CheckReverse(){
//找，如果选中，取消，位选中，则选中
$('#tb1').find(':checkbox').each(function(){
//$(this) 等于 每一个复选框
//$(this).prop() 如果选中，true，否则false
//attr 如果选中，checked，checked=checked
if($(this).prop('checked')){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
});
}
function CheckCancel(){
//$('#tb1').find(':checkbox').removeAttr('checked'); <==>
$('#tb1').find(':checkbox').prop('checked',false);
}
示例3：实现弹出编辑对话框及编辑功能：
html及css代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
/*css代码*/
<style>
.subBorder {
position: fixed;
left: 50%;
right: 50%;
width: 400px;
height: 200px;
margin-left: -200px;
margin-bottom: -100px;
background: #999999;
}
.hide {
display: none;
}
#dialog form {
text-align: center;
}
</style>
</head>
<table border="2">
<thead></thead>
<tbody>
<tr>
<td>mysql-001</td>
<td>10.10.8.10</td>
<td>15379</td>
<td onclick="GetPrev(this);">编辑</td>
</tr>
<tr>
<td>redis-001</td>
<td>10.10.9.10</td>
<td>16379</td>
<td onclick="GetPrev(this);">编辑</td>
</tr>
<tr>
<td>monitor-001</td>
<td>10.10.10.10</td>
<td>17379</td>
<td onclick="GetPrev(this);">编辑</td>
</tr>
</tbody>
</table>
<div id="dialog" class="subBorder hide">
<form action="" method="get">
<p>主机名：<input type="text" id="hostname"/></p>
<p>ip地址：<input type="text" id="ip" /></p>
<p>端口号：<input type="text" id="port"/></p>
<input type="submit" onclick="return SubmitForm();" value="确认"/>
<input type="button" onclick="Cancel();" value="取消"/>
</form>
</div>
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/edit.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
js 代码如下：
function GetPrev(getvalue){
var list = [];
$.each($(getvalue).prevAll(),function(i){
var item = $(getvalue).prevAll()[i];
var text = $(item).text();
list.push(text);
});
var new_list = list.reverse();
//在弹出框的hostname中设置值
$("#hostname").val(new_list[0]);
$("#ip").val(new_list[1]);
$("#port").val(new_list[2]);
$("#dialog").removeClass("hide");
}
function Cancel(){
$("#dialog").addClass("hide");
}
function SubmitForm(){
//获取表单中的input值，并在判断值是否为空
var ret=true;
//遍历所有的input，只要值为空，就将ret设置为false
//$("input[type='text']") <==> $(':text')
$(':text').each(function(){
//$(this) 等于要循环的每一个元素
var value=$(this).val();
if (value.trim().length==0){ //判断长度是否为0. 或判断是否为空：<==> if (value.itrm()=="") //trim: 去除空格
$(this).css('border-color','red'); //设置边框为红色（意思是：如果用户输入为空，则边框显示红色警示）
ret=false //设置false
}else{
$(this).css('border-color','green') //当输入不为空时，提交时将所有不为空的元素边框设置为绿色
}
});
return ret;
}
更多链接：http://www.cnblogs.com/wupeiqi/articles/4457274.html
jQuery经典案例的更多相关文章
- jQuery基础的工厂函数以及定时器的经典案例
1. jQuery的基本信息: 1.1 定义: jQuery是JavaScript的程序库之一,它是JavaScript对象和实用函数的封装, 1.2 作用: 许多使用JavaScript能实现的交 ...
- javascript的理解及经典案例
js的简介: JavaScript是一种能让你的网页更加生动活泼的程式语言,也是目前网页中设计中最容易学又最方便的语言. 你可以利用JavaScript轻易的做出亲切的欢迎讯息.漂亮的数字钟.有广告效 ...
- Linux运维之道（大量经典案例、问题分析，运维案头书，红帽推荐）
Linux运维之道(大量经典案例.问题分析,运维案头书,红帽推荐) 丁明一 编 ISBN 978-7-121-21877-4 2014年1月出版 定价:69.00元 448页 16开 编辑推荐 1 ...
- 经典案例：那些让人赞不绝口的创新 HTML5 网站
在过去的10年里,网页设计师使用 Flash.JavaScript 或其他复杂的软件和技术来创建网站.但现在你可以前所未有的快速.轻松地设计或创造互动的.有趣好看的网站.如何创建?答案是 HTML5 ...
- Altera OpenCL用于计算机领域的13个经典案例(转)
英文出自:Streamcomputing 转自:http://www.csdn.net/article/2013-10-29/2817319-the-application-areas-opencl- ...
- php中foreach()函数与Array数组经典案例讲解
//php中foreach()函数与Array数组经典案例讲解 function getVal($v) { return $v; //可以加任意检查代码,列入要求$v必须是数字,或过滤非法字符串等.} ...
- 阿里云资深DBA专家罗龙九:云数据库十大经典案例分析【转载】
阿里云资深DBA专家罗龙九:云数据库十大经典案例分析 2016-07-21 06:33 本文已获阿里云授权发布,转载具体要求见文末 摘要:本文根据阿里云资深DBA专家罗龙九在首届阿里巴巴在线峰会的&l ...
- 中国省市区地址三级联动jQuery插件 案例下载
中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...
- 经典案例之MouseJack
引言:在昨天的文章<无线键鼠监听与劫持>中,我们提到今天会向您介绍一个无线键鼠的监听与劫持的经典案例,<MouseJack>:MouseJack能利用无线鼠标和键盘存在的一些问 ...
随机推荐
- 一、Nginx安装手册
1 nginx安装环境 nginx是C语言开发,建议在linux上运行,本教程使用Centos6.5作为安装环境. gcc 安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没有g ...
- HTTP协议知多少-关于http1.x、http2、SPDY的相关知识
作为网站开发的基础协议,我们知道浏览器上都有输出http这四个字母,这意味着什么呢? 这就是最基础的HTTP协议. 逐浪君今天为各位大人准备了一些HTTP技术的知识,来和大家分享. 以下图为例: 这一 ...
- 201521123031 《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
- 201521123104《Java程序设计》第1周学习总结
1. 本章学习总结 1.初步了解了什么是Java,以及该如何编写简单的Java程序: 2.认识到相比于C和C++来说,Java更复杂一些,所以学习要花费更大的精力: 3.在编写Java程序过程中,认识 ...
- java第十周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 1.finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中fin ...
- 201521123022 《Java程序设计》 第十三周学习总结
1. 本周学习总结 2. 书面作业 Q1. 网络基础 Q1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 前者IP ...
- JDBC中的ResultSet无法多次循环的问题。
前几天碰见了一个很奇葩的问题,使我百思不得其解,今天就写一下我遇见的问题吧,也供大家参考,别和我犯同样的毛病. 首先说下jdbc,jdbc是java是一种用于执行SQL语句的Java API,从jdb ...
- lintcode.177 把排序数组转换为高度最小的二叉搜索树
把排序数组转换为高度最小的二叉搜索树 描述 笔记 数据 评测 给一个排序数组(从小到大),将其转换为一棵高度最小的排序二叉树. 注意事项 There may exist multiple val ...
- MySQL集群（三）mysql-proxy搭建负载均衡与读写分离
前言 前面学习了主从复制和主主复制,接下来给大家分享一下怎么去使用mysql-proxy这个插件去配置MySQL集群中的负载均衡以及读写分离. 注意:这里比较坑的就是mysql-proxy一直没有更新 ...
- Spring-mvc配置“/”路径过滤问题
首先大家都知道"/*"可以匹配所有url,包括带扩展名的,一般只用在过滤器上. 一般Spring-mvc的核心 <servlet> <servlet-name&g ...