你的位置:首页 > Java教程

[Java教程]想要学好JQuery看这里


一.简介 

jQuery 库可以通过一行简单的标记被添加到网页中

jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性:

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

jQuery产生的对象时jQuery独有的,只能自己调用

书写规则

  支持链式操作;

  在变量前加"$"符号(var $variable = jQuery 对象);

  注:此规定并不是强制要求

二.Jquery安装 

jQuery 库是一个 JavaScript 文件,可以使用 HTML 的 <script> 标签引用它

<head><script src="jquery.js"></script></head>

下载 jQuery

有两个版本的 jQuery 可供下载:

  • Production version - 用于实际的网站中,已被精简和压缩。
  • Development version - 用于测试和开发(未压缩,是可读的代码)

下载地址:http://jquery.com/download/

通过 jQuery,可以选取(查询,query) HTML 元素,并对它们执行“操作”(actions)

三.查找元素

1.选择器 

基本选择器

#id     //“#” 指IDelement  //指向 DOM 节点的标签名.class  //“." 类*    //匹配所有元素selector1,selector2,selectorN  //将每一个选择器匹配到的元素合并后一起返回 

选择器实例选取
*$("*")所有元素
#id$("#lastname")id="lastname" 的元素
.class$(".intro")所有 的元素
element$("p")所有 <p> 元素
.class.class$(".intro.demo")所有 且 的元素
 基本筛选器  
:first$("p:first")第一个 <p> 元素
:last$("p:last")最后一个 <p> 元素
:even$("tr:even")所有偶数 <tr> 元素
:odd$("tr:odd")所有奇数 <tr> 元素
:eq(index)$("ul li:eq(3)")列表中的第四个元素(index 从 0 开始)
:gt(no)$("ul li:gt(3)")列出 index 大于 3 的元素
:lt(no)$("ul li:lt(3)")列出 index 小于 3 的元素
:not(selector)$("input:not(:empty)")所有不为空的 input 元素
:header$(":header")所有标题元素 <h1> - <h6>
:animated 所有动画元素
 内容选择器  
:contains(text)$(":contains('W3School')")包含指定字符串的所有元素
:empty$(":empty")无子(元素)节点的所有元素
:hidden$("p:hidden")所有隐藏的 <p> 元素
:visible$("table:visible")所有可见的表格
s1,s2,s3$("th,td,.intro")所有带有匹配选择的元素
 属性  
[attribute]$("[href]")所有带有 href 属性的元素
[attribute=value]$("[href='#']")所有 href 属性的值等于 "#" 的元素
[attribute!=value]$("[href!='#']")所有 href 属性的值不等于 "#" 的元素
[attribute$=value]$("[href$='.jpg']")所有 href 属性的值包含以 ".jpg" 结尾的元素
 表单选择器  
:input$(":input")所有 <input> 元素
:text$(":text")所有 type="text" 的 <input> 元素
:password$(":password")所有 type="password" 的 <input> 元素
:radio$(":radio")所有 type="radio" 的 <input> 元素
:checkbox$(":checkbox")所有 type="checkbox" 的 <input> 元素
:submit$(":submit")所有 type="submit" 的 <input> 元素
:reset$(":reset")所有 type="reset" 的 <input> 元素
:button$(":button")所有 type="button" 的 <input> 元素
:image$(":image")所有 type="image" 的 <input> 元素
:file$(":file")所有 type="file" 的 <input> 元素
 表单对象属性  
:enabled$(":enabled")所有激活的 input 元素
:disabled$(":disabled")所有禁用的 input 元素
:selected$(":selected")所有被选取的 input 元素
:checked$(":checked")所有被选中的 input 元素

查找选择器:

函数描述
.add()将元素添加到匹配元素的集合中。
.andSelf()把堆栈中之前的元素集添加到当前集合中。
.children()获得匹配元素集合中每个元素的所有子元素。
.closest()从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。
.contents()获得匹配元素集合中每个元素的子元素,包括文本和注释节点。
.each()对 jQuery 对象进行迭代,为每个匹配元素执行函数。
.end()结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态。
.eq()将匹配元素集合缩减为位于指定索引的新元素。
.filter()将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
.find()获得当前匹配元素集合中每个元素的后代,由选择器进行筛选。
.first()将匹配元素集合缩减为集合中的第一个元素。
.has()将匹配元素集合缩减为包含特定元素的后代的集合。
.is()根据选择器检查当前匹配元素集合,如果存在至少一个匹配元素,则返回 true。
.last()将匹配元素集合缩减为集合中的最后一个元素。
.map()把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象。
.next()获得匹配元素集合中每个元素紧邻的同辈元素。
.nextAll()获得匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。
.nextUntil()获得每个元素之后所有的同辈元素,直到遇到匹配选择器的元素为止。
.not()从匹配元素集合中删除元素。
.offsetParent()获得用于定位的第一个父元素。
.parent()获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)。
.parents()获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选)。
.parentsUntil()获得当前匹配元素集合中每个元素的祖先元素,直到遇到匹配选择器的元素为止。
.prev()获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选)。
.prevAll()获得匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。
.prevUntil()获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止。
.siblings()获得匹配元素集合中所有元素的同辈元素,由选择器筛选(可选)。
.slice()将匹配元素集合缩减为指定范围的子集。

例:

$("div").children()   //div中的每个子元素,第一层$("div").find("span")  //div中的包含的所有span元素,子子孙孙$("p").next()       //紧邻p元素后的一个同辈元素$("p").nextAll()     //p元素之后所有的同辈元素$("#test").nextUntil("#test2")  //id为"#test"元素之后到id为'#test2'之间所有的同辈元素,掐头去尾$("p").prev()      //紧邻p元素前的一个同辈元素$("p").prevAll()     //p元素之前所有的同辈元素$("#test").prevUntil("#test2")  //id为"#test"元素之前到id为'#test2'之间所有的同辈元素,掐头去尾$("p").parent()     //每个p元素的父元素$("p").parents()     //每个p元素的所有祖先元素,body,html$("#test").parentsUntil("#test2")  //id为"#test"元素到id为'#test2'之间所有的父级元素,掐头去尾$("div").siblings()   //所有的同辈元素,不包括自己

查找元素

实例:

<html><head><script type="text/javascript" src="http://www.cnblogs.com//jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){  $("p").css("background-color","red"); });});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button type="button">Click me</button></body></html>

基本筛选器及CSS样式操作
<html><head><script type="text/javascript" src="http://www.cnblogs.com//jquery-1.12.4.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function() { $(".test").hide(); });});</script></head><body><h2 >This is a heading</h2><p >This is a paragraph.</p><p>This is another paragraph.</p><button type="button">Click me</button></body></html>

隐藏标签
<html><head><script type="text/javascript" src="jquery-1.12.4.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){  $("#test").hide(); });});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p id="test">This is another paragraph.</p><button type="button">Click me</button></body></html>

查找ID操作
<html><head><script type="text/javascript" src="http://www.cnblogs.com//jquery-1.12.4.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function() { $(".test").hide(); });});</script></head><body><h2 >This is a heading</h2><p >This is a paragraph.</p><p>This is another paragraph.</p><button type="button">Click me</button></body></html>

查找类 操作 
<!DOCTYPE html><html><head><script src="jquery-1.12.4.js"></script><script>$(document).ready(function(){ $("button").click(function(){  alert("Value: " + $("#test").val()); });});</script></head><body><p>姓名:<input type="text" id="test" value="获取表单内容"></p><button>显示值</button></body></html>

获取表单内容

四.属性操作

属性操作主要有以下几种:

方法描述
addClass()向匹配的元素添加指定的类名。
attr()设置或返回匹配元素的属性和值。
hasClass()检查匹配的元素是否拥有指定的类。
html()设置或返回匹配的元素集合中的 HTML 内容。
removeAttr()从所有匹配的元素中移除指定的属性。
removeClass()从所有匹配的元素中删除全部或者指定的类。
toggleClass()从匹配的元素中添加或删除一个类。
val()设置或返回匹配元素的值。
text()设置或返回文本的值

例:

<!DOCTYPE html><html><head><script src="jquery-1.12.4.js"></script><script>$(document).ready(function(){ $("button").click(function(){  alert($("#test").attr("href")); });});</script></head><body><p><a href="http://www.baidu.com" id="test">梦里寻他千百度</a></p><button>显示 href 值</button></body></html>

获取属性
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <script src="jquery-1.12.4.js"></script>  <style>    .test{      background-color: dodgerblue;      width: 950px;      margin: 0 auto;      font-size: 24px;      font-weight: bold;    }  </style></head><body>  <div>    给DIV加样式  </div><script>  $("div").addClass("test");</script></body></html>

给DIV加样式
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <script src="jquery-1.12.4.js"></script></head><body><a>我只想证明html()返回的是元素的代码</a><script>  var val = $("a").html();  alert(val)</script></body></html>

html()返回的是元素的代码
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <script src="jquery-1.12.4.js"></script></head><body><a href="http://www.cnblogs.com//index" onclick="RemoveAttr(this);">click me</a><script>  function RemoveAttr(ths) {    $(ths).removeAttr("href");    alert("天呢!我的href属性呢!")  }</script></body></html>

移除属性removeAttr
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <script src="jquery-1.12.4.js"></script></head><body><input type="text" name="用户名"><input type="button" value="点我"/><script>  $(":button").click(function(){  alert("你输入的内容是" + $(":text").val()); });</script></body></html>

获文本框值val()

五.CSS操作

CSS 属性描述
css()设置或返回匹配元素的样式属性。
height()设置或返回匹配元素的高度。
offset()返回第一个匹配元素相对于文档的位置。
offsetParent()返回最近的定位祖先元素。
position()返回第一个匹配元素相对于父元素的位置。
scrollLeft()设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop()设置或返回匹配元素相对滚动条顶部的偏移。
width()设置或返回匹配元素的宽度。

例:

<!DOCTYPE html><html><head><script src="jquery-1.12.4.js"></script><script>$(document).ready(function(){ $("button").click(function(){  alert("Background color = " + $("p").css("background-color")); });});</script></head><body><h2>这是标题</h2><p >这是一个段落。</p><button>返回 p 元素的背景色</button></body></html>

css()
<!DOCTYPE html><html><head><script src="jquery-1.12.4.js"></script><script>$(document).ready(function(){ $("button").click(function(){  var txt="";  txt+="Width of div: " + $("#div1").width() + "</br>";  txt+="Height of div: " + $("#div1").height();  $("#div1").html(txt); });});</script></head><body><div id="div1" ></div><br><button>显示 div 的尺寸</button><p>width() - 返回元素的宽度。</p><p>height() - 返回元素的高度。</p></body></html>

width()/height()
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    .divH {      height: 1800px;    }    .divT {      width: 50px;      height: 50px;      font-size: 23px;      background-color: #2F4F4F;      color: white;      position: fixed;      right: 18px;      bottom: 18px;    }    .divT:hover{      cursor: pointer;    }    .hide {      display: none;    }  </style></head><body>  <div ></div>  <div onclick="ReturnTop();"><strong>返回顶部</strong></div>  <script src="../../jquery-1.12.4.js"></script>  <script>    window.onscroll = function () {      var current = $(window).scrollTop();      if (current > 180){        $(".divT").removeClass("hide");      }else {        $(".divT").addClass("hide");      }    };    function ReturnTop() {      $(window).scrollTop(0);    }  </script></body></html>

返回顶部小实例

六.文档处理

方法描述
after()在匹配的元素之后插入内容。
append()向匹配元素集合中的每个元素结尾插入由参数指定的内容。
appendTo()向目标结尾插入匹配元素集合中的每个元素。
before()在每个匹配的元素之前插入内容。
clone()创建匹配元素集合的副本。
detach()从 DOM 中移除匹配元素集合。
empty()删除匹配的元素集合中所有的子节点。
hasClass()检查匹配的元素是否拥有指定的类。
insertAfter()把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore()把匹配的元素插入到另一个指定的元素集合的前面。
prepend()向匹配元素集合中的每个元素开头插入由参数指定的内容。
prependTo()向目标开头插入匹配元素集合中的每个元素。
remove()移除所有匹配的元素。
removeAttr()从所有匹配的元素中移除指定的属性。
replaceAll()用匹配的元素替换所有匹配到的元素。
replaceWith()用新内容替换匹配的元素。
unwrap()移除并替换指定元素的父元素。
wrap()把匹配的元素用指定的内容或元素包裹起来。
wrapAll()把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner()将每一个匹配的元素的子内容用指定的内容或元素包裹起来。

例:

$("p").append("<b>test</b>");  //每个p元素内后面追加内容$("p").appendTo("div");      //p元素追加到div内后$("p").prepend("<b>Hello</b>"); //每个p元素内前面追加内容$("p").prependTo("div");     //p元素追加到div内前$("p").after("<b>test</b>");   //每个p元素同级之后插入内容$("p").before("<b>test</b>");  //在每个p元素同级之前插入内容$("p").insertAfter("#test");   //所有p元素插入到id为test元素的后面$("p").insertBefore("#test");  //所有p元素插入到id为test元素的前面$("p").replaceWith("<b>Paragraph. </b>");  //将所有匹配的元素替换成指定的HTML或DOM元素$("<b>Paragraph. </b>").replaceAll("p");   //用匹配的元素替换掉所有 selector匹配到的元素$("p").empty();   //删除匹配的元素集合中所有的子节点,不包括本身$("p").remove();  //删除所有匹配的元素,包括本身$("p").detach();  //删除所有匹配的元素(和remove()不同的是:所有绑定的事件、附加的数据会保留下来)$("p").clone()    //克隆元素并选中克隆的副本$("p").clone(true)  //布尔值指事件处理函数是否会被复制

用法

七.事件

方法描述

bind(type,[data],fn)

向匹配元素附加一个或更多事件处理器
blur([[data],fn])触发、或将函数绑定到指定元素的 blur 事件
change([[data],fn])触发、或将函数绑定到指定元素的 change 事件
click([[data],fn])触发、或将函数绑定到指定元素的 click 事件
dblclick([[data],fn])触发、或将函数绑定到指定元素的 double click 事件
delegate()向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die()移除所有通过 live() 函数添加的事件处理程序。
error([[data],fn])触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented()返回 event 对象上是否调用了 event.preventDefault()。
event.pageX相对于文档左边缘的鼠标位置。
event.pageY相对于文档上边缘的鼠标位置。
event.preventDefault()阻止事件的默认动作。
event.result包含由被指定事件触发的事件处理器返回的最后一个值。
event.target触发该事件的 DOM 元素。
event.timeStamp该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type描述事件的类型。
event.which指示按了哪个键或按钮。
focus([[data],fn])触发、或将函数绑定到指定元素的 focus 事件
focusin([data],fn) 
keydown([[data],fn])触发、或将函数绑定到指定元素的 key down 事件
keypress([[data],fn])触发、或将函数绑定到指定元素的 key press 事件
keyup([[data],fn])触发、或将函数绑定到指定元素的 key up 事件
live()为当前或未来的匹配元素添加一个或多个事件处理器
load()触发、或将函数绑定到指定元素的 load 事件
mousedown([[data],fn])触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter([[data],fn])触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave([[data],fn])触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove([[data],fn])触发、或将函数绑定到指定元素的 mouse move 事件
mouseout([[data],fn])触发、或将函数绑定到指定元素的 mouse out 事件
mouseover([[data],fn])触发、或将函数绑定到指定元素的 mouse over 事件
mouseup([[data],fn])触发、或将函数绑定到指定元素的 mouse up 事件
one()向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready()文档就绪事件(当 HTML 文档就绪可用时)
resize([[data],fn])触发、或将函数绑定到指定元素的 resize 事件
scroll([[data],fn])触发、或将函数绑定到指定元素的 scroll 事件
select([[data],fn])触发、或将函数绑定到指定元素的 select 事件
submit([[data],fn])触发、或将函数绑定到指定元素的 submit 事件
toggle()绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。
trigger()所有匹配元素的指定事件
triggerHandler()第一个被匹配元素的指定事件
unbind()从匹配元素移除一个被添加的事件处理器
undelegate()从匹配元素移除一个被添加的事件处理器,现在或将来
unload([[data],fn])触发、或将函数绑定到指定元素的 unload 事件

 例:

<html><head><script type="text/javascript" src="jquery-1.12.4.js"></script></head><body><p>change</p>用户: <input type="text" /><p>Car:<select name="choice"><option value="a">Volvo</option><option value="b">Saab</option></select></p><script type="text/javascript"> $(".field").change(function(){  $(this).css("background-color","red"); });</script></body></html>

change事件
<html><head><script type="text/javascript" src="jquery-1.12.4.js"></script><style>  .change{    background-color: rosybrown;    width: 950px;    margin: 0 auto;  }</style></head><body><p>这是一个段落</p><button>double click</button><script type="text/javascript"> $("button").dblclick(function(){  $("p").addClass("change"); });</script></body></html>

双击dbclick
<html><head><script type="text/javascript" src="jquery-1.12.4.js"></script><script type="text/javascript">$(document).ready(function(){ $(document).mousemove(function(e){  $("span").text(e.pageX + ", " + e.pageY); });});</script></head><body><p>鼠标位于坐标: <span></span>.</p></body></html>

mousemove
<html><head>  <meta charset="UTF-8">  <script type="text/javascript" src="jquery-1.12.4.js"></script></head><body><p>移动到这里来</p><script type="text/javascript"> $("p").mouseenter(function(){  $("p").css("background-color","yellow"); }); $("p").mouseleave(function(){  $("p").css("background-color","blue"); });</script></body></html>

鼠标事件
<html><head><script type="text/javascript" src="http://www.cnblogs.com//jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("input").keydown(function(){  $("input").css("background-color","#FFFFCC"); }); $("input").keyup(function(){  $("input").css("background-color","#D6D6FF"); });});</script></head><body>Enter your name: <input type="text" /><p>当发生 keydown 和 keyup 事件时,输入域会改变颜色。请试着在其中输入内容。</p></body></html>

keydown/keyup
//bind 为每个匹配元素绑定事件处理函数,绑定多个用{}。$("p").bind("click", function(){ alert( $(this).text() );});$(menuF).bind({  "mouseover":function () {   $(menuS).parent().removeClass("hide");   },"mouseout":function () {   $(menuS).parent().addClass("hide");}});     $("p").one( "click", fun...)  //one 绑定一个一次性的事件处理函数$("p").unbind( "click" )    //解绑一个事件

bind

八.效果

 

方法描述
animate()对被选元素应用“自定义”的动画
clearQueue()对被选元素移除所有排队的函数(仍未运行的)
delay()对被选元素的所有排队函数(仍未运行)设置延迟
dequeue()运行被选元素的下一个排队函数
fadeIn()逐渐改变被选元素的不透明度,从隐藏到可见
fadeOut()逐渐改变被选元素的不透明度,从可见到隐藏
fadeTo()把被选元素逐渐改变至给定的不透明度
hide()隐藏被选的元素
queue()显示被选元素的排队函数
show()显示被选的元素
slideDown()通过调整高度来滑动显示被选元素
slideToggle()对被选元素进行滑动隐藏和滑动显示的切换
slideUp()通过调整高度来滑动隐藏被选元素
stop()停止在被选元素上运行动画
toggle()对被选元素进行隐藏和显示的切换

 例:

<html><head><script type="text/javascript" src="jquery-1.12.4.js"></script><script type="text/javascript">$(document).ready(function(){ $(".btn1").click(function(){ $("p").fadeOut() }); $(".btn2").click(function(){ $("p").fadeIn(); });});</script></head><body><p>This is a paragraph.</p><button >Hide</button><button >Show</button></body></html>

fadein/fadeout
<html><head><script type="text/javascript" src="jquery-1.12.4.js"></script><script type="text/javascript"> $(".btn1").click(function(){ $("p").hide(); }); $(".btn2").click(function(){ $("p").show(); });</script></head><body><p>hide/show</p><button >Hide</button><button >Show</button></body></html>

hide

九.对象访问

$.trim()   //去除字符串两端的空格$.each()   //遍历一个数组或对象,for循环$.inArray() //返回一个值在数组中的索引位置,不存在返回-1 $.grep()   //返回数组中符合某种标准的元素$.extend() //将多个对象,合并到第一个对象$.makeArray() //将对象转化为数组$.type()  //判断对象的类别(函数对象、日期对象、数组对象、正则对象等等$.isArray() //判断某个参数是否为数组$.isEmptyObject() //判断某个对象是否为空(不含有任何属性)$.isFunction()  //判断某个参数是否为函数$.isPlainObject() //判断某个参数是否为用"{}"或"new Object"建立的对象$.support()    //判断浏览器是否支持某个特性

<!DOCTYPE html><html lang="en"><!--.each实现原理--><head>  <meta charset="UTF-8">  <title>Title</title>  <!--<script src="jquery-1.12.4.js"></script>--></head><body>  <script>    function myeach(obj,func) {      for(var i=0;i<obj.length;i++){        var current = obj[i];        var ret= func(i,current);        if (ret = false){          break        }      }    }    var li=[11,22,33];    myeach(li,function (k,v) {      console.log(k,v);      return false;    })  </script></body></html>

.each实现原理

十.插件拓展

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.extend({ min: function(a, b) { return a < b ? a : b; },  //三元运算 max: function(a, b) { return a > b ? a : b; }});jQuery.min(2,3);   //2jQuery.max(4,5);  //5

Jquery 参考手册:http://www.php100.com/manual/jquery/

十一.实例小练习

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>正反选</title>  <script src="jquery-1.12.4.js"></script></head><body>  <div>     <button onclick="selectall();">全选</button>     <button onclick="cancel();">取消</button>     <button onclick="reverse();">反选</button>   <table border="1">     <tr>       <td><input type="checkbox"></td>       <td>111</td>     </tr>     <tr>       <td><input type="checkbox"></td>       <td>222</td>     </tr>     <tr>       <td><input type="checkbox"></td>       <td>333</td>     </tr>     <tr>       <td><input type="checkbox"></td>       <td>444</td>     </tr>   </table>  </div>  <script>    function selectall() {      $("table :checkbox").prop('checked',true)    }    function cancel() {      $("table:checkbox").prop("checked",false)    }    function reverse() {      $("table :checkbox").each(function () {        if($(this).prop("checked")){          $(this).prop("checked",false)        }else {          $(this).prop("checked",true)        }      }      )    }  </script></body></html>

正反选
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>模态对话框</title>  <style>    .shade{      position: fixed;      left: 0;      top: 0;      right: 0;      bottom: 0;      background: rgba(0,0,0,.6) ;      z-index: 20;    }    .modal{      position: fixed;      left: 50%;      top: 50%;      height: 300px;      width: 400px;      margin-top: -150px;      margin-left: -200px;      z-index: 30;      border: 1px solid #ddd;      background-color: white;    }    .hide{      display: none;    }  </style></head><body>  <div>    <input type="button" value="添加" onclick="Add();" />    <table border="1">      <thead>        <tr>          <th >主机名</th>          <th >IP</th>          <th >端口</th>          <th>操作</th>        </tr>      </thead>      <tbody>        <tr>          <td target="host">c1.com</td>          <td target="ip">1.1.1.1</td>          <td target="port">8888</td>          <td onclick="Edit(this);">Edit</td>        </tr>        <tr>          <td target="host">c2.com</td>          <td target="ip">1.1.1.1</td>          <td target="port">8888</td>          <td onclick="Edit(this);">Edit</td>        </tr>      <tr>          <td target="host">c3.com</td>          <td target="ip">1.1.1.1</td>          <td target="port">8888</td>          <td onclick="Edit(this);">Edit</td>        </tr>      <tr>          <td target="host">c4.com</td>          <td target="ip">1.1.1.1</td>          <td target="port">8888</td>          <td onclick="Edit(this);">Edit</td>        </tr>      </tbody>    </table>  </div>  <div class="shade hide"></div>  <div class="modal hide">    <form action="" method="get">      <p>主机名:<input type="text" id="host" name="host"></p>      <p>IP地址:<input type="text" id='ip' name="ip"></p>      <p>端口号:<input type="text" id='port' name="port"></p>      <input type="submit" value="提交" onclick="return SubmitForm();">      <input type="button" value="取消" onclick="HideModal();">    </form>  </div>  <script src="jquery-1.12.4.js"></script>  <script>    function SubmitForm() {      var flag=true;      $(".modal").find('input[type="text"]').each(function () {        var value = $(this).val();        if(value.trim().length == 0){          flag = false;          return flag;        }      });      return flag;    }    function Edit(ths) {      $(".shade,.modal").removeClass("hide");      var preList = $(ths).prevAll();      preList.each(function () {        var text = $(this).text();        var target = $(this).attr('target');        $("#"+target).val(text);      });    }    function HideModal() {      $(".shade,.modal").addClass("hide");      $(".modal").find("input[type='text']").val("");    }    function Add() {      $(".shade,.modal").removeClass("hide");    }  </script></body></html>

模态对话框
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>轮播图</title>  <style>    *{      margin: 0;      padding: 0;      list-style: none;    }    .outer{      position: relative;      height: 454px;      width: 730px;      margin: 0 auto;      border: dashed 1px lightskyblue;      cursor: pointer;    }    .outer .img li{      position: absolute;      left: 0;      top:0;    }    .outer .num{      position: absolute;      left: 0;      bottom: 0;      font-size: 0px;      width: 100%;      text-align: center;    }    .outer .num li{      display: inline-block;      width: 20px;      height: 20px;      background-color: darkgray;      line-height: 20px;      text-align: center;      font-size: 16px;      border-radius: 60%;      margin: 5px;    }    .outer .public{      width: 40px;      height: 60px;      background-color: #555555;      text-align: center;      line-height: 60px;      top:50%;      margin-top: -30px;      position: absolute;      opacity: 0.4;      font-size: 40px;      font-weight: bold;    }    .outer .btn_right{      right: 0;    }    .outer:hover .public{       display: block;     }    .outer .num li.current{      background-color: brown;    }  </style></head><body>  <div class="outer">    <ul class="img">      <li><img src="img/1.jpg"></li>      <li><img src="img/2.jpg"></li>      <li><img src="img/3.jpg"></li>      <li><img src="img/4.jpg"></li>      <li><img src="img/5.jpg"></li>    </ul>    <ul class="num">      <li>1</li>      <li>2</li>      <li>3</li>      <li>4</li>      <li>5</li>    </ul>    <div class="btn_left public"> < </div>    <div class="btn_right public"> > </div>  </div>  <script src="jquery-1.12.4.js"></script>  <script>    $(function () {      $(".num li").first().addClass("current");      $(".num li").mouseover(function () {        $(this).addClass("current").siblings().removeClass("current");        var index = $(this).index();        i = index;        $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);      });      //自动轮播      i = 0;      var time = setInterval(move,2000);      function move() {        i++;        if(i == 5){          i = 0;        }        $(".num li").eq(i).addClass("current").siblings().removeClass("current");        $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);      }      //如果有鼠标点击时暂停       $(".outer").hover(function () {         clearInterval(time);       },function () {         time = setInterval(move,2000);           }       );      //右滑动      $(".btn_right").click(function () {        move();      });      //左滑动      $(".btn_left").click(function () {        if(i==0){          i = 5;        }        i = i-2;        move();      })    })  </script></body></html>

轮播图
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>放大镜</title>  <script src="jquery-1.12.4.js"></script>  <style>    *{      margin: 0;      padding: 0;    }    .outer{      width: 350px;      height: 350px;      border: dashed 1px rosybrown;    }    .outer .small_box{      position: relative;    }    .outer .small_box .float{      height: 175px;      width: 175px;      background-color: darkgray;      opacity: 0.4;      fill-opacity: 0.4;      position: absolute;      display: none;    }    .outer .big_box{      height: 400px;      width: 400px;      overflow: hidden;      position:absolute;      left: 360px;      top: 0px;      z-index: 1;      border: 5px solid rebeccapurple;      display: none;    }    .outer .big_box img{      position: absolute;      z-index: 5;    }  </style></head><body>  <div class="outer">      <div class="small_box">        <div class="float"></div>        <img src="img/small.jpg">      </div>      <div class="big_box">        <img src="img/big.jpg">      </div>    </div>  <script src="jquery-1.12.4.js"></script>  <script>    $(function(){     $(".small_box").mouseover(function(){       $(".float").css("display","block");       $(".big_box").css("display","block")     })     $(".small_box").mouseout(function(){       $(".float").css("display","none");       $(".big_box").css("display","none")     })     $(".small_box").mousemove(function(e){       var _event=e || window.event;       var float_width=$(".float").width();       var float_height=$(".float").height();       console.log(float_height,float_width);       var float_height_half=float_height/2;       var float_width_half=float_width/2;       console.log(float_height_half,float_width_half);        var small_box_width=$(".small_box").height();        var small_box_height=$(".small_box").width();// 鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理       var mouse_left=_event.clientX-float_width_half;       var mouse_top=_event.clientY-float_height_half;       if(mouse_left<0){         mouse_left=0       }else if (mouse_left>small_box_width-float_width){         mouse_left=small_box_width-float_width       }       if(mouse_top<0){         mouse_top=0       }else if (mouse_top>small_box_height-float_height){         mouse_top=small_box_height-float_height       }        $(".float").css("left",mouse_left+"px");        $(".float").css("top",mouse_top+"px")        var percentX=($(".big_box img").width()-$(".big_box").width())/ (small_box_width-float_width);        var percentY=($(".big_box img").height()-$(".big_box").height())/(small_box_height-float_height);       console.log(percentX,percentY)        $(".big_box img").css("left", -percentX*mouse_left+"px")        $(".big_box img").css("top", -percentY*mouse_top+"px")     })  })  </script></body></html>

放大镜
<!DOCTYPE html><html lang="en"><!--商城菜单--><head>  <meta charset="UTF-8">  <title>Title</title>  <script src="jquery-1.12.4.js"></script>  <style>    *{  margin: 0;  padding: 0;}.hide{  display:none;}.header-nav {  height: 39px;  background: #c9033b;}.header-nav .bg{  background: #c9033b;}.header-nav .nav-allgoods .menuEvent {  display: block;  height: 39px;  line-height: 39px;  text-decoration: none;  color: #fff;  text-align: center;  font-weight: bold;  font-family: 微软雅黑;  color: #fff;  width: 100px;}.header-nav .nav-allgoods .menuEvent .catName {  height: 39px;  line-height: 39px;  font-size: 15px;}.header-nav .nav-allmenu a {  display: inline-block;  height: 39px;  vertical-align: top;  padding: 0 15px;  text-decoration: none;  color: #fff;  float: left;}.header-menu a{  color:#656565;}.header-menu .menu-catagory{  position: absolute;  background-color: #fff;  border-left:1px solid #fff;  height: 316px;  width: 230px;   z-index: 4;   float: left;}.header-menu .menu-catagory .catagory {  border-left:4px solid #fff;  height: 104px;  border-bottom: solid 1px #eaeaea;}.header-menu .menu-catagory .catagory:hover {  height: 102px;  border-left:4px solid #c9033b;  border-bottom: solid 1px #bcbcbc;  border-top: solid 1px #bcbcbc;}.header-menu .menu-content .item{  margin-left:230px;  position:absolute;  background-color:white;  height:314px;  width:500px;  z-index:4;  float:left;  border: solid 1px #bcbcbc;  border-left:0;  box-shadow: 1px 1px 5px #999;}  </style></head><body><div class="pg-header">  <div class="header-nav">    <div class="container narrow bg">      <div class="nav-allgoods left">        <a id="all_menu_catagory" href="#" class="menuEvent">          <strong class="catName">全部商品分类<>          <span class="arrow" style="display: inline-block;vertical-align: top;"></span>          </strong>        </a>      </div>    </div>  </div>  <div class="header-menu">    <div class="container narrow hide">      <div id="nav_all_menu" class="menu-catagory">        <div class="catagory" float-content="one">          <div class="title">家电</div>          <div class="body">            <a href="#">空调</a>          </div>        </div>        <div class="catagory" float-content="two">          <div class="title">床上用品</div>          <div class="body">            <a href="http://www.baidu.com">床单</a>          </div>        </div>        <div class="catagory" float-content="three">          <div class="title">水果</div>          <div class="body">            <a href="#">橘子</a>          </div>        </div>      </div>      <div id="nav_all_content" class="menu-content">        <div class="item hide" float-id="one">          <dl>            <dt><a href="#" class="red">厨房用品</a></dt>            <dd>              <span>| <a href="#" target="_blank" title="勺子">勺子</a> </span>            </dd>          </dl>          <dl>            <dt><a href="#" class="red">厨房用品</a></dt>            <dd>              <span>| <a href="#" target="_blank" title="菜刀">菜刀</a> </span>            </dd>          </dl>          <dl>            <dt><a href="#" class="red">厨房用品</a></dt>            <dd>              <span>| <a href="#">菜板</a> </span>            </dd>          </dl>          <dl>            <dt><a href="#" class="red">厨房用品</a></dt>            <dd>              <span>| <a href="#" target="_blank" title="碗">碗</a> </span>            </dd>          </dl>        </div>        <div class="item hide" float-id="two">          <dl>            <dt><a href="#" class="red">厨房用品</a></dt>            <dd>              <span>| <a href="#" target="_blank" title="">角阀</a> </span>            </dd>          </dl>          <dl>            <dt><a href="#" class="red">厨房用品</a></dt>            <dd>              <span>| <a href="#" target="_blank" title="角阀">角阀</a> </span>            </dd>          </dl>          <dl>            <dt><a href="#" class="red">厨房用品</a></dt>            <dd>              <span>| <a href="#" target="_blank" title="角阀">角阀</a> </span>            </dd>          </dl>        </div>        <div class="item hide" float-id="three">          <dl>            <dt><a href="#" class="red">厨房用品3</a></dt>            <dd>              <span>| <a href="#" target="_blank" title="角阀">角阀3</a> </span>            </dd>          </dl>          <dl>            <dt><a href="#" class="red">厨房用品3</a></dt>            <dd>              <span>| <a href="http://www.meilele.com/category-jiaofa/" target="_blank" title="角阀">角阀3</a> </span>            </dd>          </dl>        </div>      </div>    </div>  </div></div><script src="jquery-1.12.4.js"></script><script>  $(function () {      Change_menu("#all_menu_catagory","#nav_all_menu","#nav_all_content")    });  function Change_menu(menuF,menuS,menuT) {    $(menuF).bind("mouseover",function () {      $(menuS).parent().removeClass("hide");    });    $(menuF).bind("mouseout",function () {      $(menuS).parent().addClass("hide");    });    $(menuS).children().bind("mouseover",function () {      $(menuS).parent().removeClass("hide");      $items = $(menuT).find('[float-id="'+$(this).attr("float-content")+'"]');      $items.removeClass("hide").siblings().addClass("hide");    });    $(menuS).bind("mouseout",function () {      $(menuS).parent().addClass("hide");      $(menuT).children().addClass("hide");    });    $(menuT).children().bind("mouseover",function () {        $(menuS).parent().removeClass("hide");        $(this).removeClass("hide");      });      $(menuT).children().bind("mouseout",function () {        $(menuS).parent().addClass("hide");        $(this).addClass("hide");      });  }</script></body></html>

商城菜单
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <script src="jquery-1.12.4.js"></script>  <style>    *{      margin: 0 ;    }    .bor_sty{      border: 1px solid red;      width: 200px;      height: 20px;    }    .outer{      height: 400px;      width: 350px;      background-color: gainsboro;      border: 1px dashed beige;      margin: 0 auto;    }    input{      height: 25px;      width: 200px;    }    .subut input{      margin-left: 50px;      background-color: #B2002E;    }    .tran{      border: 1px solid transparent;      width: 200px;      height: 22px;      margin-left: 50px;    }    .hide{      display: none;    }  </style></head><body>  <div class="outer">    <form action="" method="post">      Host:<input type="text" name="test">      <div class="tran">        <div class="bor_sty hide">warning</div>      </div>      <div class="subut">        <input type="submit" name="commit" onclick="return Submit();">      </div>    </form>  </div>  <script>    function Submit() {      $("form").find("input[type='text']").each(function () {        flag = true;        var value = $(this).val();        if (value.trim().length==0){          $(this).siblings().children().removeClass("hide");          flag = false;          return false;        }else{          $(this).siblings().children().addClass("hide");        }      });      return flag;    }  </script></body></html>

前端FORM验证
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>返回顶部</title>  <script src="jquery-1.12.4.js"></script>  <style>    *{      margin: 0;      padding: 0;    }    .div1{      background-color: palegoldenrod;      height: 600px;      width: 100%;    }    .div2{      background-color: antiquewhite;      height: 600px;    }    .div3{      position: fixed;      width: 60px;      height: 40px;      background-color: grey;      right: 0;      bottom: 10px;      font-size: 12px;      cursor: pointer;      line-height: 40px;      text-align: center;    }    .hide{      display: none;    }  </style></head><body>  <div class="div1">111</div>  <div class="div2">222</div>  <div class="div3 hide">返回顶部</div>  <script>    window.onscroll=function(){       var current=$(window).scrollTop();       console.log(current)       if (current>100){         $(".div3").removeClass("hide")       }       else {       $(".div3").addClass("hide")     }     }      $(".div3").click(function div3(){        $(window).scrollTop(0)      })  </script></body></html>

返回顶部
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    *{      margin: 0px;      padding: 0px;    }    .tab_outer{      margin: 0px auto;      width: 60%;    }    .menu{      background-color: #cccccc;      border: 1px solid #ccc;      line-height: 40px;    }    .menu li{      display: inline-block;      color: white;    }    .menu li:hover {      cursor: pointer;    }    .menu a{      padding: 11px;    }    .content{      border: 1px solid #ccc;      height: 300px;      font-size: 30px;    }    .hide{      display: none;    }    .current{      background-color: #0099dd;      color: black;    }  </style></head><body>  <div class="tab_outer">     <ul class="menu">       <li xxx="c1" class="current" onclick="Tab(this);">菜单一</li>       <li xxx="c2" onclick="Tab(this);">菜单二</li>       <li xxx="c3" onclick="Tab(this);">菜单三</li>     </ul>     <div class="content">       <div id="c1">内容一</div>       <div id="c2" class="hide">内容二</div>       <div id="c3" class="hide">内容三</div>     </div>  </div>  <script src="../../jquery-1.12.4.js"></script>  <script>    function Tab(self) {      $(self).addClass("current").siblings().removeClass("current");      var x = "#" + $(self).attr("xxx");      $(x).removeClass("hide").siblings().addClass("hide");    }  </script></body></html>

菜单切换
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    body{      margin: 0;      background-color: #dddddd;    }    .w{      margin: 0 auto;      width: 980px;    }    .pg-header{      background-color: black;      color: white;      height: 48px;    }    .pg-body .menu{      position: absolute;      left: 200px;      width: 180px;      background-color: white;      float: left;    }    li {      list-style-type: none;    }    .pg-body .menu .active{      background-color: #425a66;      color: white;    }    .pg-body .fixed{      position: fixed;      top: 10px;    }    .pg-body .content{      position: absolute;      left: 385px;      right: 200px;      background-color: white;      float: left;    }    .pg-body .content .item{      height: 900px;    }  </style></head><body>  <div class="pg-header">    <div class="w"></div>  </div>  <div class="pg-body">    <div id="menu" class="menu">      <ul>        <li menu="funcOne">第一章</li>        <li menu="funcTwo">第二章</li>        <li menu="funcStree">第三章</li>      </ul>    </div>    <div id="content" class="content">      <div class="item" con="funcOne">床前明月管</div>      <div class="item" con="funcTwo">疑是地上霜</div>      <div class="item" con="funcStree" style="height: 100px">我是郭德纲</div>    </div>  </div>  <script src="../../jquery-1.12.4.js"></script>  <script>    window.onscroll = function () {      var onTop = $(window).scrollTop();      if (onTop >= 48){        $("#menu").addClass("fixed");      }else {        $("#menu").removeClass("fixed");      }      var flag = false;      $(".item").each(function () {        var topH = $(this).offset().top;        var HH = $(this).height() + topH;        var wH = $(window).height();        if ((wH + onTop) == HH){          $("ul .active").removeClass("active");          $("li:last").addClass("active");          flag = true;          return        }        if (flag){          return        }        var menuCon = $(this).attr("con");        if ((topH < onTop) && (onTop < HH)){          $("ul [menu='" + menuCon +"']").addClass("active");        }else {          $("ul [menu='" + menuCon +"']").removeClass("active");        }      })    }  </script></body></html>

滚动菜单
<!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;">      <strong>标题</strong>    </div>    <div style="height: 300px;">      内容    </div>  </div><script type="text/javascript" src="../../jquery-1.12.4.js"></script><script>  $(function () {    $('#title').mouseover(function () {      $(this).css('cursor','move');    }).mousedown(function (e) {      var _event = e || widows.event;      var ord_x = _event.clientX;      var ord_y = _event.clientY;      var parent_left = $(this).parent().offset().left;      var parent_top = $(this).parent().offset().top;      $(this).bind('mousemove',function (e) {        var _new_event = e || window.event;        var new_x = _new_event.clientX;        var new_y = _new_event.clientY;        var x = parent_left + (new_x - ord_x);        var y = parent_top + (new_y - ord_y);        $(this).parent().css('left',x+'px');        $(this).parent().css('top',y+'px');      })    }).mouseup(function () {      $(this).unbind('mousemove');    });  })</script></body></html>

拖动面板
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><body>  <!--1 隐藏与显示-->  <!--2 淡入淡出-->  <!--3 滑动-->  <!--4 效果-回调:每一个动画执行完毕之后所能执行的函数方法或者所能做的一件事-->  <p>hello</p>  <button id="hide">隐藏</button>  <button id="show">显示</button>  <button id="toggle">隐藏/显示</button>  <script src="../../jquery-1.12.4.js"></script>  <script>    $(document).ready(function(){      $("#hide").click(function(){        $("p").hide(1000);      });      $("#show").click(function(){        $("p").show(1000);      });    //用于切换被选元素的 hide() 与 show() 方法。      $("#toggle").click(function(){        $("p").toggle(2000);      });    });  </script></body></html>

隐藏与显示
<!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>    </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" sel-val="1" global-key="STATUS">在线</td>      </tr>      <tr>        <td><input type="checkbox" /></td>        <td edit="true">v1</td>        <td>v11</td>        <td edit="true" edit-type="select" sel-val="2" global-key="STATUS">下线</td>      </tr>      <tr>        <td><input type="checkbox" /></td>        <td edit="true">v1</td>        <td>v11</td>        <td edit="true" edit-type="select" sel-val="1" global-key="STATUS">在线</td>      </tr>    </tbody>  </table>  <script type="text/javascript" src="../../jquery-1.12.4.js"></script>  <script>    /*     监听是否已经按下control键     */    window.globalCtrlKeyPress = false;    window.onkeydown = function(event){      if(event && event.keyCode == 17){        window.globalCtrlKeyPress = true;      }    };    window.onkeyup = function(event){      if(event && event.keyCode == 17){        window.globalCtrlKeyPress = false;      }    };    /*     按下Control,联动表格中正在编辑的select     */    function MultiSelect(ths){      if(window.globalCtrlKeyPress){        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);        });      }    }  </script>  <script type="text/javascript">$(function(){  BindSingleCheck('#edit_mode', '#tb1');});function BindSingleCheck(mode, tb){  $(tb).find(':checkbox').bind('click', function(){    var $tr = $(this).parent().parent();    if($(mode).hasClass('editing')){      if($(this).prop('checked')){        RowIntoEdit($tr);      }else{        RowOutEdit($tr);      }    }  });}function CreateSelect(attrs,csses,option_dict,item_key,item_value,current_val){  var sel= document.createElement('select');  $.each(attrs,function(k,v){    $(sel).attr(k,v);  });  $.each(csses,function(k,v){    $(sel).css(k,v);  });  $.each(option_dict,function(k,v){    var opt1=document.createElement('option');    var sel_text = v[item_value];    var sel_value = v[item_key];    if(sel_value==current_val){      $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).attr('selected',true).appendTo($(sel));    }else{      $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).appendTo($(sel));    }  });  return sel;}STATUS = [  {'id': 1, 'value': "在线"},  {'id': 2, 'value': "下线"}];BUSINESS = [  {'id': 1, 'value': "车上会"},  {'id': 2, 'value': "二手车"}];function RowIntoEdit($tr){  $tr.children().each(function(){    if($(this).attr('edit') == "true"){      if($(this).attr('edit-type') == "select"){        var select_val = $(this).attr('sel-val');        var global_key = $(this).attr('global-key');        var selelct_tag = CreateSelect({"onchange": "MultiSelect(this);"}, {}, window[global_key], 'id', 'value', select_val);        $(this).html(selelct_tag);      }else{        var orgin_value = $(this).text();        var temp = "<input value='"+ orgin_value+"' />";        $(this).html(temp);      }    }  });}function RowOutEdit($tr){  $tr.children().each(function(){    if($(this).attr('edit') == "true"){      if($(this).attr('edit-type') == "select"){        var new_val = $(this).children(':first').val();        var new_text = $(this).children(':first').find("option[value='"+new_val+"']").text();        $(this).attr('sel-val', new_val);        $(this).text(new_text);      }else{        var orgin_value = $(this).children().first().val();        $(this).text(orgin_value);      }    }  });}function CheckAll(mode, tb){  if($(mode).hasClass('editing')){    $(tb).children().each(function(){      var tr = $(this);      var check_box = tr.children().first().find(':checkbox');      if(check_box.prop('checked')){      }else{        check_box.prop('checked',true);        RowIntoEdit(tr);      }    });  }else{    $(tb).find(':checkbox').prop('checked', true);  }}function CheckReverse(mode, tb){  if($(mode).hasClass('editing')){    $(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);        RowOutEdit(tr);      }else{        check_box.prop('checked',true);        RowIntoEdit(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 CheckCancel(mode, tb){  if($(mode).hasClass('editing')){    $(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);        RowOutEdit(tr);      }else{      }    });  }else{    $(tb).find(':checkbox').prop('checked', false);  }}function EditMode(ths, tb){  if($(ths).hasClass('editing')){    $(ths).removeClass('editing');    $(tb).children().each(function(){      var tr = $(this);      var check_box = tr.children().first().find(':checkbox');      if(check_box.prop('checked')){        RowOutEdit(tr);      }else{      }    });  }else{    $(ths).addClass('editing');    $(tb).children().each(function(){      var tr = $(this);      var check_box = tr.children().first().find(':checkbox');      if(check_box.prop('checked')){        RowIntoEdit(tr);      }else{      }    });  }}  </script></body></html>

编辑框