柚子快報邀請碼778899分享：前端學(xué)習(xí)+項目問題9

http://yzkb.51969.com/

一般字體下載下來是.ttf格式，需要轉(zhuǎn)換才能使用

字體轉(zhuǎn)換網(wǎng)址

http://www.font2web.com//?error=no_file_uploaded

https://www.fontsquirrel.com/tools/webfont-generator

轉(zhuǎn)換需要上傳字體，轉(zhuǎn)換完成后會自動下載安裝包，解壓安裝包，將font文件夾下邊.eot .woff .ttf .svg四個文件（這是我們自定義字體時需要的）引用到項目目錄中，為更好的兼容性，我們采用以下代碼

@font-face {

font-family: ‘PingFangSCRegular’;

src: url(‘…/…/fonts/PingFang SC Regular_0.eot’);

src: url(‘…/…/fonts/PingFang SC Regular_0.eot?#iefix’) format(‘embedded-opentype’),

url(‘…/…/fonts/PingFang SC Regular_0.woff’) format(‘woff’),

url(‘…/…/fonts/PingFang SC Regular_0.ttf’) format(‘truetype’),

url(‘…/…/fonts/PingFang SC Regular_0.svg#PingFangSCRegular’) format(‘svg’);

font-weight: normal;

font-style: normal;

}

然后再用font-family引用字體就可以了

body{

font-family: ‘PingFangSCRegular’

}

11.yarn remove packname yarn卸載安裝包

12.起初開發(fā)的時候我用的是給元素綁定onclick事件，但是click事件有3秒延遲，還是應(yīng)該用zepto自帶的tap事件

13.子元素{flex:1}第一個參數(shù)為flex-flow:1,等分剩余空間，如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據(jù)的剩余空間將比其他項多一倍。

14.去除select默認樣式

.myform select {

/*很關(guān)鍵：將默認的select選擇框樣式清除*/

appearance:none;

-moz-appearance:none;

-webkit-appearance:none;

/*在選擇框的最右側(cè)中間顯示小箭頭圖片*/

background: url(“…/…/images/symbols-下拉.png”) no-repeat scroll 92.6% center transparent;

background-color: #fff;

background-size: 13.4px;

/*為下拉小箭頭留出一點位置，避免被文字覆蓋*/

padding-right: 22.5px;

}

/*清除ie的默認選擇框樣式清除，隱藏下拉箭頭*/

select::-ms-expand { display: none; }

15.寫提交申請事件時，將提示文字寫在了form窗體外，所以不顯示，寫在form窗體內(nèi)就可以了

17.select 下拉框箭頭處，取消默認樣式 ，為其添加背景圖

但一開始最左邊的圖標(biāo)我也是直接在背景圖上添加的，有兩種方法，一種是為元素添加多個背景圖

，除了backgroud-color是唯一一個不能使用多個值的background-*元素，所以，我們以上的三個元素都可以使用多個值，兩個值之間以逗號相連。

(1)

div {background-image:url(),url();

background-position:0 30px, 0 45px;

backgroud-repeat:no-repeat

}

(2)也可以使用background屬性

div { background :url () no-repeat 0 30px;

url() no-repeat 0 45px;

}

另一種是在select外套一個div,把左邊用來裝飾的背景圖加到此div上，把下拉列表背景圖加到select元素上。

18

.zepto獲取select元素的選中option不能用類似jq的方法$(‘option[selected]’),因為selected屬性不是css的標(biāo)準(zhǔn)屬性

應(yīng)該使用$(‘option’).not(function(){ return !this.selected })

比如：jq:$this.find(‘option[selected]’).attr(‘data-v’) * 1

zepto:$this.find(‘option’).not(function() {return !this.selected}).attr(‘data-v’) * 1

但是獲取有select中含有disabled屬性的元素可以用$this.find(“option:not(:disabled)”)因為disabled是標(biāo)準(zhǔn)屬性

19.git操作

(1).撤消git commit操作

使用git log查看 commit 日志，日志中包含本次commit的哈希值,找到需要回退的那次commit的哈希值，

使用

git reset --hardcommit_id ?命令進行回退

(2).撤消git add 操作

如果是撤銷所有的已經(jīng)add的文件:

git?reset?HEAD?.

如果是撤銷某個文件或文件夾：

git?reset?HEAD?-filename

(3).撤消git push操作

方法:

git reset --hard

git push origin HEAD --force

其他:

根據(jù)–soft –mixed –hard，會對working tree和index和HEAD進行重置:

git reset –mixed：此為默認方式，不帶任何參數(shù)的git reset，即時這種方式，它回退到某個版本，只保留源碼，回退commit和index信息

git reset –soft：回退到某個版本，只回退了commit的信息，不會恢復(fù)到index file一級。如果還要提交，直接commit即可

git reset –hard：徹底回退到某個版本，本地的源碼也會變?yōu)樯弦粋€版本的內(nèi)容

HEAD 最近一個提交

HEAD^ 上一次

(4).git rebase

git rebase用于把一個分支的修改合并到當(dāng)前分支

如果想要放棄當(dāng)前rebase操作，用

git rebase --abort

如果沖突已經(jīng)解決，先add沖突文件，之后

git rebase --continue

20、flex布局

1、Flex是Flexible Box 的縮寫，意為彈性布局。用來為盒狀模型提供最大的靈活性。

webkit內(nèi)核的瀏覽器，必須要加上-webkit的前綴

.box{display: -webkit-flex;/* Safari */display: flex;}

webkit內(nèi)核八大瀏覽器包括： chrome,safari,搜狗高速瀏覽器，傲游瀏覽器3，qq瀏覽器，360極速瀏覽器，世界之窗瀏覽器（極速版），阿里云瀏覽器

2、flex屬性

flex-wrap: 定義如何換行{no-wrap（默認):不換行

wrap:換行，第一行在上方，

wrap-reverse: 換行，第一行在下方

}

justify-content： 項目在主軸上的對齊方式

{flex-start左對齊

flex-end 右對齊

center居中對齊

space-between兩端對齊,項目之間間隔相等

space-around每個項目兩側(cè)的間隔相等，即左邊距與右邊距一樣大，所以項目之間的間隔要比項目與大的外邊框之間的距離大一倍。

21、在表單中不能使用元素，因為不同的瀏覽器會提交不同的按鈕值。請使用?input 元素在 HTML 表單中創(chuàng)建按鈕。

22、模塊式引入swipper

問題：swipper.js swipper.css不能使用

原因：swipper.js swipper.js沒有引入

解決辦法：引入 node_modules下的swiper的css 和js

問題:引入 swipper輪播圖無法正常滑動

原因：swipper版本不對 ，npm install swipper默認安裝的版本是swipper 4.* beta版，應(yīng)該安裝swipper3.*版本的23、$(document).ready(function(){

function Func(){}

})

第一次寫的時候丟了function，這段代碼的意思是當(dāng)頁面加載完成后執(zhí)行此函數(shù)里邊的函數(shù)，所以function(){}不能丟

24、測試js，用return返回不執(zhí)行下邊的函數(shù)來觀察是否有問題。

二、學(xué)習(xí)任務(wù)

1.zepto支持瀏覽器

ie10+

chrome 30+

firefox 24+

safiri 6+

ios 5+ safari

andriod 2.3+ browser

2.zepto 模塊

* zepto —— default ——核心模塊，必須引入

* event ——default —— 通過on() off()處理事件

* ajax —— default —— XMLHttpRequest 和JSONP實用功能

* form —— default —— 序列化提交web表單

* ie —— default —— 增加支持桌面的ie10和windows phone 8

* detect —— 提供$.os $.browser消息（

判斷設(shè)備和瀏覽器，zepto.os判斷查看設(shè)備，返回一個對象{ios:true ,iphoe:true,version:“6.1”}

zepto.browser查看瀏覽器，返回對象{version:'536.26,webkit:true}

）

* fx —— 提供 animate() 方法

* fx_methods —— 以動畫形式的show,hide,toggle.fade*()方法，即可使用show() hide()方法支持動畫

var div1 = $(“#fool”)

div1.animate({

“width”; “300px”,

“height”: “300px”

),

‘slow’,‘ease-in-out’,

function {

console.log(‘div animate callback’)

div2.hide(‘slow’,function() {})

div2.fadeOut(‘slow’,function)() {

console.log(‘div2 animate callback’)

})

},2000)

* assets 支持從DOM中移除Image元素并清理 ios內(nèi)存

mobile safari嚴格的資源占用限制說起；mobile safari要比桌面版的瀏覽器的資源占用限制嚴格的多，當(dāng)ios加載大文件時會停止加載，這時需要回收這些圖片資源 ，因為不能保證垃圾回收機制是否有回收處理掉這些圖片，所以我們采用移除image元素后清理內(nèi)存，釋放圖片資源。

* data 對data()方法的完整支持，能夠在內(nèi)存中存儲內(nèi)存對象（讀取或?qū)懭雂om的data-* 屬性，點像attr，但屬性名要加上data-，zepto基本實現(xiàn) ‘data()’方法只能存儲字符串，當(dāng)讀取屬性時，會有下列轉(zhuǎn)換：

“true",“false”"null"轉(zhuǎn)換為相應(yīng)類型

數(shù)字值轉(zhuǎn)換為實際數(shù)字類型

有效的JSON值會被解析

其他一切均作為字符串返回

）

* deferred 提供$.Deferred pormised API.依賴"callbakcs"模塊

ajax請求或處理結(jié)果需要回調(diào)函數(shù)來執(zhí)行完成后的操作時，使用deferred作為回調(diào)函數(shù)解決方案

$.Deferred()生成deferred對象

deferred.done()操作成功時的回調(diào)函數(shù)

deferred.fail()失敗

deferred.promise() 無參時返回對象，運行狀態(tài)無法改變，有參時作為在參數(shù)對象上部署deferred接口

deferre.resolve()改變 deferred對象運行狀態(tài)為”已完成“觸發(fā)done()方法

deferre.reject()改變 deferred對象運行狀態(tài)為”已完成“觸發(fā)fail()方法

$.when()為多個操作指定回調(diào)函數(shù)

deferred.then(), ex:

w

h

e

n

(

when(

when(.ajax(url).then(successFunc,failureFunc)

deferred.always

ajax版本區(qū)別

ajax1.5之前

$.ajax({url:test.html’,

success(){},

error(){}

})

ajax 1.5之后 ,返回deferred對象,可鏈?zhǔn)讲僮?/p>

$.ajax(“test.html”)

.done({function(){})

.fail(function(){})

允許添加多個回調(diào)函數(shù)

$.ajax(“test.html”)

.done({function(){})

.fail(function(){})

.done({function(){})

.fail(function(){})

允許為多個事件指定一個回調(diào)函數(shù)

* callbacks 為"deferred"模塊提供 $.Callbacks.

* selector 支持 jquery css表達式功能（$(‘div:first’)第一個div對象,el.is(‘:visible’)判斷el是否為禁用的input或者button

* touch 在觸摸設(shè)備上觸發(fā)tap- swipe-相關(guān)事件。

基本touch事件：

touchstart 手指觸發(fā)屏幕上的時候觸發(fā)

touchmove 手指在屏幕移動的時候觸發(fā)

touchend 手指離開屏幕的時候觸發(fā)

touchcancel 系統(tǒng)取消touch事件的時候觸發(fā)

* gesture 在觸摸設(shè)備上觸發(fā) pinch（手指縮放）事件

* stack （棧）提供andSelf() &end （）鏈?zhǔn)秸{(diào)用方法

* ios3 String.prototype.trim 和 Array.prototype.reduce 方法 (如果他們不存在) ，以兼容 iOS 3.x.

3.zepto api

(1).$()

//創(chuàng)建元素

#$(“

hello”)

//創(chuàng)建帶有屬性的元素

$(“

”),{ text”：’hello’,id:"greeting’,css:{color:“darkbule”} })

(2).camelCase(string)駝峰命名

(3).$contains(parent,node) 檢查父節(jié)點是否包含給定的dom節(jié)點，如果兩者是相同的節(jié)點 ，返回false

(4).each(collection,function(index,item){…})遍歷數(shù)組或心key-value值對方式遍歷對象。回調(diào)函數(shù)返回false停止遍歷。

*%d帶符號十進制數(shù)

%s字符串

（5）$.fn在此對象上添加的方法所有的zepto對象都能調(diào)用

（6）$.grep 獲取包含回調(diào)函數(shù)中返回true的數(shù)組項

$.grep([1,2,3], function(item) {

return item > 1

})

（7）inArray 返回數(shù)組中指定元素的索引值

（8）isNumeric如何該值為有限數(shù)值或一個字符串表示則返回true

（9）isPLainObject 測試一個對象是否通過 對象常量（“{}”） 或者?new Object?創(chuàng)建的，如果是，則返回true。

（10) var callback = $.noop引用一個空函數(shù)

（11）$.parseJson接受一個標(biāo)準(zhǔn)格式的json并返回解析后的js對象

（12）add 添加元素到當(dāng)前匹配的元素集合中

$(‘li’).add(‘p’).css(‘background-color’,‘red’)

（13）append在匹配元素末尾插入內(nèi)容 after在匹配元素后面插入內(nèi)容

（14）append appendTo區(qū)別

$(‘ul’).append(‘

new list item’)

$(‘

new list item ’).appendTo(‘ul’)

（15 ) filter對象，過濾對象集合

（16）forEach與each相似，都是遍歷對象集合中的每個元素，但回調(diào)函數(shù)返回false時不停止遍歷

（17）get 從當(dāng)前對象集合中獲取指定的元素或所有元素

ex: $(‘h2’).get()

$(‘h2’).get(0)

( 18 )hasClass 檢查對象集合中是否有元素含有指定的class

( 19 )獲取或設(shè)置元素的html內(nèi)容，不用innerHTML

( 20 )is判斷當(dāng)前元素集合中第一個元素是否符合css選擇器

( 21）offSet獲取當(dāng)前元素在document的位置

（22）offsetParent 找到第一個定位過的祖先元素

（23）parent 獲取直接父元素

parents 獲取所有祖先元素

（24）pluck 獲取對象元素的屬性值，返回值是數(shù)組

（25）prepend將內(nèi)容插入到元素開頭 prependTo(同appendTo）

（26）prev 獲取元素的前一個兄弟節(jié)點

（27）prop讀取或設(shè)置元素屬性值，優(yōu)先于attr

（28）reduce 遍歷當(dāng)前對象集合，memo是上次函數(shù)的返回值，迭代進行遍歷

reduce(function(memo,item,index,array){}

（29）removeClass 移除class名可用空格分隔

（30）replaceWith 用給定內(nèi)容替換所有匹配元素

（31）slice（start, [end]) 提取數(shù)組的子集

（32）text 方法不能用來獲取或設(shè)置html，只能獲取元素的文本內(nèi)容

（33）toggleClass 如果匹配元素有此class名就刪除它，如果沒有就添加它

（34）unwrap 移除集合中每個元素的直接父節(jié)點，并把他們的子元素還保留在原來的公交車

（35）wrap 在每個匹配的元素外層包上一個html元素 (".button a’).wrap(‘’)

wrapAll 在所有匹配元素外層包一個單獨結(jié)構(gòu) $(‘a(chǎn).button’).wrapAll(‘

’)

wrapInner 將每個的內(nèi)容包在一個單獨的結(jié)構(gòu)中 （‘ol lu ‘),wrapInner(’

’) （36）Detect module 該方法可以在不同的環(huán)境中微調(diào)你的站點或應(yīng)用，可以識別手機或平板，以及不同系統(tǒng)和瀏覽器 $.os.phone $.os.andriod 4.zepto ajax (1). 默認情況下，ajax事件在document對象上觸發(fā)。 $(document).on(‘a(chǎn)jaxBeforeSend’, functio(e,xhr,options) { //頁面上的每個ajax請求之前都會觸發(fā) //可編輯ajax（）和xhr對象 //通過返回false取消此操作 } (2). 如果請求的context 是一個dom節(jié)點，那么在該dom節(jié)點中觸發(fā)，然后在dom中冒泡。 contenxt用于畝ajax相關(guān)回調(diào)函數(shù)的上下文（this指向） $.ajax({ //請求方式 type:'GET‘， //請求地址 url:‘/projects’, //請求數(shù)據(jù) data:{ name: ‘zepto.js’}, //期待服務(wù)器返回類型 dataType: ‘json’, //請求超時時間 timeout: 3000, //當(dāng)前請求的this指向為body context: $(‘body’) //成功后的回調(diào) success: function(data) { {‘project’:{‘id’: 41, ‘html’: ‘

…’}}

//將返回的json對象（html）附加到上下文對象 this.append(data.project.html) } //請求失敗后的回調(diào) error: function(xhr,type) { alert(‘error’) } }) //假定請求方式為post $.ajax({ type:‘POST’, url:‘/’, data:JSON.Stringfy({‘name’:‘zepto.js’}) //發(fā)送請求類型 contentType:‘a(chǎn)ppliction/json’ }) (3).ajaxSettings 包含ajax請求的默認設(shè)置對象 (4).$.get(‘https://api.github.com/users/momo-0902’,function(response) { $(document.body).append(response) }) !提示錯誤，F(xiàn)ailed to execute ‘insertBefore’ on ‘Node’:parameter 1 is not of type ‘Node’. 錯誤原因：無法在“Node”上執(zhí)行“insertBefore”：參數(shù)1不是“Node”類型。 請求回來的結(jié)果是一個json字符串，并不是一個Node類型 * append在每個匹配的元素末尾插入內(nèi)容，內(nèi)容可為html字符串，dom節(jié)點，或者節(jié)點組成的數(shù)組 將 $(document.body).append(response)改為console.log(response)可看請求成功的數(shù)據(jù) $(document.body).append(‘hahaha’)可增加一個li節(jié)點 到body中。 (5).$param 序列化一個對象 (6).$.post(url,[data],function(data,status,xhr){},[dataType]) $.post(‘/creat’, //serialize()在ajax post請求中將用作提交表單值編譯成URL編碼的字符串。 $("#some_form’).serialize(), function(){ }) (7).load(url, function(data, status, xhr){ … })載入遠程 html內(nèi)容到當(dāng)前集合中 $("#some_element“).load(‘/foo.html #bar’) 匹配id為bar的html內(nèi)容 (8).ex $(“btn”).click(function() { $.ajax({ url:‘user’, type:‘post’, data:("userName:KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#?userName").val(…(“passWord”).val()), async:false, success: functoin() { if(data == 0) { alert(‘用戶名錯誤’) }else if(data == 2) { alert(‘密碼錯誤’) }else { } } }） }） 5.zepto 事件 （1）.$Event(type,[properties]) 創(chuàng)建并初始化一個指定的dom事件，如果給定properties對象，使用它來擴展出新的事件對象。默認情況下，事件被設(shè)置為冒泡方式；這個可以通過設(shè)置bubbles為false來關(guān)閉。 ( 2 ).$proxy 接受一個函數(shù)，返回一個新函數(shù)‘ 并且這個新函數(shù)始終保持了特定的上下文(context)語境，新函數(shù)中this指向context參數(shù)。另外一種形式，原始的function是從上下文(context)對象的特定屬性讀取。 ( 3 ) .off 移除通過on添加的事件 ( 4 ).on為元素添加事件，事件以空格隔開 ( 5 ).one為元素綁定一次性事件 ( 6）.trigger 在元素集合上觸發(fā)指定事件 ( 7 ).triggerHandler 在指定元素上觸發(fā)指定事件 6.抓包工具 抓包是將網(wǎng)絡(luò)傳輸發(fā)送與接收的數(shù)據(jù)包進行截獲、重發(fā)、編輯、轉(zhuǎn)存等操作，也用來檢查網(wǎng)絡(luò)安全，與數(shù)據(jù)截取等。 chrome開發(fā)者工具－－network選項 點擊工具條上方小紅點record network log，可以記錄下整個訪問過程中所有抓包結(jié)果，否則只記錄當(dāng)前頁面的抓包結(jié)果。 可查看網(wǎng)頁相關(guān)數(shù)據(jù)信息，網(wǎng)址，接口請求狀態(tài)，js,css,image等加載狀態(tài) 點擊網(wǎng)址可看到有以下幾個選項，Headers,Preview,Response,Cookies,Timing 在Headers中包括請求地址，請求方式，請求頭，請求方式，響應(yīng)頭，響應(yīng)內(nèi)容等 在Response中可單獨查看響應(yīng)狀態(tài)碼的返回，返回數(shù)據(jù)等 在Timing中可查看時間等 2.Weinre全稱WebINspector Remote(翻譯過來是遠程web檢查器),可在PC上直接調(diào)試運行在移動端的遠程頁面， weinre工作原理 Debug客戶端（client)：本地的web檢查器，遠程調(diào)試客戶端 Debug服務(wù)端(agent)：本地的HTTPServer，為Debug客戶端與Debug目標(biāo)頁面建立通信 Debug目標(biāo)頁面：被調(diào)試的目標(biāo)頁面，頁面已嵌入weinre的遠程js 客戶端、目標(biāo)頁面與Debug服務(wù)端之間使用XMLHttpRequest (XHR)進行HTTP通信，你通常的使用情形是將Debug客戶端與服務(wù)端搭建在桌面開發(fā)環(huán)境，Debug目標(biāo)頁面放在移動設(shè)備。 安裝方式 ：npm install-g weinre 過程中嘗試用yarn install 安裝，但因為yarn的安裝位置問題，導(dǎo)致weinre不可用，所以還是建議用npm 安裝 步驟 (1) 在本地開啟監(jiān)聽服務(wù)器，ipconfig查看本地ip weinre?--boundHost?[hostname?|?ip?address?|-all-]??--httpPort?[port] weinre -boundHost 192.168.2.45 (2)可用weinre --httpPort 8081 --boundHost 192.268.2.45 (3)訪問weinre及在頁面上調(diào)用 （4）在調(diào)式的頁面中加入遠程調(diào)式所需要的JS代碼 （5）點擊第一個鏈接 （6）進入此頁面，如果連接成功，網(wǎng)址變成綠色，按鈕顯示高亮 （7）可下載草料二維碼，將瀏覽器地址的127.0.0.1改為192.168.2.45,端口不變，此端口與weinre服務(wù)器端口不一樣，此端口是訪問頁面的端口 （8）多用戶調(diào)試 改變中的id"#anonymous"為自己的id（例#product), 然后訪問網(wǎng)址從http://192.168.2.45:8080/client/#anonymous改為http://192.168.2.45:8080/client/#product即可 注意：每次開機都有新的ip地址，這是頁面中標(biāo)簽中的Ip地址與頁面訪問ip地址也要做相應(yīng)更改。 7.chrome開發(fā)者工具 1、點擊文件中相應(yīng)代碼的行數(shù)選擇斷點，在右側(cè)Breakpoints中有所有打過的斷點列表，點擊對應(yīng)checkout的第一行取消該斷點，點擊下一行，直接跳到該代碼處。 2、刷新或者點擊頁面開始執(zhí)行斷點也調(diào)試。 3、6個按鈕 （1） pause script excutio 【單步執(zhí)行，在斷點處暫停，等待調(diào)試】暫時后變?yōu)? Resume script excution【繼續(xù)執(zhí)行】快捷鍵 F8或者ctrl + \ (2)Step over next function call【單步跳過】跳到下一個斷點，快捷鍵F10或者ctrl+` 在69行和70行分別設(shè)置兩個斷點，先執(zhí)行69行斷點，在jquery中尋找源碼后繼續(xù)執(zhí)行下一個斷點，即alert(‘123’) 如果沒有斷點了就繼續(xù)執(zhí)行完這個click函數(shù)，執(zhí)行$(“#txt”).val(txt);然后執(zhí)行if-else分支，但不進入if-else函數(shù)中 （3）Step into next function call 【單步進入】進入函數(shù)內(nèi)部調(diào)試，快捷鍵【F11 或者 Ctrl + ;】 自我介紹一下，小編13年上海交大畢業(yè)，曾經(jīng)在小公司待過，也去過華為、OPPO等大廠，18年進入阿里一直到現(xiàn)在。 深知大多數(shù)前端工程師，想要提升技能，往往是自己摸索成長或者是報班學(xué)習(xí)，但對于培訓(xùn)機構(gòu)動則幾千的學(xué)費，著實壓力不小。自己不成體系的自學(xué)效果低效又漫長，而且極易碰到天花板技術(shù)停滯不前！ 因此收集整理了一份《2024年Web前端開發(fā)全套學(xué)習(xí)資料》，初衷也很簡單，就是希望能夠幫助到想自學(xué)提升又不知道該從何學(xué)起的朋友，同時減輕大家的負擔(dān)。 既有適合小白學(xué)習(xí)的零基礎(chǔ)資料，也有適合3年以上經(jīng)驗的小伙伴深入學(xué)習(xí)提升的進階課程，基本涵蓋了95%以上前端開發(fā)知識點，真正體系化！ 由于文件比較大，這里只是將部分目錄截圖出來，每個節(jié)點里面都包含大廠面經(jīng)、學(xué)習(xí)筆記、源碼講義、實戰(zhàn)項目、講解視頻，并且會持續(xù)更新！ 如果你覺得這些內(nèi)容對你有幫助，可以掃碼獲?。。。ㄙY料價值較高，非無償） 最后

由于文檔內(nèi)容過多，為了避免影響到大家的閱讀體驗，在此只以截圖展示部分內(nèi)容，詳細完整版的JavaScript面試題文檔，或更多前端資料可以點此處即可獲?。。?！。

font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center) (2)Step over next function call【單步跳過】跳到下一個斷點，快捷鍵F10或者ctrl+` [外鏈圖片轉(zhuǎn)存中…(img-fgmN1Wum-1711682305179)] 在69行和70行分別設(shè)置兩個斷點，先執(zhí)行69行斷點，在jquery中尋找源碼后繼續(xù)執(zhí)行下一個斷點，即alert(‘123’) 如果沒有斷點了就繼續(xù)執(zhí)行完這個click函數(shù)，執(zhí)行$(“#txt”).val(txt);然后執(zhí)行if-else分支，但不進入if-else函數(shù)中 [外鏈圖片轉(zhuǎn)存中…(img-naSUCMzg-1711682305180)] （3）Step into next function call 【單步進入】進入函數(shù)內(nèi)部調(diào)試，快捷鍵【F11 或者 Ctrl + ;】 自我介紹一下，小編13年上海交大畢業(yè)，曾經(jīng)在小公司待過，也去過華為、OPPO等大廠，18年進入阿里一直到現(xiàn)在。 深知大多數(shù)前端工程師，想要提升技能，往往是自己摸索成長或者是報班學(xué)習(xí)，但對于培訓(xùn)機構(gòu)動則幾千的學(xué)費，著實壓力不小。自己不成體系的自學(xué)效果低效又漫長，而且極易碰到天花板技術(shù)停滯不前！ 因此收集整理了一份《2024年Web前端開發(fā)全套學(xué)習(xí)資料》，初衷也很簡單，就是希望能夠幫助到想自學(xué)提升又不知道該從何學(xué)起的朋友，同時減輕大家的負擔(dān)。 [外鏈圖片轉(zhuǎn)存中…(img-OQk4QS9z-1711682305180)] [外鏈圖片轉(zhuǎn)存中…(img-jwBw3MGR-1711682305180)] 既有適合小白學(xué)習(xí)的零基礎(chǔ)資料，也有適合3年以上經(jīng)驗的小伙伴深入學(xué)習(xí)提升的進階課程，基本涵蓋了95%以上前端開發(fā)知識點，真正體系化！ [外鏈圖片轉(zhuǎn)存中…(img-xSxKgjDB-1711682305180)] 由于文件比較大，這里只是將部分目錄截圖出來，每個節(jié)點里面都包含大廠面經(jīng)、學(xué)習(xí)筆記、源碼講義、實戰(zhàn)項目、講解視頻，并且會持續(xù)更新！ 如果你覺得這些內(nèi)容對你有幫助，可以掃碼獲?。。。ㄙY料價值較高，非無償） 最后 [外鏈圖片轉(zhuǎn)存中…(img-AP0DabWE-1711682305181)] [外鏈圖片轉(zhuǎn)存中…(img-okkQKMYs-1711682305181)]

由于文檔內(nèi)容過多，為了避免影響到大家的閱讀體驗，在此只以截圖展示部分內(nèi)容，詳細完整版的JavaScript面試題文檔，或更多前端資料可以點此處即可獲取?。?！。

柚子快報邀請碼778899分享：前端學(xué)習(xí)+項目問題9

http://yzkb.51969.com/

好文閱讀