一、javascript的typeof返回哪些數據類型javascript
Object number function boolean underfind;php
2.例舉3種強制類型轉換和2種隱式類型轉換?css
- 強制(parseInt,parseFloat,number)隱式(== – ===);
3.數組方法pop() push() unshift() shift()html
- Push()尾部添加 pop()尾部刪除
- Unshift()頭部添加 shift()頭部刪除
4.ajax請求的時候get 和post方式的區別?前端
- 一個在url後面 一個放在虛擬載體裏面
有大小限制- 安全問題
應用不一樣 一個是論壇等只須要請求的,一個是相似修改密碼的;
5.call和apply的區別vue
- Object.call(this,obj1,obj2,obj3)
- Object.apply(this,arguments)
6.ajax請求時,如何解釋json數據java
- 使用eval parse,鑑於安全性考慮 使用parse更靠譜;
7.事件委託是什麼node
- 讓利用事件冒泡的原理,讓本身的所觸發的事件,讓他的父元素代替執行!
8.閉包是什麼,有什麼特性,對頁面有什麼影響?簡要介紹你理解的閉包react
- 閉包就是可以讀取其餘函數內部變量的函數。
9.添加 刪除 替換 插入到某個接點的方法jquery
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
10.說一下什麼是javascript的同源策略?
十一、編寫一個b繼承a的方法;
function A(name){ this.name = name; this.sayHello = function(){alert(this.name+」 say Hello!」);}; } function B(name,id){ this.temp = A; this.temp(name); //至關於new A(); delete this.temp; this.id = id; this.checkId = function(ID){alert(this.id==ID)}; }
12.如何阻止事件冒泡和默認事件
function stopBubble(e) { if (e && e.stopPropagation) e.stopPropagation() else window.event.cancelBubble=true }
1三、下面程序執行後彈出什麼樣的結果?
function fn() { this.a = 0; this.b = function() { alert(this.a) } } fn.prototype = { b: function() { this.a = 20; alert(this.a); }, c: function() { this.a = 30; alert(this.a); } } var myfn = new fn(); myfn.b(); myfn.c();
1四、.談談This對象的理解。
this是js的一個關鍵字,隨着函數使用場合不一樣,this的值會發生變化。
可是有一個總原則,那就是this指的是調用函數的那個對象。
this通常狀況下:是全局對象Global。 做爲方法調用,那麼this就是指這個對象
1五、下面運行的結果
function fun(n,o) { console.log(o) return { fun:function(m){ return fun(m,n); } }; } var a = fun(0); a.fun(1); a.fun(2); a.fun(3); var b = fun(0).fun(1).fun(2).fun(3); var c = fun(0).fun(1); c.fun(2); c.fun(3);
//a: undefined,0,0,0
//b: undefined,0,1,2
//c: undefined,0,1,1
1六、下面程序的輸出結果
var name = 'World!'; (function () { if (typeof name === 'undefined') { var name = 'Jack'; console.log('Goodbye ' + name); } else { console.log('Hello ' + name); } })();
1七、HTTP協議
1八、事件委託機制
原理:使用事件委託技術能讓你避免對特定的每一個節點添加事件監聽器;相反,事件監聽器是被添加到它們的父元素上,利用冒泡的原理,把事件加到父級上,觸發執行效果。
優勢
經過上面的介紹,你們應該可以體會到使用事件委託對於web應用程序帶來的幾個優勢:
1.能夠大量節省內存佔用,減小事件註冊。
2.能夠方便地動態添加和修改元素,不須要由於元素的改動而修改事件綁定。
3.JavaScript和DOM節點之間的關聯變少了,這樣也就減小了因循環引用而帶來的內存泄漏發生的機率。
缺點:
不是全部的事件都能冒泡的。blur、focus、load和unload不能像其它事件同樣冒泡。事實上blur和focus能夠用事件捕獲而非事件冒泡的方法得到(在IE以外的其它瀏覽器中)。
在管理鼠標事件的時候有些須要注意的地方。若是你的代碼處理mousemove事件的話你趕上性能瓶頸的風險可就大了,由於mousemove事件觸發很是頻繁。而mouseout則由於其怪異的表現而變得很難用事件代理來管理。
1九、緩存
20、閉包
2一、垃圾回收
閉包就是可以讀取其餘函數內部變量的函數
閉包是指有權訪問另外一個函數做用域中變量的函數,建立閉包的最多見的方式就是在一個函數內建立另外一個函數,經過另外一個函數訪問這個函數的局部變量,利用閉包能夠突破做用鏈域
閉包的特性:
說說你對閉包的理解
使用閉包主要是爲了設計私有的方法和變量。閉包的優勢是能夠避免全局變量的污染,缺點是閉包會常駐內存,會增大內存使用量,使用不當很容易形成內存泄露。在js中,函數即閉包,只有函數纔會產生做用域的概念
閉包 的最大用處有兩個,一個是能夠讀取函數內部的變量,另外一個就是讓這些變量始終保持在內存中
閉包的另外一個用處,是封裝對象的私有屬性和私有方法
好處:可以實現封裝和緩存等;
壞處:就是消耗內存、不正當使用會形成內存溢出的問題
使用閉包的注意點
window
對象即被終止,做用域鏈向下訪問變量是不被容許的每一個對象都會在其內部初始化一個屬性,就是prototype
(原型),當咱們訪問一個對象的屬性時
若是這個對象內部不存在這個屬性,那麼他就會去prototype
裏找這個屬性,這個prototype
又會有本身的prototype
,因而就這樣一直找下去,也就是咱們平時所說的原型鏈的概念
關係:instance.constructor.prototype = instance.__proto__
特色:
JavaScript
對象是經過引用來傳遞的,咱們建立的每一個新對象實體中並無一份屬於本身的原型副本。當咱們修改原型時,與之相關的對象也會繼承這一改變當咱們須要一個屬性的時,Javascript
引擎會先看當前對象中是否有這個屬性, 若是沒有的
就會查找他的Prototype
對象是否有這個屬性,如此遞推下去,一直檢索到 Object
內建對象
Event Delegation
),又稱之爲事件委託。是 JavaScript
中經常使用綁定事件的經常使用技巧。顧名思義,「事件代理」便是把本來須要綁定的事件委託給父元素,讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是能夠提升性能table
上代理全部td
的click
事件就很是棒構造繼承
原型繼承
實例繼承
拷貝繼承
原型prototype
機制或apply
和call
方法去實現較簡單,建議使用構造函數與原型混合方式
function Parent(){ this.name = 'wang'; } function Child(){ this.age = 28; } Child.prototype = new Parent();//繼承了Parent,經過原型 var demo = new Child(); alert(demo.age); alert(demo.name);//獲得被繼承的屬性 }
this
老是指向函數的直接調用者(而非間接調用者)new
關鍵字,this
指向new
出來的那個對象this
指向觸發這個事件的對象,特殊的是,IE
中的attachEvent
中的this
老是指向全局對象Window
W3C
中定義事件的發生經歷三個階段:捕獲階段(capturing
)、目標階段(targetin
)、冒泡階段(bubbling
)
DOM
事件流:同時支持兩種事件模型:捕獲型事件和冒泡型事件W3c
中,使用stopPropagation()
方法;在IE下設置cancelBubble = true
click - <a>
後的跳轉。在W3c
中,使用preventDefault()
方法,在IE
下設置window.event.returnValue = false
this
變量引用該對象,同時還繼承了該函數的原型this
引用的對象中this
所引用,而且最後隱式的返回 this
Ajax
的原理簡單來講是在用戶和服務器之間加了—箇中間層(AJAX
引擎),經過XmlHttpRequest
對象來向服務器發異步請求,從服務器得到數據,而後用javascrip
t來操做DOM
而更新頁面。使用戶操做與服務器響應異步化。這其中最關鍵的一步就是從服務器得到請求數據Ajax
的過程只涉及JavaScript
、XMLHttpRequest
和DOM
。XMLHttpRequest
是aja
x的核心機制// 1. 建立鏈接 var xhr = null; xhr = new XMLHttpRequest() // 2. 鏈接服務器 xhr.open('get', url, true) // 3. 發送請求 xhr.send(null); // 4. 接受請求 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ success(xhr.responseText); } else { // fail fail && fail(xhr.status); } } }
ajax 有那些優缺點?
Ajax
在客戶端運行,承擔了一部分原本由服務器承擔的工做,減小了大用戶量下的服務器負載。Ajax
能夠實現動態不刷新(局部刷新)AJAX
暴露了與服務器交互的細節。jsonp
、 iframe
、window.name
、window.postMessage
、服務器上設置代理頁面var module1 = (function(){ var _count = 0; var m1 = function(){ //... }; var m2 = function(){ //... }; return { m1 : m1, m2 : m2 }; })();
IE
async
:script
,插入到DOM
中,加載完畢後callBack
setTimeout
的第一個參數使用字符串而非函數的話,會引起內存泄漏數據體積方面
JSON
相對於XML
來說,數據的體積小,傳遞的速度更快些。數據交互方面
JSON
與JavaScript
的交互更加方便,更容易解析處理,更好的數據交互數據描述方面
JSON
對數據的描述性比XML
較差傳輸速度方面
JSON
的速度要遠遠快於XML
WebPack
是一個模塊打包工具,你能夠使用WebPack
管理你的模塊依賴,並編繹輸出模塊們所需的靜態文件。它可以很好地管理、打包Web
開發中所用到的HTML
、Javascript
、CSS
以及各類靜態文件(圖片、字體等),讓開發過程更加高效。對於不一樣類型的資源,webpack
有對應的模塊加載器。webpack
模塊打包器會分析模塊間的依賴關係,最後 生成了優化且合併後的靜態資源CommonJS
是服務器端模塊的規範,Node.js
採用了這個規範。CommonJS
規範加載模塊是同步的,也就是說,只有加載完成,才能執行後面的操做。AMD
規範則是非同步加載模塊,容許指定回調函數AMD
推薦的風格經過返回一個對象作爲模塊對象,CommonJS
的風格經過對module.exports
或exports
的屬性賦值來達到暴露模塊對象的目的sql
注入原理
SQL
命令插入到Web
表單遞交或輸入域名或頁面請求的查詢字符串,最終達到欺騙服務器執行惡意的SQL命令總的來講有如下幾點
"-"
進行轉換等SQL
或者直接使用存儲過程進行數據查詢存取hash
掉密碼和敏感的信息XSS原理及防範
Xss(cross-site scripting)
攻擊指的是攻擊者往Web
頁面裏插入惡意html
標籤或者javascript
代碼。好比:攻擊者在論壇中放一個看似安全的連接,騙取用戶點擊後,竊取cookie
中的用戶私密信息;或者攻擊者在論壇中加一個惡意表單,當用戶提交表單的時候,卻把信息傳送到攻擊者的服務器中,而不是用戶本來覺得的信任站點XSS防範方法
」<」,」>」,」;」,」’」
等字符作過濾;其次任何內容寫到頁面以前都必須加以encode,避免不當心把html tag
弄出來。這一個層面作好,至少能夠堵住超過一半的XSS 攻擊XSS與CSRF有什麼區別嗎?
XSS
是獲取信息,不須要提早知道其餘用戶頁面的代碼和數據包。CSRF
是代替用戶完成指定的動做,須要知道其餘用戶頁面的代碼和數據包。要完成一次CSRF
攻擊,受害者必須依次完成兩個步驟
登陸受信任網站A
,並在本地生成Cookie
在不登出A
的狀況下,訪問危險網站B
CSRF的防護
CSRF
方式方法不少樣,但總的思想都是一致的,就是在客戶端頁面增長僞隨機數工廠模式:
new
關鍵字構造函數模式
this
對象;Iframe
把真正的銀行登陸頁面嵌到他的頁面上,當你使用真實的用戶名,密碼登陸時,他的頁面就能夠經過Javascript
讀取到你的表單中input
中的內容,這樣用戶名,密碼就輕鬆到手了。offsetWidth/offsetHeight
返回值包含content + padding + border,效果與e.getBoundingClientRect()相同clientWidth/clientHeight
返回值只包含content + padding,若是有滾動條,也不包含滾動條scrollWidth/scrollHeight
返回值包含content + padding + 溢出內容的尺寸var obj = {};
var obj = new Object();
var obj = Object.create(Object.prototype);
png24
位的圖片在iE6瀏覽器上出現背景,解決方案是作成PNG8
margin
和padding
不一樣。解決方案是加一個全局的*{margin:0;padding:0;}
來統一,,可是全局效率很低,通常是以下這樣解決:body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{ margin:0; padding:0; }
IE
下,event
對象有x
,y
屬性,可是沒有pageX
,pageY
屬性Firefox
下,event
對象有pageX
,pageY
屬性,可是沒有x,y
屬性.依照 Promise/A+
的定義,Promise
有四種狀態:
pending:
初始狀態, 非 fulfilled
或 rejected.
fulfilled:
成功的操做.
rejected:
失敗的操做.
settled: Promise
已被fulfilled
或rejected
,且不是pending
另外, fulfilled
與 rejected
一塊兒合稱 settled
Promise
對象用來進行延遲(deferred
) 和異步(asynchronous
) 計算
Promise 的構造函數
Promise
,最基本的用法以下:var promise = new Promise(function(resolve, reject) { if (...) { // succeed resolve(result); } else { // fails reject(Error(errMessage)); } });
Promise
實例擁有 then
方法(具備 then
方法的對象,一般被稱爲thenable
)。它的使用方法以下:promise.then(onFulfilled, onRejected)
fulfilled
的時候被調用,一個在rejected
的時候被調用,接收參數就是 future
,onFulfilled
對應resolve
, onRejected
對應 reject
jquery
源碼封裝在一個匿名函數的自執行環境中,有助於防止變量的全局污染,而後經過傳入window
對象參數,能夠使window
對象做爲局部變量使用,好處是當jquery
中訪問window
對象的時候,就不用將做用域鏈退回到頂層做用域了,從而能夠更快的訪問window對象。一樣,傳入undefined
參數,能夠縮短查找undefined
時的做用域鏈jquery
將一些原型屬性和方法封裝在了jquery.prototype
中,爲了縮短名稱,又賦值給了jquery.fn
,這是很形象的寫法jQuery
將其保存爲局部變量以提升訪問速度jquery
實現的鏈式調用能夠節約代碼,所返回的都是同一個對象,能夠提升代碼效率Vue.js
一個用於建立 web
交互界面的庫,是一個精簡的 MVVM
。它經過雙向數據綁定把 View
層和 Model
層鏈接了起來。實際的 DOM
封裝和輸出格式都被抽象爲了Directives
和 Filters
AngularJS
是一個比較完善的前端MVVM
框架,包含模板,數據雙向綁定,路由,模塊化,服務,依賴注入等全部功能,模板功能強大豐富,自帶了豐富的 Angular
指令
react
React
僅僅是 VIEW
層是facebook
公司。推出的一個用於構建UI
的一個庫,可以實現服務器端的渲染。用了virtual dom
,因此性能很好。
特色:
Javascript
運行環境Chrome V8
引擎進行代碼解釋I/O
優勢:
缺點:
核CPU
,不能充分利用CPU
CommonJS
是服務器端模塊的規範,Node.js
採用了這個規範。CommonJS
規範加載模塊是同步的,也就是說,只有加載完成,才能執行後面的操做。AMD
規範則是非同步加載模塊,容許指定回調函數
AMD
推薦的風格經過返回一個對象作爲模塊對象,CommonJS
的風格經過對module.exports
或exports
的屬性賦值來達到暴露模塊對象的目的
setTimeout
的第一個參數使用字符串而非函數的話,會引起內存泄漏cookie
session
url
重寫input
ip
地址Undefined
、Null
、Boolean
、Number
、String
Object
是 JavaScript
中全部對象的父對象Object
、Array
、Boolean
、Number
和 String
Function
、Arguments
、Math
、Date
、RegExp
、Error
===/!==
來比較true/false
或者數值new Array
這種形式Switch
語句必須帶有default
分支If
語句必須使用大括號for-in
循環中的變量 應該使用var
關鍵字明確限定做用域,從而避免做用域污Undefined
,Null
,Boolean
,Numbe
r、String
)stack
)中的簡單數據段,佔據空間小、大小固定,屬於被頻繁使用數據,因此放入棧中存儲;heap
)中的對象,佔據空間大、大小不固定,若是存儲在棧中,將會影響程序運行的性能;引用數據類型在棧中存儲了指針,該指針指向堆中該實體的起始地址。當解釋器尋找引用值時,會首先檢索其
javascript
建立對象簡單的說,無非就是使用內置對象或各類自定義對象,固然還能夠用JSON
;但寫法有不少種,也能混合使用
person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};
function
來模擬無參的構造函數function Person(){} var person=new Person();//定義一個function,若是使用new"實例化",該function能夠看做是一個Class person.name="Mark"; person.age="25"; person.work=function(){ alert(person.name+" hello..."); } person.work();
function
來模擬參構造函數來實現(用this
關鍵字定義構造的上下文屬性)function Pet(name,age,hobby){ this.name=name;//this做用域:當前對象 this.age=age; this.hobby=hobby; this.eat=function(){ alert("我叫"+this.name+",我喜歡"+this.hobby+",是個程序員"); } } var maidou =new Pet("麥兜",25,"coding");//實例化、建立對象 maidou.eat();//調用eat方法
var wcDog =new Object(); wcDog.name="旺財"; wcDog.age=3; wcDog.work=function(){ alert("我是"+wcDog.name+",汪汪汪......"); } wcDog.work();
function Dog(){ } Dog.prototype.name="旺財"; Dog.prototype.eat=function(){ alert(this.name+"是個吃貨"); } var wangcai =new Dog(); wangcai.eat();
function Car(name,price){ this.name=name; this.price=price; } Car.prototype.sell=function(){ alert("我是"+this.name+",我如今賣"+this.price+"萬元"); } var camry =new Car("凱美瑞",27); camry.sell();
JS
代碼並運行eval
,不安全,很是耗性能(2
次,一次解析成js
語句,一次執行)JSON
字符串轉換爲JSON對象的時候能夠用eval,var obj =eval('('+ str +')')
undefined
表示不存在這個值。
undefined
:是一個表示"無"的原始值或者說表示"缺乏值",就是此處應該有一個值,可是尚未定義。當嘗試讀取時會返回 undefined
例如變量被聲明瞭,但沒有賦值時,就等於undefined
null
表示一個對象被定義了,值爲「空值」
null
: 是一個對象(空對象, 沒有任何屬性和方法)
例如做爲函數的參數,表示該函數的參數不是對象;
在驗證null
時,必定要使用 ===
,由於 ==
沒法分別null
和 undefined
[1, NaN, NaN]
由於 parseInt
須要兩個參數 (val, radix)
,其中radix
表示解析時用的基數。map
傳了 3
個(element, index, array)
,對應的 radix
不合法致使解析失敗。use strict
是一種ECMAscript 5
添加的(嚴格)運行模式,這種模式使得 Javascript 在更嚴格的條件下運行,使JS
編碼更加規範化的模式,消除Javascript
語法的一些不合理、不嚴謹之處,減小一些怪異行爲JSON(JavaScript Object Notation)
是一種輕量級的數據交換格式
它是基於JavaScript
的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小
JSON
字符串轉換爲JSON對象:
var obj =eval('('+ str +')'); var obj = str.parseJSON(); var obj = JSON.parse(str);
JSON
對象轉換爲JSON字符串:var last=obj.toJSONString(); var last=JSON.stringify(obj);
defer
和async
、動態建立DOM
方式(用得最多)、按需異步載入js
漸進加強 :針對低版本瀏覽器進行構建頁面,保證最基本的功能,而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 :一開始就構建完整的功能,而後再針對低版本瀏覽器進行兼容
defer
並行加載js
文件,會按照頁面上script
標籤的順序執行async
並行加載js
文件,下載完成當即執行,不會按照頁面上script
標籤的順序執行with
語句this
指向全局對象attribute
是dom
元素在文檔中做爲html
標籤擁有的屬性;property
就是dom
元素在js
中做爲對象擁有的屬性。html
的標準屬性來講,attribute
和property
是同步的,是會自動更新的JavaScript
提供了簡單的字符串插值功能)for-of
(用來遍歷數據—例如數組中的值。)arguments
對象可被不定參數和默認參數完美代替。ES6
將promise
對象歸入規範,提供了原生的Promise
對象。let
和const
命令,用來聲明變量。let
命令實際上就增長了塊級做用域。module
模塊的概念OOP
基礎的人更快上手js
,至少是一個官方的實現了js
的人來講,這個東西沒啥大影響;一個Object.creat()
搞定繼承,比class
簡潔清晰的多instanceof
方法
instanceof
運算符是用來測試一個對象是否在其原型鏈原型構造函數的屬性var arr = []; arr instanceof Array; // true
constructor
方法
constructor
屬性返回對建立此對象的數組函數的引用,就是返回對象相對應的構造函數var arr = []; arr.constructor == Array; //true
jQuery
正在使用的Object.prototype.toString.call(value) == '[object Array]' // 利用這個方法,能夠寫一個返回數據類型的方法 var isType = function (obj) { return Object.prototype.toString.call(obj).slice(8,-1); }
ES5
新增方法isArray()
var a = new Array(123); var b = new Date(); console.log(Array.isArray(a)); //true console.log(Array.isArray(b)); //false
let
命令不存在變量提高,若是在let
前使用,會致使報錯let
和const
命令,就會造成封閉做用域this的指向在函數定義的時候是肯定不了的,只有函數執行的時候才能肯定this到底指向誰,實際上this的最終指向的是那個調用它的對象
《javascript語言精髓》中大概歸納了4種調用方式:
方法調用模式
函數調用模式
構造器調用模式
graph LR A-->B
回調函數
事件監聽(採用時間驅動模式,取決於某個事件是否發生):
發佈/訂閱(觀察者模式)
Promise對象
Generator函數
async函數
RegExp
、JSON
、Ajax
、DOM
、BOM
、內存泄漏、跨域、異步裝載、模板引擎、前端MVC
、路由、模塊化、Canvas
、ECMAScript
CSS3
的動畫的優勢
CSS3
的動畫作一些優化JavaScript
的動畫正好彌補了這兩個缺點,控制能力很強,能夠單幀的控制、變換,同時寫得好徹底能夠兼容IE6
,而且功能強大。對於一些複雜控制的動畫,使用javascript
會比較靠譜。而在實現一些小的交互動效的時候,就多考慮考慮CSS
吧一般咱們會用循環的方式來遍歷數組。可是循環是 致使js 性能問題的緣由之一。通常咱們會採用下幾種方式來進行數組的遍歷
for in
循環
for
循環
forEach
forEach
回調中兩個參數分別爲 value
,index
forEach
沒法遍歷對象Firefox
和 chrome
支持forEach
沒法使用 break
,continue
跳出循環,且使用 return
是跳過本次循環這兩種方法應該很是常見且使用很頻繁。但實際上,這兩種方法都存在性能問題
在方式一中,for-in
須要分析出array
的每一個屬性,這個操做性能開銷很大。用在 key
已知的數組上是很是不划算的。因此儘可能不要用for-in
,除非你不清楚要處理哪些屬性,例如 JSON
對象這樣的狀況
在方式2中,循環每進行一次,就要檢查一下數組長度。讀取屬性(數組長度)要比讀局部變量慢,尤爲是當 array
裏存放的都是 DOM
元素,由於每次讀取都會掃描一遍頁面上的選擇器相關元素,速度會大大下降
gulp
是前端開發過程當中一種基於流的代碼構建工具,是自動化項目的構建利器;它不只能對網站資源進行優化,並且在開發過程當中不少重複的任務可以使用正確的工具自動完成Node.js
流的威力,你能夠快速構建項目並減小頻繁的 IO
操做API
,掌握 gulp
絕不費力,構建工做盡在掌握:如同一系列流管道vue.js
則是採用數據劫持結合發佈者-訂閱者模式的方式,經過Object.defineProperty()
來劫持各個屬性的setter
,getter
,在數據變更時發佈消息給訂閱者,觸發相應的監聽回調(function( window, undefined ) { //用一個函數域包起來,就是所謂的沙箱 //在這裏邊var定義的變量,屬於這個函數域內的局部變量,避免污染全局 //把當前沙箱須要的外部變量經過函數參數引入進來 //只要保證參數對內提供的接口的一致性,你還能夠隨意替換傳進來的這個參數 window.jQuery = window.$ = jQuery; })( window );
(function(window, undefined) {})(window);
jQuery
利用 JS
函數做用域的特性,採用當即調用表達式包裹了自身,解決命名空間和變量污染問題
window.jQuery = window.$ = jQuery;
在閉包當中將 jQuery 和 $ 綁定到 window 上,從而將 jQuery 和 $ 暴露爲全局變量
jQuery.fn
的 init
方法返回的 this
指的是什麼對象? 爲何要返回 this
?$.fn.extend()
和 $.extend()
是 jQuery
爲擴展插件提拱了兩個方法$.extend(object)
; // 爲jQuery添加「靜態方法」(工具方法)$.extend({
min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); $.min(2,3); // 2 $.max(4,5); // 5
var settings = {validate:false, limit:5}; var options = {validate:true, name:"bar"}; $.extend(settings, options); // 注意:不支持第一個參數傳 false // settings == {validate:true, limit:5, name:"bar"}
$.fn.extend(json)
; // 爲jQuery添加「成員函數」(實例方法)$.fn.extend({
alertValue: function() { $(this).click(function(){ alert($(this).val()); }); } }); $("#email").alertValue();
淺拷貝(只複製一份原始對象的引用)
var newObject = $.extend({}, oldObject);
深拷貝(對原始對象屬性所引用的對象進行進行遞歸拷貝)
var newObject = $.extend(true, {}, oldObject);
queue()/dequeue()/clearQueue()
三個方法組成。animate()
,ajax
,其餘要按時間順序執行的事件中var func1 = function(){alert('事件1');} var func2 = function(){alert('事件2');} var func3 = function(){alert('事件3');} var func4 = function(){alert('事件4');} // 入棧隊列事件 $('#box').queue("queue1", func1); // push func1 to queue1 $('#box').queue("queue1", func2); // push func2 to queue1 // 替換隊列事件 $('#box').queue("queue1", []); // delete queue1 with empty array $('#box').queue("queue1", [func3, func4]); // replace queue1 // 獲取隊列事件(返回一個函數數組) $('#box').queue("queue1"); // [func3(), func4()] // 出棧隊列事件並執行 $('#box').dequeue("queue1"); // return func3 and do func3 $('#box').dequeue("queue1"); // return func4 and do func4 // 清空整個隊列 $('#box').clearQueue("queue1"); // delete queue1 with clearQueue
bind
直接綁定在目標元素上live
經過冒泡傳播事件,默認document
上,支持動態數據delegate
更精確的小範圍使用事件代理,性能優於 liveon
是最新的1.9
版本整合了以前的三種方式的新事件綁定機制document.createEvent(type); // 建立事件 event.initEvent(eventType, canBubble, prevent); // 初始化事件 target.addEventListener('dataavailable', handler, false); // 監聽事件 target.dispatchEvent(e); // 觸發事件
Sizzle
選擇器採起 Right To Left
的匹配模式,先搜尋全部匹配標籤,再判斷它的父節點jQuery
經過 $(selecter).find(selecter);
和 Sizzle
選擇器結合// 經過原生 JSON.stringify/JSON.parse 擴展 jQuery 實現 $.array2json = function(array) { return JSON.stringify(array); } $.json2array = function(array) { // $.parseJSON(array); // 3.0 開始,已過期 return JSON.parse(array); } // 調用 var json = $.array2json(['a', 'b', 'c']); var array = $.json2array(json);
$("#btn").on("mouseover mouseout", func); $("#btn").on({ mouseover: func1, mouseout: func2, click: func3 });
DOM
對象id
選擇器代替class
選擇器#id
選擇器來繼承on
綁定事件jQuery
的內部函數data()
來存儲數據jQuery
JS
原生 setTimeout
方法$('.tab').stop().slideUp();
$.widget()
傳遞組件名稱和一個原型對象來完成$.widget("ns.widgetName", [baseWidget], widgetPrototype);
jQuery
是 JS
庫,兼容各類PC瀏覽器,主要用做更方便地處理 DOM
、事件、動畫、AJAX
jQuery UI
是創建在 jQuery
庫上的一組用戶界面交互、特效、小部件及主題
jQuery Mobile
以 jQuery
爲基礎,用於建立「移動Web應用」的框架
jQuery
主要目標是PC
的網頁中,兼容所有主流瀏覽器。在移動設備方面,單獨推出 `jQuery MobileZepto
從一開始就定位移動設備,相對更輕量級。它的
API 基本兼容
jQuery`,但對PC瀏覽器兼容不理想JQuery
對象才能使用 JQuery
方法JQuery
對象是一個數組對象// event(事件)工具集,來源:github.com/markyun markyun.Event = { // 視能力分別使用dom0||dom2||IE方式 來綁定事件 // 參數: 操做的元素,事件名稱 ,事件處理程序 addEvent : function(element, type, handler) { if (element.addEventListener) { //事件類型、須要執行的函數、是否捕捉 element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent('on' + type, function() { handler.call(element); }); } else { element['on' + type] = handler; } }, // 移除事件 removeEvent : function(element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.datachEvent) { element.detachEvent('on' + type, handler); } else { element['on' + type] = null; } }, // 阻止事件 (主要是事件冒泡,由於IE不支持事件捕獲) stopPropagation : function(ev) { if (ev.stopPropagation) { ev.stopPropagation(); } else { ev.cancelBubble = true; } }, // 取消事件的默認行爲 preventDefault : function(event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, // 獲取事件目標 getTarget : function(event) { return event.target || event.srcElement; }
function isArray(arg) { if (typeof arg === 'object') { return Object.prototype.toString.call(arg) === '[object Array]'; } return false; }
var arr = [3, 1, 4, 6, 5, 7, 2]; function bubbleSort(arr) { for (var i = 0; i < arr.length - 1; i++) { for(var j = 0; j < arr.length - 1; j++) { if(arr[j + 1] < arr[j]) { var temp; temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } return arr; } console.log(bubbleSort(arr));
var arr = [3, 1, 4, 6, 5, 7, 2]; function quickSort(arr) { if(arr.length == 0) { return []; // 返回空數組 } var cIndex = Math.floor(arr.length / 2); var c = arr.splice(cIndex, 1); var l = []; var r = []; for (var i = 0; i < arr.length; i++) { if(arr[i] < c) { l.push(arr[i]); } else { r.push(arr[i]); } } return quickSort(l).concat(c, quickSort(r)); } console.log(quickSort(arr));
function GetBytes(str){ var len = str.length; var bytes = len; for(var i=0; i<len; i++){ if (str.charCodeAt(i) > 255) bytes++; } return bytes; } alert(GetBytes("你好,as"));
bind
的做用與call
和apply
相同,區別是call
和apply
是當即調用函數,而bind
是返回了一個函數,須要調用的時候再執行。bind
函數實現以下Function.prototype.bind = function(ctx) { var fn = this; return function() { fn.apply(ctx, arguments); }; };
網站重構:在不改變外部行爲的前提下,簡化結構、添加可讀性,而在網站前端保持一致的行爲。也就是說是在不改變UI的狀況下,對網站進行優化, 在擴展的同時保持一致的UI
對於傳統的網站來講重構一般是:
表格(table
)佈局改成DIV+CSS
使網站前端兼容於現代瀏覽器(針對於不合規範的CSS
、如對IE6有效的)
對於移動平臺的優化
針對於SEO
進行優化
前端是最貼近用戶的程序員,比後端、數據庫、產品經理、運營、安全都近
前端是最貼近用戶的程序員,前端的能力就是能讓產品從 90分進化到 100 分,甚至更好,
與團隊成員,UI
設計,產品經理的溝通;
作好的頁面結構,頁面重構和用戶體驗;
爲簡化用戶使用提供技術支持(交互部分)
爲多個瀏覽器兼容性提供支持
爲提升用戶瀏覽速度(瀏覽器性能)提供支持
爲跨平臺或者其餘基於webkit或其餘渲染引擎的應用提供支持
爲展現數據提供支持(數據接口)
先期團隊必須肯定好全局樣式(globe.css
),編碼模式(utf-8
) 等;
編寫習慣必須一致(例如都是採用繼承式的寫法,單樣式都寫成一行);
標註樣式編寫人,各模塊都及時標註(標註關鍵樣式調用的地方);
頁面進行標註(例如 頁面 模塊 開始和結束);
CSS
跟HTML
分文件夾並行存放,命名都得統一(例如style.css
);
JS
分文件夾存放 命名以該JS
功能爲準的英文翻譯。
圖片採用整合的 images.png png8
格式文件使用 - 儘可能整合在一塊兒使用方便未來的管理
簡單類型:String
、Number
、Boolean
、Null
、Undefined
複雜類型:Object
ES6新增類型:Symbol
(感謝TimeTraveler指出)
&
擴展:
null
表示一個對象被定義了,值爲「空值」,而undefined
表示不存在這個值。typeof
判斷是,null
返回的是object
,而undefined
返回的是undefined
。(判斷二者時須要使用===
嚴格判斷)instanceof
運算符是用來測試一個對象是否在其原型鏈原型構造函數的屬性。 var arr = []; arr instanceof Array; // true
constructor
屬性返回對建立此對象的數組函數的引用,就是返回對象相對應的構造函數。 var arr = []; arr.constructor == Array; //true
length
和splice
方法,可是這是不靠譜的,由於對象也能添加方法和屬性。那怎麼辦了,有一個辦法,能夠利用數組的length屬性
無法枚舉來判斷。 function isArray(object){ return object && typeof object==='object' && typeof object.length==='number' && typeof object.splice==='function' && //判斷length屬性是不是可枚舉的 對於數組 將獲得false !(object.propertyIsEnumerable('length')); }
Object.prototype.toString.call(value) == '[object Array]' // 利用這個方法,能夠寫一個返回數據類型的方法 var isType = function (obj) { return Object.prototype.toString.call(obj).slice(8,-1); }
var a = new Array(123); var b = new Date(); console.log(Array.isArray(a)); //true console.log(Array.isArray(b)); //false
&instaceof
和construcor
,被判斷的array
必須是在當前頁面聲明的。好比,一個頁面(父頁面)有一個框架,框架中引用了一個頁面(子頁面),在子頁面中聲明瞭一個array
,並將其賦值給父頁面的一個變量,這時判斷該變量,Array == object.constructor;
會返回false
。null
和undefined
,有一些bug,判斷undefined
和null
均爲Object
,(並非bug
,是在ES3的標準下返回的就爲Object
)this
對象,就是定義時所在的對象,而不是使用時所在的對象。new
命令,不然會拋出一個錯誤。arguments
對象,該對象在函數體內不存在。若是要用,能夠用Rest參數
代替。yield
命令,所以箭頭函數不能用做Generator
函數。「閉包」,是指那些可以訪問獨立(自由)變量的函數 (變量在本地使用,但定義在一個封閉的做用域中)。換句話說,這些函數能夠「記憶」它被建立時候的環境。特性:
安全問題,如 XSS 和 CSRF
防範:記住一點 「全部用戶輸入都是不可信的」,因此得作輸入過濾和轉義
防範:用戶操做驗證(驗證碼),額外驗證機制(token使用)等
1.幾種基本數據類型?複雜數據類型?值類型和引用數據類型?堆棧數據結構?
基本數據類型:Undefined、Null、Boolean、Number、String
值類型:數值、布爾值、null、undefined。
引用類型:對象、數組、函數。
堆棧數據結構:是一種支持後進先出(LIFO)的集合,即後被插入的數據,先被取出!
js數組中提供瞭如下幾個方法可讓咱們很方便實現堆棧:
shift:從數組中把第一個元素刪除,並返回這個元素的值。
unshift: 在數組的開頭添加一個或更多元素,並返回新的長度
push:在數組的中末尾添加元素,並返回新的長度
pop:從數組中把最後一個元素刪除,並返回這個元素的值。
2.聲明函數做用提高?聲明變量和聲明函數的提高有什麼區別?
(1) 變量聲明提高:變量申明在進入執行上下文就完成了。
只要變量在代碼中進行了聲明,不管它在哪一個位置上進行聲明, js引擎都會將它的聲明放在範圍做用域的頂部;
(2) 函數聲明提高:執行代碼以前會先讀取函數聲明,意味着能夠把函數申明放在調用它的語句後面。
只要函數在代碼中進行了聲明,不管它在哪一個位置上進行聲明, js引擎都會將它的聲明放在範圍做用域的頂部;
(3) 變量or函數聲明:函數聲明會覆蓋變量聲明,但不會覆蓋變量賦值。
同一個名稱標識a,即有變量聲明var a,又有函數聲明function a() {},無論兩者聲明的順序,函數聲明會覆蓋變量聲明,也就是說,此時a的值是聲明的函數function a() {}。注意:若是在變量聲明的同時初始化a,或是以後對a進行賦值,此時a的值變量的值。eg: var a; var c = 1; a = 1; function a() { return true; } console.log(a);
3.判斷數據類型?
typeof返回的類型都是字符串形式,能夠判斷function的類型;在判斷除Object類型的對象時比較方便。
判斷已知對象類型的方法: instanceof,後面必定要是對象類型,而且大小寫不能錯,該方法適合一些條件選擇或分支。
4.異步編程?
方法1:回調函數,優勢是簡單、容易理解和部署,缺點是不利於代碼的閱讀和維護,各個部分之間高度耦合(Coupling),流程會很混亂,並且每一個任務只能指定一個回調函數。
方法2:時間監聽,能夠綁定多個事件,每一個事件能夠指定多個回調函數,並且能夠「去耦合」(Decoupling),有利於實現模塊化。缺點是整個程序都要變成事件驅動型,運行流程會變得很不清晰。
方法3:發佈/訂閱,性質與「事件監聽」相似,可是明顯優於後者。
方法4:Promises對象,是CommonJS工做組提出的一種規範,目的是爲異步編程提供統一接口。
簡單說,它的思想是,每個異步任務返回一個Promise對象,該對象有一個then方法,容許指定回調函數。
5.事件流?事件捕獲?事件冒泡?
事件流:從頁面中接收事件的順序。也就是說當一個事件產生時,這個事件的傳播過程,就是事件流。
IE中的事件流叫事件冒泡;事件冒泡:事件開始時由最具體的元素接收,而後逐級向上傳播到較爲不具體的節點(文檔)。對於html來講,就是當一個元素產生了一個事件,它會把這個事件傳遞給它的父元素,父元素接收到了以後,還要繼續傳遞給它的上一級元素,就這樣一直傳播到document對象(親測如今的瀏覽器到window對象,只有IE8及下不這樣
事件捕獲是不太具體的元素應該更早接受到事件,而最具體的節點應該最後接收到事件。他們的用意是在事件到達目標以前就捕獲它;也就是跟冒泡的過程正好相反,以html的click事件爲例,document對象(DOM級規範要求從document開始傳播,可是如今的瀏覽器是從window對象開始的)最早接收到click事件的而後事件沿着DOM樹依次向下傳播,一直傳播到事件的實際目標;
6.如何清除一個定時器?
window.clearInterval();
window.clearTimeout();
7.如何添加一個dom對象到body中?innerHTML和innerText區別?
body.appendChild(dom元素);
innerHTML:從對象的起始位置到終止位置的所有內容,包括Html標籤。
innerText:從起始位置到終止位置的內容, 但它去除Html標籤
分別簡述五個window對象、屬性
成員對象
window.event window.document window.history
window.screen window.navigator window.external
Window對象的屬性以下:
window //窗戶自身
window.self //引用本窗戶window=window.self
window.name //爲窗戶命名
window.defaultStatus //設定窗戶狀態欄信息
window.location //URL地址,配備佈置這個屬性能夠打開新的頁面
8.數據持久化技術(ajax)?簡述ajax流程
1)客戶端產生js的事件
2)建立XMLHttpRequest對象
3)對XMLHttpRequest進行配置
4)經過AJAX引擎發送異步請求
5)服務器端接收請求而且處理請求,返回html或者xml內容
6)XML調用一個callback()處理響應回來的內容
7)頁面局部刷新
9.回調函數?
回調函數就是一個經過函數指針調用的函數。若是你把函數的指針(地址)做爲參數傳遞給另外一個函數,當這個指針被用來調用其所指向的函數時,咱們就說這是回調函數。回調函數不是由該函數的實現方直接調用,而是在特定的事件或條件發生時由另外的一方調用的,用於對該事件或條件進行響應。
10.什麼是閉包?* 堆棧溢出有什麼區別? 內存泄漏? 那些操做會形成內存泄漏?怎麼樣防止內存泄漏?
閉包:就是可以讀取其餘函數內部變量的函數。
堆棧溢出:就是不顧堆棧中分配的局部數據塊大小,向該數據塊寫入了過多的數據,致使數據越界,結果覆蓋了別的數據。常常會在遞歸中發生。
內存泄露是指:用動態存儲分配函數內存空間,在使用完畢後未釋放,致使一直佔據該內存單元。直到程序結束。指任何對象在您再也不擁有或須要它以後仍然存在。
形成內存泄漏:
setTimeout 的第一個參數使用字符串而非函數的話,會引起內存泄漏。
閉包、控制檯日誌、循環(在兩個對象彼此引用且彼此保留時,就會產生一個循環)
防止內存泄露:
一、不要動態綁定事件;
二、不要在動態添加,或者會被動態移除的dom上綁事件,用事件冒泡在父容器監聽事件;
三、若是要違反上面的原則,必須提供destroy方法,保證移除dom後事件也被移除,這點能夠參考Backbone的源代碼,作的比較好;
四、單例化,少建立dom,少綁事件。
11.平時工做中怎麼樣進行數據交互?若是後臺沒有提供數據怎麼樣進行開發?mock數據與後臺返回的格式不一樣意怎麼辦?
由後臺編寫接口文檔、提供數據接口實、前臺經過ajax訪問實現數據交互;
在沒有數據的狀況下尋找後臺提供靜態數據或者本身定義mock數據;
返回數據不統一時編寫映射文件 對數據進行映射。
12 簡述ajax執行流程
基本步驟: var xhr =null;//建立對象 if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.open(「方式」,」地址」,」標誌位」);//初始化請求 xhr.setRequestHeader(「」,」」);//設置http頭信息 xhr.onreadystatechange =function(){}//指定回調函數 xhr.send();//發送請求
13.自執行函數?用於什麼場景?好處?
自執行函數:一、聲明一個匿名函數二、立刻調用這個匿名函數。
做用:建立一個獨立的做用域。
好處:防止變量彌散到全局,以避免各類js庫衝突。隔離做用域避免污染,或者截斷做用域鏈,避免閉包形成引用變量沒法釋放。利用當即執行特性,返回須要的業務函數或對象,避免每次經過條件判斷來處理
場景:通常用於框架、插件等場景
14.html和xhtml有什麼區別?
HTML是一種基本的WEB網頁設計語言,XHTML是一個基於XML的標記語言。
1.XHTML 元素必須被正確地嵌套。
2.XHTML 元素必須被關閉。
3.標籤名必須用小寫字母。
4.空標籤也必須被關閉。
5.XHTML 文檔必須擁有根元素。
15. 什麼是構造函數?與普通函數有什麼區別?
構造函數:是一種特殊的方法、主要用來建立對象時初始化對象,總與new運算符一塊兒使用,建立對象的語句中構造函數的函數名必須與類名徹底相同。
與普通函數相比只能由new關鍵字調用,構造函數是類的標示
16. 經過new建立一個對象的時候,函數內部有哪些改變
function Person(){} Person.prototype.friend = []; Person.prototype.name = ''; // var a = new Person(); // a.friend[0] = '王琦'; // a.name = '程嬌'; // var b = new Person(); // b.friend? // b.name?
一、建立一個空對象,而且 this 變量引用該對象,同時還繼承了該函數的原型。
二、屬性和方法被加入到 this 引用的對象中。
三、新建立的對象由 this 所引用,而且最後隱式的返回 this 。
17.事件委託?有什麼好處?
(1)利用冒泡的原理,把事件加到父級上,觸發執行效果
(2)好處:新添加的元素還會有以前的事件;提升性能。
18.window.onload ==? DOMContentLoaded ?
通常狀況下,DOMContentLoaded事件要在window.onload以前執行,當DOM樹構建完成的時候就會執行DOMContentLoaded事件,而window.onload是在頁面載入完成的時候,才執行,這其中包括圖片等元素。大多數時候咱們只是想在DOM樹構建完成後,綁定事件到元素,咱們並不須要圖片元素,加上有時候加載外域圖片的速度很是緩慢。
19.節點類型?判斷當前節點類型?
1. 元素節點
2. 屬性節點
3. 文本節點
8. 註釋節點
9. 文檔節點
經過nodeObject.nodeType判斷節點類型:其中,nodeObject 爲DOM節點(節點對象)。該屬性返回以數字表示的節點類型,例如,元素節點返回 1,屬性節點返回 2 。
20.如何合併兩個數組?數組刪除一個元素?
//三種方法。 (1)var arr1=[1,2,3]; var arr2=[4,5,6]; arr1 = arr1.concat(arr2); console.log(arr1); (2)var arr1=[1,2,3]; var arr2=[4,5,6]; Array.prototype.push.apply(arr1,arr2); console.log(arr1); (3)var arr1=[1,2,3]; var arr2=[4,5,6]; for (var i=0; i < arr2.length; i++) { arr1.push( arr2[i] ); } console.log(arr1);
21.強制轉換 顯式轉換 隱式轉換?
//強制類型轉換: Boolean(0) // => false - 零 Boolean(new object()) // => true - 對象 Number(undefined) // => NaN Number(null) // => 0 String(null) // => "null" parseInt( ) parseFloat( ) JSON.parse( ) JSON.stringify ( )
隱式類型轉換:
在使用算術運算符時,運算符兩邊的數據類型能夠是任意的,好比,一個字符串能夠和數字相加。之因此不一樣的數據類型之間能夠作運算,是由於JavaScript引擎在運算以前會悄悄的把他們進行了隱式類型轉換的
(例如:x+"" //等價於String(x)
+x //等價於Number(x)
x-0 //同上
!!x //等價於Boolean(x),是雙歎號)
顯式轉換:
若是程序要求必定要將某一類型的數據轉換爲另外一種類型,則能夠利用強制類型轉換運算符進行轉換,這種強制轉換過程稱爲顯示轉換。
顯示轉換是你定義讓這個值類型轉換成你要用的值類型,是底到高的轉換。例 int 到float就能夠直接轉,int i=5,想把他轉換成char類型,就用顯式轉換(char)i
22. Jq中如何實現多庫並存?
Noconfict 多庫共存就是「$ 」符號的衝突。
方法一: 利用jQuery的實用函數$.noConflict();這個函數歸還$的名稱控制權給另外一個庫,所以能夠在頁面上使用其餘庫。這時,咱們能夠用"jQuery "這個名稱調用jQuery的功能。 $.noConflict();
jQuery('#id').hide();
.....
//或者給jQuery一個別名
var $j=jQuery
$j('#id').hide();
.....
方法二: (function($){})(jQuery)
方法三: jQuery(function($){})
經過傳遞一個函數做爲jQuery的參數,所以把這個函數聲明爲就緒函數。 咱們聲明$爲就緒函數的參數,由於jQuery老是吧jQuery對象的引用做爲第一個參數傳遞,因此就保證了函數的執行。
23.Jq中get和eq有什麼區別?
get() :取得其中一個匹配的元素。num表示取得第幾個匹配的元素,get多針對集合元素,返回的是DOM對象組成的數組 eq():獲取第N個元素,下標都是從0開始,返回的是一個JQuery對象
24.如何經過原生js 判斷一個元素當前是顯示仍是隱藏狀態?
if( document.getElementById("div").css("display")==='none') if( document.getElementById("div").css("display")==='block') $("#div").is(":hidden"); // 判斷是否隱藏 $("#div").is(":visible")
25.Jq如何判斷元素顯示隱藏?
//第一種:使用CSS屬性 var display =$('#id').css('display'); if(display == 'none'){ alert("我是隱藏的!"); } //第二種:使用jquery內置選擇器 <div id="test"> <p>僅僅是測試所用</p> </div> if($("#test").is(":hidden")){ $("#test").show(); //若是元素爲隱藏,則將它顯現 }else{ $("#test").hide(); //若是元素爲顯現,則將其隱藏 } //第三種:jQuery判斷元素是否顯示 是否隱藏 var node=$('#id'); if(node.is(':hidden')){ //若是node是隱藏的則顯示node元素,不然隱藏 node.show(); }else{ node.hide(); }
26.移動端上什麼是點擊穿透?
點擊穿透現象有3種:
點擊穿透問題:點擊蒙層(mask)上的關閉按鈕,蒙層消失後發現觸發了按鈕下面元素的click事件跨頁面點擊穿透問題:若是按鈕下面剛好是一個有href屬性的a標籤,那麼頁面就會發生跳轉另外一種跨頁面點擊穿透問題:此次沒有mask了,直接點擊頁內按鈕跳轉至新頁,而後發現新頁面中對應位置元素的click事件被觸發了
解決方案:
一、只用touch
最簡單的解決方案,完美解決點擊穿透問題
把頁面內全部click所有換成touch事件( touchstart 、’touchend’、’tap’)
二、只用click
下下策,由於會帶來300ms延遲,頁面內任何一個自定義交互都將增長300毫秒延遲
三、tap後延遲350ms再隱藏mask
改動最小,缺點是隱藏mask變慢了,350ms仍是能感受到慢的
四、pointer-events
比較麻煩且有缺陷, 不建議使用mask隱藏後,給按鈕下面元素添上 pointer-events: none; 樣式,讓click穿過去,350ms後去掉這個樣式,恢復響應缺陷是mask消失後的的350ms內,用戶能夠看到按鈕下面的元素點着沒反應,若是用戶手速很快的話必定會發現
27.Jq綁定事件的幾種方式?on bind ?
jQuery中提供了四種事件監聽方式,分別是bind、live、delegate、on,對應的解除監聽的函數分別是unbind、die、undelegate、off
Bind( )是使用頻率較高的一種,做用就是在選擇到的元素上綁定特定事件類型的監聽函數;
Live( )能夠對後生成的元素也能夠綁定相應的事件,處理機制就是把事件綁定在DOM樹的根節點上,而不是直接綁定在某個元素上;
Delegate( )採用了事件委託的概念,不是直接爲子元素綁定事件,而是爲其父元素(或祖先元素也可)綁定事件,當在div內任意元素上點擊時,事件會一層層從event target向上冒泡,直至到達你爲其綁定事件的元素;
on( )方法能夠綁定動態添加到頁面元素的事件,on()方法綁定事件能夠提高效率;
28.Jq中如何將一個jq對象轉化爲dom對象?
方法一:
jQuery對象是一個數據對象,能夠經過[index]的方法,來獲得相應的DOM對象。
如:var $v =$("#v") ; //jQuery對象
var v=$v[0]; //DOM對象
alert(v.checked) //檢測這個checkbox是否被選中
方法二:
jQuery自己提供,經過.get(index)方法,獲得相應的DOM對象
如:var $v=$("#v"); //jQuery對象
var v=$v.get(0); //DOM對象
alert(v.checked) //檢測這個checkbox是否被選中
29.Jq中有幾種選擇器?分別是什麼?
層疊選擇器、基本過濾選擇器、內容過濾選擇器、可視化過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單元素選擇器、表單元素過濾選擇器
30.Jq中怎麼樣編寫插件?
//第一種是類級別的插件開發: //1.1 添加一個新的全局函數 添加一個全局函數,咱們只需以下定義: jQuery.foo = function() { alert('This is a test. This is only a test.'); }; //1.2 增長多個全局函數 添加多個全局函數,可採用以下定義: jQuery.foo = function() { alert('This is a test. This is only a test.'); }; jQuery.bar = function(param) { alert('This function takes a parameter, which is "' + param + '".'); }; 調用時和一個函數的同樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar'); //1.3 使用jQuery.extend(object); jQuery.extend({ foo: function() { alert('This is a test. This is only a test.'); }, bar: function(param) { alert('This function takes a parameter, which is "' + param +'".'); } }); //1.4 使用命名空間 // 雖然在jQuery命名空間中,咱們禁止使用了大量的javaScript函數名和變量名。 // 可是仍然不可避免某些函數或變量名將於其餘jQuery插件衝突,所以咱們習慣將一些方法 // 封裝到另外一個自定義的命名空間。 jQuery.myPlugin = { foo:function() { alert('This is a test. This is only a test.'); }, bar:function(param) { alert('This function takes a parameter, which is "' + param + '".'); } }; //採用命名空間的函數仍然是全局函數,調用時採用的方法: $.myPlugin.foo(); $.myPlugin.bar('baz'); //經過這個技巧(使用獨立的插件名),咱們能夠避免命名空間內函數的衝突。 //第二種是對象級別的插件開發 //形式1: (function($){ $.fn.extend({ pluginName:function(opt,callback){ // Our plugin implementation code goes here. } }) })(jQuery); //形式2: (function($) { $.fn.pluginName = function() { // Our plugin implementation code goes here. }; })(jQuery); //形參是$,函數定義完成以後,把jQuery這個實參傳遞進去.當即調用執行。 //這樣的好處是,咱們在寫jQuery插件時,也能夠使用$這個別名,而不會與prototype引發衝突
31.$('div+.ab')和$('.ab+div') 哪一個效率高?
$('div+.ab')效率高
32.$.map和$.each有什麼區別
map()方法主要用來遍歷操做數組和對象,會返回一個新的數組。$.map()方法適用於將數組或對象每一個項目新陣列映射到一個新數組的函數;
each()主要用於遍歷jquery對象,返回的是原來的數組,並不會新建立一個數組。
33.編寫一個 getElementsByClassName 封裝函數?
<body> <input type="submit" id = "sub" class="ss confirm btn" value="提交"/> <script> window.onload = function(){ //方法一 var Opt = document.getElementById('sub'); var getClass = function(className,tagName){ if(document.getElementsByTagName){ var Inp = document.getElementsByTagName(tagName); for(var i=0; i<Inp.length; i++){ if((new RegExp('(\\s|^)' +className +'(\\s|$)')).test(Inp[i].className)){ return Inp[i]; } } }else if(document.getElementsByClassName){ return document.getElementsByClassName(className); } } //方法二 var aa = getClass("confirm", "input"); function getClass(className, targetName){ var ele = []; var all = document.getElementsByTagName(targetName || "*"); for(var i=0; i<all.length; i++){ if(all[i].className.match(new RegExp('(\\s|^)'+confirm+'(\\s|$)'))){ ele[ele.length] = all[i]; } } return ele; } //方法三 function getObjsByClass(tagName, className){ if(document.getElementsByClassName){ alert("document.getElementsByClassName"); return document.getElementsByClassName(className); }else{ var el = []; var _el = document.getElementsByTagName(tagName);