python 学习笔记十四 jQuery案例详解（进阶篇）
1.选择器和筛选器
案例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.coating{
z-index: 1;
opacity: 0.5;
position: fixed;
background-color: black;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.modal{
z-index: 2;
position: fixed;
left: 50%;
top: 50%;
background-color: #999999;
width: 400px;
height: 300px;
margin-left: -200px;
margin-top: -150px;
}
.filed{
height: 30px;
line-height: 30px;
font-size: 14px;
display: block;
margin: 20px 80px;
overflow: hidden;
}
.filed .lb{
color: #333;
height: 30px;
width: 50px;
float: left;
margin: 0;
padding: 0;
line-height: 30px;
text-align: left;
}
.filed .inp_text{
height: 30px;
width: 180px;
font-size: 14px;
float: right;
border: 1px solid #bfbfbf;
line-height: 30px;
}
.filed .buttons{
font-size: 14px;
height: 30px;
line-height: 30px;
margin-left: 30px;
padding: 0 20px;
} </style>
</head>
<body>
<div>
this is my home page
<table border="1">
<thead>
<tr>
<td>主机名</td>
<td>IP</td>
<td>端口</td>
<td onclick="get_prev(this);">编辑</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td onclick="get_prev(this);">编辑</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
<td onclick="get_prev(this);">编辑</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td onclick="get_prev(this);">编辑</td>
</tr>
</tbody>
</table>
</div>
<div class="coating hide"></div>
<div class="modal hide">
<form>
<div class="filed">
<label for="hostname" class="lb">主机名:</label>
<input class="inp_text" id="hostname" name="hostname" type="text" placeholder="请输入用户名" autocomplete="off">
</div>
<div class="filed">
<label for="port" class="lb">端 口:</label>
<input class="inp_text" id="port" name="port" type="text" placeholder="端口" autocomplete="off">
</div>
<div class="filed">
<label for="username" class="lb">用户名:</label>
<input class="inp_text" id="username" name="username" type="text" placeholder="请输入用户名" autocomplete="off">
</div>
<div class="filed">
<input class="buttons" type="submit" value="提交"/>
<input class="buttons" type="button" onclick="Cancel();" value="取消"/>
</div>
</form>
</div>
<script type="text/javascript" src="jquery-2.2.3.js"></script>
<script>
function get_prev(arg){
//var li = $(arg).siblings().map(function(){
// return $(this).text();
//});
var li = [];
$.each($(arg).prevAll(),function(i) {
//this
var item = $(arg).prevAll()[i];
//$(this).text();
var text = $(item).text();
li.push(text);
});
$("[name=hostname]").val(li[0]);
$("[name=port]").val(li[1]);
$("[name=username]").val(li[2]);
$(".coating").removeClass("hide");
$(".modal").removeClass("hide");
} function Cancel(){
$(".coating").addClass("hide");
$(".modal").addClass("hide");
}
</script>
</body>
</html>
模态对话框
jQuery代码：
<script type="text/javascript" src="jquery-2.2.3.js"></script>
<script>
//td编辑标签绑定事件执行get_prev函数
function get_prev(arg){
/* 实现：当点击编辑后，弹出对话框，对话框中包含各个td中的值，无法选中出对话框外的其他内容*/
//存放各td的值
var li = [];
//循环$(arg).prevAll() 这里是找到td编辑上面的所有其他td循环，回调函数function（i） 第一个传入的是数组的下标
$.each($(arg).prevAll(),function(i) {
//item = this 每一个循环的元素td
var item = $(arg).prevAll()[i];
//$(this).text(); 获取td的值
var text = $(item).text();
li.push(text);
});
// 获取各td的值，首先要获取编辑td的标签，然后获取除他外,同级的标签（sibliings获取除自身外的同辈元素）
// 取到的是一个数组，遍历数组text取值，将值赋给对话框通过val(val获取或设置匹配元素的当前值。)
//var li = $(arg).siblings().map(function(){
// return $(this).text();
//});
var new_li = li.reverse();
$("[name=hostname]").val(new_li[0]);
$("[name=port]").val(new_li[1]);
$("[name=username]").val(new_li[2]);
//2.移除遮盖层的隐藏class，默认添加hideclass removeClass去掉即可
$(".coating").removeClass("hide");
//3.显示模态对话框
$(".modal").removeClass("hide");
}
//点击取消，将模态对话框和遮盖层隐藏起来
function Cancel(){
$(".coating").addClass("hide");
$(".modal").addClass("hide");
}
</script>
效果如下:
案例2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.coating{
z-index: 1;
opacity: 0.5;
position: fixed;
background-color: black;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.load{
z-index: 2;
position: fixed;
left: 50%;
top: 50%;
margin-left: -16px;
margin-top: -16px;
}
</style>
</head>
<body>
<div>
<input onclick="loading();" type="button" value="加载对话框"/>
</div>
<div class="coating hide"></div>
<div class="load">
<img src="loading_32.gif"/>
</div>
<script type="text/javascript" src="jquery-2.2.3.js"></script>
<script>
//加载框同模态对话框相似，input标签加载对话框绑定事件 触发后去掉遮盖层和加载框层即可
function loading(){
$(".coating").removeClass("hide"); //removeClass去除匹配标签的class
$(".load").removeClass("hide");
}
</script>
</body>
</html>
加载对话框
jQuery代码：
//同上，显示遮盖层和加载框即可
function loading(){
$(".coating").removeClass("hide");
$(".load").removeClass("hide");
}
效果如下：
案例3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0 auto;
}
.menu{
float: left;width: 30%;height: 500px;
}
.content{
float: left;width: 70%;height: 500px;
}
.title{
background-color: black;
color: white;
height: 40px;
line-height: 40px;
}
.hide{
display: none;
}
.c{
margin-left: 10px;
}
</style> </head>
<body>
<div class="menu">
<div>
<div class="title" onclick="Func(this);">菜单一</div>
<div class="c">
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</div>
</div>
<div>
<div class="title" onclick="Func(this);">菜单二</div>
<div class="c hide">
<div>2.1</div>
<div>2.2</div>
<div>2.3</div>
</div>
</div>
<div>
<div class="title" onclick="Func(this);">菜单三</div>
<div class="c hide">
<div>3.1</div>
<div>3.2</div>
<div>3.3</div>
</div>
</div>
</div>
<div class="content"></div> <script type="text/javascript" src="jquery-2.2.3.js"></script>
<script>
function Func(ths){
$(ths).next().removeClass("hide");
$(ths).parent().siblings().find(".c").addClass("hide");
}
</script>
</body>
</html>
左侧菜单
jQuery代码：
/* 需求：
通过点击其中一个标签的时候，显示其标签内的内容，并且隐藏其他标签内容。
默认第一个菜单默认显示；其他两个菜单是隐藏的。
如何判断我点击的是哪一个菜单呢？ 为函数传入参数this $(this)获取当前点击的标签
*/
function Func(ths){
//$(ths) 表示当前点击的标签
//var t = $(ths).text();
//console.log(t);
//1.获取点击当前标签
//2.将它的下一级标签显示
//3.将它同级标签的下一级标签隐藏
$(ths).next().removeClass("hide");
//$(ths)获取当前标签，next()查找下一个同辈元素（菜单下的子菜单），removeClass("hide")显示子菜单(移除标签样式) 此时点击标签的子标签将显示，接下来隐藏其他同级的子标签
$(ths).parent().siblings().find(".c").addClass("hide");
//将当前标签的父级标签取出（即该例的菜单一），siblings查找同级标签（菜单二，菜单三）,find(".c")查找同级标签下所有包含c的class（同级菜单下的子菜单），addClass("hide")隐藏子菜单
}
效果图如下：
案例4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tab-box .box-menu{
background-color: #9b9b9b;
border: 1px solid #9b9b9b;
}
.tab-box .box-body{
border: 1px solid #9b9b9b;
}
.hide{
display: none;
}
.current{
background-color: red;
color:white;
}
</style>
</head>
<body>
<div class="tab-box">
<div class="box-menu">
<!--所有菜单-->
<a alex="c1" onclick="ChangeTab(this);" class="current">菜单一</a>
<a alex="c2" onclick="ChangeTab(this);">菜单二</a>
<a alex="c3" onclick="ChangeTab(this);">菜单三</a>
</div>
<div class="box-body">
<!--所有内容-->
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
<script src="jquery-2.2.3.js"></script>
<script>
function ChangeTab(arg){
$(arg).addClass("current").siblings().removeClass("current");
//获取当前点击标签$(arg)
var contenId = $(arg).attr("alex");
var temp = "#" + contenId;
$(temp).removeClass("hide").siblings().addClass("hide");
//获取当前标签的属性 alex 对应的值
// 值 $("#值") 显示，其他兄弟隐藏
}
</script>
</body>
</html>
tab菜单
jQuery代码：
function ChangeTab(arg){
//点击其中一个菜单时加上样式，另外两个菜单去掉样式
$(arg).addClass("current").siblings().removeClass("current");
//菜单栏属性同内容栏id的值关联
//获取当前点击标签$(arg)的关联属性本例“alex”
var contenId = $(arg).attr("alex");
var temp = "#" + contenId; //字符串拼接
$(temp).removeClass("hide").siblings().addClass("hide");
//获取当前标签的属性 alex 对应的值
// 值 $("#值") 显示，其他兄弟隐藏
}
效果如下：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAX8AAAA2CAIAAACgBg4gAAACvElEQVR4nO3cYY6bMBAGUO5/hR6W/mi7y4LtsYEwTvOeogiMg5AVvowhybICZFiyDwD4UNIHyCF9gBx/0+cXwLOkD5CjnD7LsoQt4abGS65Yl+X7sa4/Vost4abGSzoePcc883hClhvS50T/K86nz4n+Gelzoj+8o+/0WUYUdrRpfOmpMnhdqxlAl6OnkT4PjOfpncMMrtY+z7/1T9YyoznV3b/nmGceT8gycNU5/IgOV28R1yNhyROu3j3zKppkPCFLnD7tz96J0iesZeZIn9nGE7Ls02e01E+beYVTp4szr5vSZ/7xhCyF2mf7Fq8t1xobq+F51XmOlQuW2vIEtc+LxrNzVMPDgyw3XHXuX71FkBq1HEmdec08npAluO4z4UyhK1ymmXkdhyvsoJbhQ/xIn/CtH54AD5weXVESBsqFuOlPn7cYT8hSrX3+vO+3z127eyZ9jjmyfe55PJI+W9OOJ2QJrvscF7Z9+t14xOUQOS70z7l25dJg/55jnnk8IUv5jvt2tbapvLvHap/d3Gq3HJY2T9U+rxtPacW72//Oa7+58hFd3d0D6VMMl1rJk5c+7zKekOXqPa+L/U+4J02eqn12JhxPyOLfxYAc0gfIIX2AHN/pM3anGeCaIH2Wke+/DHUGPtyd6XOiP/CxLqVP/7fd7j9w4M39SJ/RKOmMld1L5BSwHtNnv7ne0o6hYjeAL+fTp9hyojICPtPV9DnGjQACerTS55gmx9Viu9ABQnH6rB3J0lM0AWxV06cnidZ/97DKu3YPC6grp0+jwNn2+Wpp3D6XQUBRIX3aV3b6J1lCB2gI7nkVXnA2fcLvGe6KJuD/9lz6AGwNpE9j5qWEAUaN1T6Nq9H97QBr+Bt3gBfxz6pADpMjIIf0AXJIHyCH9AFySB8gh/QBckgfIIf0AXJIHyCH9AFy/AYRVcItTDRawAAAAABJRU5ErkJggg==" alt="" />
2.属性和css
案例1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.back{
position: fixed;
bottom: 0px;
right: 0px;
}
.hide{
display: none;
}
</style>
</head>
<body> <div style="height: 2000px;"></div> <div onclick="GoTop()" class="back hide">返回顶部</div> <script src="jquery-1.8.2.js"></script>
<script type="text/javascript"> function GoTop(){
//返回顶部
$(window).scrollTop(0);
} $(function(){ $(window).scroll(function(){
//当滚动滑轮时，执行函数体 //获取当前滑轮滚动的高度
var top = $(window).scrollTop(); if(top>100){
//展示“返回顶部”
$('.back').removeClass('hide');
}else{
//隐藏“返回顶部”
$('.back').addClass('hide');
}
});
}); </script> </body>
</html>
返回顶部
jQuery代码：
function GoTop(){
//返回顶部( scrollTop 获取匹配元素(window窗体)相对滚动条顶部的偏移)
$(window).scrollTop(0);
}
//滚动条事件需在页面加载的时候就执行，定义自执行函数（function(){}())
$(function(){
//当用户滚动指定的元素时，会发生 scroll 事件。
$(window).scroll(function(){
//当滚动滑轮时,执行函数体
//获取当前滑轮滚动的高度
var top = $(window).scrollTop();
//滚动高度超过100时
if(top>100){
//展示"返回顶部"
$(".back").removeClass("hide");
}else{
//隐藏"返回顶部"
$(".back").addClass("hide");
}
});
});
</script>
效果图如下：
案例2
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<script type="text/javascript" src='jquery-1.8.2.js'></script>
<script type="text/javascript">
$(function(){
$('#selectAll').click(function(){
$('#checklist :checkbox').prop('checked',true);
})
$('#unselectAll').click(function(){
$('#checklist :checkbox').prop('checked',false);
})
$('#reverseAll').click(function(){
$('#checklist :checkbox').each(function(){
$(this).prop('checked',!$(this).prop('checked'))
})
}) })
</script>
</head>
<body>
<div id='checklist'>
<input type='checkbox' value='1'/>篮球
<input type='checkbox' value='2'/>足球
<input type='checkbox' value='3'/>羽毛球
</div>
<input type='button' value='全选' id='selectAll' />
<input type='button' value='不选' id='unselectAll' />
<input type='button' value='反选' id='reverseAll' />
</body>
</html>
多选，不选，取消
jQuery代码：
$(function(){
//全选按钮绑定事件
$('#selectAll').click(function(){
//将id=checklist下的checkbox复选框设置checked属性为true
$('#checklist :checkbox').prop('checked',true); //prop获取或设置在匹配的元素集中的第一个元素的属性值，专用来处理checkbox和radio.
})
//不选按钮绑定事件
$('#unselectAll').click(function(){
//将id=checklist下的checkbox复选框设置checked属性为false
$('#checklist :checkbox').prop('checked',false);
})
$('#reverseAll').click(function(){
////遍历id=checklist下的checkbox复选框
$('#checklist :checkbox').each(function(){
//将获取到的checked属性设置为相反的值
$(this).prop('checked',!$(this).prop('checked'))
//if($(this).prop("checked")){
// $(this).prop("checked", false)
//}else{
// $(this).prop("checked", true)
//}
});
});
});
案例3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.show{
position: fixed;
top:10px;
right:10px;
}
</style>
</head>
<body>
<div id="cp" class="show">Go</div>
<div class="c1" style="height: 500px">
<h1>第一章</h1>
</div>
<div class="c1" style="height: 1000px">
<h1>第二章</h1>
</div>
<div class="c1" style="height: 30px">
<h1>第三章</h1>
</div>
<script src="jquery-2.2.3.js" type="text/javascript"></script>
<script>
$(function() {
$(window).scroll(function(){
//捕获滚动条当前离顶部高度
var scroll_top = $(window).scrollTop();
//存放各个章节scroll高度
var list = [];
$.each($(".c1"), function(i){
//offset 获取当前标签离顶部的top和left
var c_top = $($(".c1")[i]).offset().top;
list.push(c_top);
});
$.each(list, function(i){
//滚动条高度+窗体高度 = 整个页面高度
if(scroll_top + $(window).height() == $(document).height()){
$("#cp").text($(".c1").last().text());
return
}
//滚动条大于标签离顶部的高度
if(scroll_top > list[i]){
$("#cp").text($($(".c1")[i]).text());
return
}
});
});
});
</script>
</body>
</html>
滚动条1
jQuery代码：
$(function() {
$(window).scroll(function(){
//捕获滚动条当前离顶部高度
var scroll_top = $(window).scrollTop();
//存放各个章节scroll高度
var list = [];
//遍历所有的c1标签，此例中的每个章节所占高度
$.each($(".c1"), function(i){
//offset 获取当前标签离顶部的top和left
var c_top = $($(".c1")[i]).offset().top; //($(".c1")[i]遍历中的每个标签
list.push(c_top); //放入数组
});
//遍历数组同当前滚动条高度作比较
$.each(list, function(i){
//滚动条高度+窗体高度 = 整个页面高度 解析：当窗体没有滚动条的时候，窗体就是整个页面的高度；当出现滚动条的时候，滚动条的高度即窗体剩下的内容（无法在窗体显示完整）+
//窗体的高度（显示的内容） = 整个页面的高度。
if(scroll_top + $(window).height() == $(document).height()){
//当滚动条拉动最底部的时候，显示最后一章
$("#cp").text($(".c1").last().text());
//显示一次即退出循环
return
}；
//滚动条大于标签离顶部的高度
if(scroll_top > list[i]){
$("#cp").text($($(".c1")[i]).text()); //将显示章节切换的内容同实际循环到的标签的文本内容进行更换
//显示一次退出循环
return
}；
});
});
});
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style> body{
margin: 0px;
}
img {
border: 0;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} .wrap{
width: 980px;
margin: 0 auto;
} .pg-header{
background-color: #303a40;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.pg-header .logo{
float: left;
padding:5px 10px 5px 0px;
}
.pg-header .logo img{
vertical-align: middle;
width: 110px;
height: 40px; }
.pg-header .nav{
line-height: 50px;
}
.pg-header .nav ul li{
float: left;
}
.pg-header .nav ul li a{
display: block;
color: #ccc;
padding: 0 20px;
text-decoration: none;
font-size: 14px;
}
.pg-header .nav ul li a:hover{
color: #fff;
background-color: #425a66;
}
.pg-body{ }
.pg-body .catalog{
position: absolute;
top:60px;
width: 200px;
background-color: #fafafa;
bottom: 0px;
}
.pg-body .catalog.fixed{
position: fixed;
top:10px;
} .pg-body .catalog .catalog-item.active{
color: #fff;
background-color: #425a66;
} .pg-body .content{
position: absolute;
top:60px;
width: 700px;
margin-left: 210px;
background-color: #fafafa;
overflow: auto;
}
.pg-body .content .section{
height: 500px;
}
</style>
</head>
<body> <div class="pg-header">
<div class="wrap clearfix">
<div class="logo">
<a href="#">
<img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
</a>
</div>
<div class="nav">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">功能一</a>
</li>
<li>
<a href="#">功能二</a>
</li>
</ul>
</div> </div>
</div>
<div class="pg-body">
<div class="wrap">
<div class="catalog">
<div class="catalog-item" auto-to="function1"><a>第1章</a></div>
<div class="catalog-item" auto-to="function2"><a>第2章</a></div>
<div class="catalog-item" auto-to="function3"><a>第3章</a></div>
</div>
<div class="content"> <div menu="function1" class="section">
<h1>第一章</h1>
</div>
<div menu="function2" class="section">
<h1>第二章</h1>
</div>
<div menu="function3" class="section">
<h1>第三章</h1>
</div>
</div>
</div>
</div>
<script src="jquery-2.2.3.js"></script>
<script>
window.onscroll = function(){
var ws = $(window).scrollTop();
if(ws>50){
$(".catalog").addClass("fixed");
}else{
$(".catalog").removeClass("fixed");
}
$(".content").children().each(function(){
var offs = $(this).offset();
var offTop = offs.top;
//当前标签离顶部高度 < 滚动条高度
//当前标签离顶部高度+当前标签的高度 > 滚动条高度
var total = offTop + $(this).height();
if($(window).scrollTop()+$(window).height() == $(document).height()){
$(".catalog").children(":last").css("fontSize","48px").siblings().css("fontSize","12px");
}
if(ws > offTop && total > ws){
var t = $(this).attr("menu");
var target = 'div[auto-to="'+ t + '"]';
$(".catalog").children(target).css("fontSize","48px").siblings().css("fontSize","12px");
return;
};
});
};
</script>
</body>
</html>
滚动条2
html代码：
<div class="pg-body">
<div class="wrap">
<div class="catalog">
<div class="catalog-item" auto-to="function1"><a>第1章</a></div>
<div class="catalog-item" auto-to="function2"><a>第2章</a></div>
<div class="catalog-item" auto-to="function3"><a>第3章</a></div>
</div>
<div class="content">
//思考：如何将左侧标签栏中的章节同内容中的章节关联起来？ 利用自定义属性在标签栏利用auto-to属性 同内容中的menu属性关联
<div menu="function1" class="section">
<h1>第一章</h1>
</div>
<div menu="function2" class="section">
<h1>第二章</h1>
</div>
<div menu="function3" class="section">
<h1>第三章</h1>
</div>
</div>
</div>
</div>
jQuery代码：
window.onscroll = function(){
//获取滚动条scroll的高度
var ws = $(window).scrollTop();
//下拉滚动条大于50像素 将左侧菜单栏跟随滚动条一起动
if(ws>50){
$(".catalog").addClass("fixed");
}else{
$(".catalog").removeClass("fixed");
}
//找到内容框中所有的章节div
$(".content").children().each(function(){
//计算当前标签距离窗体的高度
var offs = $(this).offset();
var offTop = offs.top;
var total = offTop + $(this).height(); //当前标签离顶部高度 + 当前标签的高度 = 整个当前标签的范围
//滚动条高度+窗体高度 = 整个页面高度 解析：当窗体没有滚动条的时候，窗体就是整个页面的高度；当出现滚动条的时候，滚动条的高度即窗体剩下的内容（无法在窗体显示完整）+
//窗体的高度（显示的内容） = 整个页面的高度。
if($(window).scrollTop()+$(window).height() == $(document).height()){
$(".catalog").children(":last").css("fontSize","48px").siblings().css("fontSize","12px");
}
//当前标签离顶部高度 < 滚动条高度 表示显示的是下一章节
//当前标签离顶部高度 + 当前标签的高度 > 滚动条高度 表示滚动条还处于当前标签的范围，超出后将显示下一章
if(ws > offTop && total > ws){
//关联内容中章节同标签中的章节
var t = $(this).attr("menu"); //找到内容框中当前章节的menu属性值
var target = 'div[auto-to="'+ t + '"]'; //拼接字符串
$(".catalog").children(target).css("fontSize","48px").siblings().css("fontSize","12px"); //查找标签栏中对应的章节改变css
return; //显示一次退出循环，否则循环相同的内容。
};
});
};
3.事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="添加" onclick="AddContent();"/>
<div onclick="func()"></div>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
<script src="jquery-2.2.3.js"></script>
<script>
function AddConten(){
$("ul").append("<li>8<li>");
};
function func(){
};
//当前文档准备就绪
$(document).ready(function(){
});
$(function(){
//最基本的jQuery事件绑定
//立即绑定事件
// $("li").click(function(){
// var temp = $(this).text();
// alert(temp);
// });
//绑定事件 等同于onclick
// $("li").bind("click",function(){
// var temp = $(this).text();
// alert(temp);
// });
//事件委托，不立即绑定事件，只会在事件触发的时候临时绑定
$("ul").delegate("li","click",function(){
var temp = $(this).text();
alert(temp);
})
}); </script>
</body>
</html>
事件基本
jQuery代码：
function AddConten(){
$("ul").append("<li>8<li>");
};
//window.onscroll = function(){
};
//当前文档准备就绪
$(document).ready(function(){
});
$(function(){
//最基本的jQuery事件绑定
//立即绑定事件
//$("li").click(function(){
//var temp = $(this).text();
//alert(temp);
//});
//绑定事件 等同于onclick
//$("li").bind("click",function(){
// var temp = $(this).text();
// alert(temp);
//});
//事件委托，不立即绑定事件，只会在事件触发的时候临时绑定
$("ul").delegate("li","click",function(){
var temp = $(this).text();
alert(temp);
});
});
案例1
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border: 1px solid #ddd;width: 600px;position: absolute;">
<div id="title" style="background-color: black;height: 40px;color: white;">
标题
</div>
<div style="height: 300px;">
内容
</div>
</div>
<script type="text/javascript" src="jquery-2.2.3.js"></script>
<script>
$(function(){
//页面加载完成后自动执行
//jquery链式编写，即一个selector可以绑定多个事件
//绑定鼠标覆盖事件，当鼠标移动到移动面板时，改变鼠标指针
$("#title").mouseover(function(){
$(this).css("cursor","move");
}).mousedown(function(e){ //在#title选择器绑定鼠标点击事件
//e特殊返回值包含鼠标的x,y坐标
//console.log($(this).offset());
//有些浏览器不支持event需要手动指定
var _event = e || window.event;
//原始鼠标横纵坐标位置
var old_x = _event.clientX;
var old_y = _event.clientY;
//移动窗体的位置
var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top;
//绑定鼠标移动事件
$(this).bind("mousemove",function(e){
//有些浏览器不支持event需要手动指定
var _new_event = e || window.event;
//新的鼠标横纵坐标位置
var new_x = _new_event.clientX;
var new_y = _new_event.clientY;
//移动窗体的位置
var x = parent_left + (new_x - old_x);
var y = parent_top + (new_y - old_y);
//$(this)等于title标签层，找到它的上一层 移动面板 更改位置 postion：absolute;left:x px;top: y px;
$(this).parent().css("left",x+"px");
$(this).parent().css("top",y+"px");
})
}).mouseup(function(){//绑定鼠标松开事件
$(this).unbind("mousemove");//解除鼠标移动绑定事件
});
});
</script>
</body>
</html>
移动面板
jQuery代码：
$(function(){
//页面加载完成后自动执行
//jquery链式编写，即一个selector可以绑定多个事件
//绑定鼠标覆盖事件，当鼠标移动到移动面板时，改变鼠标指针
$("#title").mouseover(function(){
$(this).css("cursor","move");
}).mousedown(function(e){ //在#title选择器绑定鼠标点击事件
//e特殊返回值包含鼠标的x,y坐标
//console.log($(this).offset());
//有些浏览器不支持event需要手动指定
var _event = e || window.event;
//原始鼠标横纵坐标位置
var old_x = _event.clientX;
var old_y = _event.clientY;
//移动窗体的位置
var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top;
//绑定鼠标移动事件
$(this).bind("mousemove",function(e){
//有些浏览器不支持event需要手动指定
var _new_event = e || window.event;
//新的鼠标横纵坐标位置
var new_x = _new_event.clientX;
var new_y = _new_event.clientY;
//移动窗体的位置
var x = parent_left + (new_x - old_x);
var y = parent_top + (new_y - old_y);
//$(this)等于title标签层，找到它的上一层 移动面板 更改位置 postion：absolute;left:x px;top: y px;
$(this).parent().css("left",x+"px");
$(this).parent().css("top",y+"px");
})
}).mouseup(function(){//绑定鼠标松开事件
$(this).unbind("mousemove");//解除鼠标移动绑定事件
});
});
效果图如下：
aaarticlea/png;base64,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" alt="" width="446" height="236" />
4.ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
// ajax提交数据
<input id="n1" name="pp" />
<input type="button" value="提交" onclick="SubmitData();"/>
//form提交数据
<form action="" method="post">
<p><input type="text" name="user"/></p>
<p><input type="password" name="pwd" /></p>
<input type="submit" />
</form>
<script src="jquery-2.2.3.js"></script>
<script>
function SubmitData(){
// 获取值
var inpVal = $('#n1').val();
var inpName = $('#n1').attr('name'); $.ajax({
//等同于form中action url
url: "http://127.0.0.1:8000/index/",
//提交的数据:data
//发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。
//必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。
data: {'kk': 123, inpName: inpVal},
type: 'POST', //form中的method
success: function(arg){
// 当请求执行完成之后，自动调用
// arg,服务器返回的数据
console.log(arg);
},
error: function(){
// 当请求错误之后，自动调用
}
})
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body> <input type="button" value="获取节目" onclick="SubmitData();"/> <div id="container"> </div> <script src="jquery-2.2.3.js"></script>
<script>
function SubmitData(){
// 获取值
$.ajax({
url: "http://www.jxntv.cn/data/jmd-jxtv2.html",
data: {},
type: 'GET',
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'list',
success: function(arg){
console.log(arg);
// arg = {data: xxx}
// 当请求执行完成之后，自动调用
// arg,服务器返回的数据
var jsonpArray = arg.data;
$.each(jsonpArray, function(k,v){
// k，下标
// v，数组值
var week = v.week;
var temp = "<h1>" + week + "</h1>";
$('#container').append(temp);
var listArray = v.list;
$.each(listArray, function(kk, vv){
var link = vv.link;
var name = vv.name;
var tempNew = "<a href='" + link + "'>" + name + "</a><br/>";
$('#container').append(tempNew);
})
}) },
error: function(){
// 当请求错误之后，自动调用
}
})
}
</script>
</body>
</html>
ajax jsonp
jQuery代码：
function SubmitData(){
// 获取值
$.ajax({
url: "http://www.jxntv.cn/data/jmd-jxtv2.html", //数据查询API
data: {},
type: 'GET',
dataType: 'jsonp', //预期服务器返回的数据类型.
//"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
jsonp: 'callback',
//在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，
//比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
jsonpCallback: 'list',
//为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，
//这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。
success: function(arg){
console.log(arg);
// Object {data: Array[7]}
// arg = {data: xxx}
// 当请求执行完成之后，自动调用
// arg,服务器返回的数据
var jsonpArray = arg.data; //获取返回数据（数组）
$.each(jsonpArray, function(k,v){
// k，下标
// v，数组值
var week = v.week;
var temp = "<h1>" + week + "</h1>";
$('#container').append(temp);
//Object list:Array[19] week:"周日"
var listArray = v.list; //获取每日数据（数组）
$.each(listArray, function(kk, vv){
var link = vv.link; //节目link
var name = vv.name; //节目name
var tempNew = "<a href='" + link + "'>" + name + "</a><br/>"; //为节目添加a标签
$('#container').append(tempNew); //添加在每天下面
})
})
},
error: function(){
// 当请求错误之后，自动调用
}
})
}
效果如下：
aaarticlea/png;base64,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" alt="" width="266" height="346" />
Form表单案例
比较常用的form表单编辑，包含全选，反选，取消，编辑模式几个操作,
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.edit-mode{
background-color: #b3b3b3;
padding: 8px;
text-decoration: none;
color: white;
}
.editing{
background-color: #f0ad4e;
}
</style>
</head>
<body> <div style="padding: 20px">
<input type="button" onclick="CheckAll('#edit_mode', '#tb1');" value="全选" />
<input type="button" onclick="CheckReverse('#edit_mode', '#tb1');" value="反选" />
<input type="button" onclick="CheckCancel('#edit_mode', '#tb1');" value="取消" /> <a id="edit_mode" class="edit-mode" href="javascript:void(0);" onclick="EditMode(this, '#tb1');" >进入编辑模式</a> </div>
<table border="1">
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>端口</th>
<th>业务</th>
<th>状态</th>
</tr>
</thead>
<tbody id="tb1">
<tr>
<td><input type="checkbox" /></td>
<td edit="true">v1</td>
<td>v11</td>
<td edit="true" edit-type="select" select-val="1" global-key="BUSINESS">车上会</td>
<td edit="true" edit-type="select" select-val="1" global-key="STATUS">在线</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td edit="true">v11</td>
<td>v11</td>
<td edit="true" edit-type="select" select-val="2" global-key="BUSINESS">二手车</td>
<td edit="true" edit-type="select" select-val="2" global-key="STATUS">下线</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td edit="true">v111</td>
<td>v11</td>
<td edit="true" edit-type="select" select-val="3" global-key="BUSINESS">大保健</td>
<td edit="true" edit-type="select" select-val="2" global-key="STATUS">下线</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="jquery-2.2.3.js"></script>
<script> STATUS = [
{'id': 1, 'text': "在线"},
{'id': 2, 'text': "下线"}
];
BUSINESS = [
{'id': 1, 'text': "车上会"},
{'id': 2, 'text': "二手车"},
{'id': 3, 'text': "大保健"}
];
//console.log(STATUS);
//console.log(window["STATUS"]); $(function(){
$("#tb1").find(":checkbox").click(function(){
var tr = $(this).parent().parent();
var isEditing = $("#edit_mode").hasClass("editing");
//进入编辑
if(isEditing){
//判断是否已经选中
//先执行默认的事件
if($(this).prop("checked")){
//当前行进入编辑状态
RowIntoEditMode(tr);
}else{
//当前行退出编辑状态
RowOutEditMode(tr);
}
}
});
}); globalCtrlKeyPress = false; window.onkeydown = function(event){
console.log(event.keyCode);
if(event && event.keyCode==17){
window.globalCtrlKeyPress = true;
}else{
window.globalCtrlKeyPress = false;
}
}; function MultiChange(ths){
//检测是否按下ctrl键
if(window.globalCtrlKeyPress == true){
//td所在的tr中的索引位置目的是修改该列为统一的值
var index = $(ths).parent().index();
var value = $(ths).val();
$(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){
$(this).parent().parent().children().eq(index).children().val(value);
})
}
} function CheckAll(mode,tb){
//选中checkbox
//如果已经进入编辑模式，让选中行进入编辑模式
//tb = #tb1
$(tb).children().each(function(){
//$(this)循环每一个tr
//查找tr下面的checkbox是否被选中
var tr = $(this);
var isChecked = $(this).find(":checkbox").prop("checked");
if(isChecked == true){
}else{
//复选框未选中，选中
$(this).find(":checkbox").prop("checked",true);
//查看是否进入编辑状态
var isEditing = $(mode).hasClass("editing");
//进入编辑
if(isEditing){
//进入编辑状态，循环每一个可以编辑的td
RowIntoEditMode(tr);
// tr.children().each(function(){
// var td = $(this);
// if(td.attr("edit") == "true"){
// var text = td.text();
// var temp = "<input type='text' value='" + text + "'/>";
// td.html(temp);
// }
// })
}
}
})
} function CheckCancel(mode,tb){
// 取消选中checkebox
//如果已经进入编辑模式，行退出编辑状态
$(tb).children().each(function(){
var tr = $(this);
if(tr.find(":checkbox").prop("checked")){
//移除选中
tr.find(":checkbox").prop("checked",false);
var isEditing = $(mode).hasClass("editing");
if(isEditing == true){
//当前行，退出编辑状态
RowOutEditMode(tr);
// tr.children().each(function(){
// var td = $(this);
// if(td.attr("edit") == "true"){
// var inp = td.children(":first");
// var inp_value = inp.val();
// $(this).text(inp_value);
// }
// })
}
}
})
} function CheckReverse(mode,tb){
//是否进入编辑模式
if($(mode).hasClass("editing")){
$(tb).children().each(function(){
//遍历所有tr
var tr = $(this);
//找到tr的第一个td 复选框，判断是否被选中
var check_box = tr.children().first().find(":checkbox");
if(check_box.prop("checked")){
check_box.prop("checked", false); //选中，设置为未选中
//当前行，退出编辑状态
RowOutEditMode(tr);
// tr.children().each(function(){
// var td = $(this);
// if(td.attr("edit") == "true"){
// var inp = td.children(":first");
// var inp_value = inp.val();
// $(this).text(inp_value);
// }
// })
}
else{
check_box.prop("checked",true);
//当前行，进入编辑状态
RowIntoEditMode(tr);
// tr.children().each(function(){
// var td = $(this);
// if (td.attr("edit") == "true") {
// var text = td.text();
// var temp = "<input type='text' value='" + text + "'/>";
// td.html(temp);
// }
// })
}
});
}else{
//未进入编辑状态，只需要修改复选框的状态即可
$(tb).children().each(function(){
var tr=$(this);
var check_box = tr.children().first().find(":checkbox");
if(check_box.prop('checked')){
check_box.prop("checked",false);
}else{
check_box.prop("checked",true);
}
});
}
} function EditMode(ths,tb){
var isediting = $(ths).hasClass("editing");
if(isediting){
$(ths).text("进入编辑模式");
$(ths).removeClass("editing");
$(tb).children().each(function() {
//$(this)循环每一个tr
//查找tr下面的checkbox是否被选中
var tr = $(this);
if (tr.find(":checkbox").prop("checked")) {
RowOutEditMode(tr);
// tr.children().each(function () {
// var td = $(this);
// if (td.attr("edit") == "true") {
// var inp = td.children(":first");
// var inp_value = inp.val();
// td.text(inp_value);
// }
// })
}
})
}else {
//进入编辑模式
$(ths).text("退出编辑模式");
$(ths).addClass("editing");
$(tb).children().each(function(){
//$(this)循环每一个tr
//查找tr下面的checkbox是否被选中
var tr = $(this);
var isChecked = $(this).find(":checkbox").prop("checked");
if(isChecked == true){
RowIntoEditMode(tr);
//进入编辑状态，循环每一个可以编辑的td
// tr.children().each(function(){
// var td = $(this);
// if(td.attr("edit") == "true"){
// var text = td.text();
// var temp = "<input type='text' value='" + text + "'/>";
// td.html(temp);
// }
// })
}
})
}
} function RowIntoEditMode(tr){
tr.children().each(function(){
var td = $(this);
if(td.attr("edit") == "true"){
//默认所有更改为input，自定义select表示修改的是下拉框
if (td.attr("edit-type") == "select") {
//无论是dom还是js引用全局变量其实就是window的变量：比如调用alert(123)
//还可以这样调用window.["alert"](123) 或者 window.alert(123)
var all_values = window[td.attr("global-key")]; //为了区分不同的下拉框业务和状态 自定义属性
var select_val = td.attr("select-val");
select_val = parseInt(select_val);
var options = "";//有多个下拉框用字符串拼接
$.each(all_values, function (index, value) {
if(select_val == value.id){
options += "<option selected='selected'>" + value.text + "</option>";
}else{
options += "<option>" + value.text + "</option>";
}
});//拼接options
var temp = "<select onchange='MultiChange(this)'>" + options + "</select>";//拼接最终的select
td.html(temp);//修改
}else{
var text = td.text();
var temp = "<input type='text' value='" + text + "'/>";
td.html(temp);
}
}
})
} function RowOutEditMode(tr) {
//将相同的代码块写成函数
tr.children().each(function(){
var td = $(this);
if(td.attr("edit") == "true"){
var inp = td.children(":first");
var inp_value = inp.val();
td.text(inp_value);
}
})
}
</script>
</body>
</html>
edit_row
html代码：
<div style="padding: 20px">
<input type="button" onclick="CheckAll('#edit_mode', '#tb1');" value="全选" />
<input type="button" onclick="CheckReverse('#edit_mode', '#tb1');" value="反选" />
<input type="button" onclick="CheckCancel('#edit_mode', '#tb1');" value="取消" /> <a id="edit_mode" class="edit-mode" href="javascript:void(0);" onclick="EditMode(this, '#tb1');" >进入编辑模式</a> </div>
<table border="1">
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>端口</th>
<th>业务</th>
<th>状态</th>
</tr>
</thead>
<tbody id="tb1">
<tr>
<td><input type="checkbox" /></td>
<td edit="true">v1</td>
<td>v11</td>
<td edit="true" edit-type="select" select-val="1" global-key="BUSINESS">车上会</td>
<td edit="true" edit-type="select" select-val="1" global-key="STATUS">在线</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td edit="true">v11</td>
<td>v11</td>
<td edit="true" edit-type="select" select-val="2" global-key="BUSINESS">二手车</td>
<td edit="true" edit-type="select" select-val="2" global-key="STATUS">下线</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td edit="true">v111</td>
<td>v11</td>
<td edit="true" edit-type="select" select-val="3" global-key="BUSINESS">大保健</td>
<td edit="true" edit-type="select" select-val="2" global-key="STATUS">下线</td>
</tr>
</tbody>
</table>
jQuery代码：
<script type="text/javascript" src="jquery-2.2.3.js"></script>
<script> STATUS = [
{'id': , 'text': "在线"},
{'id': , 'text': "下线"}
];
BUSINESS = [
{'id': , 'text': "车上会"},
{'id': , 'text': "二手车"},
{'id': , 'text': "大保健"}
];
//console.log(STATUS);
//console.log(window["STATUS"]); $(function(){
$("#tb1").find(":checkbox").click(function(){
var tr = $(this).parent().parent();
var isEditing = $("#edit_mode").hasClass("editing");
//进入编辑
if(isEditing){
//判断是否已经选中
//先执行默认的事件
if($(this).prop("checked")){
//当前行进入编辑状态
RowIntoEditMode(tr);
}else{
//当前行退出编辑状态
RowOutEditMode(tr);
}
}
});
}); globalCtrlKeyPress = false; window.onkeydown = function(event){
console.log(event.keyCode);
if(event && event.keyCode==){
window.globalCtrlKeyPress = true;
}else{
window.globalCtrlKeyPress = false;
}
}; //如果任意键放开执行function
window.onkeyup = function (event) { //这里需要传入evnent
//如果ctrl键up
if(event && event.keyCode == ){
//设置globalCtrlKeyPress为false
window.globalCtrlKeyPress = false;
}
}; function MultiChange(ths){
//检测是否按下ctrl键
if(window.globalCtrlKeyPress == true){
//td所在的tr中的索引位置目的是修改该列为统一的值
var index = $(ths).parent().index();
var value = $(ths).val();
$(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){
$(this).parent().parent().children().eq(index).children().val(value);
})
}
} function CheckAll(mode,tb){
//选中checkbox
//如果已经进入编辑模式，让选中行进入编辑模式
//tb = #tb1
$(tb).children().each(function(){
//$(this)循环每一个tr
//查找tr下面的checkbox是否被选中
var tr = $(this);
var isChecked = $(this).find(":checkbox").prop("checked");
if(isChecked == true){
}else{
//复选框未选中，选中
$(this).find(":checkbox").prop("checked",true);
//查看是否进入编辑状态
var isEditing = $(mode).hasClass("editing");
//进入编辑
if(isEditing){
//进入编辑状态，循环每一个可以编辑的td
RowIntoEditMode(tr);
}
}
})
} function CheckCancel(mode,tb){
// 取消选中checkebox
//如果已经进入编辑模式，行退出编辑状态
$(tb).children().each(function(){
var tr = $(this);
if(tr.find(":checkbox").prop("checked")){
//移除选中
tr.find(":checkbox").prop("checked",false);
var isEditing = $(mode).hasClass("editing");
if(isEditing == true){
//当前行，退出编辑状态
RowOutEditMode(tr);
}
}
})
} function CheckReverse(mode,tb){
//是否进入编辑模式
if($(mode).hasClass("editing")){
$(tb).children().each(function(){
//遍历所有tr
var tr = $(this);
//找到tr的第一个td 复选框，判断是否被选中
var check_box = tr.children().first().find(":checkbox");
if(check_box.prop("checked")){
check_box.prop("checked", false); //选中，设置为未选中
//当前行，退出编辑状态
RowOutEditMode(tr);
}
else{
check_box.prop("checked",true);
//当前行，进入编辑状态
RowIntoEditMode(tr);
}
});
}else{
//未进入编辑状态，只需要修改复选框的状态即可
$(tb).children().each(function(){
var tr=$(this);
var check_box = tr.children().first().find(":checkbox");
if(check_box.prop('checked')){
check_box.prop("checked",false);
}else{
check_box.prop("checked",true);
}
});
}
} function EditMode(ths,tb){
var isediting = $(ths).hasClass("editing");
if(isediting){
$(ths).text("进入编辑模式");
$(ths).removeClass("editing");
$(tb).children().each(function() {
//$(this)循环每一个tr
//查找tr下面的checkbox是否被选中
var tr = $(this);
if (tr.find(":checkbox").prop("checked")) {
RowOutEditMode(tr);
}
})
}else {
//进入编辑模式
$(ths).text("退出编辑模式");
$(ths).addClass("editing");
$(tb).children().each(function(){
//$(this)循环每一个tr
//查找tr下面的checkbox是否被选中
var tr = $(this);
var isChecked = $(this).find(":checkbox").prop("checked");
if(isChecked == true){
RowIntoEditMode(tr);//进入编辑状态，循环每一个可以编辑的td
}
})
}
} function RowIntoEditMode(tr){
tr.children().each(function(){
var td = $(this);
if(td.attr("edit") == "true"){
//默认所有更改为input，自定义select表示修改的是下拉框
if (td.attr("edit-type") == "select") {
//无论是dom还是js引用全局变量其实就是window的变量：比如调用alert(123)
//还可以这样调用window.["alert"](123) 或者 window.alert(123)
var all_values = window[td.attr("global-key")]; //为了区分不同的下拉框业务和状态 自定义属性
var select_val = td.attr("select-val");
select_val = parseInt(select_val);
var options = "";//有多个下拉框用字符串拼接
$.each(all_values, function (index, value) {
if(select_val == value.id){
options += "<option selected='selected'>" + value.text + "</option>";
}else{
options += "<option>" + value.text + "</option>";
}
});//拼接options
var temp = "<select onchange='MultiChange(this)'>" + options + "</select>";//拼接最终的select
td.html(temp);//修改
}else{
var text = td.text();
var temp = "<input type='text' value='" + text + "'/>";
td.html(temp);
}
}
})
} function RowOutEditMode(tr) {
//将相同的代码块写成函数
tr.children().each(function(){
var td = $(this);
if(td.attr("edit") == "true"){
var inp = td.children(":first");
var inp_value = inp.val();
td.text(inp_value);
}
})
}
</script>
效果：
aaarticlea/png;base64,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" alt="" />
咱们首先处理几个按钮和编辑模式，对于全选有一个需要注意的，需要判断当前checkbox是否被选，避免在进入编辑模式后重复选中，内容被覆盖为空。取消跟全选差不多，遍历tr标签，
移除被选中的复选框，同时进入编辑模式的需要退出。反选首先需要判断是否处理编辑模式，编辑模式下反选，选中被取消，退出编辑模式；未选中被选中，进入编辑模式；非编辑模式只需要更改复选框。
编辑模式咱们通过class来实现。对于进入编辑行和退出编辑行状态有很多重复的代码写成两个函数RowOutEditMode和RowIntoEditMode；默认修改的都是input type=text，
有一些下拉框的形式修改，通过自定义属性编辑模式, 利用全局变量定义数组，自定义全局属性可以区分多个下拉框修改项（比如业务和主机状态的修改），还可以定义是否进入编辑模式，
默认选中项等，你可以根据自己的需求自定义属性（类似与python中的flag,非常的有用！！！）还有一些提高逼格的批量修改功能可以参看上面的代码和注释。
更多详细见：http://www.cnblogs.com/wupeiqi/articles/5369773.html
jQuery扩展
jQuery已经为我们提供了那么多的方法，但是有时候我们想要自己定义一些方法怎么办？jQuery还提供了两个方法：
jQuery.fn.extend(object)
jQuery.extend(object)
jQuery 代码:
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
一般使用下面的方式：
（function(arg){
arg.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
})(jQuery);
结果:
jQuery.min(2,3); // => 2 // jQuery =$ $.min(2,3);
jQuery.max(4,5); // => 5
jQuery 代码:
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
结果:
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();
jQuery.fn.extend(object) 与 jQuery.extend(object)的区别在与 fn的定义可以应用在selector上。
更多详细的内容请见：http://www.php100.com/manual/jquery/
form表单验证(登录注册)
(function(jq){
function ErrorMessage(container,msg){
$error = container.find("label[class='input-error']");
if($error.length>){
$error.text(msg);
}else{
var temp = "<label class='input-error'>"+msg+"</label>";
container.append(temp);
}
}
function EmptyError(container){
$error = container.find("label[class='input-error']");
if($error.length>){
$error.remove();
}
}
jq.extend({
'CheckAll':function(targetcontainer){
$(targetcontainer).find(':checkbox').attr('checked',true);
},
'UnCheckAll':function(targetcontainer){
$(targetcontainer).find(':checkbox').attr('checked',false);
},
'ReverseCheck':function(targetcontainer){
$(targetcontainer).find(':checkbox').each(function(){
var check = $(this).attr('checked');
console.log(check);
if(check){
$(this).attr('checked',false);
}else{
$(this).attr('checked',true);
}
})
},
'Hide':function(target){
$(target).addClass('hide');
},
'Show':function(target){
$(target).removeClass('hide');
},
'register':function(form,summaryStatusId){
$(form).find(':submit').click(function(){
var flag = true;
$(form).find(':text,:password').each(function(){
var name = $(this).attr('name');
var label = $(this).attr('label');
var val = $(this).val();
var $parent = $(this).parent();
//<label class='input-error'>用户名长度只能在4-20位字符之间</label>
//<label class='input-error'>用户名只能由中文、英文、数字及"-"、"_"组成</label>
var required = $(this).attr('require');
if(required){
if(!val || val.trim() == ''){
flag = false;
ErrorMessage($parent,label+'不能为空.');
return false;
}
}
var confirm_to = $(this).attr('confirm-to');
if(confirm_to){
var $original = $(form).find("input[name='"+confirm_to+"']");
if($original.val().trim()!=val.trim()){
flag = false;
ErrorMessage($parent,'两次密码输入不一致.');
return false;
}
}
var number = $(this).attr('number');
if(number){
if(!$.isNumeric(number)){
flag = false;
ErrorMessage($parent,label+'必须为数字.');
return false;
}
}
var mobile = $(this).attr('mobile');
if(mobile){
var reg = /^[||]\d{}$/;
if(!reg.test(val)){
flag = false;
ErrorMessage($parent,label+'格式错误.');
return false;
}
}
var min = $(this).attr('min-len');
if(min){
var len = parseInt(min)
if(val.length<len){
flag = false;
ErrorMessage($parent,label+'最小长度为'+min+'.');
return false;
}
}
var max = $(this).attr('max-len');
if(max){
var len = parseInt(max)
if(val.length>len){
flag = false;
ErrorMessage($parent,label+'最大长度为'+max+'.');
return false;
}
}
var range = $(this).attr('range');
if(range){
var len = range.split('-');
if(val.length<parseInt(len[])||val.length>parseInt(len[])){
flag = false;
ErrorMessage($parent,label+'长度只能在'+len[]+'-'+len[]+'位字符之间.');
return false;
}
}
var field = $(this).attr('Field');
if(field=='string'){
var reg = /^\w+$/;
if(!reg.test(val)){
flag = false;
ErrorMessage($parent,label+'只能由英文、数字及"_"组成.');
return false;
}
}
EmptyError($parent);
});
var check = $("#protocol").prop('checked');
if(!check){
flag = false;
try{
ErrorMessage($("#protocol").parent().parent(),'请阅读用户注册协议.');
}catch(e){
flag = false;
}
}else{
EmptyError($("#protocol").parent().parent());
}
return flag;
});
},
'login':function(form,summaryStatusId){
$(form).find(':submit').click(function(){
var flag = true;
$(form).find(':text,:password').each(function(){
var name = $(this).attr('name');
var label = $(this).attr('label');
var val = $(this).val();
var $parent = $(this).parent();
var required = $(this).attr('require');
if(required){
if(!val || val.trim() == ''){
flag = false;
ErrorMessage($parent,label+'不能为空.');
return false;
}
}
EmptyError($parent);
});
return flag;
});
},
});
})(jQuery)
jq-extend
<form id='Form' action='/account/login' method='POST'>
<div class='group mt10'>
<label class='tip'><span class="red">*</span>用户名：</label>
<input type='text' require='true' label='用户名' Field='string' range='4-40' name='username' />
<i class='i-name'></i>
</div>
<div class='group'>
<label class='tip'><span class="red">*</span>密码：</label>
<input type='password' require='true' label='密码' min-len='6' name='pwd' />
<i class='i-pwd'></i>
</div>
<div class='group'>
<label class='tip'><span class="red">*</span>验证码：</label>
<input type='text' require='true' label='验证码' style='width:80px;' name='checkcode' />
<a style='width:125px;display:inline-block;'><img class='checkcode' onclick='ChangeCode();' id='imgCode' src='/account/check' /></a>
</div>
<div class='group font12 mb0'>
<label class='tip'></label>
<label style='width:246px;display: inline-block;'>
<input id='protocol' name='protocol' type='checkbox' checked='checked' />
<span>自动登录</span>
<span class='ml10'><a href='#'>忘记密码？</a></span>
</label>
</div>
<div class='group mt0'>
<label class='tip'></label>
<input type='submit' class='submit' value='登 录' />
</div>
</form>
login
<div>
<h1 class='mb20'>注册新用户</h1>
<form id='Form' method='POST' action='/account/register'>
<div class='group'>
<label class='tip'><span class="red">*</span>用户名：</label>
<input type='text' require='true' label='用户名' Field='string' range='4-40' name='username' />
<i class='i-name'></i> </div>
<div class='group'>
<label class='tip'><span class="red">*</span>手机号：</label>
<input type='text' require='true' label='手机号' mobile='true' name='telphone' />
<i class='i-phone'></i>
</div>
<div class='group'>
<label class='tip'><span class="red">*</span>登录密码：</label>
<input type='password' require='true' label='登录密码' min-len='6' name='pwd' />
<i class='i-pwd'></i>
</div>
<div class='group'>
<label class='tip'><span class="red">*</span>确认密码：</label>
<input type='password' require='true' label='确认密码' confirm-to='pwd' name='confirmpwd' />
<i class='i-pwd'></i>
</div>
<div class='group'>
<label class='tip'><span class="red">*</span>验证码：</label>
<input type='text' require='true' label='验证码' style='width:80px;' name='checkcode' />
<a style='width:125px;display:inline-block;'><img class='checkcode' onclick='ChangeCode();' id='imgCode' src='/account/check' /></a>
</div>
<div class='group font12'>
<label class='tip'></label>
<label style='width:246px;display: inline-block;'>
<input id='protocol' name='protocol' type='checkbox' checked='checked' /><span>我已阅读并同意<a href='#'>《用户注册协议》</a></span>
</label>
</div> <div class='group'>
<label class='tip'></label>
<input type='submit' class='submit' value='同意以上协议并注册' />
</div>
</form>
</div>
</div>
register
还有两个比较不错的扩展连接：
-- parsleyjs
http://parsleyjs.org/
-- jQuery Validate
http://jqueryvalidation.org/
python 学习笔记十四 jQuery案例详解（进阶篇）的更多相关文章
- python学习笔记(十 四)、web.py
使用web.py 通过python进行网页的编写,下面我们来简单了解一哈web.py 的使用 1 url处理 使用特定的url结构来解析我们发送的请求.如下面所示: urls = ( '/login' ...
- python学习笔记十四：wxPython Demo
一.简介 wxPython是Python语言的一套优秀的GUI图形库,允许Python程序员很方便的创建完整的.功能键全的GUI用户界面. wxPython是作为优秀的跨平台GUI库wxWidgets ...
- python学习笔记(十四): unittest
Python中有一个自带的单元测试框架是unittest模块,用它来做单元测试,它里面封装好了一些校验返回的结果方法和一些用例执行前的初始化操作. 在说unittest之前,先说几个概念: TestC ...
- python 学习笔记(十四)有依赖关系的接口开发
接口开发中存在很多有依赖关系的接口,例如:BBS中发帖的时候就需要进行校验用户是否登录,那么此时发帖的接口就与用户登录接口有依赖关系.在发帖时就需要先获取用户的session,与当前登录用户进行校验对 ...
- python学习笔记(十四)python实现发邮件
import smtplib from email.mime.text import MIMEText from email.mime.multipart import MIMEMultipart u ...
- Python学习笔记：函数和变量详解
一.面向对象:将客观世界的事物抽象成计算机中的数据结构 类:用class定义,这是当前编程的重点范式,以后会单独介绍. 二.函数编程:逻辑结构化和过程化的一种编程方法 1.函数-->用def定义 ...
- shell学习三十四天----printf详解
http://blog.csdn.net/shanyongxu/article/details/46744055
- python3.4学习笔记(十四) 网络爬虫实例代码，抓取新浪爱彩双色球开奖数据实例
python3.4学习笔记(十四) 网络爬虫实例代码,抓取新浪爱彩双色球开奖数据实例 新浪爱彩双色球开奖数据URL:http://zst.aicai.com/ssq/openInfo/ 最终输出结果格 ...
- Python学习笔记（四）
Python学习笔记(四) 作业讲解 编码和解码 1. 作业讲解 重复代码瘦身 # 定义地图 nav = {'省略'} # 现在所处的层 current_layer = nav # 记录你去过的地方 ...
随机推荐
- DBConfigReader.java
package com.vcredit.ddcash.batch.util; import java.sql.Connection;import java.sql.PreparedStatement; ...
- Rails problem
总是wa~ #include <stdio.h> int main() { ]; ], b[]; while(scanf("%d %s %s", &n, a, ...
- IOS第二天多线程-01-延时执行
**********延时执行 #import "HMViewController.h" @interface HMViewController () @end @implement ...
- venus java高并发框架
http://www.iteye.com/topic/1118484 因为有 netty.mima等远程框架.包括spring jboss等remoting框架 和阿里的dubbo相比, 没有亮点.. ...
- jQuery 怎么判断DIV出现在可视区域
直接上代码: $(window).scroll(function () { var oT = document.getElementById("myDiv").offsetTop; ...
- angularJs实现信息数据提交功能
如下简单的报名提交的实现 1.数据绑定 2.$http.post()提交数据 一.数据绑定 <!--报名部分--> <div class="attend_box" ...
- 解决Tomcat无法shutdown进程
转自:http://my.oschina.net/yongyi/blog/405198 问题分析 这个在windows下没有碰到过,因为此前跑Tomcat都是以服务而不是命令脚本的形式跑的,而且已经换 ...
- 《android 导入第三方源码jar包遇到的坑》
最近想做个app,里面需要有一个二维码扫描的功能,然后谷歌之后发现Zxing这个用的人好多,就看看怎么用: 然后就在github上拉下他们的源码,导入eclipse,然后编译之后导出为jar文件[用的 ...
- DNS分别在什么情况下使用UDP和TCP
DNS同时占用UDP和TCP端口53是公认的,这种单个应用协议同时使用两种传输协议的情况在TCP/IP栈也算是个另类.但很少有人知道DNS分别在什么情况下使用这两种协议. 如果用wiresha ...
- Linux下添加用户及用户组
创建用户组hdpgroup: $ sudo addgroup hdpgroup 如果用户hdp不存在,把hdp添加到hdpgroup用户组: $ sudo adduser --force -ingro ...