<前端技术>JQuery——操作元素
目录：
操作元素
属性操作
设置或返回被选元素的返回值
attr()方法中可以是name属性值，properties属性的对象，key和value属性的键值。
返回文档中所有图像的src属性值
JQuery代码
$("img").attr("src");
这时我们传入的是一个name属性值，获取到的为元素的返回值
为所有图像设置src和alt属性
JQuery代码
$("img").attr({ src: "test.jpg", alt: "Test Image"});
这时我们传入的是一个properties属性的对象
为所有图像设置src属性
JQuery代码
$("img").attr("src","test.jpg");
这时我们传入的是一个key和value属性的键值
移除属性
html代码
<img src="test.jpg"/>
JQuery代码
$("img").removeAttr("src");
操作结果
[ <img /> ]
添加类
JQuery代码
$("p").addClass("selected");
$("p").addClass("selected1 selected2");
移除类
JQuery代码
$("p").removeClass("selected");
移除所有类
$("p").removeClass();
存在删除类，不存在添加类
JQuery代码
$("p").toggleClass("selected");
设置或返回html的内容
返回p元素的html内容
JQuery代码
$('p').html();
设置所有p元素的html内容
JQuery代码
$("p").html("Hello <b>world</b>!");
设置或返回text的内容
返回p元素的text内容
JQuery代码
$('p').text();
设置所有p元素的text内容
JQuery代码
$("p").text("Hello world!");
设置或返回的value值
返回input元素的value值
JQuery代码
$("input").val();
设置input元素的value值
JQuery代码
$("input").val("hello world!");
css
设置或返回的css样式
返回p元素的color样式
JQuery代码
$("p").css("color");
设置p元素的color样式
JQuery代码
$("p").css("color","red");
设置p元素的多个样式
JQuery代码
$("p").css({ "color": "#ff0011", "background": "blue" });
位置
设置或返回标签偏移
获取偏移
html代码
<p>Hello</p><p>2nd Paragraph</p>
JQuery代码
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
获取结果
<p>Hello</p><p>left: 0, top: 35</p>
设置偏移
JQuery代码
$("p:last").offset({ top: 10, left: 30 });
设置或返回匹配元素相对父元素的偏移
html代码
<p>Hello</p><p>2nd Paragraph</p>
JQuery代码
var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );
获取结果
<p>Hello</p><p>left: 15, top: 15</p>
滚动条距顶部距离
获取滚动条距顶部距离
html代码
<p>Hello</p><p>2nd Paragraph</p>
JQuery代码
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
获取结果
<p>Hello</p><p>scrollTop: 0</p>
设置滚动条距顶部距离
JQuery代码
$("div.demo").scrollTop(300);
滚动条距左边的距离
和上边同理，操作为scrollLeft
高度
获取高度
JQuery代码
$("p").height();
设置高度
JQuery代码
$("p").height(20);
宽度
同高度，操作为width
内部高度
同高度，操作为innerHeight
内部宽度
同高度，操作为innerWidth
外部高度
同高度，操作为outerHeight
外部宽度
同高度，操作为outerWidth
文档操作
文档内部追加内容
文档后追加
html代码
<p>I would like to say: </p>
JQuery代码
$("p").append("<b>Hello</b>");
获取结果
[ <p>I would like to say: <b>Hello</b></p> ]
文档前追加
JQuery代码
$("p").prepend("<b>Hello</b>");
文档外部追加到标签内
html代码
<p>I would like to say: </p>
<div></div><div></div>
JQuery代码
$("p").appendTo("div");
获取结果
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>
文档外部追加到标签内
html代码
<p>I would like to say: </p><div id="foo"></div>
JQuery代码
$("p").prependTo("#foo");
获取结果
<div id="foo"><p>I would like to say: </p></div>
删除文档内容
html代码
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
JQuery代码
$("p").empty();
获取结果
<p></p>
删除文档格式
html代码
<p>Hello</p> how are <p>you?</p>
JQuery代码
$("p").remove();
获取结果
how are
删除指定标签类的操作
$("p").remove(".hello");
克隆
html代码
<b>Hello</b><p>, how are you?</p>
JQuery代码
$("b").clone().prependTo("p");
获取结果
<b>Hello</b><p><b>Hello</b>, how are you?</p>
新增JQuery插件
通过$.fn.extend的方式实现，可自定义JQuery的方法，以下代码定义了一个hello方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
</style>
</head>
<body>
<div id="title">wanghongyu</div>
<script src="jquery-1.8.2.js"></script>
<script>
$(function() {
$.fn.extend({
hello:function(){
return $(this).text()
}
})
var index=$("#title").hello()
alert(index)
})
</script>
</body>
</html>
JQuery代码示例
更多的也可以参考链接
左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>left_menu</title>
<style>
.menu{
height: 500px;
width: 30%;
background-color: gainsboro;
float: left;
}
.content{
height: 500px;
width: 70%;
background-color: rebeccapurple;
float: left;
}
.title{
line-height: 50px;
background-color: #425a66;
color: forestgreen;}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title" onclick="show(this);">菜单一</div>
<div class="con">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this);">菜单二</div>
<div class="con hide">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this);">菜单三</div>
<div class="con hide">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
</div>
<div class="content"></div>
</div>
<script src="jquery-1.8.2.js"></script>
<script>
function show(self){
$(self).next().removeClass("hide")
$(self).parent().siblings().children(".con").addClass("hide")
}
</script>
</body>
</html>
水平菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.tab_outer{
margin: 0px auto;
width: 60%;
}
.menu{
background-color: #cccccc;
/*border: 1px solid red;*/
line-height: 40px;
}
.menu li{
display: inline-block;
}
.menu a{
border-right: 1px solid red;
padding: 11px;
}
.content{
background-color: tan;
border: 1px solid green;
height: 300px;
}
.hide{
display: none;
}
.current{
background-color: darkgray;
color: yellow;
border-top: solid 2px rebeccapurple;
}
</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.8.2.js"></script>
<script>
function tab(self){
var index=$(self).attr("xxx")
$("#"+index).removeClass("hide").siblings().addClass("hide")
$(self).addClass("current").siblings().removeClass("current")
}
</script>
</body>
</html>
新增标签可以实现和原标签一样的效果
原始代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
</style>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
</ul>
<button></button>
<script src="jquery-1.8.2.js"></script>
<script>
$(function() {
$("li").click(function (){
alert("123");
})
$("button").click(function () {
$("ul").append("<li>777</li>")
})
})
</script>
</body>
</html>
点击button可以实现添加li标签，但是只有之前的点击能实现alert，因为在加载js的时候，只为原来的6个绑定了js，而新添加的li标签并没有绑定js
这种情况可以通过委托ul，进而实现点击的时候绑定js
JavaScript代码
$(function() {
$("ul").delegate("li","click",function (){
alert("123");
})
$("button").click(function () {
$("ul").append("<li>777</li>")
})
})
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
*{
margin: 0;
padding: 0px; /*放入盒子*/
}
ul li{
list-style: none; /*li没有样式*/
}
.outer{
height: 340px;
width: 790px;
border: dashed cadetblue 5px;
margin: 0 auto; /*居中*/
position: relative;
}
.outer .img li{ /*图片重叠*/
position: absolute;
left: 0;
top: 0;
}
.num{ /*脱离文档流，防止图片覆盖*/
position: absolute;
left: 0;
bottom: 10px; /*距离底部10px*/
font-size: 0px; /*去除li圆点的距离，注意num li要这是font-size显示数字，否则不显示*/
text-align: center; /*居中*/
width: 100%; /*居中，因为脱离文档流，需要指定宽度*/
}
.num li{ /**/
height: 20px;
width: 20px;
background-color: darkgray;
border-radius: 60%; /*圆形*/
text-align: center; /*文本居中*/
line-height: 20px;
display: inline-block; /*内联水平排列*/
font-size: 16px;
margin: 5px; /*设置距离*/
cursor: pointer; /*小手*/
}
.button{
height: 60px;
width: 40px;
background-color: darkgrey;
position: absolute;
top: 50%; /*竖直方向中间*/
margin-top: -30px; /*竖直方向中间，上扬30px根据height60px*/
opacity: 0.6; /*透明度*/
font-size: 40px;
font-weight: bolder; /*箭头加粗*/
text-align: center; /*居中*/
line-height: 60px; /*居中*/
display: none; /*默认隐藏*/
cursor: pointer; /*小手*/
}
.btn_right{
right: 0;
}
.outer:hover .button{ /*鼠标悬浮显示*/
display: block;
}
.outer .num li.current{ /*背景色*/
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><img src="image/1.jpg"></li>
<li><img src="image/2.jpg"></li>
<li><img src="image/3.jpg"></li>
<li><img src="image/4.jpg"></li>
<li><img src="image/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 button"> < </div>
<div class="btn_right button"> > </div>
</div>
<script src="jquery-1.8.2.js"></script>
<script>
$(function() {
$(".img li").eq(0).fadeIn(0);
$(".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).fadeIn(1000).siblings().fadeOut(1000);
})
})
i = 0;
var time=setInterval(move,1500); /*定时器自动轮播*/
function move(){
i++;
if(i==5){
i=0;
}
$(".num li").eq(i).addClass("current").siblings().removeClass("current");
$(".img li").eq(i).fadeIn(1000).siblings().fadeOut(1000)
}
$(".outer").hover(function(){ /*定义鼠标放入后暂停定时器，移除时启动*/
clearInterval(time)
},function(){
time=setInterval(move,1500);
})
$(".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</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 src="jquery-1.8.2.js"></script>
<script>
$(function(){
// 页面加载完就开始执行
$("#title").mouseover(function(){
$(this).css('cursor','move');
}).mousedown(function(e){
var _event = e || window.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>
<div class="outer">
<div class="condition">
<div class="icons" style="display:inline-block">
<a onclick="add(this);"><button>+</button></a>
</div>
<div class="input" style="display:inline-block">
<input type="checkbox">
<input type="text" value="alex">
</div>
</div>
</div>
<script src="jquery-1.8.2.js"></script>
<script>
function add(self){
var $duplicate = $(self).parent().parent().clone();
$duplicate.find('a[onclick="add(this);"]').attr('onclick',"removed(this)").children("").text("-");
$duplicate.appendTo($(self).parent().parent().parent());
}
function removed(self){
$(self).parent().parent().remove()
}
</script>
</body>
</html>
放大镜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bigger</title>
<style>
*{
margin: 0;
padding:0;
}
.outer{
height: 350px;
width: 350px;
border: dashed 5px cornflowerblue;
}
.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="small.jpg">
</div>
<div class="big_box">
<img src="big.jpg">
</div>
</div>
<script src="jquery-1.8.2.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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<title>购物商城</title>
<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">全部商品分类</strong>
<span class="arrow" style="display: inline-block;vertical-align: top;"></span>
</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.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
Change_Menu('#all_menu_catagory','#nav_all_menu', '#nav_all_content');
});
function Change_Menu(all_menu_catagory,menu, content) {
$all_menu_catagory = $(all_menu_catagory);
$menu = $(menu);
$content = $(content);
$all_menu_catagory.bind("mouseover", function () {
$menu.parent().removeClass('hide');
});
$all_menu_catagory.bind("mouseout", function () {
$menu.parent().addClass('hide');
});
$menu.children().bind("mouseover", function () {
$menu.parent().removeClass('hide');
$item_content = $content.find('div[float-id="' + $(this).attr("float-content") + '"]');
$item_content.removeClass('hide').siblings().addClass('hide');
});
$menu.bind("mouseout", function () {
$content.children().addClass('hide');
$menu.parent().addClass('hide');
});
$content.children().bind("mouseover", function () {
$menu.parent().removeClass('hide');
$(this).removeClass('hide');
});
$content.children().bind("mouseout", function () {
$(this).addClass('hide');
$menu.parent().addClass('hide');
});
}
</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.8.2.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>
左右添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function(){
//移到右边
$('#add').click(function(){
//先判断是否有选中
if(!$("#select1 option").is(":selected")){
alert("请选择需要移动的选项")
}
//获取选中的选项，删除并追加给对方
else{
$('#select1 option:selected').appendTo('#select2');
}
});
//移到左边
$('#remove').click(function(){
//先判断是否有选中
if(!$("#select2 option").is(":selected")){
alert("请选择需要移动的选项")
}
else{
$('#select2 option:selected').appendTo('#select1');
}
});
//全部移到右边
$('#add_all').click(function(){
//获取全部的选项,删除并追加给对方
$('#select1 option').appendTo('#select2');
});
//全部移到左边
$('#remove_all').click(function(){
$('#select2 option').appendTo('#select1');
});
//双击选项
$('#select1').dblclick(function(){ //绑定双击事件
//获取全部的选项,删除并追加给对方
$("option:selected",this).appendTo('#select2'); //追加给对方
});
//双击选项
$('#select2').dblclick(function(){
$("option:selected",this).appendTo('#select1');
});
});
</script>
<!--效果html开始-->
<div class="selectbox">
<div class="select-bar">
<select multiple="multiple" id="select1">
<option value="超级管理员">超级管理员</option>
<option value="普通管理员">普通管理员</option>
<option value="信息发布员">信息发布员</option>
<option value="财务管理员">财务管理员</option>
<option value="产品管理员">产品管理员</option>
<option value="资源管理员">资源管理员</option>
<option value="系统管理员">系统管理员</option>
<option value="超级管理员">超级管理员</option>
<option value="普通管理员">普通管理员</option>
<option value="信息发布员">信息发布员</option>
<option value="财务管理员">财务管理员</option>
<option value="产品管理员">产品管理员</option>
<option value="资源管理员">资源管理员</option>
</select>
</div>
<div class="btn-bar">
<p><span id="add"><input type="button" class="btn" value=">" title="移动选择项到右侧"/></span></p>
<p><span id="add_all"><input type="button" class="btn" value=">>" title="全部移到右侧"/></span></p>
<p><span id="remove"><input type="button" class="btn" value="<" title="移动选择项到左侧"/></span></p>
<p><span id="remove_all"><input type="button" class="btn" value="<<" title="全部移到左侧"/></span></p>
</div>
<div class="select-bar">
<select multiple="multiple" id="select2"></select>
</div>
</div>
</body>
</html>
