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能利用无线鼠标和键盘存在的一些问 ...
随机推荐
- django框架(Model)
-------------------使用MySql数据库-------------------1.进行对应mysql-python包的下载 pip install mysql-python 2.在m ...
- Dapper获取连接类
using System; using System.Collections.Generic; using System.Configuration; using System.Data; using ...
- js中bind、call、apply函数的用法 （转载）
最近看了一篇不错的有关js的文章,转载过来收藏先!!! 最近一直在用 js 写游戏服务器,我也接触 js 时间不长,大学的时候用 js 做过一个 H3C 的 web 的项目,然后在腾讯实习的时候用 j ...
- ADO.NET中SQL Server数据库连接池
连接到数据库服务器通常由几个需要很长时间的步骤组成. 必须建立物理通道(例如套接字或命名管道),必须与服务器进行初次握手,必须分析连接字符串信息,必须由服务器对连接进行身份验证,必须运行检查以便在当前 ...
- Java虚拟机的内存结构
我们都知道虚拟机的内存划分了多个区域,并不是一张大饼.那么为什么要划分为多块区域呢,直接搞一块区域,所有用到内存的地方都往这块区域里扔不就行了,岂不痛快.是的,如果不进行区域划分,扔的时候确实痛快,可 ...
- Linux下设置Tomcat虚拟路径
问题描述:我在上传图片的位置不在Tomcat服务器下,用户无法访问 解决方案:配置Tomcat虚拟路径使用户可以访问图片 配置Tomcat # cd /usr/local/apache-tomcat- ...
- CCIE-交换路由复习笔记
交换 考点: 1.trunk link(基础) 2.vtp 3.vlan 4.stp rstp mstp 5.hsrp vrrp glbp 6.ec Trunk link: 修改封装模式 802.1q ...
- 软工+C(2017第4期) Alpha/Beta换人
// 上一篇:超链接 // 下一篇:工具和结构化 注:在一次软件工程讨论课程进度设计的过程中,出现了这个关于 Alpha/Beta换人机制的讨论,这个机制在不同学校有不同的实施,本篇积累各方观点,持续 ...
- 团队作业4——第一次项目冲刺（Alpha版本）2017.4.24
在下午3-4节Linux课结束后,我们teamworkers全体队员留在禹州楼304进行约20分钟的短暂会议,会议讨论关于昨天任务的总结并分配了今天的新任务,大家畅所欲言,情绪高昂,各自阐述了自己不一 ...
- 第1周-java作业总结与建议
1. 本周作业简评与建议 存在的问题: 这周的作业普遍存在一个格式混乱的问题.请认真学习Markdown,我们后面的作业都要使用Markdown.Markdown学习请参考http://group.c ...