jQuery必會(huì)的東西............
感覺最近這幾天都懵懵的還是記錄一下防止隨著年齡的增長記憶力退化.......

jquery是啥 jquery就是一個(gè)js文件篡悟。。開發(fā)方便

首先附上jquery官網(wǎng)網(wǎng)址和下載地址

下載地址：https://code.jquery.com/jquery/
下載之后會(huì)有兩個(gè)文件一個(gè)有min 一個(gè)沒有min 有min的是壓縮版在項(xiàng)目上線的時(shí)候使用沒有min的是開發(fā)版（請?jiān)试S我那么叫他）顧名思義在開發(fā)的時(shí)候使用代碼可讀性更強(qiáng) 需要在html <script></script>中引入

<script src="./lib/jquery-1.12.4.js"></script>

雖然jQuery有好幾個(gè)版本但只有1.x系列的兼容IE低版本 2.x和3.x均不支持

emmmm jQuery有什么好處呢....和原生js相比代碼量少開發(fā)效率高在開發(fā)中可以達(dá)到“少寫多做”的效果其隱式迭代可以為我們省下好多寫for循環(huán)的時(shí)間.....鏈?zhǔn)骄幊? 盡管大膽的去點(diǎn)（.）
其次啦。哀蘑。膊夹。主要插件比較多（姨母笑）還可以自己寫插件
更重要的是！！榜苫！選擇器好寫多了（相對(duì)于原生js）
說到這里.......讓我們回憶一下原生js是怎么寫的
原生js的獲取元素方式：
documen.getElementById （‘’）根據(jù)id名獲取一個(gè)元素注意是一個(gè) 不是一堆
document.getElementsByTagName （‘’）根據(jù)標(biāo)簽名獲取一堆元素
document.getElementsByClassName （‘’）根據(jù)class名獲取一堆元素

document.querySelector （‘’）根據(jù)里面寫的選擇器跌帐，匹配的第一個(gè)元素如果沒有匹配項(xiàng)首懈，返回null
document.querySelectorAll （‘’）根據(jù)里面寫的選擇器匹配所有獲取到的一堆元素如果沒有匹配項(xiàng) 返回空的nodelist(節(jié)點(diǎn)數(shù)組)

ps 上面?zhèn)z返回的結(jié)果是靜態(tài)的绊率，之后對(duì)document結(jié)構(gòu)的改變不會(huì)影響到之前取到的結(jié)果。這兩個(gè)方法都可以接受三種類型的參數(shù)：id(#id) class(.xxx) 標(biāo)簽<></>

-------------------------------------------------------回憶結(jié)束--------------------------------------------

jquery對(duì)象初識(shí)：

jquery對(duì)象的標(biāo)志性代表：美元符號(hào) $
這不是美元代表的是一個(gè)function
在引入jQuery文件的頁面console.log 搜索$或者jquery 會(huì)發(fā)現(xiàn)是 f（selector究履，context） selector 選擇器 context 形參里面的這倆東西就不多贅述了不然要說好久= =不符合題目jquery基礎(chǔ)

認(rèn)識(shí)$標(biāo)識(shí)符

// ① $ 標(biāo)識(shí)符是一個(gè)函數(shù) function(selector)
// ② 選擇器selector,表示將來要接收用戶傳入的字符串格式的選擇器 '#box'
// ③ 函數(shù)要調(diào)用 $('#box')
// ④ 調(diào)用完畢后滤否，返回一個(gè)jQuery對(duì)象

獲取jquery對(duì)象：
基本語法： $('選擇器') 返回值是jQuery對(duì)象

jQuery對(duì)象的本質(zhì)：是一個(gè)偽數(shù)組只有l(wèi)ength 索引值等基本屬性是有序的

【重點(diǎn)】dom對(duì)象轉(zhuǎn)jQuery對(duì)象

獲取dom對(duì)象在前面寫過了就不再copy一遍通過doument.獲取的是dom對(duì)象 dom】對(duì)象只能調(diào)用dom對(duì)象里提供的屬性和方法不能直接dom對(duì)象去. jQuery里的屬性或者方法
要想轉(zhuǎn)換成jQuery對(duì)象要在前面加標(biāo)符$(' ');
但是一般沒人會(huì)先用document獲取一下之后再轉(zhuǎn)換成jQuery對(duì)象。最仑。除非是里面寫的是this--當(dāng)前觸發(fā)的事件或事件源藐俺。
同樣 jQuery對(duì)象也只能用自家對(duì)象提供的屬性和方法

【非重點(diǎn)】 jQuery對(duì)象轉(zhuǎn)dom對(duì)象

emmm 其實(shí)也不是轉(zhuǎn) 可以說是拿因?yàn)槭歉鶕?jù)索引值去找的
語法：jQuery對(duì)象[索引]

！泥彤！記住這里到后面會(huì)有個(gè)坑記住 jQuery對(duì)象后面直接跟中括號(hào)[索引值] 是一個(gè)dom對(duì)象Ｓ邸！Ｒ髁摺菱父！

jQuery注冊事件

還記得dom的注冊事件么。剑逃。onclick onmouseleave這種的
在jquery中不需要加on 因?yàn)樵谶@里是方法
舉個(gè)小例子：

<body>
    <ul>
        <li>我是一個(gè)可愛的li</li>
        <li>哈哈哈哈哈</li>
        <li>我是一個(gè)可愛的li一號(hào)</li>
        <li>我是一個(gè)可愛的li二號(hào)</li>
        <li>我是一個(gè)可愛的li三號(hào)</li>
        <li>我是一個(gè)可愛的li四號(hào)</li>
        <li>我是一個(gè)可愛的li五號(hào)</li>
        <li>我是一個(gè)可愛的li六號(hào)</li>   
    </ul>
<!-- 先鏈入jquery文件 -->
<!-- emmm  好想吃江邊城外的怪味烤魚 -->
<script src="./lib/jquery-1.12.4.js"></script>
<script>
// 我們要做的效果是 點(diǎn)擊哪個(gè)li  哪個(gè)li就彈框他的文本文字
// 先獲取所有的li  因?yàn)椴挥脤懷h(huán) 直接寫點(diǎn)擊事件 
$('li').click(function(){
    // 用變量接收一下當(dāng)前點(diǎn)擊的li
    // 括號(hào)里是this的話就不用加引號(hào)
    var lis = $(this).text();
    alert(lis);
})
//或者直接連寫也可以
//alert($(this).text()); 

</script>

jQuery的css方法操作樣式

回顧一下在dom中是如何操作css的
dom對(duì)象元素.style.樣式屬性名=值浙宜；

設(shè)置樣式

設(shè)置單個(gè)樣式

jQuery對(duì)象.css（‘name’，‘value’）蛹磺；
設(shè)置單個(gè)樣式的時(shí)候一定要加‘’引號(hào) 因?yàn)槭亲址? 也就是說里面不是數(shù)字的就都要寫成字符串的格式

設(shè)置多個(gè)樣式

jQuery對(duì)象.css（{
name：value粟瞬，
name：value，
name：value称开，
name：value

}）;

設(shè)置多個(gè)的時(shí)候 name value加不加引號(hào)都可以不同的name：value鍵值對(duì)用逗號(hào)分開

需要注意的一點(diǎn)是：如果name 不加引號(hào) 遇到中間有-的亩钟、多個(gè)單詞組在一起的屬性名要寫成駝峰

例：font-size 要不寫成加引號(hào)的‘font-size’ 要不去掉中間的- 用駝峰命名法寫成fontSize

獲取樣式

其實(shí)和設(shè)置是同理的。鳖轰。只不過設(shè)置是傳兩個(gè)參數(shù)進(jìn)去獲取是傳一個(gè)參數(shù)進(jìn)去
語法：jQuery對(duì)象.css（‘樣式屬性名name’）清酥；
這里的 name 依舊是字符串類型
樣式獲取只能單個(gè)獲取不能多個(gè)獲取
比如要獲取width 默認(rèn)在console.log里打印的是黑色的要想變成藍(lán)色的數(shù)字類型可以加一個(gè) parseInt（jQuery對(duì)象.css.（‘name’））；

通過選擇器獲取jQuery對(duì)象

這個(gè)是我們用jQuery寫代碼的基礎(chǔ)

基本選擇器

名稱	用法	描述
ID選擇器	$('#id')	獲取指定ID的元素
類選擇器	$('.class')	獲取同一類class的元素
標(biāo)簽選擇器	$('div')	獲取同一類標(biāo)簽的所有元素
并集選擇器	$('div,p,li')	使用逗號(hào)分隔蕴侣，只要符合條件之一就可焰轻。
交集選擇器	$('div.redClass')	獲取class為redClass的div元素

層級(jí)選擇器

名稱	用法	描述
子代選擇器	$('ul > li')	使用>號(hào)，獲取兒子層級(jí)的元素昆雀，注意辱志，并不會(huì)獲取孫子層級(jí)的元素
后代選擇器	$('ul li')	使用空格，代表后代選擇器狞膘，獲取ul下的所有l(wèi)i元素揩懒，包括孫子等

過濾器選擇器

這類選擇器都帶冒號(hào):

名稱	用法	描述
:eq(index)	$('li:eq(2)').css('color', 'red')	獲取到的li元素中，選擇索引號(hào)為2的元素挽封，索引號(hào)index從0開始已球。
:odd	$('li:odd').css('color', 'red')	獲取到的li元素中，選擇索引號(hào)為奇數(shù)的元素
:even	$('li:even').css('color', 'red')	獲取到的li元素中，選擇索引號(hào)為偶數(shù)的元素

關(guān)于odd 和even 一般我們在表格隔行換色的時(shí)候比如讓偶數(shù)行變紅色奇數(shù)行變藍(lán)色不能寫

$(tbody tr:even).css('background','red')智亮；

這樣出來的是奇數(shù)行變?yōu)樗{(lán)色因?yàn)?odd和even 是根據(jù)索引值去尋找的
在找用戶看到的偶數(shù)行2 4 6 的時(shí)候因?yàn)橄聵?biāo)索引值是從0開始的用戶看到的偶數(shù)行其實(shí)是代碼中的奇數(shù)行所以要想實(shí)現(xiàn)奇數(shù)行變藍(lán)色偶數(shù)行變紅色就要在奇數(shù)行寫

$('tbody tr:even').css.('background','biue'）;

在偶數(shù)行寫

$('tbody tr:odd').css.('background','red');

選擇器篩選方法

篩選選擇器的功能與過濾選擇器有點(diǎn)類似忆某，但是用法不一樣，篩選選擇器主要是方法
我們先來一個(gè)小小的頁面

<body>
    <div id="dv">
        <p>哈哈哈</p>
        <p>哈哈哈</p>
        <a href="#"></a>
        <a href="#"></a>
        <h2>喵喵喵</h2>
        <a href="#"></a>
        <a href="#"></a>
        <h3>???</h3>
        <div class="box">
            <p>孫子元素</p>
            <p>孫子元素</p>

        </div>
    </div>
  
</body>

通過 .children（）獲取所有子元素

eg:獲取id為dv的div下的p
一般方法：
$(‘#dv>p’)
用children方法：
$('#dv').chileren('p')

語法：父元素.children（子元素）

補(bǔ)充一下鼠標(biāo)懸停在方法上的時(shí)候會(huì)有個(gè)彈框里面會(huì)告訴你會(huì)有幾種方法去實(shí)現(xiàn)這個(gè) 如果方法后面有問號(hào)阔蛉？就是括號(hào)里面可選擇寫或者不寫
拿children來說如果后面的括號(hào)不寫那么就是去找div下的所有子元素包括p本身弃舒；如果后面括號(hào)里寫指定的子元素那么只會(huì)找到指定的子元素（的集合偽數(shù)組）；

通過.find（）方法獲取所有后代（子子孫孫）

eg:去獲取id為dv的div 下的所有的p
一般方法：
$('#dv p')
用find方法：
$('#dv').find('p');

語法：jQuery對(duì)象.find（‘必須寫的子元素’）

這里括號(hào)里面必須寫你問我為什么因?yàn)榇a提示框里告訴我必須寫状原。聋呢。。

用.next（）方法去尋找下一個(gè)兄弟元素

eg：去獲取id為dv的div里面的h2標(biāo)簽的下一個(gè)兄弟元素
用next方法：
$('#dv h2').next()

語法：jQuery對(duì)象.next（）颠区；

里面也是可寫可不寫坝冕。。但是我看覺得寫了也沒用因?yàn)樗徽易约?/p>

用.prev（）方法尋找上一個(gè)兄弟元素

eg：去獲取id為dv的div里面的h2標(biāo)簽的上一個(gè)兄弟元素
$('#dv h2 ').prev()

語法：jQuery對(duì)象.prev（）瓦呼；

尋找上一個(gè)和尋找下一個(gè)里面也是可寫可不寫。测暗。但是我覺得寫了也沒用因?yàn)樗徽易约旱闹苯由弦粋€(gè)和直接下一個(gè) 不會(huì)再下面或者上面的一堆里去找央串。

通過.parent（）去尋找父元素

eg：去獲取class為box的div的父元素
$('.box').parent()

語法： jQuery對(duì)象.parent（）；

通過siblings（selector）去尋找不包含自己的兄弟節(jié)點(diǎn)

eg：獲取id為dv的div標(biāo)簽下的h2標(biāo)簽的兄弟節(jié)點(diǎn)
$('#dv h2 ').siblings();

語法：jQuery對(duì)象.siblings（）碗啄；

括號(hào)里也是可寫可不寫不寫是查找所有兄弟節(jié)點(diǎn)的偽數(shù)組寫的話是查找特定的兄弟元素（偽數(shù)組）质和；

用.index（）方法獲取索引值

語法：jQuery對(duì)象.index（）；

作用;返回一個(gè)數(shù)字表示當(dāng)前元素在同級(jí)元素這個(gè)數(shù)組里的索引值
這個(gè)偽數(shù)組的長度有多少取決于這個(gè)html結(jié)構(gòu) 比如說我一個(gè)大div里有8個(gè)小div 我的長度就是8 最大下標(biāo)為7 你在這個(gè)div下面在來一個(gè)兄弟div 抱歉和我沒關(guān)系我管不著了~~

用.eq（index）查找這個(gè)索引值代表的元素

語法：`$('#dv').eq(2)` 【推薦使用】

相當(dāng)于 ** $('#dv:eq(2)')** 在里面的index不確定的時(shí)候需要些index 則需要拼接但是用上一種方法就不需要
是去查找id為dv的div的第三個(gè)子元素
稚字！注意有的時(shí)候可能會(huì)不注意就寫成了 $('#dv')[2] 這樣是非常非常錯(cuò)誤的Ｋ撬蕖！胆描！因?yàn)檫@個(gè)時(shí)候你寫的東西已經(jīng)是一個(gè)dom對(duì)象不是jQuery對(duì)象了Ｌ毕搿！

jQuery操作類名

目的：管理類名樣式
在dom對(duì)象中我們管理類名是：dom對(duì)象.className=‘類名類名’昌讲；

檢測類名是否存在

語法：jQuery對(duì)象.hasClass（‘類名’）国夜；

返回的是布爾值即true 或者false true表示有 false表示沒有

添加類名【常用】

語法：jQuery對(duì)象.addClass（‘類名類名’）；

可以添加多個(gè)類名用空格分隔開

刪除類名【常用】

語法： jQuery對(duì)象 .removeClass（‘類名’）

括號(hào)里也是可選寫或者不寫寫就是刪除指定的類名不寫就是刪除所有類名括號(hào)里的是參數(shù)

切換類名

語法：jQuery對(duì)象.toggleClass（‘類名’）短绸；

toggle 切換
如果寫進(jìn)去的這個(gè)類名存在則會(huì)被移除如果不存在就會(huì)被添加
一般在同一個(gè)按鈕切換類名使用

啊啊啊啊啊啊啊啊啊總結(jié)了一下午+一晚上车吹。。累的一批醋闭。窄驹。。证逻。乐埠。。。饮戳。豪治。。扯罐。负拟。。歹河。掩浙。。秸歧。厨姚。。键菱。谬墙。。经备。拭抬。。

jQuery基礎(chǔ)的基礎(chǔ)的基礎(chǔ)