jQuery框架介紹

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

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

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

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

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

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

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

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

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

4. 如何引入jquery文件？

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

5. jquery中的選擇器

jquery選擇器的語法和css選擇器語法一樣

5.1 基本選擇器

5.2 層級選擇器

5.3 基本過濾選擇器

5.4 屬性選擇器

5.5 篩選選擇器

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

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

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

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

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

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

7. jQuery效果函數(shù)

7.1 顯示隱藏動畫

7.11 show,hide,toggle

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

7.12 slideDown,slideUp,slideToggle

7.13 fadeIn,fadeOut,fadeTo,fadeToggle

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

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

7.15 其他函數(shù)

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

animate(params,speed,callback)

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

stop(clearQueue,gotoEnd)

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

delay(speed)

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

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

8. jQuery屬性操作

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

8.1 html屬性操作

attr()

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

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

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

removeAttr()

刪除匹配元素一個指定的屬性
示例:$('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()

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

removeClass()

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

toggleClass()

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

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

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

8.4 值操作

html()

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

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

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

text()

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

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

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

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

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

val()

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

9. jQuery文檔操作

9.1 插入操作

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

9.2 復(fù)制操作

clone()
克隆匹配這些DOM元素，并選中這些克隆的副本。
可以傳入一個布爾值,為true時，將該標(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'));

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

9.3刪除操作

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

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

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

10. jquery中的css

scroll()

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

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

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

11.jquery事件

HTML中與JavaScript交互是通過事件來交互的。

11.1 什么是事件流？

事件流就是從頁面中接受事件的順序

DOM事件流

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

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

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

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

事件流過程分析

例如一個id為btn的按鈕設(shè)置click事件，document對象首先接受到click事件，然后按照dom樹依次傳到btn。而事件冒泡過程是由具體元素接受，向上傳到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不支持事件捕獲
一般來說父子盒子都設(shè)置一個click事件,單擊子盒子事件,則父子兩個盒子事件一起觸發(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 >我是一個超鏈接</a>   
//jquery內(nèi)容  
$('a').click(function (e) {
    e.preventDefault();
})

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

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

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

通過return false即可

11.4 jquery常用事件

jquery事件綁定bind()

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

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

綁定多個事件時，事件之間用空格隔開
示例二:

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

綁定多個不同的事件時，可以使用鍵值對的方式
示例三:

$(".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. 自定義事件不能自動觸發(fā)，只有使用trigger()方法時才能觸發(fā)。
2. trigger()方法第二個參數(shù)是一個參數(shù)數(shù)組,傳入?yún)?shù)后,自定義事件方法就必須要用相應(yīng)數(shù)目的形參來接受
3. 綁定事件僅對該行代碼前面的元素有效，后面新加入的元素不會觸發(fā)該綁定事件。舉一個例子，若在代碼后父盒子中添加一個子盒子，父盒子事件對子盒子無效。也就是說動態(tài)生成的元素不能直接添加對象里面的時間也不能發(fā)生。

事件代理on()

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

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

移除事件unbind()

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

合成事件

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

11.5 鼠標(biāo)事件

click()和dblClick()

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

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

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

mousemove()用途

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

11.6 表單事件

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

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

什么是ajax？

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

jquery的load()方法

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

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

jquery的getJSON()方法

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

jquery的$.get()方法

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

jquery的post()方法

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

jquery的ajax方法

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