jQuery 屬性 文字 元素及尺寸位置操作

2022-07-15 00:30:18 字數 4077 閱讀 3778

今日重點:

一、jquery 屬性操作

jquery 常用屬性操作有三種:prop() / attr() / data() ;

1、元素固有屬性值 prop()

(1)獲取屬性語法

prop("屬性")

(2)設定屬性語法

prop("屬性","屬性值")

注意:prop() 除了普通屬性操作,更適合操作表單屬性:disabled / checked / selected 等。

2、元素自定義屬性值 attr()

(1)獲取屬性語法

attr("屬性") 類似於原生getattribute()

(2)設定屬性語法

** attr("屬性","屬性值") 類似於原生的setattribute()**

注意:attr() 除了普通屬性操作,更適合操作自定義屬性

3、 資料快取 data()

data() 方法可以在指定的元素上訪問資料,並不會修改 dom 元素結構。一旦頁面重新整理,之前存放的資料都將被移除。

(1)附加資料語法

date("name","value") 向被選元素附加資料

(2)獲取資料語法

date("name'") 向被選元素獲取資料

注意:同時,還可以讀取 html5 自定義屬性 data-index ,得到的是數字型。

4、案例:購物車案例模組-全選

(1)全選思路:裡面3個小的核取方塊按鈕(j-checkbox)選中狀態(checked)跟著全選按鈕(checkall)走。

(2)因為checked 是核取方塊的固有屬性,此時我們需要利用prop()方法獲取和設定該屬性。

(3)把全選按鈕狀態賦值給3小核取方塊就可以了。

(4)當我們每次點選小的核取方塊按鈕,就來判斷:

(5)如果小核取方塊被選中的個數等於3 就應該把全選按鈕選上,否則全選按鈕不選。

(6):checked 選擇器 :checked 查詢被選中的表單元素。

二、jquery 文字屬性值

jquery的文字屬性值常見操作有三種:html() / text() / val() ;分別對應js中的 innerhtml 、innertext 和 value 屬性。

1、jquery內容文字值

(1)普通元素內容 html() (相當於原生 inner html)

html() 獲取元素內容

html("內容") 設定元素內容

(2)普通元素文字內容 text() (相當於原生 innertext)

text() 獲取元素的文字內容

text("文字內容") 設定元素的文字內容

(3)表單的值 val() (相當於原生value)

val() 獲取表單的值

val("內容") 設定表單的值

** 注意:html() 可識別標籤,text() 不識別標籤。**

2、 案例:購物車案例模組-增減商品數量

(1)核心思路:首先宣告乙個變數,當我們點選+號(increment),就讓這個值++,然後賦值給文字框。

(2)注意1: 只能增加本商品的數量, 就是當前+號的兄弟文字框(itxt)的值。

(3)修改表單的值是val() 方法

(4)注意2: 這個變數初始值應該是這個文字框的值,在這個值的基礎上++。要獲取表單的值

(5)減號(decrement)思路同理,但是如果文字框的值是1,就不能再減了。

3、案例:購物車案例模組-修改商品小計

(1)核心思路:每次點選+號或者-號,根據文字框的值 乘以 當前商品的** 就是 商品的小計

(2)注意1: 只能增加本商品的小計, 就是當前商品的小計模組(p-sum)

(3)修改普通元素的內容是text() 方法

(4)注意2: 當前商品的**,要把¥符號去掉再相乘 擷取字串 substr(1)

(5)parents(『選擇器』) 可以返回指定祖先元素

(6)最後計算的結果如果想要保留2位小數 通過 tofixed(2) 方法

(7)使用者也可以直接修改表單裡面的值,同樣要計算小計。 用表單change事件

(8)用最新的表單內的值 乘以 單價即可 但是還是當前商品小計

補充:案例購物車--限制功能

三、jquery 元素操作

1、遍歷元素

(1)語法1:

$('選擇器/元素').each(function(index,domele)); 主要用於 dom的處理。

注:index是每個元素的索引號;domele是每個dom元素物件,不是jquery物件,所以要想使用jquery方法,需要給這個dom元素轉化為jquery物件 $(domele)

(2)語法2:

$.each(obj,function(index,element)); 主要用來處理物件/陣列

2、案例:購物車案例模組-計算總計和總額

(1)把所有文字框中的值相加就是總額數量,總計同理。

(2)文字框裡面的值不同,如果想要相加需要用 each() 遍歷,宣告乙個變數做計數器,累加即可。

3、建立、新增、刪除

1)建立

2)新增

(1)內部新增 --- $('ul').prepend(li)//新增在所有孩子的前面

2、 jquery 位置操作

1)offset() -- 可以設定修改也可以獲取元素

(1)相對於文件的偏移位置(跟帶有定位的父級沒有關係)

(2)語法:$('div').offset().top/left;--- 獲取

$('div').offset()--- 設定修改

2)position() -- 獲取元素偏移

(1)返回被選元素相對於帶有定位的父級偏移量,如果父級沒有,就以文件為準。

(2)只能獲取不能修改

(3)語法:$('div').position();

$('div').position().top/.left;

3)scrolltop()/scrollleft() -- 設定獲取元素被卷去的頭部/左側

不跟引數是獲取,引數為不帶單位的數字則是設定被卷去的頭部

3、 案例:帶有動畫的返回頂部

(1)核心原理: 使用animate動畫返回頂部。

(2)animate動畫函式裡面有個scrolltop 屬性,可以設定位置

(3)但是是元素做動畫,因此 $(「body,html」).animate()

4、案例: 品優購電梯導航(上)

(1)當我們滾動到 今日推薦 模組,就讓電梯導航顯示出來

(2)點選電梯導航頁面可以滾動到相應內容區域

(3)核心演算法:因為電梯導航模組和內容區模組一一對應的

(4)當我們點選電梯導航某個小模組,就可以拿到當前小模組的索引號

(5)就可以把animate要移動的距離求出來:當前索引號內容區模組它的offset().top

(6)然後執行動畫即可

5、案例:品優購電梯導航(下)

(1)當我們點選電梯導航某個小li, 當前小li 新增current類,兄弟移除類名

(2)當我們頁面滾動到內容區域某個模組, 左側電梯導航,相對應的小li模組,也會新增current類, 兄弟移除current類。

(3)觸發的事件是頁面滾動,因此這個功能要寫到頁面滾動事件裡面。

(4)需要用到each,遍歷內容區域大模組。 each裡面能拿到內容區域每乙個模組元素和索引號

(5)判斷的條件: 被卷去的頭部 大於等於 內容區域裡面每個模組的offset().top

(6)就利用這個索引號找到相應的電梯導航小li新增類。

五、今日總結

有關jquery介紹及樣式、效果a=href""

HTML 文字元素

html5規範指出 使用元素應該完全從元素的語義出發。但是由於歷史遺留及使用者至上的原則,這種語義會寬鬆許多。元素名稱說明a 生成超連結 br強制換行 wbr可安全換行 b標記一段文字但不強調 strong 表示重要 i表示外文或科學術語 em表示強制 code 表示計算機 var表示程式輸出 sa...

HTML 文字元素

html5中支援的元素 html5元素週期表 h1h6 表示1級標題6級標題 段落,paragraphs lorem lorem,亂數假文,沒有任何實際含義的文字 沒有語義,僅用於設定樣式 以前 某些元素在顯示時會獨佔一行 塊級元素 而某些元素不會 行級元素 到了html5,已經棄用這種說法。預格式...

html的文字元素

1.b元素 用於加粗一段文字,如 我是一段被加粗的文字。用於表示關鍵字和產品名稱。2.strong元素 作用與b元素一樣,用於加粗一段文字,來強調一段文字,表示重要的文字。3.br元素和wbr元素 br元素表示強制換行。wbr元素表示安全換行。4.i元素 用於傾斜一段文字,如 我是一段傾斜的文字。用...