1.Html常用標籤

1. 常用塊級標籤

​ h : 標題
​ p : 段落
​ div : 容器
​ ul>li : 無序列表
​ form : 表單
​
2. 常用行內標籤

a : 超連結
span : 小容器
img : 插入圖 (寬高有效)
input : 輸入框,text/password/radio/checkbox/file/reset/button (寬高有效)
label : 標籤
em : 斜體(語義)
i : 斜體
b : 粗體
strong : 粗體(語義)

1. 常見標籤屬性

   1.一般標籤屬性

   ​ id : id標識
   ​ style : 行內樣式
   ​ href : a超連結地址,link外鏈css路徑
   ​ src : 圖片路徑,script外鏈js路徑
   ​ alt : 圖片替換文字

   1. 表單控制元件屬性
      name : 控制元件名字
      type : 控制元件型別
      value : 控制元件值
      outline : 輪廓

2. Css常用樣式

   1. 實體化樣式

      width : 寬
      height : 高
      background : 背景圖片,背景位置,背景重複,背景顏色
      border : 邊框寬度,邊框樣式,邊框顏色

   2. 間距和位置樣式

      padding : 內邊距
      margin : 外邊距
      float : 浮動
      position : 定位,relative/absolute/fixed/static
      left/right/top/bottom : 方向屬性
      z-index : z軸層級

   3. 文字常用屬性:

      color : 顏色
      font-size : 字型大小
      font-family : 字型
      font-weight : 字型加粗,normal/bold
      font-style : 文字是否傾斜,normal/italic
      font : 是否加粗 字號/行高 字型
      text-decoration : 字型修飾,none/underline
      text-indent : 文字首行縮排

   4. 居中樣式: *

      行內/行內塊/文字 水平垂直居中: (父元素新增)
      ​
      line-height : 行高等於高 . 垂直居中
      text-align : center 內容對齊方式 . 水平居中

      塊級標籤水平居中: (自己新增)
      ​
      margin : 0 auto ; 塊級自身水平居中

      所有標籤水平垂直居中: (子絕父相)

      position定位 : 所有標籤垂直水平居中
      ​

   5. 其他樣式:
      list-style : 無序列表專案符號,none

      overflow : 溢位隱藏

      ​ 特性:檢測自己大小,兒子大小,檢測程式碼是否有問題.
      ​ 可以清除浮動產生的影響
      ​ 可以解決外邊距塌陷問題

      display : 模式轉換,none/block/inline/inline-block

      float,絕對定位,固定定位,display:inline-block, 都可以模式轉換為行內塊.

      border-radius : 圓角邊框
      opacity : 透明度

3. Js

   常用方法
   ​ document.getElementById(‘id’); 根據id獲取元素物件

   常用事件

   ​ onload : 頁面載入完成

   ​ onclick : 點選事件

   ​ onmouseover : 滑鼠懸浮事件

   ​ onmouseout : 滑鼠離開事件

   ​ onfocus : 獲取焦點

   ​ onBlur : 失去焦點

   ​ onkeyup : 鍵盤擡起

   ​ onsubmit : 表單提交事件

   (元素物件)常用屬性

   js元素物件屬性,與html元素屬性基本一致. 只羅列特殊的.

   1. id : id
   2. className : 元素類樣式
   3. innerHTML : 內部文字/內部標籤
   4. style : 行內樣式
      style.fontSize : 文字大小.
      ….省略,帶-的改為駝峰即可.

   陣列常用屬性/方法

   1. length : 長度
   2. xxx[index] : 根據索引獲取xxx的某一項
   3. join(‘-‘) : 以某個字元拼接陣列,返回string
   4. push(),pop() : 末尾新增和刪除成員
   5. reverse() : 反轉陣列
   6. indexOf() : 獲取成員第一次出現的索引
   7. splice() : 增加或刪除成員

   字串常用方法

   1. parseInt() : 將數字字串轉換為整數
   2. parseFloat() : 將數字字串轉換為小數
   3. split(‘-‘) : 以某個字元分割字串,返回陣列
   4. indexOf() : 獲取字元/字串出現的索引
   5. substring() : 擷取字串

4. JQuery

   1.$()函式的用法

   1. $(匿名函式) : 頁面載入完成事件
   2. $(‘css選擇器’) : 獲取元素物件

   3. $(‘標籤程式碼’) : 建立元素物件

   4. 選擇器

   $('#myId') //選擇id為myId的網頁元素
   $('.myClass') // 選擇class為myClass的元素
   $('li') //選擇所有的li元素
   $('#ul1 li span') //選擇id為為ul1元素下的所有li下的span元素
   $('input[name=first]') // 選擇name屬性等於first的input元素

   ​

   1. 選擇器過濾方法

   $('div').has('p'); // 選擇包含p元素的div元素
   $('div').not('.myClass'); //選擇class不等於myClass的div元素
   $('div').eq(5); //選擇第6個div元素

   ​

   1. 選擇器轉移方法 (層級方法)

   $('#box').prev(); //選擇id是box的元素前面緊挨的同輩元素
   $('#box').prevAll(); //選擇id是box的元素之前所有的同輩元素
   $('#box').next(); //選擇id是box的元素後面緊挨的同輩元素
   $('#box').nextAll(); //選擇id是box的元素後面所有的同輩元素
   $('#box').parent(); //選擇id是box的元素的父元素
   $('#box').children(); //選擇id是box的元素的所有子元素
   $('#box').siblings(); //選擇id是box的元素的同級元素
   $('#box').find('.myClass'); //選擇id是box的元素內的class等於myClass的元素

   ​

   1. 常用方法

   css() : 獲取/設定樣式 (行內樣式操作)
   
   addClass()/removeClass()/toggleClass() : 類樣式操作
   
   index() : 獲取元素索引值(自家排行老幾)
   
   prop() : 獲取/設定屬性
   
   html() : 獲取/設定內容
   
   animate() : 動畫
   
   delegate() : 委託

   ​

   1. 常用動畫

   fadeOut() 淡出
   fadeToggle() 切換淡入淡出
   hide() 隱藏元素
   show() 顯示元素
   toggle() 切換元素的可見狀態
   slideDown() 向下展開
   slideUp() 向上捲起
   slideToggle() 依次展開或捲起某個元素

   ​

   1. 常用事件

   給js的事件去掉on即可.

   blur() 元素失去焦點
   focus() 元素獲得焦點
   click() 滑鼠單擊     
   mouseover() 滑鼠進入 
   mouseout() 滑鼠離開 
   mouseenter() 滑鼠進入 
   mouseleave() 滑鼠離開 
   hover() 同時為mouseenter和mouseleave事件指定處理函式
   ready() DOM載入完成
   submit() 使用者遞交表單

   ​

   1. 節點操作方法

   2. appendTo : A appendTo B , A追加到B . A追加到B的子節點末尾

      1. prependTo : A prependTo B , A追加到B之前 . A追加到B的子節點首位
      2. insertAfter : A insertAfter B, A插入到B的同級之後

   3. insertBefore : A insertBefore B, A插入到B的同級之前

   4. 非同步請求

   5. ajax

      $.ajax({
      
      url:'js/data.json',  // 請求地址,介面 --- url : http://www.baidu.com?     username=xxx&password=xxx
      type:'get',          // 請求型別
      dataType:'json',    //  與伺服器傳輸的資料型別 , json資料型別
      data:{key:value}   // 請求引數
      
      })

      .done(function(dat){   // 完成,請求成功的回撥函式 . data: 伺服器返回的資料
      
      alert(dat.name);
      $('.user_login_btn').hide();
      $('.user_info em').html( dat.name ).parent().show();
      
      })

      .fail(function(error){   // 失敗, 請求失敗的回撥函式
      
      console.log(error);
      alert('伺服器超時，請重試！');
      
      })

      ​

   6. jsonp

      將dataType : 改為jsonp即可