jquery學習基礎使用

2021-07-14 03:10:44 字數 2947 閱讀 8019

jquery獲取元素進行操作

一:基礎方式(四種)

$(this).hide()

表示:jquery 的hide() 函式,隱藏當前的 html 元素。

$("#test").hide()

表示:jquery 的hide() 函式,隱藏id="test" 的元素。

$("p").hide()

表示:jquery 的hide() 函式,隱藏所有 元素。

$(".test").hide()

表示:jquery 的 hide() 函式,隱藏所有 class="test" 的元素。

二:混合方式

$("p") 選取 元素。

$("p.intro") 選取所有 class="intro" 的 元素。

$("p#demo") 選取所有 id="demo" 的 元素。

$(this)

當前 html 元素

$("p")

所有 元素

$("p.intro")

所有 class="intro" 的 元素

$(".intro")

所有 class="intro" 的元素

$("#intro")

id="intro" 的元素

$("ul li:first")

每個 的第乙個 元素

所有帶有以 ".jpg" 結尾的屬性值的 href 屬性

$("div#intro .head")

id="intro" 的 元素中的所有 class="head" 的元素

藍色文字屬於xpath的表示式

jquery的元素選取的原理

$(selector).action();--à $(選取元素).動作   注意$是美元符號

注意:所有jquery的全寫在document ready的函式中:

$(document).ready(function(),speed,callback);

必需的 params 引數定義形成動畫的 css 屬性。

可選的 speed 引數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒。

可選的 callback 引數是動畫完成後所執行的函式名稱。

jqquery stop() 方法

jquery stop() 方法用於停止動畫或效果,在它們完成之前。

stop() 方法適用於所有 jquery 效果函式,包括滑動、淡入淡出和自定義動畫。

jquery動畫的組合

jquery允許多個動畫同時進行通過 . 鏈結;

舉例$("#p1").css("color","red").slideup(2000).slidedown(2000);

jquery的html元素的操作

文字內容進行操作

text() - 設定或返回所選元素的文字內容

html() - 設定或返回所選元素的內容(包括 html 標記)

val() - 設定或返回表單字段的值---返回keyvalue中的value值

html()和text()返回的文字內容的區別

html()返回的內容是元素中所有可以顯示的內容樣式的文字

text()返回的內容是元素中的文字在樣式起作用後的文字內容

元素的文字屬性進行操作

文字屬性的方法attr()

$("#test").attr("href","");

例如input的placeholder也可以當作一種屬性;

屬性就是不是在style裡面的內容,功能屬性

元素文字處理前後插入內容

prepend() - 在被選元素的開頭插入內容

after() - 在被選元素之後插入內容

before() - 在被選元素之前插入內容

前兩個方法主要是插入文字內容的一種做法,而後兩種方法可以插入相應的元素;例如p標籤

刪除元素/內容(而非樣式)

remove() - 刪除被選元素(及其子元素)例如測試

這個方法刪除div

empty() - 從被選元素中刪除子元素    例如測試

這個方法刪除p標籤

刪除p標籤中的class為test的元素:$("p").remove(".test");

文字樣式的修改(css和class)

addclass() - 向被選元素新增乙個或多個類

removeclass() - 從被選元素刪除乙個或多個類

toggleclass() - 對被選元素進行新增/刪除類的切換操作

css() - 設定或返回樣式屬性

eg:$("h1,h2,p").addclass("blue");

$("h1,h2,p").removeclass("blue");

$("h1,h2,p").toggleclass("blue");

$("p").css();

jquery 尺寸 方法

width() 方法設定或返回元素的寬度(不包括內邊距、邊框或外邊距)。

height() 方法設定或返回元素的高度(不包括內邊距、邊框或外邊距)。

innerwidth() 方法返回元素的寬度(包括內邊距)。

innerheight() 方法返回元素的高度(包括內邊距)。

outerwidth() 方法返回元素的寬度(包括內邊距和邊框)。

outerheight() 方法返回元素的高度(包括內邊距和邊框)。

outerwidth(true) 方法返回元素的寬度(包括內邊距、邊框和外邊距)。

outerheight(true) 方法返回元素的高度(包括內邊距、邊框和外邊距)。

Jquery基礎使用

選擇表示式可以是 css選擇器 document 選擇整個文件物件 myid 選擇id 為myid 的網頁元素 divmyclass 選擇class 為myclass 的div元素 input name first 選擇name 屬性等於 first 的input元素 也可以是 jquery 特有的...

Jquery基礎學習

1.資料儲存 data name 返回元素上儲存的相應名字的資料,可以用data name,value 來設定 如果jquery集合指向多個元素,那將只返回第乙個元素的對應資料 div data blah undefined div data blah hello blah設定為hello div ...

jQuery基礎學習

1.1常見的j ascript庫 jquery prototype yui dojo ext js 移動端的zepto 這些庫都是對原生j ascript的封裝,內部都是用j ascript實現的 官網 版本 1x 相容ie678 等低版本瀏覽器,官網不再更新 2x 不相容ie678等低版本瀏覽器,...