JQuery 的基本命令

2022-08-25 17:09:33 字數 4091 閱讀 4110

呼叫jquery的格式

筆記

1.現在讓我們開始寫第乙個jquery語句,所有jquery方法都是由$開始的,通常稱作為美元符號,或者簡稱為bling

jquery通過選擇器來選擇乙個元素的,然後操作元素做些改變。

eg 1(按鈕的回彈效果):

explain

1.用$("button")來選中按鈕,然後用.addclass("animated bounce")給按鈕加css class。

你只需要用jquery的.addclass()方法,就可以給元素加class了。

2.我們來使用$(".well")來獲取所有class為welldiv元素。

仔細想想為什麼需要在well前面新增.

然後使用jquery的.addclass()方法新增2個class:animatedshake

3. 根據id屬性來獲取元素

首先用$("#target3")來選擇id為target3button元素。

注意,就像css一樣,在id的名字前加上#

然後使用jquery的.addclass()方法來新增animatedfadeoutclass.

例如:下面的**就是給id為target6button元素新增fade out效果的:

2.通過jqueryremoveclass()方法去掉元素上的class

eg:      $("button").addclass("btn-default");

$("#target2").removeclass("btn-default");

$("#target2").removeclass("btn-default");

3.通過jquery來改變css樣式

jquery有乙個叫做.css()的方法能讓你改變元素的css樣式。

我們是這樣來把顏色改變成藍色的:

eg $("#target1").css("color", "blue");

這跟通常的css語法有點不同,這裡css的屬性和值是在引號內的,並且用逗號分開。

4prop方法

jquery有乙個.prop()的方法讓你來調整元素的屬性.

我們是這樣來讓按鈕不可選的:

$("button").prop("disabled", true);

$("button").prop("disabled", true);

5jquery 的.html 方法

jquery不僅可以改變元素開始標記和結束標記間的文字,甚至可以改變元素標記本身。

jquery的.html()方法可以新增html標籤和文字到元素,而元素之前的內容都會被方法的內容所替換掉。

我們是通過em[emphasize]標籤來重寫和強調標題文字的:

$("h3").html("jquery playground");

jquery 還有乙個類似的方法叫.text(),它只能改變文字但不能修改標記。換句話說,這個方法只會把傳進來的任何東西(包括標記)當成文本來顯示。

6jquery 的移除html元素方法(和removeclass()相區別)

jquery 有乙個.remove()的方法可以移除html元素

eg  $("#target4").remove();

7

把元素從乙個div裡移到另外乙個div裡。

8方法鏈function chaining

jquery的clone()方法可以拷貝元素。

比如,如果我想把target2left-well拷貝到right-well,我們可以這樣寫:

9 訪問父元素,同時對父元素的元素進行改變

每個html元素根據繼承屬性都有父parent元素。

舉個例子,h3元素的父元素是的父元素是body

jquery有乙個方法叫parent(),它允許你訪問指定元素的父元素。

舉個例子:讓left-well元素的父元素parent()的背景色變成藍色。

$("#left-well").parent().css("background-color", "blue")

10.獲得子元素,同時對子元素的元素進行改變

許多html元素都有children(子元素),每個子元素都從父元素那裡繼承了一些屬性。

舉個例子,每個html元素都是body的子元素, 你的 "jquery playground"h3元素是的子元素。

jquery有乙個方法叫children(),它允許你訪問指定元素的子元素。

舉個例子:讓left-well元素的子元素children()的文字顏色變成藍色。

$("#left-well").children().css("color", "blue")

11

jquery 用css選擇器來選取元素,target:nth-child(n)css選擇器允許你按照索引順序(從1開始)選擇目標元素的所有子元素。

示例:你可以給目標元素的第三個子元素新增bounce class。

$(".target:nth-child(3)").addclass("animated bounce");

12 獲取class為target且索引為奇數(偶數)的所有元素

獲取class為target且索引為奇數的所有元素,並給他們新增class。

$(".target:odd").addclass("animated shake");

記住,jquery裡的索引是從0開始的,也就是說::odd選擇第2、4、6個元素,因為target#2(索引為1),target#4(索引為3),target6(索引為5。

獲取偶數的如下

$(".target:even").addclass("animated shake")

13 讓整個body都具有效果

讓整個body都有淡出效果(fadeout):

$("body").addclass("animated fadeout");

$("body").addclass("animated hinge");

1223506202

139663031312

JQuery 基本命令

jquery js 的入口函式 window.onload function jquery 的入口函式 function 找標籤 click 點選事件是個匿名函式 css 修改css樣式 使用大括號可以寫多個樣式屬性 this 表示標籤自身 box id 選擇器 box 類 選擇器 div 標籤 選...

mysql基本命令總結 mysql基本命令總結

1.在ubuntu上安裝mysql sudo apt get install mysql server sudo apt get install mysql client 2.安裝結束後,用命令驗證是否安裝並啟動成功 sudo netstat tap grep mysql 通過上述命令檢查之後,如果...

linux終端基本命令和vi基本命令

今天學習內容 建立 了乙個基本的虛擬機器執行環境,在虛擬機器下使用cent os 6.0 系統,學習了linux終端命令 視窗的基本操作命令 和對vi 工具的簡單 操作 linux 基本命令 1 顯示當前路徑 pwd 2 切換路徑 cd 路徑名稱 絕對路徑 從根目錄開始,例如 root test3 ...