前端培訓-中級階段（8）- jQuery元素屬性樣式操做（2019-08-01期）

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，如今前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提高技術水平，打牢基礎知識的中心思想，咱們開課啦（每週四）。

很久沒有更文，有沒有人想我呀。我沒有摸魚，最近調研了一下 vue-element-admin，用來作了個小項目。發現本身須要學習的地方還有不少啊。

今日分內容

1. attr()、prop()
2. addClass()、removeClass()、toggleClass()
3. html()、text()、val()
4. offset()、position()
5. css()
6. animate()、stop()、delay()

attr() 與 prop()

差別性，在以前的文章中就已經講過了。這裏說一下重點。
attr() 對應 attribute ，是標籤的屬性。如 href,src,id,class
prop() 對應 properties ，是標籤的狀態（基本是Boolean類型）。如 checked、disabled

addClass()、removeClass()、toggleClass()

用於操做標籤的 class 屬性，封裝的一系列方法（對應原生 classList）。

1. $('p').addClass('wrap') 會給全部的p標籤增長一個 warp 的 class。若是已經有了，就不會重複操做。
2. $('p').removeClass('wrap') 會給全部的p標籤移除 warp 的 class。若是沒有，就不會操做。
3. $('p').toggleClass('wrap') 會給全部的p標籤切換 warp 這個class。若是有，就刪除。若是沒有，就添加。

html()、text()、val()

也在以前講過了。

1. html() 對應 innerHTML
2. text() 對應 innerText
3. val() 對應 value
4. 其實也能夠用作 xss 防禦。先用 text 寫內容，而後用 html 讀內容。
   固然，仍是建議，不要相信用戶的輸入。都用 text() 來寫入內容。

offset()、position()

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

css()

獲取css值支持多種寫法。

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

設置css值也支持多種寫法

1. $("p").css("color",'#0ff');
2. $("p").css({"color":'#c0c','font-size': '18px',backgroundColor: '#0c0'});
   推薦使用鍵值對的方法。若是是有斜槓的，能夠加引號，或者改爲大寫。
3. $("p").css('font-size',()=>50*Math.random()+'px'); 隨機字體大小。
   其實也能夠根據index來作漸進色彩等等。。
   

animate()、stop()、delay()

1. animate支持兩種入參方式

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

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

      1. speed - 設置動畫的速度
      2. easing - 規定要使用的 easing 函數
      3. callback - 規定動畫完成以後要執行的函數
      4. step - 規定動畫的每一步完成以後要執行的函數
      5. queue - 布爾值。指示是否在效果隊列中放置動畫。若是爲 false，則動畫將當即開始
      6. specialEasing - 來自 styles 參數的一個或多個 CSS 屬性的映射，以及它們的對應 easing 函數
2. stop 用來暫停以前的動畫
3. delay 用來執行等待動做

總結

jQuery 系列到這裏就結束了。jQuery內容很少，可是API都是經典。

固然，新的瀏覽器把一些常規操做都集成了。慢慢的 jQuery 會淡出咱們的視野。

微信公衆號：前端linong

初級階段文章目錄

1. 前端培訓-初級階段（17） - 數據存儲（cookie、session、stroage）
2. 前端培訓-初級階段（13） - 正則表達式
3. 前端培訓-初級階段（13） - 類、模塊、繼承
4. 前端培訓-初級階段（13） - ECMAScript （內置對象、函數）
5. 前端培訓-初級階段（13） - ECMAScript （語法、變量、值、類型、運算符、語句）
6. 前端培訓-初級階段（1三、18）
7. 前端培訓-初級階段（9 -12）
8. 前端培訓-初級階段（5 - 8）
9. 前端培訓-初級階段（1 - 4）

中級階段文章目錄

1. 前端培訓-中級階段（2） - 事件(event) 事件冒泡、捕獲 - （2019-06-20期）
2. 前端培訓-中級階段（3） - DOM 文檔對象模型（2019-06-27期）
3. 前端培訓-中級階段（4）- BOM 瀏覽器對象模型（2019-07-04期）
4. 前端培訓-中級階段（5）- jQuery的概念與基本使用（2019-07-11期）
5. 前端培訓-中級階段（6）- jQuery元素節點操做（2019-07-18期）
6. 前端培訓-中級階段（7）- jQuery的事件綁定鏈式操做及原理（2019-07-25期）

資料

1. 前端培訓目錄、前端培訓規劃、前端培訓計劃
2. jQuery 速查地址