jQuery框架介紹

1. jQuery框架與javaScript之間的有什么關(guān)系？

  javaSript是一門(mén)編程語(yǔ)言，jQuery是javaSript中的一個(gè)庫(kù)，jquery是JavaScript中的一個(gè)子集。通過(guò)使用jQuery框架中的一些接口，我們可以更方便的實(shí)現(xiàn)一些網(wǎng)頁(yè)操作。比起直接使用原生接口，jQuery框架優(yōu)點(diǎn)多多。

2. jQuery與原生javaSript對(duì)比，有什么優(yōu)點(diǎn)？

原生js代碼繁瑣，代碼量大，實(shí)現(xiàn)動(dòng)畫(huà)復(fù)雜。

3. jQuery與javaScript之間的區(qū)別是什么？

• 編寫(xiě)個(gè)數(shù)不同：window.onload()函數(shù)只能在JavaScript中使用一次，但是$(document).ready()可以出現(xiàn)多次。（這兩個(gè)函數(shù)都是用來(lái)表示等頁(yè)面加載完成后，使用JavaScript腳本命令）
• jquery有簡(jiǎn)化寫(xiě)法：$(document).ready()可以簡(jiǎn)化寫(xiě)為$(function(){})
• 執(zhí)行時(shí)間不同：window.onload()必須等到頁(yè)面加載完成后才能執(zhí)行，$(document).ready()在DOM樹(shù)構(gòu)建完成后就可以執(zhí)行

文檔加載步驟如下：
1. 解析HTML結(jié)構(gòu)
2. 加載外部腳本和樣式表文件
3. 解析并執(zhí)行腳本代碼
4. DOM樹(shù)構(gòu)建完成
5. 加載圖片等外部文件
6. 頁(yè)面加載完成

3.1 為什么要使用入口函數(shù)？

使用window.onload或者是$(document).ready()可以使我們的代碼放在html任意位置都會(huì)等待頁(yè)面加載完成后再被調(diào)用。如果不使用該函數(shù)，代碼塊正好放在head標(biāo)簽中，那么頁(yè)面還沒(méi)有加載完，就會(huì)調(diào)用js腳本。

4. 如何引入jquery文件？

我們從jquery官網(wǎng)下載好jquery文件，然后通過(guò)外部樣式引入這個(gè)庫(kù)文件就可以在js腳本中使用。
示例：<script src="jquery-3.3.1.js"></script>

5. jquery中的選擇器

jquery選擇器的語(yǔ)法和css選擇器語(yǔ)法一樣

5.1 基本選擇器

5.2 層級(jí)選擇器

5.3 基本過(guò)濾選擇器

5.4 屬性選擇器

5.5 篩選選擇器

6. jQuery和DOM對(duì)象轉(zhuǎn)換

6.1 DOM對(duì)象轉(zhuǎn)jQuery對(duì)象

直接使用$(DOM對(duì)象)
示例:

var oDiv = document.getElementsByTag('div');
$(oDiv) //即轉(zhuǎn)換成jQuery對(duì)象

6.2 jQuery對(duì)象轉(zhuǎn)換為DOM對(duì)象

示例:
$('div')[0]或者$('div').get(0)即可將jquery對(duì)象轉(zhuǎn)換為DOM對(duì)象

7. jQuery效果函數(shù)

7.1 顯示隱藏動(dòng)畫(huà)

7.11 show,hide,toggle

注意：speed參數(shù)是控制標(biāo)簽顯示/隱藏的速度，可選slow,normal,fast或者直接輸入以毫秒為單位的數(shù)字；callback是回調(diào)函數(shù)，執(zhí)行完動(dòng)畫(huà)，調(diào)用的函數(shù)。toggle只能控制標(biāo)簽的顯隱,不能使用回調(diào)函數(shù)。

7.12 slideDown,slideUp,slideToggle

7.13 fadeIn,fadeOut,fadeTo,fadeToggle

7.14 這幾組有什么區(qū)別呢？

首先,三組都是通過(guò)控件的display屬性來(lái)達(dá)到控制顯隱的效果。show,slide,這兩組都是通過(guò)控制標(biāo)簽的width和height來(lái)達(dá)到動(dòng)畫(huà)效果，fadeIn通過(guò)控制opacity不透明度來(lái)達(dá)到動(dòng)畫(huà)的效果。

7.15 其他函數(shù)

7.2 創(chuàng)建自定義動(dòng)畫(huà)animate函數(shù)

animate(params,speed,callback)

用于創(chuàng)建自定義動(dòng)畫(huà)函數(shù)
示例:$('#he').animate({left:'300px'})
注意：params:動(dòng)畫(huà)終值屬性集合(用大括號(hào)括起來(lái)),speed動(dòng)畫(huà)速度，callback回調(diào)函數(shù)。

stop(clearQueue,gotoEnd)

停止在指定元素上正在運(yùn)行的動(dòng)畫(huà)
示例:$('#he').stop();
注意:clearQueue為true清空隊(duì)列，立即結(jié)束動(dòng)畫(huà);
gotoEnd讓當(dāng)前正在執(zhí)行的動(dòng)畫(huà)立即完成，并且重設(shè)show和hide的原始樣式，調(diào)用回調(diào)函數(shù)等

delay(speed)

用來(lái)做延遲操作,傳入毫秒數(shù)
示例:$('#he').animate({left:'800px'},2000).delay(1000).animate({top:'300px'});

注意:這些函數(shù)都可以通過(guò)點(diǎn).連接起來(lái)，按順序調(diào)用，這種調(diào)用方式稱之為鏈?zhǔn)秸{(diào)用

8. jQuery屬性操作

jQuery屬性操作模塊分為四部分:html屬性操作、DOM屬性操作、類樣式操作、值屬性操作。

8.1 html屬性操作

attr()

可以獲取或修改html標(biāo)簽屬性

獲取值
傳入一個(gè)需要獲取的屬性參數(shù)
示例:$('div').attr('id')

設(shè)置值
傳入兩個(gè)參數(shù)設(shè)置一個(gè)值，或者設(shè)置多個(gè)值將多個(gè)鍵值對(duì)由大括號(hào)括起來(lái)當(dāng)一個(gè)參數(shù)傳入
示例一:$('#box').attr('class','wrapper');
示例二：$('#box').attr({'class':'123','name':'aaa'});
注意：在示例二中，大括號(hào)括起來(lái)的鍵值對(duì)，鍵可以不用引號(hào)引起來(lái)，值必須有引號(hào)引起來(lái)

removeAttr()

刪除匹配元素一個(gè)指定的屬性
示例:$('p').removeAttr('id');

8.2 dom屬性操作

prop()

可以獲取或修改DOM屬性，用法等同于attr()

獲取值
示例:$('p').prop('name');

設(shè)置值
示例一:$('p').prop('name',2);
示例二:$('p').prop({'name':2})

removeProp

示例:$('p').removeProp('name')

8.3 類樣式操作

addClass()

為每個(gè)元素添加指定的類名,若要添加多個(gè)類名用空格隔開(kāi)
示例一:$('#he').addClass('wrapper');
示例二:$('#he').addClass('wrapper1 box2')

removeClass()

從所匹配的元素中刪除全部或指定的類
示例一:$('#he').removeClass('wrapper1') 刪除wrapper1
示例二:$('#he').removeClass(); 刪除全部類

toggleClass()

開(kāi)關(guān),若該標(biāo)簽有這個(gè)類就刪除，沒(méi)有則添加這個(gè)類
示例一:$('#he').toggleClass('changeColor');

attr()和使ddClass()加入一個(gè)類屬性有什么區(qū)別?

使用attr()設(shè)置類時(shí),不能追加類屬性，只會(huì)覆蓋掉原來(lái)的類屬性；使用addClass()會(huì)在不改變?cè)瓉?lái)類的基礎(chǔ)上添加一個(gè)類，刪除類同理;

8.4 值操作

html()

獲取或設(shè)置選中標(biāo)簽的內(nèi)容,設(shè)置值時(shí)將會(huì)被解析為HTML語(yǔ)言

獲取值
示例:$('p').html()

設(shè)置值
示例:$('p').html('<a href="#">what</a> fk?')

text()

獲取或設(shè)置元素中包括文本的內(nèi)容，設(shè)置時(shí)僅會(huì)被解析為純文本

獲取值
示例:$('p').text()

設(shè)置值
示例:$('p').text('what fk?')

html()和text()有什么區(qū)別？

在獲取值時(shí),html()會(huì)將內(nèi)容中標(biāo)簽讀出來(lái)，而text()會(huì)忽視標(biāo)簽，讀取純文本;
例如:p標(biāo)簽中文本為<span>12</span>34，html()讀出來(lái)的效果是<span>12</span>34,而text()讀出來(lái)的效果是1234
在設(shè)置值時(shí),html()會(huì)將字符串解析為html語(yǔ)言,然后顯示出來(lái),而text()僅僅將其解析為純文本顯示;
例如:同樣設(shè)置'<a href="#">what</a> fk?'這一段內(nèi)容,html()顯示出來(lái)的是帶有超鏈接的what fk,而text()顯示出來(lái)的是'<a href="#">what</a> fk?'
也就是說(shuō):值中含有標(biāo)簽時(shí)，text()不會(huì)渲染出標(biāo)簽元素,只會(huì)將標(biāo)簽代碼原封不動(dòng)的顯示出來(lái)

val()

見(jiàn)關(guān)于input的value用法

9. jQuery文檔操作

9.1 插入操作

注意:
1. 他是jQuery方法,所有調(diào)用時(shí)務(wù)必保證轉(zhuǎn)換為jquery對(duì)象$()
2. 父元素是jquery對(duì)象，子元素可以使字符串,DOM對(duì)象,jquery元素
3. append()和appendTo()方法就父子元素位置不同，功能相同。
4. 如果子元素是頁(yè)面上某個(gè)標(biāo)簽,則相當(dāng)于移動(dòng)操作

9.2 復(fù)制操作

clone()
克隆匹配這些DOM元素，并選中這些克隆的副本。
可以傳入一個(gè)布爾值,為true時(shí)，將該標(biāo)簽的事件也克?。J(rèn)不克?。?
示例:$('#btn3').clone(true).insertAfter($('p'));

9.3 替換操作

replaceWith()
選擇器.repalceWith(內(nèi)容)
示例：$('#btn').replaceWith("<a href='#'>我是替換后的標(biāo)簽</a>>");
注意:內(nèi)容替換選擇器，內(nèi)容可以是DOM,jquery,字符串。

replaceAll()
內(nèi)容.replaceAll(選擇器)
示例:$('p').replaceAll($('ul'));

注意:這兩個(gè)函數(shù)區(qū)別只是內(nèi)容和選擇器位置不同

9.3刪除操作

empty() 清空
清空被選元素的內(nèi)容
示例：$('ul').empty() 會(huì)清空ul中所有內(nèi)容（相當(dāng)于html(”)）

remove() 刪除
會(huì)刪除被選元素，事件也沒(méi)了
示例：$('ul').remove() 會(huì)刪除ul標(biāo)簽和標(biāo)簽的內(nèi)容

detach() 刪除并返回
會(huì)刪除被選元素，但是會(huì)返回刪除的元素，事件會(huì)保留
示例：var $btn = $('button').detach() 將頁(yè)面上的button全部刪除，返回給變量btn

10. jquery中的css

scroll()

當(dāng)元素滾動(dòng)時(shí),調(diào)用的方法
示例:

$(function () {
    $(document).scroll(function () {
            console.log($(document).scrollTop());
            console.log($(document).scrollLeft());
    });

獲取瀏覽器滾動(dòng)時(shí)的top和left
在DOM中用onScroll(),在jquery中用scroll()方法監(jiān)聽(tīng)滾動(dòng)條。

11.jquery事件

HTML中與JavaScript交互是通過(guò)事件來(lái)交互的。

11.1 什么是事件流？

事件流就是從頁(yè)面中接受事件的順序

DOM事件流

DOM2級(jí)事件流包括三個(gè)階段
1. 事件捕獲階段
2. 處于目標(biāo)階段
3. 事件冒泡階段

addEventListener()
DOM事件監(jiān)聽(tīng)器
參數(shù)一事件名，參數(shù)二function，參數(shù)三bool值（捕獲階段為true,冒泡階段為false）

document,document.documentElement,document.document.body關(guān)系

document代表整個(gè)html
document.documentElement代表<html>標(biāo)簽
document.document.body代表<body>標(biāo)簽

事件流過(guò)程分析

例如一個(gè)id為btn的按鈕設(shè)置click事件，document對(duì)象首先接受到click事件，然后按照dom樹(shù)依次傳到btn。而事件冒泡過(guò)程是由具體元素接受，向上傳到document。

11.2 事件屬性

示例:

$("#btn").click(function (e) {
    console.log("type:"+e.type);
    console.log("target:"+ e.target);
    console.log("page.x:"+ e.pageX+"  page.y:"+ e.pageY);
    console.log("which:"+ e.which);
});

顯示結(jié)果：

type:click
target:[object HTMLButtonElement]
page.x:42  page.y:233
which:1

11.3 事件冒泡

jquery不支持事件捕獲
一般來(lái)說(shuō)父子盒子都設(shè)置一個(gè)click事件,單擊子盒子事件,則父子兩個(gè)盒子事件一起觸發(fā)。

阻止冒泡stopPropagation()

原因:子盒子處于click冒泡階段后,父盒子隨之也處于click冒泡階段,由內(nèi)而外,最終傳到DOM.
解決辦法:阻止事件冒泡。阻止子盒子事件冒泡，父盒子就接受不到冒泡,即只觸發(fā)子盒子事件。
示例:

$('#box #p1').click(function (e) {
    e.stopPropagation();
    console.log('我是p標(biāo)簽');
});
$('#box').click(function () {
    console.log('我是div標(biāo)簽');
})

阻止默認(rèn)事件preventDefault()

像超鏈接a標(biāo)簽，都有默認(rèn)click事件，form表單的submit有默認(rèn)submit事件。
示例:

<--標(biāo)簽內(nèi)容-->
<a >我是一個(gè)超鏈接</a>   
//jquery內(nèi)容  
$('a').click(function (e) {
    e.preventDefault();
})

即便我們給a標(biāo)簽設(shè)置了鏈接，由于我們?cè)赾lick事件中設(shè)置了阻止默認(rèn)事件，導(dǎo)致a標(biāo)簽不能跳轉(zhuǎn)。

綜上，還有另一種方法既可以阻止默認(rèn)事件，也可以阻止冒泡
示例:

$('#p1 a').click(function (e) {
    return false;
})

通過(guò)return false即可

11.4 jquery常用事件

jquery事件綁定bind()

將元素和事件綁定時(shí)，有bind(),on()兩種方法

bind()
示例一:$('#box').bind('click',function(){})

綁定多個(gè)事件時(shí)，事件之間用空格隔開(kāi)
示例二:

$(".box").bind('click mouseleave', function () {
    alert("已經(jīng)綁定了好幾個(gè)事件")
})

綁定多個(gè)不同的事件時(shí)，可以使用鍵值對(duì)的方式
示例三:

$(".box").bind({'click':sayhi,'mouseout':sayhello});
function sayhi(){
    alert('hi');
}
function sayhello(){
    alert('hello');
}

綁定自定義事件

示例:

$('.box').bind('myHover', function (e) {
     alert('看看這就執(zhí)行了');
});
 $('.box').trigger('myHover');

注意:
1. 自定義事件不能自動(dòng)觸發(fā)，只有使用trigger()方法時(shí)才能觸發(fā)。
2. trigger()方法第二個(gè)參數(shù)是一個(gè)參數(shù)數(shù)組,傳入?yún)?shù)后,自定義事件方法就必須要用相應(yīng)數(shù)目的形參來(lái)接受
3. 綁定事件僅對(duì)該行代碼前面的元素有效，后面新加入的元素不會(huì)觸發(fā)該綁定事件。舉一個(gè)例子，若在代碼后父盒子中添加一個(gè)子盒子，父盒子事件對(duì)子盒子無(wú)效。也就是說(shuō)動(dòng)態(tài)生成的元素不能直接添加對(duì)象里面的時(shí)間也不能發(fā)生。

事件代理on()

on()
既然子盒子做不了，將事件交給父盒子取做。
語(yǔ)法:父標(biāo)簽.on(“事件名”,”需要綁定的選擇器”,fn回調(diào)函數(shù));
示例:

$('ul').on("click","li", function () {
            console.log($(this).index());
});
$("ul").append("<li>我是動(dòng)態(tài)創(chuàng)建的元素</li>")

移除事件unbind()

unbind()傳入需要移除的事件名,不傳入?yún)?shù)時(shí)，移除所有事件
示例:$("#box").unbind("mouseout");
只能移除bind()綁定的對(duì)象

合成事件

例如：hover()事件是由mouseenter()和mouseleave事件合成的
hover()第一個(gè)參數(shù)移入函數(shù)，第二個(gè)移出函數(shù)

11.5 鼠標(biāo)事件

click()和dblClick()

雙擊會(huì)觸發(fā)一次雙擊事件和兩次單擊事件，所以一般不會(huì)對(duì)一個(gè)盒子既設(shè)置單擊事件又設(shè)置雙擊事件

mouseover()/mouseout()和mouseenter()/mouseleave()區(qū)別？

假設(shè)子盒子設(shè)置鼠標(biāo)移入移出事件，mouseover()/mouseout()在父盒子子盒子之間都會(huì)觸發(fā)；而mouseenter()/mouseleave()僅僅在父盒子觸發(fā)。
舉一個(gè)例子：
子盒子設(shè)置mouseover()/mouseout()，那么鼠標(biāo)從父盒子移入子盒子，會(huì)觸發(fā)父盒子的置mouseover()和子盒子的mouseout()。
子盒子設(shè)置mouseenter()/mouseleave()，那么鼠標(biāo)從父盒子移入子盒子，兩個(gè)事件都不會(huì)觸發(fā)；僅僅在鼠標(biāo)移入移出父盒子會(huì)觸發(fā)這兩個(gè)事件。

mousemove()用途

通常用在鼠標(biāo)拖拽動(dòng)作上

11.6 表單事件

注意:
1. select()方法僅對(duì)文本元素有效，對(duì)其他元素?zé)o效。在文本被選中時(shí)觸發(fā)
2. submit()事件是form表單中submit按鈕的默認(rèn)事件,默認(rèn)提交表單。通過(guò)設(shè)置該函數(shù)，可以設(shè)置在提交前觸發(fā)的事件(當(dāng)然，也可以通過(guò)阻止默認(rèn)提交表單事件)，該函數(shù)與服務(wù)端有很大掛鉤

12. jquery中ajax技術(shù)(簡(jiǎn)介)

什么是ajax？

AJAX = 異步的javascript和XML（Asynchronous Javascript and XML），即在不重載整個(gè)網(wǎng)頁(yè)情況下，通過(guò)后臺(tái)加載數(shù)據(jù)，將其顯示在網(wǎng)頁(yè)上。

jquery的load()方法

從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放入被選元素中。
示例：$("selector").load(url,data,callback);
注意：
selector：選擇器
url：url地址
data：鍵值對(duì)集合
callback：回調(diào)函數(shù)集合
示例:

$('#btn').click(function(){
    //只傳一個(gè)url，表示在id為#new-projects的元素里加載index.html
    $('#new-projects').load('./index.html');
})

jquery的getJSON()方法

異步加載json數(shù)據(jù)，并對(duì)數(shù)據(jù)進(jìn)行解析，顯示到頁(yè)面上
語(yǔ)法:$.getJSON(url,[data],[callback])

jquery的$.get()方法

$.get() 方法請(qǐng)求從服務(wù)器上請(qǐng)求數(shù)據(jù)
語(yǔ)法:$.get(URL,callback)

jquery的post()方法

post()方法多用于以POST方式向服務(wù)器發(fā)送數(shù)據(jù)，服務(wù)器接收到數(shù)據(jù)之后，進(jìn)行處理，并將處理結(jié)果返回頁(yè)面
語(yǔ)法：$.post(URL,data,callback);

jquery的ajax方法

$.ajax();
具體參數(shù):
1. url ： 要求為String類型的參數(shù)，（默認(rèn)為當(dāng)前頁(yè)地址）發(fā)送請(qǐng)求的地址。
2. type:默認(rèn)為get，有g(shù)et和post兩種方法
3. timeout:超時(shí)時(shí)間
4. async:默認(rèn)true異步，有同步異步兩種方法
5. cache:默認(rèn)true，是否從瀏覽器加載緩存
6. data:要求為Object或String類型的參數(shù)，發(fā)送到服務(wù)器的數(shù)據(jù)。data為需要發(fā)送的值，以鍵值對(duì)形式。
7. dataType:要求為string類型的參數(shù)，預(yù)期服務(wù)器返回的數(shù)據(jù)類型。作為回調(diào)函數(shù)的參數(shù)可用類型：xml，html，script，json，jsonp，text。相當(dāng)于，想要什么類型數(shù)據(jù)就指定什么類型。發(fā)過(guò)來(lái)就轉(zhuǎn)換成什么類型的
8. script：返回純文本JavaScript代碼。
9. beforeSend： 要求為Function類型的參數(shù)，發(fā)送請(qǐng)求前調(diào)用函數(shù)。
10. success:data為成功時(shí)返回的對(duì)象，F(xiàn)unction類型的參數(shù)。
11. error:data為失敗時(shí)返回的對(duì)象，F(xiàn)unction類型的參數(shù)。