jQuery第3天
摘要：
複習
如何區別 JS DOM物件和 JQ 包裝物件？
JQ物件其實是經過包裝的DOM物件，包裝後可呼叫 JQ 的方法。
JS 物件基本上都是屬性為主，JQ基本上都方法為主。
可通過console.dir() 在控制檯輸出物件的所有屬性和方法區別。
JQ 物件輸出 ...
複習
如何區別 JS DOM物件和 JQ 包裝物件？
JQ物件其實是經過包裝的DOM物件，包裝後可呼叫 JQ 的方法。
JS 物件基本上都是屬性為主，JQ基本上都方法為主。
可通過 console.dir() 在控制檯輸出物件的所有屬性和方法區別。
JQ 物件輸出
DOM 物件輸出
JQ事件繫結方式
目標
學習 JQ事件繫結方式 on
知識點
方式1：（推薦使用 on）
事件源.on("事件型別",事件處理函式);
方式2：（瞭解）
事件源.bind("事件型別",事件處理函式);
方式3：（快捷繫結方式）
事件源.事件型別(事件處理函式)
小結
推薦使用 on 實現事件繫結
JQ事件解綁方式
目標
學習 JQ事件解綁方式 off
知識點
方式1：（推薦使用 off）
事件源.off("事件型別");
如果不傳入事件型別引數，代表移除所有事件。
方式2：
事件源.unbind("事件型別");
小結
推薦使用 off 解綁事件
JQ事件委託
目標
學習 JQ事件委託
事件委託繫結
on 的方式：
$("父元素").on("事件型別","子元素",事件處理函式);
父元素: 委託事件
子元素：子元素才是真正觸發事件的目標元素
delegate 的方式：(瞭解)
$("父元素").delegate ("子元素", "事件型別", 事件處理函式);
事件委託解綁
off 方式
$("父元素").off("事件型別","子元素");
undelegate
$("父元素").undelegate ("子元素", "事件型別");
小結
推薦使用 on 實現事件委託繫結，注意區別子元素和事件型別的引數順序。
推薦使用 off 實現事件委託解綁。
替換節點
目標
通過手冊查閱 replaceWith 替換節點的用法
知識點
新節點替換
原節點.replaceWith(新節點)
字串替換
原節點.replaceWith(字串)
小結
建議建立新節點再替換，因為新建節點後可以保持到變數中方便下次使用，直接傳字串則需要重新查詢。
事件觸發器
目標
學習事件觸發器觸發事件
知識點
trigger 主要用於模擬使用者觸發了某個事件，如：頁面載入的時候獲取輸入框焦點...
JQ元素.trigger("事件型別")
滑鼠移入移出事件
目標
學習新的滑鼠移入移出事件
知識點
滑鼠移入：
mouseover mouseenter// 推薦使用
滑鼠移出：
mouseout mouseleave// 推薦使用
小結
之前我們學習了 hover 滑鼠移入移出綜合體，其實就是呼叫了 mouseenter 和 mouseleave。
早期的時候，Chrome 瀏覽器其實是不支援 mouseenter 和 mouseleave 事件的。
jQuery 提出並實現了，原理就是阻止事件傳播，避免事件移到子元素反覆觸發的問題。
JQ元素索引值
目標
通過 JQ 提供的方式獲取元素索引值
知識點
jQuery 直接提供了獲取元素索引值的方法。
.index()
常見寫法1：
$(this).index() // 獲取當前元素的索引值，以父元素為單位，當前元素是第幾個孩子。
常見寫法2：
$("選擇器").index(this)
// 獲取當前元素的索引值，以選擇器選中的元素為單位，當前元素是第幾個。
小結
大部分情況下兩種寫法都可以。
獲取元素寬高
目標
獲取元素寬高
知識點
// 獲取或設定寬度 .width() // 獲取或設定高度 .height() # 不傳入引數代表獲取，傳入引數代表設定寬高。
小結
width() height() 獲取和設定的資料型別都是數值型。
offset 獲取元素偏移值
目標
獲取元素的偏移值
知識點
獲取元素基於 頁面 的偏移值。
.offset()
# 返回物件格式{ left: xx, top: xx }
小結
獲取的時候會把 margin-left 和 left 的偏移值都會計算進去。
控制頁面滾動到某個位置
目標
獲取和設定頁面滾動位置
知識點
應用場景：返回頂部，點選跳轉到某個樓層。
寫法1：無動畫效果
$("html,body").scrollTop(數值);
# 如果數值為0，就是返回頂部
寫法2：帶動畫效果
$("html,body").stop().animate({ scrollTop : 數值 })
小結
控制水平滾動位置使用 scrollLeft，使用方式和 scrollTop 同理。
思維腦圖總結：
案例
微博新聞釋出效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>微博釋出效果</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.weibo {
width: 600px;
border: 1px solid #ccc;
margin: 100px auto;
padding: 10px;
}
.weibo-text {
width: 590px;
height: 140px;
padding: 5px;
border: 1px solid #ccc;
outline: none;
resize: none;
}
.weibo-text:focus {
border-color: #f60;
}
.weibo-btn {
width: 80px;
height: 30px;
background-color: #f90;
color: #fff;
border: 0 none;
margin-top: 5px;
border-radius: 3px;
cursor: pointer;
outline: 0 none;
}
.weibo-list {
padding-top: 10px;
}
.weibo-list li {
font-size: 14px;
line-height: 30px;
border-bottom: 1px dotted #ccc;
overflow: hidden;
}
.weibo-list li p {
float: left;
cursor: pointer;
}
.weibo-list li span {
float: right;
cursor: pointer;
}
.weibo-list li input {
height: 24px;
line-height: 24px;
width: 300px;
font-size: 14px;
border: 0 none;
}
</style>
<!-- 1. 引入 jQuery 核心庫 -->
<script src="./lib/jquery-1.12.4.js"></script>
<!-- 2. 新建 script 寫業務邏輯 -->
<script>
// 3. jQuery 入口函式，業務程式碼寫到入口函式內部
$(function () {
// **********業務程式碼開始**********
// 1.判斷輸入微博的長度，如果為0提示，超過120提示
var $userInput = $('.weibo-text');
var $weiboBtn = $('.weibo-btn');
var $weiboList = $('.weibo-list');
var newInput
console.log($userInput, $weiboBtn, $weiboList);
$weiboBtn.on('click', function(){
// 獲取內容長度
// trim()方法意味著刪除左右2邊的空格
var userText = $userInput.val().trim();
if(userText.length === 0){
alert("請輸入內容再發布哦❤");
// 中斷函式
return;
}else if(userText.length > 120){
alert("請保證內容長度小於120個字元哦❤");
return;
}else{
// 2. 把輸入的微博內容，新增到 .weibo-list 列表中
// 獲取使用者輸入的內容並建立元素插入到.weibo-list的最前面
var newTag = $("<li><p>" + userText + "</p><span>刪除</span></li>");
$weiboList.prepend(newTag);
// 3. 釋出成功後，清空文字域 .weibo-text
$userInput.val("");
// 4. 釋出的時候，有滑動顯示動畫效果
// 思路：先將newTag隱藏然後通過slideDown()下滑方式顯示
newTag.hide().slideDown(500);
}
});
// 5. 點選刪除按鈕，刪除對應那條微博事件委託實現
$weiboList.on('click', 'li span' ,function(){
// 找到當前節點的父節點然後刪除這個父節點也就是刪除li
$(this).parent().remove();
});
// 6. 點選 p 標籤，p 標籤能替換成 input 標籤進行微博編輯
$weiboList.on('click', 'li p' ,function(){
// 儲存當前p標籤的內容
var pOldString = $(this).text();
newInput = $('<input text="text" />');
// 替換標籤
$(this).replaceWith(newInput);
// 將p標籤原來的內容給input的value值
newInput.val(pOldString);
// 輸入框獲取焦點
newInput.trigger('focus');
});
// 7. input 標籤失去焦點後，input 標籤替換回 p 標籤
$weiboList.on('blur', 'li input', function(){
// 獲取input標籤的value值
var newInputValue = newInput.val();
console.log(newInputValue);
var newP = $('<p>' + newInputValue + '</p>')
$(this).replaceWith(newP);
});
// 8. 頁面釋出的時候，通過事件觸發器自動獲取文字域的焦點
$userInput.trigger('focus');
// 9. 利用事件物件，判斷回車鍵，實現按回車鍵釋出微博。
$userInput.on('keyup', function(event){
if(event.keyCode === 13){
$weiboBtn.trigger('click');
}
});
});
</script>
</head>
<body>
<div class="weibo">
<textarea class="weibo-text"></textarea>
<input class="weibo-btn" value="釋出" type="button">
<ul class="weibo-list">
<li>
<p>快來收了這九款用上就停不下來的應用吧！！</p>
<span>刪除</span>
</li>
<li>
<p>超級詳細的雲南大理自助遊攻略</p>
<span>刪除</span>
</li>
<li>
<p>外國最近很火的舞蹈，舒服簡單自然，太棒了！</p>
<span>刪除</span>
</li>
</ul>
</div>
</body>
</html>