jQuery+Bootstrap階段總結
這個階段總耗時四天,達成自己的五天之內做完它的目標,給自己一朵小花獎勵一下?
基本頁面如下:??
整體思路
從網頁布局上,或者從頁面整體樣式上,自然脫離不了手動css改變,但我一直想嘗試的是使用bootstrap組件和css全局屬性(對與自己來說新奇東西的使用更加具有吸引力),確實,bootstrap類的功能比較完善,動態(tài)改變起來只需要在jQuery里面添加,刪除類即可,節(jié)省不少代碼,自然省去了很多麻煩.然后利用好jquery和localstorage用法,?實現在本地內存和頁面的同步的增刪改查功能.這個階段基本就大功告成啦,當然為了提高用戶體驗感,還是要用點心的,保證每一個階段讓大多數人看著好看,人性化,更加靈活.
jQuery重要知識點
以下都是以操作img為例:??<img?src="img/xxx.png"?alt="xxx"?id="imgID"?class="imgClass">
1. 元素的選取和操作
$(".imgClass") ,?$("#imgID") ,?$("img")
如果需要改一下src,則:? $("#imgID").attr("src","新的地址");
(注意:都是字符串格式!)
如果是很多相同的類需要執(zhí)行相同的操作,用jQuery該怎么辦呢?? 同樣以操作圖片(此時有很多一樣的類的圖片)為案例如下:id不用這么做.因為他只有一個,用了也沒錯,只執(zhí)行一次!
方法1:??
$(".imgClass").each(function(){
????????$(this).attr("src","新的地址");//通過each遍歷,批量修改地址
????????//其他操作
});
方法2:
var imgClass = $(".imgClass");
for(let?i= 1;i<imgClass.length;i++){
????????$(imgClass[i]).attr("src","新的地址");//通過each遍歷,批量修改地址
????????//其他操作
}
2. 常見事件函數和ajax
以點擊事件為例:
$("#imgID").click(function(){
? ? //想點擊之后圖片或者其他元素執(zhí)行的操作
});
其他還有很多,如圖:
Ajax簡要:
AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）木羹。
就是在不重載整個網頁的情況下，AJAX 通過后臺加載數據益兄，并在網頁上進行顯示泪蔫。
這里引用菜鳥教程里的一個小案例:(從文件名為demo_test.txt獲取數據)
$(document).ready(function(){
????$("button").click(function(){
????????$.ajax({url:"demo_test.txt",success:function(result){
????????????$("#div1").html(result);
????????}});
????});
});
這個知識邏輯比較簡潔,理解起來也比較簡單,深入了解可以看菜鳥教程和一些精彩博客
3.?JS特效和動畫
有封裝好的動畫,最常見的就是漸隱fadeIn()漸現fadeOut(),顯示(show())和消失(hide()),還有包含這兩個功能的toggle(),fadeToggle(),還有滑動:?向下slideDown(),向上slideUp(),自然也有slideToggle();
以下為點擊該圖片,該圖片會發(fā)生的效果.語法也是如下,執(zhí)行多個屬性變化效果(left,opacity)
$("#imgID").click(function(){
? ? $(this).animate({
? ? ? left:'250px',
? ? ? opacity:'0.5'
? ? });
? });
當在一個事件中想調用多個animate方法時: (如下),排隊執(zhí)行
$("button").click(function(){ var div=$("div");
? div.animate({height:'300px',opacity:'0.4'},"slow");
? div.animate({width:'300px',opacity:'0.8'},"slow");
});
4. DOM遍歷
向祖先遍歷
1. parent()
parent() 方法返回被選元素的直接父元素驻售。
2. parents()
parents() 方法返回被選元素的所有祖先元素介评，它一路向上直到文檔的根元素 (<html>)。
3. parentsUntil()
parentsUntil() 方法返回介于兩個給定元素之間的所有祖先元素航罗。
$("span").parentsUntil("div");//span一直向祖代延伸,一直到div為止(不包括div)
向子代遍歷
1. children()
children() 方法返回被選元素的所有直接子元素禀横。//只延伸一代
2. find()
find() 方法返回被選元素的后代元素，一路向下直到最后一個后代粥血。
$("div").find("span");//返回屬于 <div> 后代的所有 <span> 元素
向同胞遍歷
1. siblings()
siblings() 方法返回被選元素的所有同胞元素柏锄。
2. next()
next() 方法返回被選元素的下一個同胞元素。
3. nextAll()
nextAll() 方法返回被選元素的所有跟隨的同胞元素复亏。
4. nextUntil()
nextUntil() 方法返回介于兩個給定參數之間的所有跟隨的同胞元素趾娃。//不包括參數
5. prev()
6. prevAll()
7. prevUntil()
5,6,7方法和2,3,4方法一一對應,只不過一個向下,一個向上
(本階段要求其他相關知識如下:)
5. H5本地存儲Local Storage
1. localStorage.setItem(key,value);
將鍵值為key,值為value保存在h5本地localstorage
2. localStorage.getItem(key);
獲取鍵值為key的值內容
3. localStorage.removeItem(key);
刪除鍵值為key的數據
6. 了解JSON
最常用的就是對象和字符串之間的轉換
JSON.parse()用于將一個 JSON 字符串轉換為 JavaScript 對象。
JSON.stringify()用于將 JavaScript 值轉換為 JSON 字符串缔御。
注(轉化下來的值可以和localstorage一起使用哦)
Bootstrap重要知識點
1. 全局 CSS 樣式增強效果
自我理解:當調用了相應的文件之后,bootstrap里面有很多可以直接使用的類,方便了對css的操作,柵格系統就是收益者,官方文檔里面的會套用就行,對組件不滿意的話,當然可以自己在寫一個類加進去啦.
2. JavaScript插件
也是可以直接添加類就能完成動態(tài)效果,會在官方文檔里面套用即可
4. 柵格系統
是以添加不同的類為基礎,實現一類最多12列,并列有不同的排列方式,以及占寬比.
哈哈哈,比較簡略,我對他的了解就是會用就行,學習的話官方文檔為主哦?(^_-).
下一階段計劃(Vue)
特點:
Vue.js 使用了基于 HTML 的模板語法抬闷，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML耕突，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析笤成。
在底層的實現上，Vue 將模板編譯成虛擬 DOM 渲染函數眷茁。結合響應系統炕泳，Vue 能夠智能地計算出最少需要重新渲染多少組件，并把 DOM 操作次數減到最少上祈。
自我目標時間,從2021.2.24開始,到2021.03.05,但中間會有一些事情會占用大塊時間,具體時間按實際情況出發(fā)吧,但是絕不能超過學長規(guī)劃的時間范圍之外!自己更不能得過且過,要學通,了解更多!
學習目錄:
加油加油加油?(^_-)!!!
