複習 如何區別 JS DOM對象和 JQ 包裝對象？ JQ對象其實是經過包裝的DOM對象，包裝後可調用 JQ 的方法。 JS 對象基本上都是屬性為主，JQ基本上都方法為主。 可通過 console.dir() 在控制台輸出對象的所有屬性和方法區別。 JQ 對象輸出 DOM 對象輸出 JQ事件綁定方式 ...
複習
如何區別 JS DOM對象和 JQ 包裝對象？
JQ對象其實是經過包裝的DOM對象，包裝後可調用 JQ 的方法。
JS 對象基本上都是屬性為主，JQ基本上都方法為主。
可通過
console.dir()
JQ 對象輸出
DOM 對象輸出
目標
學習 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()
# 返回對象格式 { 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>
