国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端培訓(xùn)-中級(jí)階段（8）- jQuery元素屬性樣式操作（2019-08-01期）

james / 1063人閱讀

摘要：前端最基礎(chǔ)的就是。對(duì)應(yīng)，是標(biāo)簽的屬性。獲取匹配元素相對(duì)父元素的偏移。返回的對(duì)象包含兩個(gè)整型屬性和。一組包含作為動(dòng)畫屬性和終值的樣式屬性和及其值的集合動(dòng)畫的額外選項(xiàng)。指示是否在效果隊(duì)列中放置動(dòng)畫。

前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思想，我們開課啦（每周四）。

好久沒有更文，有沒有人想我呀。我沒有摸魚，最近調(diào)研了一下 vue-element-admin，用來做了個(gè)小項(xiàng)目。發(fā)現(xiàn)自己需要學(xué)習(xí)的地方還有很多啊。

今日份內(nèi)容

attr()、prop()

addClass()、removeClass()、toggleClass()

html()、text()、val()

offset()、position()

css()

animate()、stop()、delay()

attr() 與 prop()

差異性，在之前的文章中就已經(jīng)講過了。這里說一下重點(diǎn)。
attr() 對(duì)應(yīng) attribute ，是標(biāo)簽的屬性。如 href,src,id,class
prop() 對(duì)應(yīng) properties ，是標(biāo)簽的狀態(tài)（基本是Boolean類型）。如 checked、disabled

addClass()、removeClass()、toggleClass()

用于操作標(biāo)簽的 class 屬性，封裝的一系列方法（對(duì)應(yīng)原生 classList）。

$("p").addClass("wrap") 會(huì)給所有的p標(biāo)簽增加一個(gè) warp 的 class。如果已經(jīng)有了，就不會(huì)重復(fù)操作。

$("p").removeClass("wrap") 會(huì)給所有的p標(biāo)簽移除 warp 的 class。如果沒有，就不會(huì)操作。

$("p").toggleClass("wrap") 會(huì)給所有的p標(biāo)簽切換 warp 這個(gè)class。如果有，就刪除。如果沒有，就添加。

html()、text()、val()

也在之前講過了。

html() 對(duì)應(yīng) innerHTML

text() 對(duì)應(yīng) innerText

val() 對(duì)應(yīng) value

其實(shí)也可以用做 xss 防護(hù)。先用 text 寫內(nèi)容，然后用 html 讀內(nèi)容。
當(dāng)然，還是建議，不要相信用戶的輸入。都用 text() 來寫入內(nèi)容。

offset()、position()

offset
獲取匹配元素在當(dāng)前視口的相對(duì)偏移。
返回的對(duì)象包含兩個(gè)整型屬性：top 和 left，以像素計(jì)。此方法只對(duì)可見元素有效。

offset
獲取匹配元素相對(duì)父元素的偏移。
返回的對(duì)象包含兩個(gè)整型屬性：top 和 left。為精確計(jì)算結(jié)果，請(qǐng)?jiān)谘a(bǔ)白、邊框和填充屬性上使用像素單位。此方法只對(duì)可見元素有效。

css()

獲取css值支持多種寫法。

$("p").css("color");

$("p").css(["color","font-size"]);

設(shè)置css值也支持多種寫法

$("p").css("color","#0ff");

$("p").css({"color":"#c0c","font-size": "18px",backgroundColor: "#0c0"});
推薦使用鍵值對(duì)的方法。如果是有斜杠的，可以加引號(hào)，或者改成大寫。

$("p").css("font-size",()=>50*Math.random()+"px"); 隨機(jī)字體大小。
其實(shí)也可以根據(jù)index來做漸進(jìn)色彩等等。。

animate()、stop()、delay()

animate支持兩種入?yún)⒎绞?/p>

(params,[speed],[easing],[fn] )
params: 一組包含作為動(dòng)畫屬性和終值的樣式屬性和及其值的集合
speed: 三種預(yù)定速度之一的字符串("slow","normal", or "fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000)
easing: 要使用的進(jìn)度效果的名稱(需要插件支持).默認(rèn)jQuery提供"linear" 和 "swing".
fn: 在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。

(params,options)
params: 一組包含作為動(dòng)畫屬性和終值的樣式屬性和及其值的集合
options: 動(dòng)畫的額外選項(xiàng)。如：

speed - 設(shè)置動(dòng)畫的速度

easing - 規(guī)定要使用的 easing 函數(shù)

callback - 規(guī)定動(dòng)畫完成之后要執(zhí)行的函數(shù)

step - 規(guī)定動(dòng)畫的每一步完成之后要執(zhí)行的函數(shù)

queue - 布爾值。指示是否在效果隊(duì)列中放置動(dòng)畫。如果為 false，則動(dòng)畫將立即開始

specialEasing - 來自 styles 參數(shù)的一個(gè)或多個(gè) CSS 屬性的映射，以及它們的對(duì)應(yīng) easing 函數(shù)

stop 用來暫停之前的動(dòng)畫

delay 用來執(zhí)行等待動(dòng)作

總結(jié)

jQuery 系列到這里就結(jié)束了。jQuery內(nèi)容不多，但是API都是經(jīng)典。

當(dāng)然，新的瀏覽器把一些常規(guī)操作都集成了。慢慢的 jQuery 會(huì)淡出我們的視野。

微信公眾號(hào)：前端linong

初級(jí)階段文章目錄

前端培訓(xùn)-初級(jí)階段（17） - 數(shù)據(jù)存儲(chǔ)（cookie、session、stroage）

前端培訓(xùn)-初級(jí)階段（13） - 正則表達(dá)式

前端培訓(xùn)-初級(jí)階段（13） - 類、模塊、繼承

前端培訓(xùn)-初級(jí)階段（13） - ECMAScript （內(nèi)置對(duì)象、函數(shù)）

前端培訓(xùn)-初級(jí)階段（13） - ECMAScript （語法、變量、值、類型、運(yùn)算符、語句）

前端培訓(xùn)-初級(jí)階段（13、18）

前端培訓(xùn)-初級(jí)階段（9 -12）

前端培訓(xùn)-初級(jí)階段（5 - 8）

前端培訓(xùn)-初級(jí)階段（1 - 4）

中級(jí)階段文章目錄

前端培訓(xùn)-中級(jí)階段（2） - 事件(event) 事件冒泡、捕獲 - （2019-06-20期）

前端培訓(xùn)-中級(jí)階段（3） - DOM 文檔對(duì)象模型（2019-06-27期）

前端培訓(xùn)-中級(jí)階段（4）- BOM 瀏覽器對(duì)象模型（2019-07-04期）

前端培訓(xùn)-中級(jí)階段（5）- jQuery的概念與基本使用（2019-07-11期）

前端培訓(xùn)-中級(jí)階段（6）- jQuery元素節(jié)點(diǎn)操作（2019-07-18期）

前端培訓(xùn)-中級(jí)階段（7）- jQuery的事件綁定鏈?zhǔn)讲僮骷霸恚?019-07-25期）

資料

前端培訓(xùn)目錄、前端培訓(xùn)規(guī)劃、前端培訓(xùn)計(jì)劃

jQuery 速查地址

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/105464.html

相關(guān)文章

  • 前端培訓(xùn)-中級(jí)階段（8）- jQuery元素屬性樣式操作（2019-08-01期）

    摘要：前端最基礎(chǔ)的就是。對(duì)應(yīng)，是標(biāo)簽的屬性。獲取匹配元素相對(duì)父元素的偏移。返回的對(duì)象包含兩個(gè)整型屬性和。一組包含作為動(dòng)畫屬性和終值的樣式屬性和及其值的集合動(dòng)畫的額外選項(xiàng)。指示是否在效果隊(duì)列中放置動(dòng)畫。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，...

    everfly 評(píng)論0 收藏0

  • 前端培訓(xùn)-中級(jí)階段（8）- jQuery元素屬性樣式操作（2019-08-01期）

    摘要：前端最基礎(chǔ)的就是。對(duì)應(yīng)，是標(biāo)簽的屬性。獲取匹配元素相對(duì)父元素的偏移。返回的對(duì)象包含兩個(gè)整型屬性和。一組包含作為動(dòng)畫屬性和終值的樣式屬性和及其值的集合動(dòng)畫的額外選項(xiàng)。指示是否在效果隊(duì)列中放置動(dòng)畫。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，...

    bang590 評(píng)論0 收藏0

  • 前端培訓(xùn)-中級(jí)階段（11、12）- 跨域請(qǐng)求原理以及實(shí)現(xiàn)（2019-08-22期）

    摘要：上節(jié)我們講了同源策略，這節(jié)我們講講如何跨域。當(dāng)這些從的腳本執(zhí)行出錯(cuò)，因?yàn)檫`背了同源策略為了保證用戶信息不被泄露，錯(cuò)誤信息不會(huì)顯示出來，取而代之只會(huì)返回一個(gè)。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思想，我們開課啦（每...

    binaryTree 評(píng)論0 收藏0

  • 前端培訓(xùn)-中級(jí)階段（10）- 同源策略（2019-08-15期）

    摘要：同源策略是什么同源策略是瀏覽器的一個(gè)安全功能，不同源的數(shù)據(jù)禁止訪問?；蛟S你可以說驗(yàn)證，在瀏覽器沒有同源策略的情況下這些都可以繞過去。總結(jié)同源策略是蠻好的，防御了大部分的攻擊。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思...

    heartFollower 評(píng)論0 收藏0

  • 前端培訓(xùn)-中級(jí)階段（9）- 原生Ajax的運(yùn)行原理與實(shí)現(xiàn)（2019-08-08期）

    摘要：前端最基礎(chǔ)的就是。的原理瀏覽器發(fā)送請(qǐng)求，服務(wù)器給出響應(yīng)。保持之前的界面不變化。的核心創(chuàng)建一個(gè)對(duì)象，用于發(fā)起請(qǐng)求設(shè)置為請(qǐng)求，請(qǐng)求發(fā)送請(qǐng)求。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思想，我們開課啦（每周四）。 ajax ...

    anonymoussf 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<