jquery 字符串查找_JQuery、Vue等考点
一. 寫出下面程序的運行結果
for結果：1秒后一下子打印出5個5。當循環完成時才會輪到setTimeout異步執行其回調函數function，此時i已經變成5，故5個console.log(i)里的i全使用的是5。
易錯點：千萬別寫成“打印5個4”啊！暴風哭泣>_<
二. 請列舉至少8種jQuery中的DOM節點操作，并說明用途。
1.查找節點
使用jQuery在文檔樹上查找節點非常容易。可以通過jQuery選擇器(見第3題)來完成。
用jQuery選擇器能夠快捷而輕松地查找到文檔中的某個特定的元素節點，然后可以用attr()方法來獲取元素的各種屬性的值。
1.1查找元素節點
1.2查找屬性節點
2.創建節點
$(html)方法會根據傳入的HTML標記字符串，創建一個 DOM對象，并將這個DOM對象包裝成一個jQuery對象后返回。要想將新創建的元素插入文檔，可以使用jQuery中的append()等方法。
2.1創建元素節點
2.2創建文本節點
創建文本節點就是在創建元素節點時直接把文本內容寫出來，然后使用append()等方法將它們添加到文檔中就可以了。
2.3創建屬性節點
創建屬性節點與創建文本節點類似，也是直接在創建元素節點時一起創建。
3.插入節點
動態創建HTML元素并沒有實際用處，還需要將新創建的元素插入文檔中。將新創建的節點插入文檔最簡單地辦法是，讓它成為這個文檔的某個節點的子節點。
3.1 append() 向每個匹配的元素內部追加內容
$("p").append("<b>你好</b>") // 結果是<p>我說：<b>你好</b></p>
3.2 appendTo() 將所有匹配的元素追加到指定的元素中
$("<b>你好</b>").appendTo("p") // 結果是<p>我說：<b>你好</b></p>
3.3 prepend() 向每個匹配的元素內部前置內容
$("p").prepend("<b>你好</b>") // 結果是<p><b>你好</b>我說：</p>
3.4 prependTo() 將所有匹配的元素前置到指定的元素中
$("<b>你好</b>").prependTo("p") // 結果是<p><b>你好</b>我說：</p>
3.5 after() 在每個匹配的元素之后插入內容
$("p").after("<b>你好</b>") // 結果是<p>我說：</p><b>你好</b>
3.6 insertAfter() 將所有匹配的元素插入到指定元素的后面
$("<b>你好</b>").insertAfter("p") // 結果是<p>我說：</p><b>你好</b>
3.7 before() 在每個匹配的元素之前插入內容
$("p").before("<b>你好</b>") // 結果是<b>你好</b><p>我說：</p>
3.8 insertBefore() 將所有匹配的元素插入到指定的元素的前面
$("<b>你好</b>").insertBefore("p") // 結果是<b>你好</b><p>我說：</p>
4.刪除節點
如果文檔中某一個元素多余那么應將其刪除。
4.1 remove()方法
作用是從DOM中刪除所有匹配的元素，傳入的參數用于根據jQuery表達式來篩選元素
$("ul li:eq(1)").remove() // 獲取<ul>節點中的第2個<li>元素節點后，將它從網頁中刪除
$("ul li").remove("li[title!=菠蘿]")// 將<li>元素中屬性title不等于“菠蘿”的<li>元素刪除
4.2 detach()方法
detach()和remove()一樣，也是從DOM中去掉所有匹配的元素。但這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。與remove()不用的是，所有綁定的事件、附加的數據等都會保留下來。
4.3 empty()方法
empty()方法并不是刪除節點，而是清空節點，它能清空元素中的所有后代節點。
$("ul li:eq(1)").empty() // 獲取第2個<li>元素節點后，清空此元素里的內容，注意是元素里。當運行代碼后，第2個<li>元素的內容被清空了，只剩下<li>標簽默認的符號“.”
5.復制節點
clone()方法
復制節點后，被復制的新元素并不具有任何行為。若需要新元素也具有復制功能（上例是單擊事件），可使用如下jQuery代碼：
$
6.替換節點
6.1 replaceWith()
replaceWith()方法的作用是將所有匹配的元素都替換成指定的HTML或者 DOM元素
例如：要將網頁中<p title="選擇你喜歡">你喜歡的蔬果？</p>替換成<strong>你討厭的蔬果？</strong>
6.2 replaceAll()
該方法與replaceWith()作用相同，只是顛倒了replaceWith()操作，可使用如下代碼實現上例同樣的功能：
注意：若在替換之前已經給元素綁定事件，替換后原先綁定的事件將會與被替換的元素一起消失，需要在新元素上重新綁定事件。
7.包裹節點
wrap()將某個節點用其他標記包裹起來，該方法對于需要在文檔中插入額外的結構化標記非常有用，而且它不會破壞原始文檔的語義。
得到的結果是：<b><strong title="選擇你喜歡的">你最喜歡的水果？</strong></b>
wrapAll()方法會將所有匹配的元素用一個元素來包裹，它不同于wrap()方法，wrap()方法是將所有的元素進行單獨的包裹。
wrapInner()方法將每一個匹配的元素的子內容（包括文本節點）用其他結構化的標記包裹起來。例如可使用它來包裹<strong>標簽的子內容，
8.屬性操作
jQuery中用attr()方法來獲取和設置元素屬性，removeAttr()方法來刪除元素屬性。
9.樣式操作
9.1 獲取樣式和設置樣式
獲取class和設置class都可以使用attr()方法來完成。
上面的代碼中class也是<p>元素的屬性，因此獲取和設置class都可以使用attr()方法來完成：
var 9.2 追加樣式
addClass()方法專門用來追加樣式。
9.3 移除樣式
removeClass()方法用來刪除class的某個值，作用是從匹配的元素中刪除全部或者指定的class。
如：$("p").removeClass("high another") // 把<p>元素的兩個class都刪除
也可以寫成：$("p").removeClass() // 移除<p>元素的所有class
9.4 切換樣式
toggle()方法
toggle()方法此時主要是控制行為上的重復切換：交替執行代碼3和代碼4兩個函數，如果元素原來是顯示的，則隱藏它；如果元素原來是隱藏的，則顯示它。
toggleClass()方法：控制樣式上的重復切換。如果類名存在則刪除它，如果類名不存在則添加它。
9.5 判斷是否含有某個樣式
hasClass()可以用來判斷元素中是否含有某個class，如果有則返回true，否則返回false。
10.設置和獲取HTML、文本和值
10.1 html()方法
此方法類似于JavaScript中的innerHTML屬性，可用來讀取或者設置某個元素中的HTML內容。
10.2 text()方法
此方法類似于JavaScript中的innerText屬性，可用來讀取或者設置某個元素中的文本內容。
10.3 val()方法
此方法類似于JavaScript中的value屬性，可用來設置和獲取元素的值。無論元素是文本框、下拉列表還是單選框，它都可以返回元素的值。如果元素為多選，則返回一個包含所有選擇的值的數組。
11.遍歷節點
11.1 children()方法
該方法用于取得匹配元素的子元素集合。
注意：children()方法只考慮子元素而不考慮其他后代元素。
11.2 next()方法
該方法用于取得匹配元素后面緊鄰的同輩元素。
11.3 prev()方法
該方法用于取得匹配元素前面緊鄰的同輩元素。
11.4 siblings()方法
該方法用于取得匹配元素前后所有的同輩元素。
11.5 closest()方法
該方法用于取得最近的匹配元素。
首先檢查當前元素是否匹配，若匹配則直接返回元素本身，若不匹配則向上查找父元素，逐級向上直到找到匹配選擇器的元素。如果什么都沒找到則返回一個空的jQuery對象。
11.6 parent()，parents()與closest()區別
parent() 獲取集合中每個匹配元素的父級元素
parents() 獲取集合中每個匹配元素的祖先元素
closest() 從元素本身開始逐級向上級元素匹配并返回最先匹配的祖先元素。（它只返回匹配的第一個元素節點）
11.7 find()，filter()，nextAll()和prevAll()等遍歷節點的方法，都可以使用jQuery表達式來作為它們的參數來篩選元素。
12.CSS-DOM操作
CSS-DOM技術簡單來說就是讀取和設置style對象的各種屬性。
12.1 jQuery可以直接利用css()方法獲取元素的樣式屬性，也可以直接利用css()方法設置某個元素的單個樣式。
height()獲取匹配元素當前計算的高度值(px)：
$ width()可以取得匹配元素的寬度值(px)或者設置元素的寬度。
12.2 關于元素定位
12.2.1 offset()方法
作用是獲取元素在當前視窗的相對偏移，其中返回的對象包含兩個屬性，即top和left，它只對可見元素有效。
12.2.2 position()方法
作用是獲取元素相對于最近的一個position樣式屬性設置為relative或者absolute的祖父節點的相對偏移，與offset()一樣返回的對象也包括兩個屬性即top和left。
12.2.3 scrollTop()方法和scrollLeft()方法
這兩個方法的作用分別是獲取元素的滾動條距頂端的距離和距左側的距離。還可以為這兩個方法指定一個參數，控制元素的滾動條滾動到指定位置。
三. 請列舉jQuery中常用的選擇器有哪幾種（至少說明3種），并每種列舉3個。
jQuery選擇器分為基本選擇器、層次選擇器、過濾選擇器和表單選擇器。
- 基本選擇器
基本選擇器是jQuery中最常用的選擇器，也是最簡單的選擇器，它通過元素id、class和標簽名等來查找DOM元素。
(1) #id 根據給定的id匹配一個元素
如：$("#test")選取id為test的元素
(2) .class 根據給定的類名匹配元素
如：$(".test")選取所有class為test的元素
(3) element 根據給定的元素名匹配元素
如：$("p")選取所有的<p>元素
(4) * 匹配所有元素
如：$("*")選取所有的元素
(5) selector1, selector2, ... , selectorN 將每一個選擇器匹配到的元素合并后一起返回
如：$("div,span,p.myClass")選取所有<div>,<span>和擁有class為myClass的<p>標簽的一組元素
- 層次選擇器
通過DOM元素之間的層次關系來獲取特定元素，例如后代元素、子元素、相鄰元素和同輩元素等。
(1)$("ancestor descendant") 選取ancestor元素里所有的descendant即后代元素
如：$("div span")選取<div>里的所有的<span>元素
(2)$("parent > child") 選取parent元素下的child即子元素，與$("ancestor descendant")有區別，$("ancestor descendant")選擇的是后代元素
如：$("div > span")選取<div>元素下的元素名是<span>的子元素
(3) $("prev + next") 選取緊接在prev元素后的next元素
如：$(".one + div")選取class為one的下一個<div>同輩元素
(4) $("prev ~ siblings") 選取prev元素之后的所有siblings元素
如：$("#two~div")選取id為two的元素后面的所有<div>同輩元素
(3)(4)有更簡單的替代方案：
可以用next()方法來代替$("prev + next")選擇器
如：$(".one").next("div")等價于$(".one + div")
可以使用nextAll()方法來代替$("prev~siblings")選擇器
如：$("#prev").nextAll("div")等價于$("#prev~div")
$("#prev~div")選擇器只能選擇"prev"元素后面的<div>元素，而siblings()方法與前后位置無關，只要是同輩節點就都能匹配。
// 選取#prev之后的所有同輩div元素- 過濾選擇器
過濾選擇器主要是通過特定的過濾規則來篩選出所需的DOM元素，過濾規則與CSS中的偽類選擇器語法相同，即選擇器都以一個冒號（：）開頭。按照不同的過濾規則，過濾選擇器可以分為基本過濾、內容過濾、可見性過濾、屬性過濾、子元素過濾和表單對象屬性過濾選擇器。
(1) :first 選取第1個元素
如：$("div:first")選取所有<div>元素中第1個<div>元素
(2) :last 選取最后1個元素
如：$("div:last")選取所有<div>元素中的最后一個<div>元素
(3) :not(selector) 去除所有與給定選擇器匹配的元素
如：$("input:not(.myClass)")選取class不是myClass的<input>元素
(4) :even 選取索引是偶數的所有元素，索引從0開始
如：$("input:even")選取索引是偶數的<input>元素
(5) :odd 選取索引是奇數的所有元素，索引從0開始
如：$("input:odd")選取索引是奇數的<input>元素
(6) :eq(index) 選取索引等于index的元素(index從0開始)
如：$("input:eq(1)")選取索引等于1的<input>元素
(7) :gt(index) 選取索引大于index的元素(index從0開始)
如：$("input:gt(1)")選取索引大于1的<input>元素（注：大于1而不包括1）
(8) :lt(index) 選取索引小于index的元素(index從0開始)
如：$("input:lt(1)")選取索引小于1的<input>元素（注：小于1而不包括1）
(9) :header 選取所有的標題元素，例如h1,h2,h3等等
如：$(":header")選取網頁中的所有的<h1>,<h2>,<h3>...
(10) :animated 選取當前正在執行動畫的所有元素
如：$("div:animated")選取正在執行動畫的<div>元素
(11) :focus 選取當前獲取焦點的元素
如：$(":focus")選取當前獲取焦點的元素
內容過濾選擇器的過濾規則主要體現在它所包含的子元素或文本內容上。
(1) :contains(text) 選取含有文本內容為"text"的元素
如：$("div:contains('我')")選取含有文本“我”的<div>元素
(2) :empty 選取不包含子元素或者文本的空元素
如：$("div:empty")選取不包含子元素(包括文本元素)的<div>空元素
(3) :has(selector) 選取含有選擇器所匹配的元素的元素
如：$("div:has(p)")選取含有<p>元素的<div>元素
(4) :parent 選取含有子元素或者文本元素的元素
如：$("div:parent")選取擁有子元素（包括文本元素）的<div>元素
(1) :hidden 選取所有不可見的元素
如：$(":hidden")選取所有不可見的元素。包括<input type="hidden"/>,<div style="display:none;">和<div style="visibility:hidden;">等元素。如果只想選取<input>元素，可以使用$("input:hidden")
(2) :visible 選取所有可見的元素
如：$("div:visible")選取所有可見的<div>元素
屬性過濾選擇器的過濾規則是通過元素的屬性來獲取相應的元素。
(1) [attribute] 選取擁有此屬性的元素
如：$("div[id]")選取擁有屬性id的元素
(2) [attribute=value] 選取屬性的值為value的元素
如：$("div[title=test]")選取屬性title為"test"的<div>元素
(3) [attribute!=value] 選取屬性的值不等于value的元素
如：$("div[title!=test]")選取屬性title不為"test"的<div>元素（注意：沒有屬性title的<div>元素也會被選取）
(4) [attribute^=value] 選取屬性的值以value開始的元素
如：$("div[title^=test]")選取屬性title以"test"開始的<div>元素
(5) [attribute$=value] 選取屬性的值以value結束的元素
如：$("div[title$=test]")選取屬性title以"test"結束的<div>元素
(6) [attribute*=value] 選取屬性的值含有value的元素
如：$("div[title*=test]")選取屬性title含有"test"的<div>元素
(7) [attribute|=value] 選取屬性等于給定字符串或以該字符串為前綴（該字符串后跟一個連字符“-”）的元素
如：$('div[title|="en"]')選取屬性title等于en或以en為前綴（該字符串后跟一個連字符'-'）的元素
(8) [attribute~=value] 選取屬性用空格分隔的值中包含一個給定值的元素
如：$('div[title~="uk"]')選取屬性title用空格分隔的值中包含字符uk的元素
(9) [attribute1][attribute2][attributeN] 用屬性選擇器合并成一個復合屬性選擇器，滿足多個條件。每選擇一次，縮小一次范圍
如：$("div[id][title$='test']")選取擁有屬性id并且屬性title以'test'結束的<div>元素
(1) :nth-child(index/even/odd/equation) 選取每個父元素下的第index個子元素或者奇偶元素。（index從1算起）
如：注意:eq(index)只匹配一個元素，而:nth-child將為每一個父元素匹配子元素，并且:nth-child(index)是從1開始的，而:eq(index)是從0算起的。
(2) :first-child 選取每個父元素的第1個子元素
如：注意:first只返回單個元素，而:first-child選擇符將為每個父元素匹配第1個子元素，例如$("ul li:first-child")選取每個<ul>中第1個<li>元素
(3) :last-child 選取每個父元素的最后一個子元素
同樣，:last只返回單個元素，而:last-child選擇符將為每個父元素匹配最后一個子元素
(4) :only-child 如果某個元素是它父元素中惟一的子元素，那么將會被匹配。如果父元素中含有其他元素則不會被匹配
如：$("ul li:only-child")在<ul>中選取是唯一子元素的<li>元素
(1) :enabled 選取所有可用元素
如：$("#form1 :enabled") 選取id為"form1"的表單內的所有可用元素
(2) :disabled 選取所有不可用元素
如：$("#form2 :disabled") 選取id為"form2"的表單內的所有不可用元素
(3) :checked 選取所有被選中的元素（單選框，復選框）
如：$("input:checked") 選取所有被選中的<input>元素
(4) :selected 選取所有被選中的選項元素（下拉列表）
如：$("select option:selected") 選取所有被選中的選項元素
- 表單選擇器
表單選擇器能極其方便地獲取到表單的某個或某類型的元素。
(1) :input 選取所有的<input>、<textarea>、<select>和<button>元素
如：$(":input")獲取所有的<input>、<textarea>、<select>和<button>元素
(2) :text 選取所有的單行文本框
如：$(":text")選取所有的單行文本框
(3) :password 選取所有的密碼框
如：$(":password")選取所有的密碼框
(4) :radio 選取所有的單選框
如：$(":radio")選取所有的單選框
(5) :checkbox 選取所有的多選框
如：$(":checkbox")選取所有的復選框
(6) :submit 選取所有的提交按鈕
如：$(":submit")選取所有的提交按鈕
(7) :image 選取所有的圖像按鈕
如：$(":image")選取所有的圖像按鈕
(8) :reset 選取所有的重置按鈕
如：$(":reset")選取所有的重置按鈕
(9) :button 選取所有的按鈕
如：$(":button")選取所有的按鈕
(10) :file 選取所有的上傳域
如：$(":file")選取所有的上傳域
(11) :hidden 選取所有不可見元素
如：$(":hidden")選取所有不可見元素（已經在不可見性過濾選擇器中講解過）
四. 請用jQuery手寫一段代碼，實現當按鈕被點擊時以卷簾效果消失。
jQuery slideUp() 方法用于向上滑動元素。
$可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是滑動完成后所執行的函數名稱。
下面的例子演示了 slideUp() 方法：
五. 請寫出一個簡單地$.ajax()的請求方式（至少5個參數）。
$$var
六. 請寫出至少4種vue中的指令和它的用法。
七. 路由之間跳轉有哪些方式？
八. 請舉例說明axios的四種常用方法（請求方式）？
九. 請詳細說明對vue生命周期的理解？
十. 請簡述封裝vue組件的過程。
十一. window中的onload與jQuery中的ready有什么區別？
（1）執行時間不同
一般情況下window的load()都是用來設置body標簽的onload事件.但onload事件是要在頁面的元素全部加載完了才觸發的,這也包括頁面上的圖片媒體內容，以及大的表格數據。如果頁面上圖片較多或圖片太大,加載需要較多時間，就會導致頁面無響應，或者用戶做了其它操作了。缺點：如果加載圖片和媒體內容花費了大量時間，用戶就會感受到定義在window.onload事件上的代碼在執行時，有明顯的延遲，影響用戶體驗。故load()一般不建議使用；
jQuery中的ready函數只須等待DOM加載完畢，無須等待圖像或外部資源的加載，執行起來更快。
（2）執行次數不同
window.onload()只能執行一次，如果第二次，那么第一次的執行會被覆蓋;
$(document).ready()可以執行多次，第N次都不會被上一次覆蓋。
（3）簡化寫法不同
window.onload()無簡寫；
$(document).ready(function(){})可簡寫為$(function(){})
十二. window.onload 和 document.onDOMContentLoaded區別？
觸發的時機不同：
window.onload是在DOM樹構建完成、外部的js、css 、圖片、flash等資源都加載完成后再觸發；
document.onDOMContentLoaded是在DOM樹構建完成后觸發。此機制更合理，因為我們可以容忍圖片、flash等延遲加載，卻不可以容忍看見內容后頁面不可交互——影響用戶體驗。
附：關于js為什么放到</body>的最后部分？
因為瀏覽器的加載和渲染過程中，<script>放在前面而后續的DOM結構還沒有渲染加載出來，所以獲取不到，故最好放到</body>最后部分。
例如：https://jsbin.com/tacugeleva/edit?html,console,output
但如果非要放進<head>里的話，必須寫成這樣：
document十三. JavaScript中的事件處理如何運行？
事件流就是描述了頁面中接受事件的順序，在瀏覽器發展的初期，兩大瀏覽器廠商IE和Netscape互掐，他們對事件流的解釋出現了兩中截然相反的定義。也就是我們所熟悉的：IE的事件冒泡（向上傳遞），Netscape的事件捕獲（向下傳遞）。事件冒泡即事件最開始由最具體的元素（文檔中嵌套層次最深的那個節點）接收，然后逐級向上傳播至最不具體的節點（文檔）。事件捕獲即事件最早由不太具體的節點接收，而最具體的節點最后接收到事件。
1.注冊事件處理程序的方式有3種：
（1）設置HTML標簽屬性為事件處理程序
文檔元素的事件處理程序屬性，其名字由“on”后面跟著事件名組成，例如：onclick、onmouseover。當然了，這種形式只能為DOM元素注冊事件處理程序。
例如：
①因為HTML里面不區分大小寫，所以這里事件處理程序屬性名大寫、小寫、大小混寫均可，屬性值就是相應事件處理程序的JavaScript代碼；
②若給同一元素寫多個onclick事件處理屬性，瀏覽器只執行第一個onclick里面的代碼，后面的會被忽略；
③這種形式是在事件冒泡過程中注冊事件處理程序的；
（2）DOM0級事件處理程序：設置JavaScript對象屬性為事件處理程序
可以通過設置某一事件目標的事件處理程序屬性來為其注冊相應的事件處理程序。事件處理程序屬性名字由“on”后面跟著事件名組成，例如：onclick、onmouseover。
①因為JavaScript是嚴格區分大小寫的，所以，這種形式下屬性名只能按規定小寫；
②若給同一元素對象寫多個onclick事件處理屬性，后面寫的會覆蓋前面的（ps：這就是在修改一個對象屬性的值，屬性的值是唯一確定的）；
③這種形式也是在事件冒泡過程中注冊事件處理程序的；
（3）DOM2級事件處理程序：addEventListener()
前兩種方式出現在Web初期，眾多瀏覽器都有實現。而addEventListener()方法是標準事件模型中定義的。任何能成為事件目標的對象——這些對象包括Window對象、Document對象和所有文檔元素等——都定義了一個名叫addEventListener()的方法，使用這個方法可以為事件目標注冊事件處理程序。
addEventListener()接受三個參數：
第一個參數是要注冊處理程序的事件類型，其值是字符串，但并不包括前綴“on”；第二個參數是指當指定類型的事件發生時應該調用的函數；第三個參數是布爾值，其可以忽略（某些舊的瀏覽器上不能忽略這個參數），默認值為false，這種情況是在事件冒泡過程中注冊事件處理程序，當其為true時就是在事件捕獲過程中注冊事件處理程序。
①通過addEventListener()方法給同一對象注冊多個同類型的事件，并不會發生忽略或覆蓋，而是會按順序依次執行；
②相對addEventListener()的是removeEventListener()方法，它表示從對象中刪除某個事件處理函數。它同樣有三個參數，前兩個參數自然跟addEventListener()的意義一樣，而第三個參數也只需跟相應的addEventListener()的第三個參數保持一致即可，同樣可以省略，默認值為false。
DOM2級事件規定事件包括三個階段：事件捕獲階段->處于目標階段->事件冒泡階段 。
<!DOCTYPE HTML>（4）attachEvent()
但是，IE8以及其之前版本的瀏覽器并不支持addEventListener()和removeEventListener()。相應的，IE定義了類似的方法attachEvent()和detachEvent()。因為IE8以及其之前版本瀏覽器也不支持事件捕獲只支持事件冒泡，所以attachEvent()并不能注冊捕獲過程中的事件處理函數。因此attachEvent()和detachEvent()要求只有兩個參數：事件類型和事件處理函數。而且，它們的第一個參數使用了帶“on”前綴的事件處理程序屬性名。
var2. 事件處理程序調用時的一些問題
(1)事件處理程序的參數
通常事件對象作為參數傳遞給事件處理函數，但IE8以及其之前版本的瀏覽器中全局變量event才是事件對象。所以，我們在寫相關代碼時應該注意兼容性問題。
（2）事件處理程序的運行環境
事件處理程序的運行環境，也就是在事件處理程序中調用上下文（this值）的指向問題：
3.多個事件處理程序調用規則如下:
(1)通過HTML屬性注冊的處理程序和通過設置對象屬性的處理程序一直優先調用;(即方法1和方法2)
(2)使用addEventListener()注冊的處理程序按照它們的注冊順序依次調用;(即方法3)
(3)使用attachEvent()注冊的處理程序可能按照任何順序調用，所以代碼不應該依賴于調用順序;(即方法4)
十四. vue-webpack中并沒有scss，我們要在vue中使用sass需要怎么配置？
1、安裝sass的依賴包
cnpm install --save-dev sass-loader // sass-loader依賴于node-sass
cnpm install --save-dev node-sass
2、在build文件夾下的webpack.base.conf.js找到module.exports里的module，rules里面添加如下配置：
3、在APP.vue中修改style標簽：<stylelang="scss">
<十五. 請說出至少3種減少頁面加載時間的方法
①減少HTTP請求（合并圖片，合并文件）
②優化圖片，減小其尺寸
③選擇合適的圖像格式（gif可用于顏色要求不高的地方）
④壓縮JS，CSS代碼，把CSS放在頂部，把JS放在底部，最好把CSS和JS放到外部文件
⑤服務器啟用gzip功能
將要傳輸的文件壓縮后傳輸到客戶端再解壓，在網絡傳輸數據量會大幅減小。在服務器上的Apache、Nginx可直接啟用，也可用代碼直接設置傳輸文件頭，增加gzip的設置，也可從負載均衡設備直接設置。不過需要留意的是，這個設置會略微增加服務器的負擔。服務器性能不是很好的網站，要慎重考慮。
⑥標明寬度及高度
標明高度和寬度（如果瀏覽器沒有找到這兩個參數，它需要一邊下載圖片一邊計算大小，如果圖片很多，瀏覽器需要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。
當瀏覽器知道了高度和寬度參數后，即使圖片暫時無法顯示，頁面上也會騰出圖片的空位，然后繼續加載后面的內容。從而加載時間快了，瀏覽體驗也更好了）
⑦網址后面加斜杠“/”(加了斜杠會減少一次判斷過程，直接返回網站設置的存放在網站根目錄下的默認頁面)
如http://www.campr.com/目錄，會判斷這個目錄是什么文件類型，或者是目錄。
⑧避免空的src和href
⑨避免跳轉
⑩盡量采用GET方法調用
?使用CDN(Content Delivery Network)網絡加速
簡單講，就是將你的圖片、視頻擴散到CDN網絡所能到達之處，讓用戶訪問時能就近下載到這些文件，從而達到網絡提速的目的，這樣做，同時能減輕你自己網站的負載。
本文引用參考：
webpack+vue 構建項目步驟并且使用sass 安裝配置?blog.csdn.netwindow的onload事件與jQuery中的ready事件有什么不同？?blog.csdn.netjquery 的ready() 與window.onload()的區別?www.cnblogs.com請說明JavaScript中處理事件的步驟_百度知道?zhidao.baidu.comJavaScript事件處理的方式(三種)?blog.csdn.net請說出三種減少頁面加載時間的方法__牛客網?www.nowcoder.comHTML：減少頁面加載時間的方法 - CuriousZero - 博客園?www.cnblogs.com請說出三種減少頁面加載時間的方法？?www.jianshu.com總結
以上是生活随笔為你收集整理的jquery 字符串查找_JQuery、Vue等考点的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： e-mobile帐号状态存在异常_一文掌
- 下一篇： 枣庄必买特产有哪些