什么是jQuery
- 是一款JavaScript庫(kù)
- 方便的處理HTML，事件渔扎，動(dòng)畫等
- 可以兼容多瀏覽器
jQuery的基本概念
下載和安裝jQuery
- 下載：
從jQuery官網(wǎng)下載孝凌，壓縮版本用于生產(chǎn)蔑担，非壓縮版本用于開發(fā)
如果想要兼容IE6~IE8扶关，建議選擇V1.12.4 - 安裝：
直接在html中引入即可
<script src="./../jquery-3.3.1.js"></script>
使用CDN
- CDN(content Delivery Network)：內(nèi)容分發(fā)網(wǎng)絡(luò)缔逛，比如BootCDN
- 可以用來引入jQuery画侣，提高性能冰悠，加快下載速度
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
基本概念
- 設(shè)計(jì)哲學(xué)：write less do more
- 設(shè)計(jì)思想：結(jié)構(gòu)，表現(xiàn)棉钧，行為分離
- jQuery庫(kù)對(duì)外僅僅暴露出一個(gè)全局變量：
$
window.jQuery===window.$ - $(xxx)：調(diào)用jQuery本身的選擇方法屿脐，返回一個(gè)jQuery對(duì)象
- jQuery對(duì)象
1涕蚤，是原生DOM對(duì)象的封裝
2，jQuery對(duì)象和原生DOM對(duì)象不同的诵，但是可以相互轉(zhuǎn)換
3万栅，jQuery對(duì)象包含了很多方法，方便的操作DOM元素 - jQuery對(duì)象西疤，原生DOM對(duì)象間的轉(zhuǎn)換
$(domObject) : jQuery Object
$(xxx).get(0) : DOM Object
$(xxx)[0] : DOM Object - 鏈?zhǔn)秸Z法
1烦粒，實(shí)現(xiàn)原理是每次操作都會(huì)返回jQuery對(duì)象
2，有些方法具有破壞性(比如find())代赁，不返回原先的jQuery對(duì)象扰她，這時(shí)候就需要用end()方法，重置為原先的jQuery對(duì)象 -
$(document).ready(function(){...})
1芭碍，$(document).ready()在DOM結(jié)構(gòu)加載完畢后就會(huì)執(zhí)行
2徒役，$(document).ready(function(){...})等價(jià)于$(function(){...})
jQuery的選擇器
選擇元素的方法：$(xxx)
- 特點(diǎn)1：兼容CSS選擇器語法以及擴(kuò)展
- 特點(diǎn)2：返回0個(gè)，1個(gè)或多個(gè)jQuery元素集合窖壕，是一個(gè)類數(shù)組
- 特點(diǎn)3：集合內(nèi)元素順序與頁(yè)面上順序一致
- 特點(diǎn)4：可以用逗號(hào)隔開忧勿，而選擇多個(gè)元素
- 返回值：jQuery對(duì)象
選擇器的種類：
- 基本選擇器：CSS基本一致
- 篩選器/過濾器：$('a:xxx')：a是要篩選的對(duì)象(如果空就是所有)，xxx是篩選方法
基本選擇器（與CSS選擇器基本一致）
- ID選擇器：
$('#p1') - 類選擇器：
$('.list') - 元素選擇器：
$('div') - 后代選擇器：
$('.list > li') - 屬性選擇器：
$('a[)：網(wǎng)址等于http://www.baidu.com的a元素
$('a[href*="www"]')：網(wǎng)址中包含www的a元素
$('a[href^="http"]')：網(wǎng)址中以http開頭的a元素
$('a[href$="com"]')：網(wǎng)址中以com結(jié)尾的a元素
$('a[href][target]')：包含href屬性和target屬性的a元素
$('a[href!="http://www.baidu.com"]')：網(wǎng)址不等于http://www.baidu.com的a元素瞻讽，這個(gè)是jQuery獨(dú)有的鸳吸，CSS選擇器中沒有
位置篩選器（jQuery獨(dú)有，CSS選擇器中沒有速勇，n從0開始）
- :first
$('li:first')晌砾，選擇第一個(gè)li元素 - :last
$('li:last')，選擇最后一個(gè)li元素 - :even
$('li:even')烦磁，選擇偶數(shù)位的li元素养匈，第一個(gè)元素是0。注意跟$('li:nth-child(even)')不一樣 - :odd
$('li:odd')个初，選擇奇數(shù)位的li元素乖寒，第一個(gè)元素是0。注意跟$('li:nth-child(odd)')不一樣 - :eq(n)
$('li:eq(2)')院溺，選擇第2個(gè)li元素 - :gt(n)
$('li:gt(2)')楣嘁，選擇所有位置大于2的li元素 - :lt(n)
$('li:lt(2)')，選擇所有位置小于2的li元素
子元素篩選器 (與CSS一致珍逸，n從1開始)
- :first-child
$('li:first-child')逐虚，選擇父元素的首個(gè)子元素的li元素 - :last-child
$('li:last-child')，選擇父元素的最后一個(gè)子元素的li元素 - :nth-child(n)
$('li:nth-child(2)')谆膳，選擇父元素的第2個(gè)元素的li元素 - :nth-child(2n)
$('li:nth-child(2n)')叭爱，選擇父元素的偶數(shù)個(gè)元素的li元素 - :nth-child(odd)
$('li:nth-child(odd)')，選擇父元素的奇數(shù)個(gè)元素的li元素漱病，注意跟$('li:odd')不一樣 - :nth-child(even)
$('li:nth-child(even)')买雾，選擇父元素的偶數(shù)個(gè)元素的li元素把曼，注意跟$('li:even')不一樣 - :nth-last-child(n)
與:nth-child(n)意思一樣，只不過從最后一個(gè)子元素開始計(jì)數(shù) - :first-of-type
$('li:first-of-type')漓穿，選擇父元素的首個(gè)li元素 - :last-of-type
$('li:last-of-type')嗤军，選擇父元素的最后一個(gè)li元素 - :nth-of-type(n)
$('li:nth-of-type(2)')，選擇父元素的第二個(gè)li元素 - :nth-last-of-type(n)
與:nth-of-type(n)意思一樣晃危，只不過從最后一個(gè)子元素開始計(jì)數(shù) - :only-child
$('li:only-child')叙赚，選擇父元素的唯一子元素的每個(gè)li元素 - :only-of-type
$('li:only-of-type')，選擇父元素的唯一li元素
表單篩選器（前四種與CSS一致僚饭，后面是jQuery獨(dú)有的）
- :checked
$(':checked')震叮，選擇處于選中狀態(tài)的元素(單選/多選/下拉框..) - :disabled
$(':disabled')，選擇處于disable狀態(tài)的元素 - :enabled
$(':enabled')鳍鸵，選擇處于enable(也就是非disable)狀態(tài)的元素 - :focus
$(':focus')苇瓣，選擇獲得焦點(diǎn)的元素 - :button
$(':button')，選擇button元素 - :checkbox
$(':checkbox')权纤，選擇多選框元素 - :file
$(':file')钓简，選擇文件輸入框元素 - :image
$(':image')，選擇type="image"的元素 - :input
$(':input')汹想，選擇所有form元素(而不僅僅是input元素) - :password
$(':password')，選擇password元素 - :radio
$(':radio')撤蚊，選擇單選框元素 - :reset
$(':reset')古掏，選擇type="reset"的元素 - :selected
$(':selected')，選擇選中狀態(tài)的select元素 - :submit
$(':submit')侦啸，選擇type="submit"的元素 - :text
$(':text')槽唾，選擇text類型的元素
內(nèi)容篩選器（第一種與CSS一致，后面是jQuery獨(dú)有的）
- :empty
$('p:empty')光涂，選擇沒有文本內(nèi)容的p元素 - :parent
$('p:parent')庞萍，選擇含有子元素或者文本的p元素，與$(':empty')相反 - :contains(text)
$('p:contains("abc")')忘闻，選擇包含給定文本("abc")的p元素 - :has(selector)
$('p:has(span)')钝计，選擇包含和span元素的p元素
其他篩選器（前四種與CSS一致，后面是jQuery獨(dú)有的）
- :lang(language)
$(':lang(en)')齐佳，選擇語言為en的元素 - :not(selector)
$('p:not(#foo)')私恬，選擇id不為foo的p元素 - :root
$(':root')，選擇該文檔的根元素(就是HTML) - :target
$(':target')炼吴，根據(jù)URL的hash找到對(duì)應(yīng)id的元素本鸣。比如URL的hash是foo，那么會(huì)找到id為foo的元素硅蹦。 - :hidden
$(':hidden')荣德，選擇不可見元素(display:none 和 type:hidden) - :visible
$(':visible')闷煤，選擇可見元素，與$(':hidden')相反 - :header
$(':header')涮瞻，選擇標(biāo)題類元素(h1/h2..) - :animated
$(':animated')曹傀，選擇正在執(zhí)行動(dòng)畫效果的元素
選擇器的性能優(yōu)化
- 盡量使用CSS中有的選擇器
慢：$('ul li:even)
快：$('ul li:nth-child(odd)') - 避免過度約束
慢：$('div ul li.item')
快：$('li.item2') - 盡量以ID開頭
慢：$('.list li.item')
快：$('#list li.item') - 讓選擇器的右邊有更多特征
慢：$('ul.list .item')
快：$('.list li.item') - 避免使用全局選擇器
慢：$('ul')
快：$('.list') - 緩存選擇器結(jié)果
慢：$('.#list .item2'); $('.#list .item4');
快：var ul = $('.#list'); ul.find('.item2'); ul.find('.item4');
