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,iVBORw0KGgoAAAANSUhEUgAAASkAAAC2CAIAAAAKvOz3AAAPqUlEQVR4nO2cS1LkyhWGtSB20gO2wFLujA0QPJqGACJ4NEMTTFhAw4AtcO1w26bj2t0O22FHMJIH6lsllOeVD9VJSf83uCGkk3l+HZ1fqaquq6YFAHjQeAsAYKHAewD4AO8B4AO8B4AP8B4APsB7APgA7wHgA7wHgA/wHgA+wHsA+ADvAeADvAeAD/AeAD7AewD4AO8B4AO8B4AP8B4APsB7YM0dKIpcbXgPrPHu1bkhVxveA2u8e3VuyNWG98Aa716dG3K14T2wxrtX54ZcbXgPrPHu1bkhVxveA2u8e3VuyNUu472Xl5ebm5tLD66vr19eXmoTVqcqVZh3r84N2TVlvHd1dfU/P66urioUVqcqWVhCbw025DD7hGWnJYdw28YZLENk15Tx3sXFxX/9uLi4qFBYnapkYfbGjW1ENUBNoQZbTqct5z3LKNk1Zbx3fn7+Hz/Oz88rFFanKllYVOfdxS8C9gCLwqg/+zuFTo46C8sZCZTx3tnZ2b9tNE1jPyQE9zk7O8sX1qVbkS+slKooMoXZOy9hBnX+VmtrIXs4RJ7Bkk4VaQkWKOa9fxlommb1XyHAEtlH7nJZTx9VeZSwNFVNgF0VuRElzN5Vg0a0jJVjBlORwa3oFuF0Ys+Uq09s0eSBZbx3enr6T42machtLriPHHx6epomTJ05R1i+qm5DThcGq+clCJM7UjCDOrblHRX2qNC1xgktgtNOPyojdxYdxbz3Q6RpGnVPeEiI6SN3eZQqmShh+aoGG5akmcIsPcS1sqVljWFqZBsskgKDs+DmV7VFhfUzcpTx3snJyXeG7oatHlrd2gcB3LR9Tk5OEoT1k4aEMbHCiqjqpxM0yKdgF2bsPLkZ5IHGtlYjw6Qtc18IR3GnIGexCFN19injvU+fPv1dhGwOMswevOLTp09pwlbpyP2ZwjJVhRuCTsspWIRZmon8Ux7bGkwVzmxR2AbLGhfc9vypTiULI8O4sQJlvHd8fPybjaZpjEe7bTm+4/j4OE0Yl0LeYxSWo2qFMSN5U0gQZmkm8k95bKt5L5TR3xj81zgz+WdfsPH05WlluDp3lPHex48fv9lomsZ4tNuW4zs+fvyYJmw1eZg3X1hBVWrG8JAQLAizNJO6LfcuF9wGLd7avNeP5E6n5e8R6lknDAnlkZTx3tHR0SsPeVfuCCPJjTCyz9HRUbKwwTaXKEFYvqp+iWRhltpahFmaSd3O791W+0hGam4NC5QwM1cBWb98LkKitpT3Dg8P/2ajaRr16CCm6yRh1OHhYZqwMFFBYWmqBv6Rta12hkfThMmWuOMXEG5swv6VEu6//RnCPWHHC3nDSQRJXC7j2JAy3js4OPiLjaZp5ENCAMfBwUGasFWurtH7G/nCklWR8kIB/T85zbHChDYydmoYbzk0ENAavDeIDM+CzN5S/uFmlstiqQZX544y3tvf3//KIDxwdqzC5CHc/F+/ft3f308TtspFas4UlqaKVDjYw0WS+qOEyW1kbCmh9bkJ76iVpOVXNmGPfEiQFzX5KkAtmkAx7/3ZD7nLocouTG41O8ap5KRtYM4w2D68v5MblVAEOV52TRnv7e3t/cmPvb29CoXVqUoWFtV2QEV2TTHv/dEPucuhyi7Mu1fnhuyaYs+cv/ohP91BlV2Yd6/ODdk1Zbz3/Px8cHCw58H+/v7z83NtwupUpQrz7tW5IbsG7ykDa7x7dW7I1Yb3wBrvXp0bcrXhPbDGu1fnhlxteA+s8e7VuSFXG94DwAd4DwAf4D0AfID3APAB3gPAB3gPAB/gPQB8gPcA8AHeA8AHeA8AH+A9AHyA9wDwAd4DwAd4DwAf4D0AfID3APBh7b1fAJgOOzs7jrYpwjvvOeoAIIqtrS1vCbnAe2CSzNN7Wxvkw4cPm08ai4vI+ivjXpYN2GNUaO9tLL1L0lhQGRKUJRN4TweVIUFZMknw3uNu0zTN7mPK0SFaUuNscUljx1IiuVE5StSkKv3sFiVZanmFg2mjsijBy/EeeS2N3us2SNZjDaWM7aEwb27/MSLl4uSacI7eKyBpOd5r47tKvvzDPYVKySVVLzZ3g3g3pJD3hJtR2l3JXoeoc7e6MWndIw9Z+Dlkyd5Tr5O97mTS6IshZkl4PFZFEgp3H+3es4oZ2Xurs7ArHMJcu/DcE+4IWPfWWMo3aMp3pe915zvynjllG+hjA1WZIu03CP00kz5+G+9B3J0iwniMwoiqcufCtQqfdKps5rsWdshon/cE7w367HH352aCyMfdpmm2r18lbcYTyVn3yAUn4h4U6zpeYd88MvLXVDkNMxk4770v3/b2trWO9AN973pYPkr1sX9uSfi893vM7q75XhvMby2Ol/fU55SC6x55LtarYHlmWYL3VvRv7ZavW8jHGPJD4+5jYe8J/ScT9Rkj9F5/3bNUxqQhssmE3uU+eXLlsjqwkPfUW2dOWapmJO+RF9v4CBH1xNLrue3t7YjPe4JaVeT7x9S19xKextmjhbxHlIvaQzoztiz2FFwke2qrMHhP/hxFXn7SOfnrXrL3VIcLIkPv6Wfq572E009e92gZ29fXUV+3mJ9Bpo3de1HPM5v5ruW9jOENghy77jn++zTVBuFHxHWHddNSk4/qvXCStOdt46hQofQca/Aep7xIWSpl0t4LRbbMlYtStRzvxYp8h+3zXleZV60xBOXv/lyg97qv8iyfCgbV5LCXskLvDSvQOQ3eCyZR9Rgv0ProcrzHtZGA77rH3TILeo+86di9J7NJ78VdqZBI75GTw3tt20o/EWoNffOzQIxRjd6zdCfZqZz3WsYq4SFhcrky66k81r28ir3/M/Imq3pPqLnwbCldCHNZpkHZ/3/PupIUTfr7/MSDcRm1xsW59+98/S8eEhmzyXJXvA6D9+RvyFKA94oxiVKiMiQoSybwng4qQ4KyZEJ478OHD79sEJeksaAyJI5lmaf3AKgfeA8AH+bpva0NUv9bKLcqeBFlnbiXZQP2GBV816KDypCgLJnAezqoDAnKkgm8p1NnZZqmIfdzxMarQ0opDMO6PeTwSTSMEXhPp87KzN575KFJNIwRk/fe3t6enp7u7+//EHB/f//4+Pj29paWfhKlXKb3hMWnQ1aYbLycpNPC5L3Hx8enp6fvDE9PT1++fElLH1vKhJt3PqVERokPkxp/Lh2rSg3mBg4UGuUNRJJL3Mr24Rktznt3d3f/ELm7u0tLby+l2lvjkS8yQXyRVSVtCKk/DBMUJix6A78ZDT9pTN67vb39q8jt7W1aeqx7CUnJtSJZ1SBGEG9fggaR5JzCci1IXZz3Li8vfxW5vLxMSw/vxSa1PA1y2eVnv76lucj+tkWhRScXT+qE98byHnmlk7utFKVE5nvPvj5kZrfAKYzyXuh/ciWUk06UurzXau1Vg/dCGUaRRbwnI0y4Ae+t1itZqipJiIH3xn3m7C8pQ7l1eK9NEpnvvZwJ1WDV2APnhI8DXCIytcWT4UB4D96bofdi4/M/7wkpuGV8cd77/Pmz7L2bm5u09EJbczfLtEQ5lBKZ4z3josS1bGx2S3Cp71pUAcJiO2lMZ/Xw8PDw8MAZrzualt5+/eT9o1JK5FTWPaN5Cn7PST5zkk8Wi/Pe6+vrw8PD58+frwNub28fHh6+ffuWlj7q+qm39pHIF5kg3st79htHpve4aggmFJJOEdNZvb29/fjx4zeG79+/4/ecLkkFO6U9o9ojBYX2jIMJOSsu2nvjMYlSVlsZwXvJyH7u/xn7KF5E0iQaxgi8p4PKkKAsmcB7OqgMCcqSCbyng8qQoCyZEN7DG2BDUBkSx7LM03sA1A+8B4AP8/Te1gap/w2wWxW8BLZO3MuyAXuMCr5r0UFlSFCWTOA9HVSGBGXJBN7TmWVl1F+fqAGlFJK/I+METKJhjMB7OnOqjPD7zDBSnmqg0PIzTjIv5z3y0CQaxoj1t9R4N247Qe/JTa+OzVRoSUfGCAMn0TBGTN6r/924Y/yqeIWLSDJp1HoSKyB2ySrrvX5w8/6NL/34xXmv5nfjJtzRY3EROUaT2QVYIvO9J/iNG7s479X/btxKvCeL2bz30tZJci1KUCgPF5QIAxfnvfrfjQvvWYh6CFTj7d5TTUjuSXvQnRB1eW9Q67D0NXhvMyJdvGdff9rIdc9SE8uaDO+NuO7Jl78G76mqJu09mSiFalmMhoxKOiGq814rPqtU4r12fJGZTaa6SF1hVMEJn/eEVY70WzgDvAfv1e69fAFqfKb35Pm5m8LivFf/u3G9vDeeyA17L2GdLPLvexap/e3Fea/+d+Nu3nsJYnK8l+CNTAFqfCnvhbIH97VFe6/md+Ma2y4HF5GzfOYcHCWrIZjQknRCmM4K78btNib3e84VYRPbR3GU/V1Ly3zGG+ycRMMYcT6rSZRyHpVJeCjYzDNnlIxJNIwReE8HlSFBWTKB93RQGRKUJRN4TweVIUFZMiG8hzfAhqAyJI5lmaf3AKgfeA8AH+bpva0NUv8bYLcqeAlsnbiXZQP2GBV816KDypCgLJnAezqoDAnKkgm8p1NtZew/VrbnJYPJnaXKwv2kc9SkNQDv6VRbmSjvGf+Ph2TvkfNzyJOv9oSHJtEwRqy/pca7cdvpe88ynPx9M2kbVaFFnt3qxqQTwlTK6b4bt8jPeccWmZw0qrkt3huskPIkZb0XpiMXycV5b4rvxhUeq+oRmZl0JO+ttuUnxnzvCX7jxi7Oe9N9N+5s1j3BCZw3VqP621zkILiljDHYmek9WQk3anHem+67cWfjvbQJyQVEkBd6TLCr3XuqCck9aUknRF3eG9SavJHTp7FB7xUXaUmaMOGqgy2jBsGWhShq3bPURFgJ7UknRF3ea7WrXoP3VFWb8R5nrUGucA0RWnwQTA6MVcj9aREfxsB74z5zcndfck/a/ijGFmlPGs6mzhkaQFhVuKbPX/fIOTlXC7WF9+A9Z++pxhAiBdNu0nuycu4GsTjvTffduGN7r4hIe1JyKqP3hI1BMPe0OVigivz7nip7sL0470333bjjeW9sMcLlsK+0LXWPEHzL2bLUuseFkc+cpJjFeW+K78bl9lclskhSdb9sJNKKpBmMClVJ/RTyfSS8cSzOe3g3brfh/ntOtZstO+2LZMMgKDQmIgM4Ky7ae+MxiVLWUBnjgqmucuQeYbhdITmbcSoZeG8UJlFKVIYEZckE3tNBZUhQlkzgPR1UhgRlyYTwHt4AG4LKkDiWZZ7eA6B+4D0AfJiV93Z2drYAmA6OtilCmX+BAQDEAu8B4AO8B4AP8B4APsB7APgA7wHgA7wHgA/wHgA+wHsA+ADvAeADvAeAD/AeAD7AewD48H/iXDMWjJqufAAAAABJRU5ErkJggg==" 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/