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能利用无线鼠标和键盘存在的一些问 ...
随机推荐
- 如何修改int的打印内容——史上最难的JAVA面试题
序 今天看到了一个比较特别的面试题,考察的是如何改变int的System.out.print的结果.题目如下: 下面的一句话"这是初级java实习生面试题"非常挑衅的激起了大家做题 ...
- Mysql only_full_group_by以及其他关于sql_mode原因报错详细解决方案
Mysql only_full_group_by以及其他关于sql_mode原因报错详细解决方案 网上太多相关资料,但是抄袭严重,有的讲的也是之言片语的,根本不连贯(可能知道的人确实不想多说) 我总共 ...
- 【转载】js常用方法和片段
在网上看了不少js方法的总结没,自己也尝试总结过,这篇只迄今为止觉得最清楚的,尤其是call和apply的方法总结,很到位!! 1.javascript删除元素节点 IE中有这样一个方法:remove ...
- [2017-2018上Java助教]个人信息收集
在本学期的Java课程中,我们要收集的信息如下 1.学号 .码云地址 3.博客园地址 请各位同学自行创建,并按照如下的格式评论在这篇博客下方 学号+https://git.oschina.net/as ...
- JavaWeb程序连接SQLserver数据库
声明:一直以来都以为javaweb程序连接数据库是一个很高大上很难的问题,结果今天学习了一下,不到两个小时就解决了,所以总结一篇博客. JavaWeb程序连接SQLserver数据库分为一下步骤: 1 ...
- Java虚拟机的内存结构
我们都知道虚拟机的内存划分了多个区域,并不是一张大饼.那么为什么要划分为多块区域呢,直接搞一块区域,所有用到内存的地方都往这块区域里扔不就行了,岂不痛快.是的,如果不进行区域划分,扔的时候确实痛快,可 ...
- 从Object和Function说说JS的原型链
ECMAScript规定了两个特殊的内置对象:Object和Function.他们的特殊性在于,他们本身既是对象又是函数,而他们同时也是对象和函数的构造器.这种自己生自己的逻辑显然违反人性,如果还停留 ...
- SwaggerUI笔记
关于 Swagger Swagger能成为最受欢迎的REST APIs文档生成工具之一,有以下几个原因: Swagger 可以生成一个具有互动性的API控制台,开发者可以用来快速学习和尝试API. S ...
- 团队作业4--第一次项目冲刺（Alpha版本）6
一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 1.对功能界面进行优化 2.对算法进行改进优化,提高运行速度 四.困难与问题 首先我们团队通过讨论,对功能界面进行了优化,让界 ...
- 201521123100 《Java程序设计》第4周学习总结
1. 本章学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. (1)多态性:相同的形态,不同的行为 (2)类型转换与强制类型转换(cast) 2. 书面作 ...