1. 查找標籤
2. 修改樣式
3. 事件
4. AJAX (Django中講)
5. 插件機制css
jQuery版本
1. 壓縮版和未壓縮版的區別
2. 1.x和3.x均可以使用
jQuery如何使用!!!
1. 選擇好版本
2. 先導入再使用html
jQuery對象才能調用jQuery的方法
經過jQuery選擇器找到的就是jQuery對象數組
jQuery對象[0] --> DOM對象
$(DOM對象) --> jQuery對象app
若是一個變量保存的是jQuery對象,咱們一般會給變量名添加$前綴ide
(找標籤).(要作的事兒)
$ <==> jQuery
$("選擇器").方法()函數
// $(css選擇器語法)
// eg: $('.box') 獲得的是一個存放原生js對象的數組, 就是jq對象,
頁面中有多少個.box, 該jq對象就承載者多少個對象,. 能夠做爲一個總體來使用工具
1. $("#id值")
2. $("標籤名")
3. $(".class名")
4. $("*")
5. $("div.c1")
6. $("div,p")動畫
1. $("x y")
2. $("x>y")
3. $("x+y")
4. $("x~y")this
1. :first
2. :last
3. :eqspa
1. $("input[type='text']")
...
1. $(":checkbox")
...
1. $("input:checked")
2. $(":selected")
...
1. 下一個系列
2. 上一個系列
3. 父標籤系列
4. 篩選器方法系列
.first()
.eq()
...
5. 兒子們和兄弟們
6. find()和filter()
$box.css('background-color') // 獲取背景顏色
$box.css('background-color', 'red') // 設置背景顏色
$box.css('background-color', function() {return 'yellow'}) // 經過函數返回值設置背景顏色
1. addClass()
2. removeClass()
3. hasClass()
4. toggleClass()
$().css("color")
$().css("color", "red")
$().css({"color":"red", "font-size": "18px"})
1. offset() --> 相對窗口的偏移
2. position() --> 相對父標籤的偏移
3. 返回頂部示例
1. scroll() 滾動事件
2. scrollTop() 滾動條距離頂部的偏移距離
height
width
innerHeight --> 內容+padding
outerHeight --> 內容+padding+border
1. text()
2. html()
3. val()
1. attr()
2. removeAttr()
.prop() --> checkbox和radio
全選、反選、取消的例子
1. 添加到文檔內部的後面 append/appendTo
2. 添加到文檔內部的前面 prepend/prependTo
3. 同級別後面 after/insertAfter
4. 同級別前面 before/insertBefore
5. empty() --> 內部的子元素都清空
6. remove() --> 把本身都刪除
7. 替換 replaceWith/replaceAll
8. 克隆 clone()/clone(true)
1. hover
2. keydown和keyup
3. change
4. focus和blur
5. input
1. click(function(){...})
2. .on("事件名稱", function(){...})
語法:
.on("事件名稱", "選擇器", function(){...})
$('.box').on('click', 'span', {name: 'hehe'}, function(ev){})
// 注: 經過父級box來綁定點擊事件,其實將事件委派給其子級span標籤
特色:
1. 利用事件冒泡的特色
2. 基於一個已經存在的標籤給將來的標籤添加事件處理函數
// 爲jq事件對象, 兼容js事件對象
// 座標: ev.clientX | ev.clientY
// 按鍵: ev.keyCode
// 數據: ev.data.key名 => eg:ev.data.name
// 冒泡: ev.stopPropagation();
// 默認動做: ev.preventDefault();
$(document).ready(function(){...})
描述:遍歷一個jQuery對象,爲每一個匹配元素執行一個函數。
// 爲每個li標籤添加foo
$("li").each(function(){
$(this).addClass("c1");
});
1. $.each()
2. jQuery對象.each()
3. 退出當前循環 return
4. 退出整個each循環 return false
1. 能夠存字符串
2. 能夠存數字
3. 能夠存jQuery對象
在匹配的元素集合中的全部元素上存儲任意相關數據或返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。
.data(key, value):
描述:在匹配的元素上存儲任意相關數據。
$("div").data("k",100);//給全部div標籤都保存一個名爲k,值爲100
.data(key):
描述: 返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值—經過
.data(name, value)或 HTML5 data-*屬性設置。
$("div").data("k");//返回第一個div標籤中保存的"k"的值
$("div").removeData("k"); //移除元素上存放k對應的數據
// time_num: 動畫持續的時間
// finish_fn: 動畫結束後的回調函數
// 1. hide(time_num, finish_fn) | show(time_num, finish_fn) | toggle(time_num, finish_fn)
// 2. slideUp() | slideDown() | slideToggle() 參數同上
// 3.fadeOut() | fadeIn() | fadeTo() | fadeToggle() 參數同上
REFERENCE-LIWENZHOU :http://www.cnblogs.com/liwenzhou/p/8178806.html
// 參數: 作動畫的樣式們 {}, 動畫持續時間, 運動曲線, 動畫結束後的回調函數
animate({
width: 300,
height: 500
}, 300, 'linear', function() {
// 動畫結束後回調
})
// 動畫本體採用的是css動畫