什么是 jQuery ?
jQuery 是一个 JavaScript 库，它极大地简化了 JavaScript 编程。
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。
CSS伪类和伪元素
hover用于鼠标移动到元素上面时，改变元素的样式，比写JS实现方便。
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
写到common.css文件中，在布局的时候用到float是，可以很方便的引用到需要clear:both的地方。
tab菜单样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab exercise</title>
<style>
.content {
margin: 0 auto;
padding: 0;
}
.tab-tittle {
background-color: #999999;
border: none;
line-height: 35px;
}
/*利用伪元素实现clear:both*/
.tab-tittle:after {
content: ".";
visibility: hidden;
height: 0;
display: block;
clear: both;
}
.tab-info {
border: none;
}
.hide {
display: none;
}
.current {
background-color: #FFFFFF;
border-top: 2px solid red;
}
li {
display: inline;
list-style: none;
margin: 0;
padding: 0 10px;
cursor: pointer;
float: left;
}
</style>
</head>
<body>
<div class="content">
<div class="tab-tittle">
<ul>
<li class="current" pointTo="info1" onclick="GoTab(this);">菜单一</li>
<li pointTo="info2" onclick="GoTab(this);">菜单二</li>
<li pointTo="info3" onclick="GoTab(this);">菜单三</li>
</ul>
</div>
<div class="tab-info">
<div id="info1">内容一</div>
<div id="info2" class="hide">内容二</div>
<div id="info3" class="hide">内容三</div>
</div>
</div>
<script src="../jquery-2.2.3.js"></script>
<script>
function GoTab(ths) {
$(ths).addClass("current").siblings().removeClass("current");
var tmp = "#" + $(ths).attr("pointTo");
$(tmp).removeClass("hide").siblings().addClass("hide");
}
</script>
</body>
</html>
tab菜单样式
checkbox全选、反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Check Box Exercise</title>
</head>
<body>
<div>
<button value="全选" onclick="CheckAll();">全选</button>
<button value="取消" onclick="ClearAll();">取消</button>
<button value="取消" onclick="ReverseAll();">反选</button>
</div>
<div>
<table border="1">
<tr>
<td><input type="checkbox" /></td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>123</td>
<td>456</td>
</tr>
</table>
</div>
<script src="../jquery-2.2.3.js"></script>
<script>
function CheckAll() {
$("table :checkbox").prop("checked", true);
}
function ClearAll() {
$("table :checkbox").prop("checked", false);
}
function ReverseAll() {
var checkboxArray = $("table :checkbox");
// for (var i= 0;i<checkboxArray.length;i++) {
// console.log(checkboxArray[i]);
// }
// console.log("===============================");
// for ( i in checkboxArray) {
// console.log(checkboxArray[i]);
// }
// 反选的两种方法
// 方法一
$.each (checkboxArray, function(i, item) {
console.log(item);
var isChecked = $(item).prop("checked");
if (isChecked) {
$(item).prop("checked", false);
} else {
$(item).prop("checked", true);
}
});
// 方法二
// $("table :checkbox").each(function() {
// var isChecked = $(this).prop("checked");
// if (isChecked) {
// $(this).prop("checked", false);
// } else {
// $(this).prop("checked", true);
// }
// })
}
</script>
</body>
</html>
checkbox
位置：scrollTop和offset
scrollTop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scrollTop</title>
<style>
.go-top {
position: fixed;
right: 5px;
bottom: 5px;
width: 70px;
height: 20px;
background-color: #8AC007;
}
a {
cursor: pointer;
text-decoration: none;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div style="background-color: red; height: 300px; overflow: scroll">
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<div style="right: 10px; bottom: 10px">
<a onclick="GoTop();">内部返回顶部</a>
</div>
</div>
<div style="background-color: #999999">
<div style="height: 2000px"></div>
<div class="go-top hide">
<a onclick="GoTop();">返回顶部</a>
</div>
</div>
<script src="../jquery-2.2.3.js"></script>
<script>
function GoTop() {
$(window).scrollTop(0);
}
window.onscroll = function() {
if ($(window).scrollTop() > 100) {
$(".go-top").removeClass("hide");
} else {
$(".go-top").addClass("hide");
}
}
</script>
</body>
</html>
offset
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0px;
}
img {
border: 0;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.wrap{
width: 980px;
margin: 0 auto;
}
.pg-header{
background-color: #303a40;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.pg-header .logo{
float: left;
padding:5px 10px 5px 0px;
}
.pg-header .logo img{
vertical-align: middle;
width: 110px;
height: 40px;
}
.pg-header .nav{
line-height: 50px;
}
.pg-header .nav ul li{
float: left;
}
.pg-header .nav ul li a{
display: block;
color: #ccc;
padding: 0 20px;
text-decoration: none;
font-size: 14px;
}
.pg-header .nav ul li a:hover{
color: #fff;
background-color: #425a66;
}
.pg-body{
}
.pg-body .catalog{
position: absolute;
top:60px;
width: 200px;
background-color: #fafafa;
bottom: 0px;
}
.pg-body .catalog.fixed{
position: fixed;
top:10px;
}
.pg-body .catalog .catalog-item.active{
color: #fff;
background-color: #425a66;
}
.pg-body .content{
position: absolute;
top:60px;
width: 700px;
margin-left: 210px;
background-color: #fafafa;
overflow: auto;
}
.pg-body .content .section{
height: 500px;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="wrap clearfix">
<div class="logo">
<a href="#">
<img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
</a>
</div>
<div class="nav">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">功能一</a>
</li>
<li>
<a href="#">功能二</a>
</li>
</ul>
</div>
</div>
</div>
<div class="pg-body">
<div class="wrap">
<div class="catalog">
<div class="catalog-item" auto-to="function1"><a>第1章</a></div>
<div class="catalog-item" auto-to="function2"><a>第2章</a></div>
<div class="catalog-item" auto-to="function3"><a>第3章</a></div>
</div>
<div class="content">
<div menu="function1" class="section">
<h1>第一章</h1>
</div>
<div menu="function2" class="section">
<h1>第二章</h1>
</div>
<div menu="function3" class="section">
<h1>第三章</h1>
</div>
</div>
</div>
</div>
<script src="../jquery-2.2.3.js"></script>
<script>
window.onscroll = function() {
var scrollHeight = $(window).scrollTop();
console.log("滚动高度：");
console.log(scrollHeight);
if (scrollHeight > 50) {
$(".catalog").addClass("fixed");
} else {
$(".catalog").removeClass("fixed");
}
$(".content").children().each(function() {
// 当前元素的对视图的相对高度
var currentOffset = $(this).offset();
var currentOffsetTop = currentOffset.top;
console.log("当前元素的对视图的相对高度：");
console.log(currentOffsetTop);
var totalHeight = currentOffsetTop + $(this).height();
if (currentOffsetTop < scrollHeight && totalHeight > scrollHeight) {
// 滑轮滚动的高度+window的高度 = 文档的高度
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
$(".catalog").children(":last").css("fontSize", "48px").siblings().css("fontSize", "12px");
} else {
var catalogTag = $(this).attr("menu");
var tagat = "div[auto-to='"+catalogTag+"']";
$(".catalog").children(tagat).css("fontSize", "48px").siblings().css("fontSize", "12px");
return;
}
}
})
}
</script>
</body>
</html>
事件：两种绑定事件的方式和委托delegate
委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>event exercise</title>
</head>
<body>
<div>
<input type="button" value="增加" />
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<script src="../jquery-2.2.3.js"></script>
<script>
$(function() {
$("input").click(function() {
$("ul").append("<li>8</li>");
})
});
// $(document).ready(function() {
// $("li").css("cursor", "pointer");
// $("li").click(function() {
// console.log($(this).text());
// alert($(this).text())
// })
// });
// $(function() {
// $("li").bind("click", function(){
// alert($(this).text());
// })
// });
$(function() {
$("ul").delegate("li", "click", function() {
alert($(this).text());
})
});
</script>
</body>
</html>
拖动窗口
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>move exercise</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 old_x = _event.clientX;
var old_y = _event.clientY;
var parent_old_x = $(this).parent().offset().left;
var parent_old_y = $(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 = new_x - old_x;
var y = new_y - old_y;
var parent_new_x = parent_old_x + x;
var parent_new_y = parent_old_y + y;
$(this).parent().css("left", parent_new_x+"px");
$(this).parent().css("top", parent_new_y+"px");
})
}).mouseup(function() {
$(this).unbind("mousemove");
});
});
</script>
</body>
</html>