1正反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<th><tr>
<td><input type="button" value="全选" onclick="All();"></td>
<td><input type="button" value="取消" onclick="UnAll();"></td>
<td><input type="button" value="反选" onclick="rever();"></td>
</tr></th>
<tr><td><input type="checkbox"></td><td>222222</td></tr>
<tr><td><input type="checkbox"></td><td>222222</td></tr>
<tr><td><input type="checkbox"></td><td>222222</td></tr>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function All() {
$('table :checkbox').prop('checked',true)
}
function UnAll() {
$('table :checkbox').prop('checked',false)
}
function rever() {
$('table :checkbox').each(
function () {
if($(this).prop('checked')){
$(this).prop('checked',false)
}else{
$(this).prop('checked',true)
}
}
)
}
</script>
</body>
</html>
2、返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.aa{
height: 2000px;
}
.top{
height: 50px;
width: 50px;
background-color: yellow;
position: fixed;
right:20px;
bottom:20px;
}
.hide{
display: none;
}
</style>
</head>
<body >
<div class="aa"><h1>TopTopTop</h1></div>
<div class="hide top" ><a href>返回顶部</a></div>
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(window).scroll(function () {
// console.log($(window).scrollTop);
if ($(window).scrollTop()>50){
// 大于50显示返回顶部按钮
$('.top').removeClass('hide')
}else{$('.top').addClass('hide')}
// 小于50则隐藏
});
$('.top').click(function () {
// 设置滚动条滚动高度为0
$(window).scrollTop(0)
})
</script>
</body>
</html>
3隐藏content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
list-style: none;
padding: 0;
margin: 0;
}
ul li{
float: left;
background-color: #2459a2;
color: white;
padding: 8px 10px;
cursor: pointer;
}
.clearfix:after{
display: block;
content: '.';
height: 0;
visibility: hidden;
clear: both;
}
.hide{
display: none;
}
.tab-menu .title{
background-color: #dddddd;
}
.tab-menu .title .active{
background-color: red;
color: white;
}
.tab-menu .content{
border: 1px solid #dddddd;
min-height: 150px;
}
</style> </head>
<body>
<div class="tab-menu">
<div class="title clearfix">
<ul>
<li target="1" class="active" >价格趋势</li>
<li target="2" >市场分布</li>
<li target="3" >其他</li>
</ul>
</div>
<div id="content" class="content">
<div con="1">content1</div>
<div con="2" class="hide">content2</div>
<div con="3" class="hide">content3</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('li').click(function () {
$(this).addClass('active').siblings().removeClass('active');
// 自己加上active 其他的兄弟去除active
var index=$(this).attr('target');
// 获取点击的target值，用来匹配对应的content内容
$("[con='"+index+"']").removeClass('hide').siblings().addClass('hide');
// 自己去掉hide 其他的兄弟加上hide
})
</script>
</body>
</html>
4、菜单自动固定变化
<!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;
}
.pg-body .menu .active{
background-color: #425a66;
color: white; }
.pg-body .fixed{
position: fixed;
top: 0px;
}
.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="1">第一章</li>
<li menu="2">第二章</li>
<li menu="3">第三章</li>
</ul>
</div>
<div id="content" class="content">
<div class="item" con="1">床前明月管</div>
<div class="item" con="2">疑是地上霜</div>
<div class="item" con="3" style="height: 100px">我是郭德纲</div>
</div> </div>
<script src="jquery-1.12.4.js"></script>
<script>
$(window).scroll(function () {
var top=$(window).scrollTop();
if(top>48){$('#menu').addClass('fixed')}else{$('#menu').removeClass('fixed')}
if(top+$(window).height()==$(document).height()){
$('ul').children().last().addClass('active').siblings().removeClass('active');
return
}
var contents=$('.item');
$.each(contents,function () {
var bodytop=$('.content').offset().top;
var itemtop=$(this).offset().top;
var itemheight=$(this).height();
var itemabtop=bodytop+itemtop;
var itembottom=itemabtop+itemheight;
// console.log(itemabtop+itemheight,top,itemabtop);
if(itembottom>top &&top>itemabtop){
var index=$(this).attr('con');
console.log(111);
$("[menu='"+index+"']").addClass('active').siblings().removeClass('active');
return
}
})
})
</script>
</body>
</html>
5、模态对话框编辑单个条目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="section">
<div class="icons" style="display: inline-block">
<a onclick="add(this)"><button>+</button></a>
</div>
<div class="inputs" style="display: inline-block">
<input type="checkbox">
<input type="text" value="IP">
</div>
</div>
</div> <script src="jquery-1.12.4.js"></script>
<script> function add(self) {
var item=$(self).parent().parent().clone();
item.find('a').children().text('-').parent().attr('onclick','remove8(this);');
$('.outer').append(item)
}
function remove8(self) {
$(self).parent().parent().remove()
}
</script>
</body>
</html>
6、添加删除标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="section">
<div class="icons" style="display: inline-block">
<a onclick="add(this)"><button>+</button></a>
</div>
<div class="inputs" style="display: inline-block">
<input type="checkbox">
<input type="text" value="IP">
</div>
</div>
</div> <script src="jquery-1.12.4.js"></script>
<script> function add(self) {
var item=$(self).parent().parent().clone();
item.find('a').children().text('-').parent().attr('onclick','remove8(this);');
$('.outer').append(item)
}
function remove8(self) {
$(self).parent().parent().remove()
}
</script>
</body>
</html>
7、同时编辑多个条目
<!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;
}
.text{
width: 100%;
border: 0;
}
</style>
</head>
<body> <div style="padding: 20px">
<input type="button" value="全选" />
<input type="button" value="反选" />
<input type="button" value="取消" /> <a id="into_edit" class="edit-mode">进入编辑</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 name="host">v1</td>
<td name="port">v11</td>
<td name="status">在线</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td name="host">v1</td>
<td name="port">v11</td>
<td name="status">离线</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td name="host">v1</td>
<td name="port">v11</td>
<td name="status">在线</td>
</tr> </tbody>
</table> <script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript" src="bianji.js"></script> <script>
/*
监听是否已经按下control键
*/
$(document).ready(function () {
ctrl = false;
window.onkeydown = function (event) {
if (event && event.keyCode == 17) {
ctrl = true;
}
};
// 按键起来时改成false
window.onkeyup = function (event) {
if (event && event.keyCode == 17) {
ctrl = false;
}
};
})
</script> </body>
</html>
HTML
//Created by shenwenlong on 2016/7/17.
$(':button[value="全选"]').click( function () {
$('table :checkbox').prop('checked',true);
if(into%2==1){into_edit();}//如果是编辑模式
});
$(':button[value="反选"]').click( function () {
$('table :checkbox').each(function () {
if($(this).prop('checked')){
$(this).prop('checked',false);
if(into%2==1){exit(this);}//已选中的退出编辑
}else{
$(this).prop('checked',true);
if(into%2==1){edit(this);}//未选中的进入编辑
}});
});
$(':button[value="取消"]').click(function () {
$('table :checkbox').each(function () {
$(this).prop('checked',false);
if(into%2==1){exit(this);}//循环全部退出编辑
});
});
//into用来判断是否进入编辑模式，如果为奇数，则进入编辑模式，为偶数则未进入
into=0;
$('#into_edit').click(function () {
into++;
if(into%2==0){$('#into_edit').removeClass('editing');}//如果是偶数，代表不是编辑模式，去除editing样式
else{$('#into_edit').addClass('editing');}//如果是偶奇数，代表是编辑模式，添加editing样式
into_edit();//无论进入或退出，都执行函数，函数里边会进行判断
});
$(':checkbox').click(function () {
if(into%2==1){ //如果是编辑模式 则验证如果是选中的，就执行进入编辑函数edit 反之执行突出编辑函数exit
if($(this).prop('checked')){edit(this);}else{exit(this);}
}
});
function bind_select() {//绑定select的函数，由于进入编辑时需要生成select标签，生成完毕会调用此函数用来绑定时间
$('select').delegate(this,"change",function() {
if(ctrl){//如果ctrl键被按下，所有select就一起跟着变
var option=$(this).children().filter(':selected').attr('value');
console.log(option,222);
$('option').filter('[value="'+option+'"]').prop('selected',true)
}
});
}
function into_edit() {
$(':checkbox').each(function () {
if(into%2==1){ //如果是编辑模式 就检测是否为选中的，如果选中就进入编辑模式
if ($(this).prop('checked')==true){
edit(this);
}
}
else{//如果不是编辑模式，就退出编辑模式
if ($(this).prop('checked')==true) {
exit(this);
}}
})
}
function edit(self) {//进入编辑模式的函数
if($(self).attr('class')!='active'){//如果该条目不是编辑状态 再进入编辑状态
$(self).parent().siblings().each(function () {//循环该条目除复选框外的所以项
$(self).addClass('active'); //添加样式，用来标记为正在修改状态
var val=$(this).text(); //获取里边的值
if($(this).attr('name')=='status'){//如果是最后一个选择的框，就清空该标签.添加进去一个选择框
$(this).empty().html('<select><option value="在线">在线</option><option value="离线">离线</option></select>');
$(this).children().children().filter('[value="'+val+'"]').prop('selected',true);//设置原来的值为选中值
bind_select();//为新生成select绑定的事件
return false ;//停止循环and停止函数继续向下执行
}
$(this).html('<input class="text" type="text" value="'+val+'">');//如果不是最后一个，就修改为input标签，value等于原来的值
});
}
}
function exit(self) {//退出编辑模式的函数
if($(self).attr('class')=='active'){//如果该条目是编辑状态 再进行退出编辑
$(self).parent().siblings().each(function () {//循环该条目除复选框外的所以项
$(self).removeClass('active');//去除正在编辑的标记
if($(this).attr('name')=='status'){//如果是最后一个选择的框，就清空该标签.添加进去刚选中的值
var val=$(this).children().children().filter(':selected').val();
$(this).empty().text(val);
return false;//停止循环and停止函数继续向下执行
}
var val=$(this).children().val();
$(this).empty().text(val);//如果不是最后一个，就清空，把input的值填进去
})
}
}
JS
8、可移动的div
<!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-1.12.4.js"></script>
<script>
$(function(){
// 页面加载完成之后自动执行
$('#title').mouseover(function(){
$(this).css('cursor','move');
}).mousedown(function(e){
//console.log($(this).offset());
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>
<head lang="en">
<meta charset="UTF-8">
<title>编辑框</title>
<style>
.edit-mode{
background-color: #b3b3b3;
padding: px;
text-decoration: none;
color: white;
}
.editing{
background-color: #f0ad4e;
}
.text{
width: %;
border: ;
}
</style>
</head>
<body> <div style="padding: px">
<input type="button" value="全选" />
<input type="button" value="反选" />
<input type="button" value="取消" /> <a id="into_edit" class="edit-mode">进入编辑</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 name="host">v1</td>
<td name="port">v11</td>
<td name="status">在线</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td name="host">v1</td>
<td name="port">v11</td>
<td name="status">离线</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td name="host">v1</td>
<td name="port">v11</td>
<td name="status">在线</td>
</tr> </tbody>
</table> <script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript" src="bianji.js"></script> <script>
/*
监听是否已经按下control键
*/
$(document).ready(function () {
ctrl = false;
window.onkeydown = function (event) {
if (event && event.keyCode == ) {
ctrl = true;
}
};
// 按键起来时改成false
window.onkeyup = function (event) {
if (event && event.keyCode == ) {
ctrl = false;
}
};
})
</script> </body>
</html>