Python系統學習-16
阿新 • • 發佈：2019-01-11
1.jquery的DOM文件操作
1.1兄弟之間插入
$('p').after('<h3>alex</h3>');
$('<h3>女神</h3>').insertAfter('p');
$('p').replaceWith('結婚了');
$('<h5>哈哈哈</h5>').replaceAll('h3');
- 初始化的時候，有初始化 渲染開銷 對於 文件 DOM 如果是頻繁性的切換 建議使用 display：block|none addClass
- 少量的切換 建議使用 建立元素 刪除元素 效能消耗 建立->銷燬
###1.2父.append(子) 子元素 可以是 string js物件 jquery物件
追加到父元素中的第一個元素
js
$(子).appendTo(父)
prepend() 方法在被選元素的開頭（仍位於內部）插入指定內容
$('.box').prepend('<h5>哈哈哈2</h5>')刪除節點 事件保留
$('button').detach();detach() 方法移除被選元素，包括所有的文字和子節點。然後它會保留資料和事件。
該方法會保留移除元素的副本，允許它們在以後被重新插入。
提示：如需移除元素及它的資料和事件，請使用 remove() 方法代替。
提示：如只需從被選元素移除內容，請使用 empty() 方法。
2.事件物件
DOM事件流（event flow ）存在三個階段：事件捕獲階段、處於目標階段、事件冒泡階段。
- 事件捕獲（event capturing）：通俗的理解就是，當滑鼠點選或者觸發dom事件時，瀏覽器會從根節點開始由外到內進行事件傳播，即點選了子元素，如果父元素通過事件捕獲方式註冊了對應的事件的話，會先觸發父元素繫結的事件。
- 事件冒泡（dubbed bubbling）：與事件捕獲恰恰相反，事件冒泡順序是由內到外進行事件傳播，直到根節點。
- 無論是事件捕獲還是事件冒泡，它們都有一個共同的行為，就是事件傳播，它就像一跟引線，只有通過引線才能將綁在引線上的鞭炮（事件監聽器）引爆，試想一下，如果引線不導火了，那鞭炮就只有一響了！！！
//a form event.preventDefault();阻止預設事件
event.preventDefault();
//阻止冒泡
event.stopPropagation();3.換膚
<a href="javascript:void(0)">單擊此處什麼也不會發生</a>z-index:屬性設定元素的堆疊順序。z-index對應的值比另一個大的話，大的值對應的圖在上面。
4.jquery的位置資訊
- innerWidth innerHeight 內部寬和高 不包含border
- outerHeight outerWidth 外部寬和高 包含border
$('.box').innerHeight()
$('.box').outerWidth()5.滾動固定導航欄
$(document).scroll(function () {
//獲取黃色的盒子到頂部的距離
var top = $('.content').offset().top;
var docScrollTop = $(document).scrollTop()
if (docScrollTop > top){
$('.fix_header').show();
}else {
$('.fix_header').hide();
}
});6.事件委託
<body>
<ul>
<li>alex1</li>
<li>alex2</li>
<li>alex3</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
$('ul li').click(function () {
alert($(this).text());
})
//事件委託
$('ul').on('click','li',function () {
alert($(this).text())
})
});
</script>
</body>陣列遍歷使用forEach
var arr = ['alex','etaibai','nv'];
arr.forEach(function (el,index) {
console.log(el,index);
});jquery偽陣列遍歷,使用each
$('li').each(function (index,el) {
console.log(el);
console.log(index);
})7.json的使用
//後端響應回來的資料 json字串
var a={"name":"tom","sex":"男","age":"24"}; //json
var b='{"name":"Mike","sex":"女","age":"29"}'; //jsonStr
console.log(JSON.parse(b)); #變成json物件
console.log(JSON.stringify(a)); #變成json字串1.Less是css高階語言
gulp webpack上線