jQuery學習筆記（一）樣式篇1

前言

jQuery是一個JavaScript代碼庫（或者JavaScript框架）。jQuery的宗旨是「Write Less，Do more」（寫更少的代碼，作更多的事情）。
jQuery的核心特性能夠總結爲：具備獨特的鏈式語法和短小清晰的多功能接口；具備高效靈活的css選擇器，而且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各類主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

jQuery學習之樣式篇

選擇器

選擇器	描述
$(「parent > child」)	子選擇器：選擇全部指定的「parent」元素中指定的「child」的直接子元素，相鄰上下級關係
$(「ancestor descendant」)	後代選擇器：選擇給定的祖先元素的全部後代元素，包含這個元素的直接子元素或者、孫子、曾孫等
$(「prev + next」)	相鄰兄弟選擇器：選擇緊跟在「prev」元素後的「next」元素
$(「prev ~ siblings」)	通常兄弟選擇器：匹配「prev」元素以後的全部兄弟元素。通常兄弟指具備相同的父元素，並匹配過濾「siblings」選擇器
$(":first")	匹配第一個元素，如$(「input:first」)找到的是第一個input
$(":last")	匹配最後一個元素
$(":not(selector)")	選擇全部不是給定選擇器的元素
$(":eq(index)")	選擇索引值爲index的元素
$(":gt(index)")	選擇全部索引值大於index的元素
$(":lt(index)")	選擇全部索引值小於index的元素
$(":even")	索引值爲偶數的元素，從零開始
$(":odd")	索引值爲奇數的元素，從零開始
$(":header")	選擇全部標題元素，如h1，h2等
$(":lang(language)")	選擇指定語言的元素
$(":root")	選擇該文檔的根元素
$(":animated")	全部正在執行動畫效果的元素
$(":contains(text)")	全部包含指定文本的元素，若是匹配的文本包含在其子元素中，一樣匹配
$(":has(selector)")	全部元素中至少包含指定選擇器的元素
$(":parent")	全部包含子元素或者文本的元素
$(":empty")	全部沒有子元素的元素

選擇器	描述
$(":visible")	選擇全部顯示的元素
$(":hidden")	選擇全部隱藏的元素

屬性選擇器 $(「input[name~-‘objname’]」)

$("[attribute|-‘value’]")選擇指定屬性值等於給定字符串或以該文字串爲前綴（該字符串後跟一個連字符"-"）的元素

選擇器	描述
$("[attribute*=‘value’]")	選擇指定屬性包含給定的子字符串的元素
$("[attribute~-‘value’]")	選擇指定屬性用空格分割的值中包含一個給定值的元素
$("[attribute=‘value’]")	選擇指定屬性是給定值的元素
$("[attribute!=‘value’]")	選擇指定屬性不等於給定值的元素
$("[attribute^=‘value’]")	選擇指定屬性是以給定字符串開始的元素
("[attribute ("[attribute-‘value’]")	選擇指定屬性是以給定字符串結尾的元素
$("[attribute]")	選擇全部具備指定屬性的元素
$("[attributeFilter1][attributeFilterN]")	選擇匹配全部指定的屬性篩選器的元素

表單元素選擇器

選擇器	描述
$(":input")	選擇全部input，textarea，select和button元素
$(":text")	全部文本框
$(":password")	全部密碼框
$(":radio")	全部單選按鈕
$(":checkbox")	全部複選框
$(":submit")	全部提交按鈕
$(":image")	全部圖像域
$(":reset")	全部重置按鈕
$(":button")	全部按鈕
$(":file")	全部文件域

表單對象屬性篩選選擇器

選擇器	描述
$(":enabled")	匹配可用的表單元素
$(":disabled")	匹配不可用的表單元素
$(":checked")	匹配被選中的<input>元素
$(":selected")	匹配被選中的<option>元素

jQuery選擇器之特殊選擇器this

this和$(this) 的區別？
答：this 是JavaScript中的關鍵字，指的是當前的上下文對象，簡單的說就是方法/屬性的擁有者；
eg:

var ilucifer = {
name:"寒江",
getName:funcion(){
		//this,就是imooc對象
		return this.name;
	}
}
ilucifer .getName();//寒江
複製代碼

在JavaScript中this是動態的，即這個上下文對象都是能夠被動態改變的(能夠經過call,apply等方法)
一樣的在DOM中this就是指向了這個html元素對象，由於this就是DOM元素自己的一個引用
經過把$()方法傳入當前的元素對象的引用this，把這個this加工成jQuery對象。

結尾

本文整理自慕課網jQuery基礎 (一)—樣式篇，課程連接：www.imooc.com/learn/418；
做者：Aaron艾倫www.imooc.com/u/290139/co…
謝謝

歡迎關注微信公衆號weyoung，記錄學習筆記和一些有趣的東西，歡迎交流~~

更多聯繫方式

平臺	連接
我的博客	www.wanglixia.top/
預覽項目：	nelucifer.gitee.io/
我的微信公衆號：	weyoung
segmentfault:	segmentfault.com/u/nelucifer
CSDN:	me.csdn.net/wlx001
簡書：	www.jianshu.com/u/99211cc23…
掘金：	juejin.im/user/59b08c…