table 全选、反选、清除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select</title>
</head>
<body> <div>
<input type="button" value="全选" onclick="SelectAll();"/>
<input type="button" value="取消" onclick="ClearAll();"/>
<input type="button" value="反选" onclick="ReverseAll();"/>
</div>
<div>
<table border="1">
<tr>
<td><input type="checkbox"/></td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>123</td>
<td>123</td>
</tr>
</table>
</div>
<script src="jquery-2.2.3.js"></script>
<script>
function SelectAll(){
// checked 设置默认是否选中
// 先找到所有table下的chekcbox,然后使用prop给checked设置ture 或者false
$('table :checkbox').prop('checked',true);
}
function ClearAll(){
$('table :checkbox').prop('checked',false);
}
function ReverseAll(){
// $table :checkbox 找到所有的checkbox,注意加空格.each循环后面的所有函数
$('table :checkbox').each(function(){ var isChecked = $(this).prop('checked');
if (isChecked){
$(this).prop('checked',false);
}else {
$(this).prop('checked',true);
}
})
}
</script>
</body>
</html>
选择li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="添加" onclick="AddContent();"/>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
<script src="jquery-2.2.3.js"></script>
<script>
function AddContent(){
$('ul').append('<li>9</li>')
}
//$(document).ready(function)(){代码区} 在DOM加载完成时运行的代码
//或者$(function($) {////});
// 你可以在这里继续使用$作为别名...
$(function(){
$('ul').delegate('li','click',function(){
var temp = $(this).text();
alert(temp);
})
})
</script>
</body>
</html>
修改css
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style> body{
margin: 0;
}
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 0;
}
.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: 0;
}
.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.conscroll = 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 (ws>offTop && total > ws){
if ($(window).scrollTop()+$(window).height()==$(document).height()){
$('.catalog').children(':last').css('fontSize','48px').siblings().css('fontSize','12px');
}else {
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>
<!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 src="jquery-2.2.3.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>table</title>
<style>
.tab-box .box-menu{
background-color: #9a9a9a;
border: 1px solid #5cb85c;
height: 30px;
}
.tab-box .box-body{
border: 1px solid #5cb85c;
height: 300px;
}
.hide{
display: none;
}
.current{
background-color: #18a689;
color: white;
}
</style>
</head>
<body>
<div class="tab-box">
<div class="box-menu">
<!--all menu-->
<a tx="c1" onclick="ChangeTab(this);">菜单一</a>
<a tx="c2" onclick="ChangeTab(this);">菜单二</a>
<a tx="c3" onclick="ChangeTab(this);">菜单三</a>
</div>
<div class="box-body">
<!--all content-->
<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(ths){
// 当前标签增加current,其他移除
$(ths).addClass('current').siblings().removeClass('current');
// 获取当前标签的属性'tx',根据'tx'获取关联的id
var contentId = $(ths).attr('tx');
// 拼接获取的id
var temp = '#' + contentId;
// 给获取的id设置移除隐藏,其他增加隐藏
$(temp).removeClass('hide').siblings().addClass('hide');
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>top</title>
<style>
.go-top{
position: fixed;
width: 200px;
height: 200px;
right: 10px;
bottom: 10px; }
.hide{
display: none;
}
</style>
</head>
<body>
<div style="height: 2048px">
<div style="background-color: #7cbe56;height: 500px">这里是顶部</div>
<div class="go-top hide"> <img src="top.jpg" alt="返回顶部" onclick="GoTop();"/>
</div>
</div>
<script src="jquery-2.2.3.js"></script>
<script>
window.onscroll = function(){
var currentTop = $(window).scrollTop();
if (currentTop>100){
$('.go-top').removeClass('hide');
}else {
$('.go-top').addClass('hide');
}
};
function GoTop(){
$(window).scrollTop(0);
} </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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?callback=list&_=1454376870403",
data:{},
type:'GET',
dataType:'jsonp',
jsonp:'callback',
jsonpCallback:'list',
success:function(arg){
console.log(arg);
var jsonArry = arg.data;
$.each(jsonArry,function(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>
<!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 type="text/javascript" src="jquery-2.2.3.js"></script>
<script type="text/javascript">
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(ws>offTop && total>ws){
if($(window).scrollTop()+$(window).height == $(document).height()){
$(".catalog").children(':last').css("fontSize",'48px').sibling().css("fontSize",'12px');
}else{
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>