1.Html常用標籤
- 常用塊級標籤
h : 標題
p : 段落
div : 容器
ul>li : 無序列表
form : 表單
2. 常用行內標籤
a : 超鏈接
span : 小容器
img : 插入圖 (寬高有效)
input : 輸入框,text/password/radio/checkbox/file/reset/button (寬高有效)
label : 標籤
em : 斜體(語義)
i : 斜體
b : 粗體
strong : 粗體(語義)
常見標籤屬性
1.一般標籤屬性
id : id標識
style : 行內樣式
href : a超鏈接地址,link外鏈css路徑
src : 圖片路徑,script外鏈js路徑
alt : 圖片替換文字- 表單控件屬性
name : 控件名字
type : 控件類型
value : 控件值
outline : 輪廓
- 表單控件屬性
Css常用樣式
實體化樣式
width : 寬
height : 高
background : 背景圖片,背景位置,背景重複,背景顏色
border : 邊框寬度,邊框樣式,邊框顏色間距和位置樣式
padding : 內邊距
margin : 外邊距
float : 浮動
position : 定位,relative/absolute/fixed/static
left/right/top/bottom : 方向屬性
z-index : z軸層級文字常用屬性:
color : 顏色
font-size : 字體大小
font-family : 字體
font-weight : 字體加粗,normal/bold
font-style : 文字是否傾斜,normal/italic
font : 是否加粗 字號/行高 字體
text-decoration : 字體修飾,none/underline
text-indent : 文字首行縮進居中樣式: *
行內/行內塊/文本 水平垂直居中: (父元素添加)
line-height : 行高等於高 . 垂直居中
text-align : center 內容對齊方式 . 水平居中塊級標籤水平居中: (自己添加)
margin : 0 auto ; 塊級自身水平居中所有標籤水平垂直居中: (子絕父相)
position定位 : 所有標籤垂直水平居中
其他樣式:
list-style : 無序列表項目符號,noneoverflow : 溢出隱藏
特性:檢測自己大小,兒子大小,檢測代碼是否有問題.
可以清除浮動產生的影響
可以解決外邊距塌陷問題display : 模式轉換,none/block/inline/inline-block
float,絕對定位,固定定位,display:inline-block, 都可以模式轉換爲行內塊.
border-radius : 圓角邊框
opacity : 透明度
Js
常用方法
document.getElementById(‘id’); 根據id獲取元素對象常用事件
onload : 頁面加載完成
onclick : 點擊事件
onmouseover : 鼠標懸浮事件
onmouseout : 鼠標離開事件
onfocus : 獲取焦點
onBlur : 失去焦點
onkeyup : 鍵盤擡起
onsubmit : 表單提交事件
(元素對象)常用屬性
js元素對象屬性,與html元素屬性基本一致. 只羅列特殊的.
- id : id
- className : 元素類樣式
- innerHTML : 內部文本/內部標籤
- style : 行內樣式
style.fontSize : 文字大小.
….省略,帶-的改爲駝峯即可.
數組常用屬性/方法
- length : 長度
- xxx[index] : 根據索引獲取xxx的某一項
- join(‘-‘) : 以某個字符拼接數組,返回string
- push(),pop() : 末尾添加和刪除成員
- reverse() : 反轉數組
- indexOf() : 獲取成員第一次出現的索引
- splice() : 增加或刪除成員
字符串常用方法
- parseInt() : 將數字字符串轉換爲整數
- parseFloat() : 將數字字符串轉換爲小數
- split(‘-‘) : 以某個字符分割字符串,返回數組
- indexOf() : 獲取字符/字符串出現的索引
- substring() : 截取字符串
JQuery
1.$()函數的用法
- $(匿名函數) : 頁面加載完成事件
- $(‘css選擇器’) : 獲取元素對象
$(‘標籤代碼’) : 創建元素對象
選擇器
$('#myId') //選擇id爲myId的網頁元素 $('.myClass') // 選擇class爲myClass的元素 $('li') //選擇所有的li元素 $('#ul1 li span') //選擇id爲爲ul1元素下的所有li下的span元素 $('input[name=first]') // 選擇name屬性等於first的input元素
- 選擇器過濾方法
$('div').has('p'); // 選擇包含p元素的div元素 $('div').not('.myClass'); //選擇class不等於myClass的div元素 $('div').eq(5); //選擇第6個div元素
- 選擇器轉移方法 (層級方法)
$('#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的元素
- 常用方法
css() : 獲取/設置樣式 (行內樣式操作) addClass()/removeClass()/toggleClass() : 類樣式操作 index() : 獲取元素索引值(自家排行老幾) prop() : 獲取/設置屬性 html() : 獲取/設置內容 animate() : 動畫 delegate() : 委託
- 常用動畫
fadeOut() 淡出 fadeToggle() 切換淡入淡出 hide() 隱藏元素 show() 顯示元素 toggle() 切換元素的可見狀態 slideDown() 向下展開 slideUp() 向上捲起 slideToggle() 依次展開或捲起某個元素
- 常用事件
給js的事件去掉on即可.
blur() 元素失去焦點 focus() 元素獲得焦點 click() 鼠標單擊 mouseover() 鼠標進入 mouseout() 鼠標離開 mouseenter() 鼠標進入 mouseleave() 鼠標離開 hover() 同時爲mouseenter和mouseleave事件指定處理函數 ready() DOM加載完成 submit() 用戶遞交表單
節點操作方法
appendTo : A appendTo B , A追加到B . A追加到B的子節點末尾
- prependTo : A prependTo B , A追加到B之前 . A追加到B的子節點首位
- insertAfter : A insertAfter B, A插入到B的同級之後
insertBefore : A insertBefore B, A插入到B的同級之前
異步請求
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('服務器超時，請重試！'); })
jsonp
將dataType : 改爲jsonp即可