總結一些基礎知識希望對前來的小伙伴有幫助
一
1. jQuery的載入事件和JS有什么區別?
答:window.onload是在網頁中所有的元素(包括相關聯的檔案)完全加載到瀏覽器后才觸發;
$(document).ready()是在頁面的DOM結構加載完畢就觸發,
并不是等著網頁中所有的元素(包括相關聯的檔案)完全加載到瀏覽器后才觸發,
2. 系結事件有哪些方法?解除系結有哪些方法?
答:事件系結有:bind方法,但同時我們也可以通過代碼簡化來取消輸入bind方法,
同樣可以達到系結事件的需求;例如我們需要系結一個onclick事件,
就需要使用$("#id").bind("click",function())這樣書寫,
但是經過簡化之后就可以使用$("#id").click(function())這樣簡化過后的方法來數學系結事件,
系結事件還有:live和on,其中live的作用類似于追加,作用特征為hover事件中,hover系結完事件后,
再次使用bind方法系結時新系結的元素不會擁有hover事件的特性,
但是如果使用live方法系結,則可以使得新追加的元素擁有與hover事件共享的效果;
on可以取代live和bind方法,on是為以上兩種方法的升級版本;代碼結構為:$(".class").on("要系結的事件")
解除系結則有:unbind方法, 還有die和off,
代碼如下:$("#id").unbind("輸入需要去除的系結的元素,例如 ’mouseover‘ ");
以下圖中使用紅色邊框圈中的部分是可以進行代碼簡化的事件系結的方法,
3. 常見的滑鼠事件有哪些?
答:mousedown( [ [data] , fn ] ) 按下滑鼠按鈕時發生的事件
mousemove( [ [data] , fn ] ) 滑鼠移動時發生的事件
mouseout( [ [data] , fn ] ) 滑鼠移開時發生的事件
mouseover( [ [data] , fn ] ) 滑鼠懸浮在元素上時發生的事件
mouseup( [ [data] , fn ] ) 滑鼠點擊后松開時發生的事件
4. hover事件和toggle事件分別有什么作用?
答:hover事件:hover事件是mouseover和mouseout兩個函式的合體,其代碼格式為:
jQuery物件.hover(function(){},function(){});其中第一個function作用與mouseover函式作用相同,
第二個function與mouseout作用相同,
toggle事件:toggle事件是一種function多次回圈的事件型別,但是與回圈不同的是,
在最后一次觸發點擊之后的第一次點擊會使得整個toggle事件回到第一次點擊時的樣子
,也就是說toggle事件是一個環形事件,在回圈走完一圈之后再次回到起點重新開始,
其代碼結構如下:jQuery物件.hover(function(){},function(){});
5. 標準DOM中事件的傳播機制是怎樣的?
答:在回答事件傳播機制之前,我們首先要了解什么是 事件流 ,DOM事件流存在三個階段:事件捕獲階段、處于目標階段、事件冒泡階段,
那么在標準的二級COM中規定了事件的處理模型:先捕獲再冒泡,
二
一、工廠函式有什么作用?
答:為了使用$()選擇器從而得到一組jQuery物件,
二、jQuery有哪些選擇器?
答:(1) 層次選擇器:
層次選擇器是通過DOM物件之間的層次關系獲取并匹配元素,例如后代元素、子元素、相鄰元素等,如一下四個:
$("ancestor descendant") 匹配并獲取ancestor元素里的所有后代descendant元素;
$("parent>child") 匹配并獲取parent元素里的子元素;
$("prev+next") 匹配并獲取緊挨著prev元素后的next元素;
$("prev~[A1] siblings") 匹配并獲取prev 元素后的所有siblings元素
(2)屬性選擇器:
顧名思義,屬性選擇器是指通過元素某個屬性及其值來匹配并獲取相關元素的,如以下七個:
$("selector[attr]") 獲取匹配selector選擇器的并且擁有attr 屬性的元素
$("selector[attr='val]") 獲取匹配selector選擇器的并且attr屬性的值是val的元素
$("selector[attr !='val ']”) 獲取匹配selector選擇器的并且attr屬性的值不是val的元素
$("selectorlattr ^=' val ']") 獲取匹配selector選擇器的并且attr屬性的值是以val開始的元素
$("selector[attr $=' val']") 獲取匹配selector選擇器的并且attr屬性的值是以val結尾的元素
$("selector[attr *=' val']")獲取匹配 selector選擇器的并且attr屬性的值包含val 的元素
$("selector[][][...") 屬性選擇器組合
(3)表單選擇器
表單在Whb前端開發中使用非常頻繁,jQuery專門計入了表單選擇器,這給開發人員操縱表單帶來了極大的便利:
:input 匹配并獲得表單中所有input,textarea,select和button元素
:text 匹配并獲得所有的文本框
:password 匹配并獲得所有密碼框
:radio 匹配并獲得所有單選按鈕
:checkbox 匹配并獲得所有復選框
:submit 匹配并獲得所有提交按鈕
:image 匹配并獲得所有圖片
:reset 匹配并獲得所有重置按鈕
:button 匹配并獲得所有按鈕
:file 匹配并獲得所有檔案域
:hidden 匹配并獲得所有隱藏域
(4)表單屬性選擇器
表單屬性選擇器試試表單選擇器的有力補充:
:enabled 匹配并獲得所有正常使用的元素
:disabled 匹配并獲得所有禁用的元素
:checked 匹配并獲取所有被選中的復選框
:selected 匹配并獲得下拉串列框的選中項
(5)內容選擇器
內容選擇器主要使用通過元素所包涵的文本或子元素進行匹配或獲取,如下所示
:contains(txt) 匹配并獲得包含有txt文本的元素
:empty 匹配并獲得沒有子元素或者文本的元素
:has(selector)匹配并獲得包含有selector選擇器的元素
(6)過濾選擇器
過濾選擇器是在獲取到元素后通過索引進一步進行過濾或篩選(篩選后得到的仍然是jQuery物件而非dom物件)如下所示:
:first 獲取匹配到的第一個元素
:last 獲取匹配到的最后一個元素
:not(selector)獲取除了匹配的元素之外的元素
:even 匹配所有索引值為偶數的元素,從0開始計數
:odd 匹配所有索引值為奇數的元素,從0開始計數
:eq(index)匹配一個給定索引值的元素,從0開始計數
:gt(index) 匹配所有大于給定索引值的元素,從0開始計數
:it(index) 匹配所有小于給定索引值的元素,從0開始計數
(7)可見性選擇器
可見性選擇器比較簡單,主要是通過顯示/隱藏狀態來獲取和匹配元素的,如下表所示:
:hidden 匹配所有的隱藏元素
:visible 匹配所有的可見元素
三丶jQuery中如何實作字符的轉義操作?
答:在jQuery中,特殊字符是無法通過選擇器直接選擇的,所以需要在$(“#t// #”) 特殊字符前添加 // 兩個左斜桿來實作特殊字符的轉義
四丶jQuery中常見的操作DOM節點的方法有哪些?
答:查找節點、創建節點、插入節點、洗掉節點、復制節點、替換節點、包裹節點、屬性操作、樣式操作、設定和獲取HTML,文本以及值、遍歷節點、CSS-DOM操作,
function
節點操作中的append和appendTo的用法:
append()方法可以將制定的內容插入到制定的元素的末尾,其代碼結構為:$.("xxx").append("需要加入的內容");
要注意的是,在$之后的()中,選取指定的元素時,“.”代表選擇的是class元素,而“#”代表的是選擇id元素,
$(document).ready(function(){
--這一段代碼是為了防止檔案沒有加載完成時就加載jQuery--
--建議每次書寫都加上這一段代碼之后再進行--
})
三
1. jquery中常見的影片函式有哪些?
1. 無引數:沒有影片特效
2. slow:慢速(在600ms內)
3 . normal:正常速度(在400毫秒內)
4 . fast:快速(在200毫秒內)
5自定義數字:開發人員可以自己設定一個數字表 示速度 ,單位是毫秒,
** show([speed,[easing] , [fn] ] ):
影片函式的速度特征: easing:
1 . linear:表示值為線性變化(可能比較勻速)
2 . swing:表示值為振蕩變化(可能先慢后快)
一:show() 顯示影片特效
二 :hide() 隱藏影片特效
2.如何通過jquery實作廣告的輪播特效?
答:獲取滑鼠的移動 然后顯示不同的幻燈片 接著呼叫滑入停止影片,劃出執行影片;運用hover和計時器,
1. 通過呼叫滑動影片的函式向上( slideDown() [高度增加]),或者向下( sildeUp() [高度減少]),以及向上下滑動切換特效( sildeToggle() );
總結:
一:自定義函式影片
animate( params,[speed],[easing],[fn] )
1 . 引數params:此影片要變更到的CSS屬性目標值,(從當前 值開始向目標值"邁進")
2 .引數 speed:速度
3 .引數 easing:值得變化方式,有兩個取值" linear( 線性變化)" 和" swing( 振動變化)",一般忽略此值,
4. 引數 fn : 回呼函式
二:停止函式影片
stop( [clearQueue],[jumpToEnd])
1. clearQueue : 如果設定為true,則清空對列,可以立刻結束影片 ,
2. gotoEnd:讓當前正在執行的影片立刻完成,并且重設show和hide的原始樣式,呼叫回呼函式等,
三
1. 什 么 是 AJAX ?
答:ajax=Asynchronous JavaScript and XML( 異步的javaScript和XML),是一種使用現有的標準的新方法,
ajax能實作在不重新加載整個頁面的情況下,實作與服務器交換資料并更新部分網頁,從而得到更好的互動效果,
2.Ajax的核心物件是什么?如何創建它 ?
答: XMLHttpRequest
var test= new XMLHttpRequest();
考慮到兼容性創建完整語法如下:
var xmlhttp;
if (window. XMLHttpRequest ){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp = new Activeobject( "microsoft.xmlHTTP " )
}
3. Ajax異步請求的步驟是什么?
答:
1. 創建XMLHttpRequest
2.鏈接服務器、
get和post的區別:
(1)那個get請求時,引數在url中顯示,而使用post方式,則不會顯示出來,
(2)使用get請求發送資料量小,post請求發送資料量大
(3)get請求需注意快取問題,post請求不需要擔心這個問題,
與 POST 相比,GET 更簡單也更快,并且在大部分情況下都能用,
然而,在以下情況中,請使用 POST 請求:
1.無法使用快取檔案(更新服務器上的檔案或資料庫)
2.向服務器發送大量資料(POST 沒有資料量限制)
3.發送包含未知字符的用戶輸入時,POST 比 GET 更穩定也更可靠
3.向服務器發送請求
實體: xmlHttp.send();
open(method,url,async)
規定請求的型別,URl以及是否異步處理請求,
method:請求的型別,GET或POST
url:檔案在服務器上的位置
anync:ture(異步)或false(同步)
4. 接受服務器的回傳值
XMLHttpRequest取得相應
- responseText:獲得字串形式的回應資料
- responseXML:獲得xml形式的回應資料
- status和statusText:以數字和文本形勢回傳http轉態碼
- getAllResponseHeader():獲得所有的相應
- getResponseHeader():查詢相應中的某個欄位的值
- readState屬性
readystate的五種回傳值所代表的意義:
- 0(未初始化) 還沒呼叫open()方法
- 1(載入)已經呼叫send方法(),正在發送請求
- 2(載入完成)send()方法已經完成,已收到相應
- 3(決議)正在決議回應內容
- 4(完成)相應內容決議完成,可在客戶端呼叫,
ajax中status幾種常態說明:
- 100——客戶必須繼續發出請求
- 101——客戶要求服務器根據請求轉換HTTP協議版本
- 200——成功
- 201——提示知道新檔案的URL
- 300——請求的資源可在多處得到
- 301——洗掉請求資料
- 404——沒有發現檔案、查詢或URl
- 500——服務器產生內部錯
4. jquery提供了那些函式來實作Ajax?
ajax方法:通過$打點呼叫,它把 請求 和 回應 的步驟都封裝在一起,在內部完成了回呼,
load方法:load是加載的意思,通過打點來呼叫load,方便我們從服務器端獲取資料加載到此物件中,
get方法:通過$打點呼叫,以get的方式,來獲取服務端回傳的資料,并可以自己指定回傳資料要自動轉換成的格式,
getJson方法:通過$打點呼叫,以get的方式,來獲取服務端回傳的資料,并自動將回傳的資料轉換成json格式,
post方法:通過$打點呼叫,以post的方式,來獲取服務端回傳的資料,并可以自己指定回傳資料要自動轉換成的格式,
一:實體:
請求 描述
$( selector).load( url, data, callback) 把遠程資料加載
到被選的元素中
$.ajax(options) 把遠程資料
加載到XMLHttpRequest物件中
$.get( url,data,callback,type) 使用http get來加載遠程資料
$.post(url,data,callback,type) 使用
http post來加載遠程資料
$.getJson(url,data,callback,type) 使用http
get來加載遠程Json資料
$.getscript(url,callback) 加載
并執行遠程的javas檔案
(url) 被加載的資料的 URL(地址)
(data) 發送到服務器的資料的鍵/值物件
(callback) 當資料被加載時,所執行的函式
(type) 被回傳的資料的型別 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 請求的所有鍵/值對選項
總結:
1. js中xmlhttpRequerst用于在后臺與服務器交換資料
2. HTTP請求一般由四個部分組成:
A 請求方式:例get post
B 請求url
C 請求頭:包含客戶端的資訊和身份驗證資訊等
D 請求體:也就是請求正文,包含表單資訊等
3. HTTP回應一般由三個部分組成:
A 狀態碼:有數字和文字組成
B 回應頭:包含服務器資訊,如服務器時間等
C 回應體:及回應正文;
4.HTTP狀態碼由三位數字構成,首位數字靜定梁狀態碼的型別:
A 1xx:資訊類,表示收到的瀏覽器請求
B 2xx:成功 表示用戶請求被正確接收
C 3xx:重定性,表示請求沒有成功,用戶需要采取進 一步動作
D 4xx:客戶端錯誤,表示用戶提交的請求有錯誤,如404
E 5xx:服務器錯誤,表示服務器不能完成對請求的處理;
5. jquery中可以使用load,get,post,getjson,ajax,來簡化ajax請求,
6.在ajax請求資料是,服務器經常回傳單個物件、陣列、字典、xml等格式的資料,要學會處理使用
五
1. 實作layer中的控制元件需要參考那些js檔案?
答:需要引入layer.js就行了
2 . 關于layer課程中提供了5中彈性型別,分別是什么?
答: 1.laert彈出框:layer.alert('你好',{icon:6})
2.msg訊息框 : layer.msg('hello') //time :設定訊息框的提示時間
btn:設定按鈕 yes:確定按鈕回掉方法(yes對
應第一個按鈕)
3. confirm 對話框 :layer.confirm('你怎樣')btn:['好',‘不’]
4 . layer.open彈出面板 可設定頁面{
type:2 (1)//1值時可以在彈出層中,顯示指定的html內容或頁面中隱藏的部分:為2時在彈出層內置一個iframe來顯示一個其他的網頁,
title:可看頁面的最大化
shadeclose:true 是否點擊遮罩關閉
end:functions(){
//彈框銷毀時執行
}}
5 .layer.open({
type:1
content:"任意傳入的文本或html content是一個普通的String物件"
})
3. layui中常用的控制元件有哪些?
1 分頁條
2 富文本編輯器3
3 導航
4 日期時間
總結:
1:layer彈出層有alert、confirm、msg、tips、load、open、photos、tab等多種方法,可以顯示不同的形式和效果
layer的open方法的type值決定了其顯示的形式和效果:資訊框type=0(默認)、頁面層type=1、iframe層type=2、加載層type=3、tips層type=4,
當點擊彈出層右上角的X按鈕時,會觸發cancel事件,我們可以指定cancel的處理函式;當彈出層關閉銷毀時,會執行end事件,我們可以定義end的處理函式,
layui中的控制元件非常多,使用這些控制元件可以大大地提高我們的開發效率,給大家介紹了幾個常用的控制元件:分頁條、富文本編輯器、導航,
日期的選擇比較常見,我們給大家提供了日期選擇的小組件【type=data】
建議使用較多瀏覽器支持的要引入一個檔案 WebCalendat.js檔案
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/41381.html
標籤:jQuery
