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>PORT</th>
</tr>
</thead>
<tbody id="tb"> <tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody>
</table> <script src="jquery-1.12.4.js"></script>
<script>
function checkAll() {
$('#tb :checkbox').prop('checked',true); #prop是jquery的属性，checked设置为true，只有checked表示获取选中的
}
function cancleAll() {
$('#tb :checkbox').prop('checked',false);
}
function reverseAll() {
$(':checkbox').each(function(k){
// this,代指当前循环的每一个元素
// Dom
/*
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 = 条件? 真值：假值
var v = $(this).prop('checked')?false:true;
$(this).prop('checked',v);
})
}
</script>
</body>
</html> 全选、反选、取消
全选、反选、取消
案例二：菜单栏点击展开收起实例
本实例实现菜单栏点击一个菜单另一个菜单收起来，类似下图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.header {
background-color: #67b168;
color: wheat;
}
.content {
min-height: 30px;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div style="height: 400px;width: 200px;border: 1px solid #d58512">
<div class="tiem">
<div class="header">标题一</div>
<div class="content hide">内容一</div> </div>
<div class="tiem">
<div class="header">标题二</div>
<div class="content hide">内容二</div>
</div>
<div class="tiem">
<div class="header">标题三</div>
<div class="content hide">内容三</div>
</div>
</div> <script src='js/jquery-1.11.0.min.js'></script>
<script>
// 找到所有class为header的标签，然后.click()绑定事件
$('.header').click(function(){
// #jQuery默认循环所有选中的标签
// $(this) 当前点击的标签
// $(this).next 当前点击的标签的下一个标签
// 找到当前点击的标签的下一个标签，移除hide样式,点击后hide去掉，即展开
$(this).next().removeClass('hide');
// 找到当前标签的父标签的兄弟标签，然后找样式为.content的标签
$(this).parent().siblings().find('.content').addClass('hide');
// 可以一行完成
// $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
}) </script>
</body> </html>
菜单栏点击展开其余收起
案例三：模态编程框案例
本案例实现魔态编程框案例，点击添加会出现一个对话框，用于添加一行，编辑可以编辑当前行,删除可以删除当前行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.modal{
position: fixed;
top: 50%;
left: 50%;
width: 500px;
height: 400px;
margin-left: -250px;
margin-top: -250px;
background-color: #eeeeee;
z-index: 10;
}
.shadow {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.6;
background-color: #000000;
z-index: 9;
}
.hide {
display: none;
}
</style>
</head>
<body>
<a onclick="addElement();">添加</a>
<table border="" id="tb">
<tr>
<!--target 自定义属性-->
<td target="hostname">1.1.1.1</td>
<td target="port">80</td>
<td>
<a class="edit">编辑</a>
<a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">2.2.2.2</td>
<td target="port">80</td>
<td>
<a class="edit">编辑</a>
<a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">3.3.3.3</td>
<td target="port">8000</td>
<td>
<a class="edit">编辑</a>
<a class="del">删除</a>
</td>
</tr>
</table>
<!--modal 提前写好编程框-->
<div class="modal hide">
<div>
<input name="hostname" type="text">
<input name="port" type="text"> </div>
<div>
<input type="button" value="取消" onclick="canceModal();">
<input type="button" value="确定" onclick="confirmModal();">
</div>
</div>
<!--shadow 遮罩层-->
<div class="shadow hide"></div> <script src='js/jquery-1.11.0.min.js'></script>
<script>
function addElement(){
$(".modal,.shadow").removeClass('hide');
}
function canceModal(){
$(".modal,.shadow").addClass('hide');
// 清空框中的脏数据,
$('.modal input[type="text"]').val("");
}
// $('.edit').click(function(){
// $(".modal,.shadow").removeClass('hide');
//// this 当前点击的标签，parent父标签，prevAll父标签上面的所有同级标签
// var tds = $(this).parent().prevAll();
//// 循环获取tds中的内容(td中的内容)，赋值给编程框中的value
// tds.each(function(){
//// this 当前每个td
//// 获取自定义属性的值,hostname/port
// var n = $(this).attr('target');
//// 获取当前td内容:1.1.1.1/80
// var v = $(this).text();
//// 将获取的内容放入相应的编程框中
//// $('.modal input[name="[hostname"]').val(1.1.1.1)
//// 因为hostaname/port为变量，而name=里面需要是“”格式，所以用到字符串拼接
//// var a1 = '.modal input[name="';
//// var a2 = '"]';
//// var temp = a1 + n + a2
// $('.modal input[name="' + n + '"]').val(v)
// });
//
// });
// 在添加更多一行的时候所产生的 input 和 button 都是动态生成的，所以不能使用 click，要使用 on
$(document).on('click','.edit',function(){
$(".modal,.shadow").removeClass('hide');
// this 当前点击的标签，parent父标签，prevAll父标签上面的所有同级标签
var tds = $(this).parent().prevAll();
// 循环获取tds中的内容(td中的内容)，赋值给编程框中的value
tds.each(function(){
// this 当前每个td
// 获取自定义属性的值,hostname/port
var n = $(this).attr('target');
// 获取当前td内容:1.1.1.1/80
var v = $(this).text();
// 将获取的内容放入相应的编程框中
// $('.modal input[name="[hostname"]').val(1.1.1.1)
// 因为hostaname/port为变量，而name=里面需要是“”格式，所以用到字符串拼接
// var a1 = '.modal input[name="';
// var a2 = '"]';
// var temp = a1 + n + a2
$('.modal input[name="' + n + '"]').val(v)
}); }); function confirmModal(){ // 创建一个tr
var tr = document.createElement('tr');
$('.modal input[type="text"]').each(function(){
// 循环使用dom创建一个td，也就是有几个input就需要加几个td
var td = document.createElement('td');
// 获取输入框中输入的数据
var v = $(this).val();
// 获取数据库的属性
var tage = $(this).attr('name');
// 将属性加入到td中
$(td).attr('target',tage);
// 将输入的内容加入td中
$(td).append(v);
// 将td加入tr中
$(tr).append(td); });
// 最后将编辑和删除加入
var temp = "<a class='edit'>编辑</a> <a class='del'>删除</a>";
// 将一行加入到table里面
var td2 = document.createElement('td');
$(td2).append(temp);
$(tr).append(td2);
$('#tb').append(tr);
// 添加完成后去掉编程框和遮罩层
$('.modal,.shadow').addClass('hide');
// 清空框中的脏数据,否则下次在点击添加时，还会有上一次填写的数据
$('.modal input[type="text"]').val("");
}
// 删除tr行
// 在添加更多一行的时候所产生的 input 和 button 都是动态生成的，所以不能使用 click，要使用 on
$(document).on('click','.del',function(){
console.log(this,"");
$(this).parent().parent().remove();
});
</script>
</body> </html>
编程框添加删除案例
案例四：横向菜单切换
本案例实现横向菜单菜单切换，即点击菜单一现实内容一，点击菜单二，显示菜单二。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.menu{
height: 38px;
background-color: #eeeeee;
line-height: 38px;
}
.active{
background-color: brown;
}
.menu .menu-item{
float: left;
border-right: 1px solid red;
padding: 0 5px;
cursor: pointer;
}
.content{
min-height: 100px;
border: 1px solid #eeeeee;
}
</style>
</head>
<body> <div style="width: 700px;margin:0 auto"> <div class="menu">
<div class="menu-item active" a="">菜单一</div>
<div class="menu-item" a="">菜单二</div>
<div class="menu-item" a="">菜单三</div>
</div>
<div class="content">
<div b="">内容一</div>
<div class="hide" b="">内容二</div>
<div class="hide" b="">内容三</div> </div> </div>
<script src='js/jquery-1.11.0.min.js'></script> <script>
$('.menu-item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
var target = $(this).attr('a');
$('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide');
});
</script>
</body>
</html>
横向菜单切换
持续更新中。。。。。。。。。。。
jQuery 简单案例的更多相关文章
- 毕业设计---json,Struts,ajax以及JQuery简单案例
<!-- Struts2的xml文件配置 --><struts> <package name="default" namespace="/& ...
- 使用jQuery简单实现返回顶部的一个小案例
1.简单写一个页面 首先我们应该创建两个盒子,container盒子主要模拟页面滚动到的位置,back盒子主要功能是实现返回顶部的功能 2.简单的对这两个盒子写一些样式 我们应该先将返回顶部盒子隐藏( ...
- 中国省市区地址三级联动jQuery插件 案例下载
中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...
- jquery简单使用（看教程：快全有实例）（固定样式：$().val()设置属性，$().click()设置方法）
jquery简单使用(看教程:快全有实例)(固定样式:$().val()设置属性,$().click()设置方法) 一.总结 1.jquery不懂之处直接看教程,案例都有,有简单又快 2.jquery ...
- jQuery简单实现iframe的高度根据页面内容自适应的方法(转)
本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...
- jQuery简单的手风琴菜单
查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...
- Servlet请求头response应用简单案例
Servlet请求头response应用简单案例:访问AServlet重定向到BServlet,5秒后跳到CServlet,并显示图片: AServlet package cn.yzu; import ...
- winform 通过 html 与swf 交互 简单案例
在上一篇 winform 与 html 交互 简单案例 中讲了winform与html之间的简单交互,接下来的内容是在winform中以html为中转站,实现将swf嵌入winform中并实现交互. ...
- jquery 简单弹出层(转)
预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...
随机推荐
- MD5( 信息摘要算法)的概念原理及python代码的实现
简述: message-digest algorithm 5(信息-摘要算法).经常说的“MD5加密”,就是它→信息-摘要算法. md5,其实就是一种算法.可以将一个字符串,或文件,或压缩包,执行md ...
- Robot Framework - 一些练习
01 - 安装Robot Framework TA环境 根据系统请选择对应的版本包来安装,下面是以Win7-64bit系统为例,来说明如何搭建一个可以运行练习三test case的RF TA环境. 1 ...
- Git+Hexo搭建个人博客详细过程
通过Git+Hexo搭建的个人博客地址:https://liangh.top/ 1.安装Node.js.配置好Node.js环境.安装Git和配置好Git环境,打开cmd命令行,成功界面如下 2.安装 ...
- Net Core平台灵活简单的日志记录框架NLog+SqlServer初体验
Net Core平台灵活简单的日志记录框架NLog+SqlServer初体验 前几天分享的"[Net Core平台灵活简单的日志记录框架NLog+Mysql组合初体验][http://www ...
- Gradle实现自动打包，签名，自定义apk文件名
Gradle实现自动打包,签名,自定义apk文件名 什么是签名,签名有什么用 Android APP都需要我们用一个证书对应用进行数字签名,不然的话是无法安装到Android手机上的,平时我们调试运行 ...
- IdentityServer4（7）- 使用客户端认证控制API访问（客户端授权模式）
一.前言 本文已更新到 .NET Core 2.2 本文包括后续的Demo都会放在github:https://github.com/stulzq/IdentityServer4.Samples (Q ...
- 五分钟轻松了解Hbase面向列的存储
说明:从严格的列式存储的定义来看,Hbase并不属于列式存储,有人称它为面向列的存储,请各位看官注意这一点. 行式存储 传统的数据库是关系型的,且是按行来存储的.如下图: 其中只有张三把一行数据填满了 ...
- Go语言学习笔记(六) [包]
日期:2014年7月30日 1.定义:包时函数和数据的集合.使用package关键字定义一个包,文件名不需要与包名一致,包名约定使用小写字符,Go包可以由多个文件组成,但是需要使用相同的packa ...
- 基于SSM框架贺州学院校园二手交易平台设计与实现
前言 这个是我当时的毕业论文,分享出来,给同学们参考. 绪论 随着中国新四大发明的诞生,网购成了千千万万网友们购物的新方式,新的购物方式促进商业的发展,但随着人们生活水平的提高,许多新购置的物品用了没 ...
- shell编程基础(七): 处理文件命令sed与awk
一.sed(以行为单位处理文件) sed意为流编辑器(Stream Editor),在Shell脚本和Makefile中作为过滤器使用非常普遍,也就是把前一个程序的输出引入sed的输入,经过一系列编辑 ...