前言
jQuery是一個(gè)JavaScript代碼庫(kù)（或者JavaScript框架）。jQuery的宗旨是“Write Less，Do more”（寫(xiě)更少的代碼，做更多的事情）。 jQuery的核心特性可以總結(jié)為：具有獨(dú)特的鏈?zhǔn)秸Z(yǔ)法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展；擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
jQuery學(xué)習(xí)之樣式篇
選擇器
| 選擇器 | 描述 |
|---|---|
| $("parent > child") | 子選擇器：選擇所有指定的“parent”元素中指定的“child”的直接子元素，相鄰上下級(jí)關(guān)系 |
| $("ancestor descendant") | 后代選擇器：選擇給定的祖先元素的所有后代元素，包含這個(gè)元素的直接子元素或者、孫子、曾孫等 |
| $("prev + next") | 相鄰兄弟選擇器：選擇緊跟在“prev”元素后的“next”元素 |
| $("prev ~ siblings") | 一般兄弟選擇器：匹配“prev”元素之后的所有兄弟元素。一般兄弟指具有相同的父元素，并匹配過(guò)濾“siblings”選擇器 |
| $(":first") | 匹配第一個(gè)元素，如$("input:first")找到的是第一個(gè)input |
| $(":last") | 匹配最后一個(gè)元素 |
| $(":not(selector)") | 選擇所有不是給定選擇器的元素 |
| $(":eq(index)") | 選擇索引值為index的元素 |
| $(":gt(index)") | 選擇所有索引值大于index的元素 |
| $(":lt(index)") | 選擇所有索引值小于index的元素 |
| $(":even") | 索引值為偶數(shù)的元素，從零開(kāi)始 |
| $(":odd") | 索引值為奇數(shù)的元素，從零開(kāi)始 |
| $(":header") | 選擇所有標(biāo)題元素，如h1，h2等 |
| $(":lang(language)") | 選擇指定語(yǔ)言的元素 |
| $(":root") | 選擇該文檔的根元素 |
| $(":animated") | 所有正在執(zhí)行動(dòng)畫(huà)效果的元素 |
| $(":contains(text)") | 所有包含指定文本的元素，如果匹配的文本包含在其子元素中，同樣匹配 |
| $(":has(selector)") | 所有元素中至少包含指定選擇器的元素 |
| $(":parent") | 所有包含子元素或者文本的元素 |
| $(":empty") | 所有沒(méi)有子元素的元素 |
| 選擇器 | 描述 |
|---|---|
| $(":visible") | 選擇所有顯示的元素 |
| $(":hidden") | 選擇所有隱藏的元素 |
屬性選擇器 $("input[name~-'objname']")
$("[attribute|-'value']")選擇指定屬性值等于給定字符串或以該文字串為前綴（該字符串后跟一個(gè)連字符"-"）的元素
| 選擇器 | 描述 |
|---|---|
| $("[attribute*='value']") | 選擇指定屬性包含給定的子字符串的元素 |
| $("[attribute~-'value']") | 選擇指定屬性用空格分割的值中包含一個(gè)給定值的元素 |
| $("[attribute='value']") | 選擇指定屬性是給定值的元素 |
| $("[attribute!='value']") | 選擇指定屬性不等于給定值的元素 |
| $("[attribute^='value']") | 選擇指定屬性是以給定字符串開(kāi)始的元素 |
|
|
選擇指定屬性是以給定字符串結(jié)尾的元素 |
| $("[attribute]") | 選擇所有具有指定屬性的元素 |
| $("[attributeFilter1][attributeFilterN]") | 選擇匹配所有指定的屬性篩選器的元素 |
表單元素選擇器
| 選擇器 | 描述 |
|---|---|
| $(":input") | 選擇所有input，textarea，select和button元素 |
| $(":text") | 所有文本框 |
| $(":password") | 所有密碼框 |
| $(":radio") | 所有單選按鈕 |
| $(":checkbox") | 所有復(fù)選框 |
| $(":submit") | 所有提交按鈕 |
| $(":image") | 所有圖像域 |
| $(":reset") | 所有重置按鈕 |
| $(":button") | 所有按鈕 |
| $(":file") | 所有文件域 |
表單對(duì)象屬性篩選選擇器
| 選擇器 | 描述 |
|---|---|
| $(":enabled") | 匹配可用的表單元素 |
| $(":disabled") | 匹配不可用的表單元素 |
| $(":checked") | 匹配被選中的 <input>元素 |
| $(":selected") | 匹配被選中的 <option>元素 |
jQuery選擇器之特殊選擇器this
this和$(this) 的區(qū)別？ 答：this 是JavaScript中的關(guān)鍵字，指的是當(dāng)前的上下文對(duì)象，簡(jiǎn)單的說(shuō)就是方法/屬性的擁有者； eg:
<pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box; overflow: auto !important; font-family: Consolas, Menlo, Courier, monospace; font-size: 10px; background: rgb(29, 31, 33); border: 1px solid rgb(136, 136, 136); padding: 2px; color: rgb(80, 97, 109); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; line-height: 12px;">
var ilucifer = {name:"寒江",getName:funcion(){//this,就是imooc對(duì)象return this.name;}}ilucifer .getName();//寒江
</pre>
在JavaScript中this是動(dòng)態(tài)的，即這個(gè)上下文對(duì)象都是可以被動(dòng)態(tài)改變的(可以通過(guò)call,apply等方法) 同樣的在DOM中this就是指向了這個(gè)html元素對(duì)象，因?yàn)閠his就是DOM元素本身的一個(gè)引用 通過(guò)把$()方法傳入當(dāng)前的元素對(duì)象的引用this，把這個(gè)this加工成jQuery對(duì)象。
結(jié)尾
本文整理自慕課網(wǎng)jQuery基礎(chǔ) (一)—樣式篇，課程鏈接：https://www.imooc.com/learn/418； 作者：Aaron艾倫https://www.imooc.com/u/290139/courses?sort=publish 謝謝
歡迎關(guān)注微信公眾號(hào)weyoung，記錄學(xué)習(xí)筆記和一些有趣的東西，歡迎交流~~
更多聯(lián)系方式
| 平臺(tái) | 鏈接 |
|---|---|
| 個(gè)人博客 | https://www.wanglixia.top/ |
| 預(yù)覽項(xiàng)目： | https://nelucifer.gitee.io/ |
| 個(gè)人微信公眾號(hào)： | weyoung |
| segmentfault: | https://segmentfault.com/u/nelucifer |
| CSDN: | https://me.csdn.net/wlx001 |
| 簡(jiǎn)書(shū)： | http://www.itdecent.cn/u/99211cc23788 |
| 掘金： | https://juejin.im/user/59b08c575188250f4850e80e |
