元素絕對位置
尺寸相關第喳、滾動事件
1、獲取和設置元素的尺寸
width()踱稍、height()? ? 獲取元素width和height?
innerWidth()曲饱、innerHeight()? 包括padding的width和height?
outerWidth()吩跋、outerHeight()? 包括padding和border的width和height?
outerWidth(true)、outerHeight(true)? 包括padding和border以及margin的width和height
2渔工、獲取元素相對頁面的絕對位置
offset()
3锌钮、獲取可視區(qū)高度
$(window).height();
4、獲取頁面高度
$(document).height();
5引矩、獲取頁面滾動距離
$(document).scrollTop();?
$(document).scrollLeft();
6梁丘、頁面滾動事件
$(window).scroll(function(){?
? ? ......?
})
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素絕對位置</title>
<style type="text/css">
.con{
width: 600px;
height: 600px;
margin: 50px auto 0;
}
.box{
width: 100px;
height: 100px;
background-color: gold;
margin-bottom: 10px;
}
.pos{
margin-left: 500px;
}
.pop{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
left:0;
top: 0;
display: none;
}
</style>
<script type="text/javascript" src="JS/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $pos = $('.pos');
//offset()是獲取相對于頁面左上角的絕對位置，即使外面再包一層con居中層旺韭，也不影響效果
var pos = $pos.offset();
// console.log(pos);
// alert(pos.left + "," + pos.top);
var w = $pos.outerWidth();
var h = $pos.outerHeight();
// alert(w);
$('.pop').css({left:pos.left + w,top:pos.top});
$pos.mouseover(function() {
$('.pop').show();
});
$pos.mouseout(function() {
$('.pop').hide();
});
})
</script>
</head>
<body>
<div class="con">
<div class="box"></div>
<div class="box"></div>
<div class="box pos"></div>
<div class="box"></div>
</div>
<div class="pop">提示信息氛谜！</div>
</body>
</html>
鼠標移入移出
jquery事件
事件函數(shù)列表：
mouseover() 鼠標進入（進入子元素也觸發(fā)）
mouseout() 鼠標離開（離開子元素也觸發(fā)）
mouseenter() 鼠標進入（進入子元素不觸發(fā)）
mouseleave() 鼠標離開（離開子元素不觸發(fā)）
hover() 同時為mouseenter和mouseleave事件指定處理函數(shù)
代碼：
<!DOCTYPE html>
<html lang="en">
? <meta charset="UTF-8">
? <title>鼠標移入移出
? <style type="text/css">
? ? ? .box{
width:200px;
? ? ? ? height:200px;
? ? ? ? background-color:gold;
? ? ? ? margin:100px auto 0;
? ? ? }
.son{
width:100px;
? ? ? ? height:100px;
? ? ? ? background-color:green;
? ? ? }
? <script type="text/javascript" src="JS/jquery-1.12.4.min.js">
? <script type="text/javascript">
? ? ? $(function(){
/*進入子元素也觸發(fā)*/
/*$('#div1').mouseover(function() {
$(this).animate({marginTop: 50});//.stop()
});
$('#div1').mouseout(function() {
$(this).animate({marginTop: 100});//.stop()
});*/
? ? ? ? /*進入子元素不觸發(fā)*/
/*$('#div1').mouseenter(function() {
$(this).stop().animate({marginTop: 50});//
});
$('#div1').mouseleave(function() {
$(this).stop().animate({marginTop: 100});//
});*/
? ? ? ? /*通過hover（mouseenter+mouseleave）實現(xiàn)簡寫*/
? ? ? ? $('#div1').hover(function() {
$(this).stop().animate({marginTop:50});
? ? ? ? }, function() {
$(this).stop().animate({marginTop:100});
? ? ? ? });
? ? ? })
? <div id="div1" class="box">
? ? ? <div class="son">
</html>
input框事件
blur() 元素失去焦點
focus() 元素獲得焦點
change() 表單元素的值發(fā)生變化
click() 鼠標單擊
keydown() 按下鍵盤
keypress() 按下鍵盤
keyup() 松開鍵盤
（不常用）設計手機網(wǎng)頁：mouseup() 松開鼠標
mousedown() 按下鼠標
mousemove() 鼠標在元素內部移動
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input框事件</title>
<style type="text/css">
</style>
<script type="text/javascript" src="JS/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// //一開始就獲取焦點，相當于設置了autofocus自動獲取焦點了（HTML5 新增表單控件屬性）
// $('#txt01').focus();
// //文本框獲取焦點的時候（有光標閃爍的時候）
// $('#txt01').focus(function() {
// alert('focus');
// });
// //失去焦點的時候（光標離開的時候）
// $('#txt01').blur(function() {
// alert('blur');
// });
// //輸入框內容發(fā)生變化的時候区端，失去焦點后觸發(fā)值漫，可用于注冊時驗證用戶名是否已存在
// $('#txt01').change(function() {
// alert('值變了');
// });
//松開鍵盤按鍵就觸發(fā)
$('#txt01').keyup(function() {
alert('松開鍵盤了');
});
})
/*原生js寫法
window.onload = function () {
}*/
/*$(window).load(function(){
})
$(document).ready(function () {
})
$(function () {
})*/
$(window).resize(function () {
console.log('窗口尺寸變化了')
})
</script>
</head>
<body>
<input type="text" id="txt01">
</body>
</html>
jQuery其他事件
load() 元素加載完畢
ready() DOM加載完成
resize() 瀏覽器窗口的大小發(fā)生改變
scroll() 滾動條的位置發(fā)生變化
submit() 用戶遞交表單（常用）
toggle() 根據(jù)鼠標點擊的次數(shù)，依次運行多個函數(shù)
unload() 用戶離開頁面 （看小說保存進度织盼，了解）
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery其他事件</title>
<style type="text/css">
</style>
<script type="text/javascript" src="JS/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
/*原生js寫法
window.onload = function () {
}*/
/*$(window).load(function(){
})
$(document).ready(function () {
})
$(function () {
})ready的簡寫*/
$(window).resize(function () {
console.log('窗口尺寸變化了')
})
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
