前端基礎05 jQuery入門

jQuery對象
在聲明一個jQuery對象變量的時候在變量名前面加上$

var $variable = jQuery對象
var $pEle = $("#p3") jQuery對象，變量名前面加個$符方便識別
var variable = DOM對象
$variable[0]//jQuery對象轉成DOM對象

與DOM對象的區別

$("#i1").html();//jQuery對象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM對象使用DOM的方法

jQuery基礎語法

查找標籤

基本選擇器
id選擇器：

$("#id")

標籤選擇器：

$("tagName")

class選擇器：

$(".className")

配合使用：

$("div.c1")  // 找到有c1 class類的div標籤

所有元素選擇器：

$("*")

組合選擇器：

$("#id, .className, tagName")

層級選擇器：

$("x y");// x的所有後代y（子子孫孫）
$("x > y");// x的所有兒子y（兒子）
$("x + y")// 找到所有緊挨在x後面的y
$("x ~ y")// x之後所有的兄弟y

基本篩選器：

:first // 第一個
:last // 最後一個
:eq(index)// 索引等於index的那個元素
:even // 匹配所有索引值爲偶數的元素，從 0 開始計數
:odd // 匹配所有索引值爲奇數的元素，從 0 開始計數
:gt(index)// 匹配所有大於給定索引值的元素
:lt(index)// 匹配所有小於給定索引值的元素
:not(元素選擇器)// 移除所有滿足not條件的標籤
:has(元素選擇器)// 選取所有包含一個或多個標籤在其內的標籤(指的是從後代元素找)

例子：

$("ul li:first") // 找到ul標籤下面第一個li標籤
$("ul li:eq(2)") // 找到ul標籤下面索引是2的li標籤
$("ul li:gt(0)") // 找到ul標籤下面索引大於0的li標籤
$("#d2 p:not(.c2)") // 在id爲d2的標籤下面，找到不包含c2樣式類的所有p標籤
$("div:has(h1)") // 找到所有後代中有h1標籤的div標籤
$("#d3 div:has(a)") // 找到包含樣式類d3的標籤下面所有含有a標籤的div標籤

屬性選擇器：

[attribute]
[attribute=value]// 屬性等於
[attribute!=value]// 屬性不等於

例子：

$("input[name='hobby']") // 找到input標籤中name=hobby的元素
$("input[type='checkbox']"); // 取到checkbox類型的input標籤
$("input[type!='text']"); // 取到類型不是text的input標籤

表單篩選器：

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

例子：

$(":checkbox")  // 找到所有的checkbox
$("input:text"); // 找到類型爲text的input標籤

表單對象屬性:

:enabled
:disabled
:checked
:selected

例子：找到可用的input標籤

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input標籤

篩選器方法

下一個元素：

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

上一個元素：

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父親元素：

$("#id").parent()
$("#id").parents()  // 查找當前元素的所有的父輩元素
$("#id").parentsUntil() // 查找當前元素的所有的父輩元素，直到遇到匹配的那個元素爲止。

兒子和兄弟元素：

$("#id").children();// 兒子們
$("#id").siblings();// 兄弟們

查找

var $c1Eles = $(".c1");
$c1Eles.find("div");

篩選
篩選出與指定表達式匹配的元素集合。這個方法用於縮小匹配的範圍。用逗號分隔多個表達式。

$("div").filter(".c1")  // 從結果集中過濾出有c1樣式類的

補充

.first() // 獲取匹配的第一個元素
.last() // 獲取匹配的最後一個元素
.not() // 從匹配元素的集合中刪除與指定表達式匹配的元素
.has() // 保留包含特定後代的元素，去掉那些不含有指定後代的元素。
.eq() // 索引值等於指定值的元素

舉例：

$("div").first()

操作標籤