成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端培訓-中級階段(8)- jQuery元素屬性樣式操作(2019-08-01期)

james / 1067人閱讀

摘要:前端最基礎的就是。對應,是標簽的屬性。獲取匹配元素相對父元素的偏移。返回的對象包含兩個整型屬性和。一組包含作為動畫屬性和終值的樣式屬性和及其值的集合動畫的額外選項。指示是否在效果隊列中放置動畫。

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

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

今日份內容

attr()、prop()

addClass()、removeClass()toggleClass()

html()、text()、val()

offset()position()

css()

animate()、stop()、delay()

attr()prop()

差異性,在之前的文章中就已經講過了。這里說一下重點。
attr() 對應 attribute ,是標簽的屬性。如 href,src,id,class
prop() 對應 properties ,是標簽的狀態(tài)(基本是Boolean類型)。如 checked、disabled

addClass()、removeClass()、toggleClass()

用于操作標簽的 class 屬性,封裝的一系列方法(對應原生 classList)。

$("p").addClass("wrap") 會給所有的p標簽增加一個 warp 的 class。如果已經有了,就不會重復操作。

$("p").removeClass("wrap") 會給所有的p標簽移除 warp 的 class。如果沒有,就不會操作。

$("p").toggleClass("wrap") 會給所有的p標簽切換 warp 這個class。如果有,就刪除。如果沒有,就添加。

html()text()、val()

也在之前講過了。

html() 對應 innerHTML

text() 對應 innerText

val() 對應 value

其實也可以用做 xss 防護。先用 text 寫內容,然后用 html 讀內容。
當然,還是建議,不要相信用戶的輸入。都用 text() 來寫入內容。

offset()、position()

offset
獲取匹配元素在當前視口的相對偏移。
返回的對象包含兩個整型屬性:top 和 left,以像素計。此方法只對可見元素有效。

offset
獲取匹配元素相對父元素的偏移。
返回的對象包含兩個整型屬性:top 和 left。為精確計算結果,請在補白、邊框和填充屬性上使用像素單位。此方法只對可見元素有效。

css()

獲取css值支持多種寫法。

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

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

設置css值也支持多種寫法

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

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

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

animate()、stop()、delay()

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

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

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

speed - 設置動畫的速度

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

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

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

queue - 布爾值。指示是否在效果隊列中放置動畫。如果為 false,則動畫將立即開始

specialEasing - 來自 styles 參數(shù)的一個或多個 CSS 屬性的映射,以及它們的對應 easing 函數(shù)

stop 用來暫停之前的動畫

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

總結

jQuery 系列到這里就結束了。jQuery內容不多,但是API都是經典。

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

微信公眾號:前端linong

初級階段文章目錄

前端培訓-初級階段(17) - 數(shù)據(jù)存儲(cookie、session、stroage)

前端培訓-初級階段(13) - 正則表達式

前端培訓-初級階段(13) - 類、模塊、繼承

前端培訓-初級階段(13) - ECMAScript (內置對象、函數(shù))

前端培訓-初級階段(13) - ECMAScript (語法、變量、值、類型、運算符、語句)

前端培訓-初級階段(13、18)

前端培訓-初級階段(9 -12)

前端培訓-初級階段(5 - 8)

前端培訓-初級階段(1 - 4)

中級階段文章目錄

前端培訓-中級階段(2) - 事件(event) 事件冒泡、捕獲 - (2019-06-20期)

前端培訓-中級階段(3) - DOM 文檔對象模型(2019-06-27期)

前端培訓-中級階段(4)- BOM 瀏覽器對象模型(2019-07-04期)

前端培訓-中級階段(5)- jQuery的概念與基本使用(2019-07-11期)

前端培訓-中級階段(6)- jQuery元素節(jié)點操作(2019-07-18期)

前端培訓-中級階段(7)- jQuery的事件綁定鏈式操作及原理(2019-07-25期)

資料

前端培訓目錄、前端培訓規(guī)劃、前端培訓計劃

jQuery 速查地址

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

轉載請注明本文地址:http://systransis.cn/yun/105464.html

相關文章

  • 前端培訓-中級階段8)- jQuery元素屬性樣式操作2019-08-01

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

    everfly 評論0 收藏0
  • 前端培訓-中級階段8)- jQuery元素屬性樣式操作2019-08-01

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

    bang590 評論0 收藏0
  • 前端培訓-中級階段(11、12)- 跨域請求原理以及實現(xiàn)(2019-08-22

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

    binaryTree 評論0 收藏0
  • 前端培訓-中級階段(10)- 同源策略(2019-08-15

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

    heartFollower 評論0 收藏0
  • 前端培訓-中級階段(9)- 原生Ajax的運行原理與實現(xiàn)(2019-08-08

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

    anonymoussf 評論0 收藏0

發(fā)表評論

0條評論

james

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<