web前端最常使用總結

html部分

• 通用的幾個屬性
  1. title 設置元素的文本標題，在鼠標指向時會懸浮出標題
  2. tabindex 指定元素在tab鍵遍歷控件時的訪問順序，就是說按tab鍵時的訪問順序
  3. 表格屬性 cellspacing 單元格間距 cellpadding單元格內邊距
• 幾個常用標籤
  • head 標籤
    1. mate 提供關於頁面的描述信息 比如設置字符集和用於搜索引擎的關鍵字
  • body 標籤
    1. span 一般做爲css的鉤子來使用，就是給塊級元素裏的某內容添加不一樣的樣式，是行內樣式。
    2. lable 爲表單類創建一個有意義的標記，一般使用for屬性來關聯表單控件 與其id名一樣
    3. img 圖片 屬性alt表示加載不出圖片的提示
    4. ul 無序列表 子元素是li 比較常用
    5. ol 有序列表 type可以選擇列表類型
    6. dl dt dd 好像不是很常用的列表
    7. table裏有thead tbody caption tfoot 瀏覽器會默認幫我們加上tbody，所以注意編碼規範

css部分

• css選擇符及優先級

  1. 全體選擇符 * {}
  2. 元素選擇符 a {}
  3. 類（class）選擇符 . {}
  4. id選擇符 # {}
  5. 僞類選擇符 ： {}
  6. 後代選擇符 . h3 {}
  7. 組合選擇符 . . {}
  8. 分組選擇器 1, 2 {}
     優先級：7>…1 8單獨算

• 文本

  1. 首行縮進 text-indent 可以應用於任何塊級元素 取值：0、數值、百分比

  2. 對齊方式 text-align 取值：left、center、right、justify（兩端）

  3. 處理空白 white-space 取值：pre 保留空白 nowrap 文本不換行 normal 忽略空白

     一般用在td裏用nowrap屬性

  4. 行高 line-height 取值：數值、%、normal 一般24px~25px是常用的值

  5. 設置文本的垂直對齊方式 vertical-align 取值：%、baseline、super、bottom、sub、top、text-top、text-bottom、middle 用在行級元素

  6. 設置文字間距 word-spacing 取值：數值、normal

     實際效果其實就是增大一段文本中空白字符（空格）的寬度（整段漢字可能會沒有效果，因爲漢語段落一般都沒有空格）

  7. 設置字母間距 取值：數值、normal 實際效果：在每個字母或漢字中間插入一段空白距離

  8. 設置文本效果 text-decoration 取值：none、underline、overline、line-through、blink

  9. 字體名稱 font-family

  10. 字體大小 font-size 一般都是直接賦值的方式，常用12px、14px大小

  11. 設置字體粗細 font-weight 取值：normal、bold、bolder、lighter、數值，數值很少使用

• 塊級元素

  1. 清除浮動 clear 一般使用both
  2. 背景圖片平鋪模式 background-repeat 取值：no-repeat、repeat-x、repeat-y repeat
  3. 背景圖片位置 background-position 數值、top、left、right、bottom、center 也可以自定義值，注意負值的含義
  4. 列表樣式 list-style-type 支持使用圖片當列表 取值：none、disc、circle、square、decimal、upper-alpha、lower-alpha、upper-roman、lower-roman
  5. 設置定位類型 position 取值：relative(相對)、absolute(絕對)、fixed(固定，類似懸浮條)、static、inherit
  6. 設置元素與其包含塊的邊距的距離 top、left、right、bottom
  7. 設置內容溢出的處理方式 overflow 取值：visible（默認讓其溢出）、hidden（減掉）、scroll（滾動）、auto（自動）、inherit（與默認差不多）
  8. 設置元素的層疊順序 z-index 取值：數值、auto 表示的是幾個疊在一起時在上在下 負數表示下邊

• 表格

  1. 是否合併單元格邊 border-collapse: collapse 和cellspacing="0"效果類似 就是說把框線合在一起
  2. 設置表格佈局 table-layout: auto 默認auto會根據內容撐開 fixed表示固定
  3. 設置單元格和表格邊的距離 border-spacing: 0px類似於cellpadding="" 後者是內容與單元格的距離
  4. 設置caption位置 caption-side: bottom 上和下
  5. 空行單元格是否顯示邊框 empty-cells: hide

• 佈局

  1. 左右自適應佈局：
     • 使用絕對定位：父級box設置爲position: relative 左邊設置爲定長並且絕對定位position: absolute;右邊設置爲position: relative; margin-left:=定長；總結來說就是需要固定的設置absolute，另一邊relative 。
     • 使用浮動加margin-left:=定長，首先左邊定長浮動，右邊加margin-left。

js 部分

1. 全局變量和局部變量，不使用var的都是全局變量，其他的和java一樣
2. 定義數組， new Array(); 和[];
3. js dom操作 createAttribute()創建屬性節點 createElement()創建元素節點 createTextNode()創建文本節點
4. NaN 是字符串轉換成 數值時 報錯了，就是一個NaN； 任何一個數值和NaN進行運算結果 是一個NaN; NaN不和任何一個值相等，包括自己
5. window.onload 頁面加載完成後 一般用於在head裏寫script時需要操作文檔後面內容的時候使用
6. nextSibling; 下一個節點 nodeType 節點類型
7. 阻止默認事件的發生 event.preventDefault(); 比如跳轉和表單提交
8. focus() 聚焦到
9. addEventListener(事件類型，函數) 動態添加事件
10. event.target; 獲取事件源
11. parentNode 父節點

jquery部分

1. dom對象轉成jQuery對象 $(dom) ， jQuery對象轉成dom對象 $(dom).get(0) 通過get函數獲取dom對象
2. $(selector).each(function(index, element)); 對 jQuery 對象進行迭代，爲每個匹配元素執行函數。其中index代表位置，element表示當前的元素。
3. $(selector).bind(event,data,function); 規定向被選元素添加的一個或多個事件處理程序 其中event代表事件，data代表參數，function代表執行的函數
4. unbind(event, function); 參數可選event表示具體事件，function表示要解綁的具體函數
5. hide 和 show 表示隱藏和顯示
6. next(), prev() 上一個同輩元素和下一個同輩元素 prevAll() nextAll() 上邊所有的同輩元素和下邊所有的同輩元素
7. parent() 獲得當前匹配元素集合中每個元素的父元素 parents() 獲得當前匹配元素集合中每個元素的祖先元素children() 獲得匹配元素集合中每個元素的所有子元素。
8. text() - 設置或返回所選元素的文本內容 html() - 設置或返回所選元素的內容（包括 HTML 標記） val() - 設置或返回表單字段的值 attr() 方法也用於設置/改變屬性值。
9. text(function(i,origText) text()、html() 以及 val() attr() 的回調函數, 參數的意義：第一個：被選元素列表中當前元素的下標，第二個是原始值。
10. prop 方法 prop() 方法設置或返回被選元素的屬性和值 prop() 方法應該用於檢索屬性值，例如 DOM 屬性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected），如需檢索 HTML 屬性，請使用 attr() 方法代替。
11. find() 返回被選元素的後代元素
12. filter(criteria,function(index))) 返回符合一定條件的元素 可選兩個參數 criteria：選擇器表達式、jQuery 對象、一個或多個元素， function(index) ：要執行的函數，結果是true就表示被選擇，index表示集合中的位置，需要注意的是：this表示當前的dom元素。

ajax部分

1. 基本語法：$.ajax({name:value, name:value, … }) 裏邊的鍵值對代表屬性

2. 常用的屬性有 url: 指定數據來源 type: 數據的請求類型 dataType: 返回的數據類型

3. 常用的回調函數 success(result,status,xhr) 成功時 第一個參數是返回的結果 error(xhr,status,error) 不成功時 beforeSend(xhr) 請求前 complete(xhr,status) 完成後 失敗和成功都會調用 TODO：關於參數的具體使用以後研究