2017 7 4 jq學習心得 jq其他必備知識

2021-08-03 09:32:24 字數 3885 閱讀 2020

設定屬性:

// 第乙個引數表示:要設定的屬性名稱

// 第二個引數表示:該屬性名稱對應的值

$(selector).attr(「title」, 「傳智播客」);

獲取屬性:

// 引數為:要獲取的屬性的名稱,改操作會返回指定屬性對應的值

$(selector).attr(「title」);

此時,返回指定屬性的值

移除屬性:

// 引數為:要移除的屬性的名稱

$(selector).removeattr(「title」);

注意:checked、selected、disabled要使用.prop()方法。

prop方法通常用來影響dom元素的動態狀態,而不是改變的html屬性。例如:input和button的disabled特性,以及checkbox的checked特性。

細節參考:

案例:**案例全選反選;

val()方法:

作用:設定或返回表單元素的值,例如:input,select,textarea的值

// 獲取匹配元素的值,只匹配第乙個元素

$(selector).val();

// 設定所有匹配到的元素的值

$(selector).val(「具體值」);

text() 方法:

作用:設定或獲取匹配元素的文字內容

//獲取操作不帶引數(注意:這時候會把所有匹配到的元素內容拼接為乙個字串,不同於其他獲取操作!)

$(selector).text();

//設定操作帶引數,引數表示要設定的文字內容

// 如果設定的內容包含html標籤(我要動態建立span,這時候行嗎?),那麼text這個方法會把他們當作文字內容輸出,而不會建立元素。這個text()和html()方的主要區別

$(selector).text(「我是內容」);

案例:紅鯉魚與綠鯉魚

高度操作height() :

作用:設定或獲取匹配元素的高度值

//帶引數表示設定高度

$(selector).height(200);

//不帶引數獲取高度

$(selector).height();

寬度操作width() :

作用:設定或獲取匹配元素的寬度值

//帶引數表示設定寬度

//不帶引數獲取寬度

$(selector).width(200);

css()獲取高度和height獲取高度的區別?

css()獲取的是字串,例如「100px「;height獲取的是數字100

offset()

作用:獲取或設定元素相對於文件的位置

// 無引數表示獲取,返回值為:,值是相對於document的位置

$(selector).offset();

// 有引數表示設定,引數推薦使用數值型別

$(selector).offset();

注意點:設定

offset

後,如果元素沒有定位

(預設值:

static)

,則被修改為

relative

position()

作用:獲取相對於其最近的具有定位的父元素的位置。如果沒有定位,則和上面一樣

//獲取,返回值為物件:

$(selector).position();

注意:只能獲取,不能設定。

scrolltop()

作用:獲取或者設定元素垂直方向滾動的位置

// 無引數表示獲取偏移

// 有引數表示設定偏移,引數為數值型別

$(selector).scrolltop(100);

scrollleft()

作用:獲取或者設定元素水平方向滾動的位置

$(selector).scrollleft(100);

對scrolltop的理解:

垂直滾動條位置

是可滾動區域

在可視區域上方的

被隱藏區域的高度。

如果滾動條在最上方沒有滾動

或者當前元素沒有出現滾動條,那麼這個距離為

0

案例:固定導航欄

二、jq事件機制

1、click

不會層疊;

2、bind繫結(不推薦)

$(selector).bind("click mouseenter",function(){}) 同時繫結多個事件

3、delegate

$(.parentbox).delegate("p", "click", function());

4、on (最現代的方式)

$(selector).on(event,childselector,data,function,map)

event必需。規定要從被選元素移除的乙個或多個事件或命名空間。

由空格分隔多個事件值。必須是有效的事件。

childselector可選。規定只能新增到指定的子元素上的事件處理程式(且不是選擇器本身,比如已廢棄的 delegate() 方法)。

data可選。規定傳遞到函式的額外資料。

function可選。規定當事件發生時執行的函式。

map規定事件對映 (),包含要新增到元素的乙個或多個事件,以及當事件發生時執行的函式。

// 表示給$(selector)匹配的元素繫結單擊和滑鼠進入事件

$(selector).on(「click mouseenter」, function(){});

5、事件解綁

off解綁on方式繫結的事件(重點)

// 解綁匹配元素的所有事件

$(selector).off();

// 解綁匹配元素的所有click事件

$(selector).off(「click」);

$(selector).off(「click」,".box");

// 解綁所有**的click事件,元素本身的事件不會被解綁 

$(selector).off( 「click」, 「**」 ); 

6、事件觸發

先繫結click,再觸發click

(1)

$(selector).click(); //觸發 click事件

(2)tigger

$(selector).trigger(「click」);

(3)triggerhandler

$(selector).triggerhandler(「focus」);

多了乙個功能,不觸發瀏覽器行為(只執行程式,不觸動事件,以上是都會)

只是執行程式的語言,實際上selector沒有被觸發

7、事件物件

event.data 傳遞給事件處理程式的額外資料

event.currenttarget 等同於this,當前dom物件

event.pagex 滑鼠相對於文件左部邊緣的位置

event.target 觸發事件源,不一定===this

event.stoppropagation();阻止事件冒泡

event.preventdefault(); 阻止預設行為

event.type 事件型別:click,dbclick…

event.which 滑鼠的按鍵型別:左1 中2 右3

event.keycode鍵盤按鍵**  //

獲取按下的鍵盤按鍵unicode值:

var x = event.keycode;

x 輸出結果為:

119   // 119 是字元 "w"

輸入框中獲取游標的方法 focus(),js和jq一樣

select() 選定所有內容 只有部分標籤可以使用,能夠輸入內容的標籤。

j2ee學習心得

學習是一件快樂的事,學習是一件痛苦的事,它讓你能夠把學到的東西帶來財富,它也能讓你仁慈學到的東西帶來無用武之地 看書 當你買了一本新書的時候,不要瀑布式的往下看,這是傳統的學習方法,不適合現代高科技社會的學習方法,尤其是電腦科學,為什麼以前的瀑布式軟體開發方法到今天會失敗,因為瀑布式的方法很難看到將...

Neo4J學習心得

乙個基於圖資料庫的相關應用開發專案。因為企業版實在太貴,用社群版的湊合著,也能用,基於3.5.x。圖資料庫的資料來自生產環境的資料庫,不會有資料回流。專案要求圖資料庫每天保持最新,或者保持到前一天,但是沒有給我哪些資料是新的 這樣就只能全量更新了。解決方法可以寫乙個定時啟動指令碼 停止服務 刪除老資...

學習心得 python學習心得

自從來了深圳工作以後,尤其是屢屢面試碰壁以後。發現其實自己的知識面很窄,做筆試題的時候絞盡腦汁還是漏洞百出,並不是不會做,而是出現一大堆不該有的失誤。每次被問道,對資料庫了解嗎?說一大堆看起來很高階的東西 好啊,那我們寫幾個sql語句吧。馬上完蛋了,沒了手冊關鍵字都記不起。了解哪幾種指令碼語言,sh...