Python-jQuery

1. jQuery是什麼?

1. 是一個工具,簡單方便的實現一些DOM操做
2. 不用jQuery徹底能夠,可是不明智。
3. jQuery能作的事兒

1. 查找標籤
2. 修改樣式
3. 事件
4. AJAX (Django中講)
5. 插件機制css


4. jQuery是一個類庫,相似於Python中的模塊

jQuery版本
1. 壓縮版和未壓縮版的區別
2. 1.x和3.x均可以使用
jQuery如何使用!!!
1. 選擇好版本
2. 先導入再使用html

2. jQuery對象和DOM對象

jQuery對象才能調用jQuery的方法
經過jQuery選擇器找到的就是jQuery對象數組

jQuery對象[0] --> DOM對象
$(DOM對象) --> jQuery對象app

若是一個變量保存的是jQuery對象,咱們一般會給變量名添加$前綴ide


3. jQuery的內容

1.基本的語法:

(找標籤).(要作的事兒)
$ <==> jQuery
$("選擇器").方法()函數


2. 查找標籤

// $(css選擇器語法)
// eg: $('.box') 獲得的是一個存放原生js對象的數組, 就是jq對象,
頁面中有多少個.box, 該jq對象就承載者多少個對象,. 能夠做爲一個總體來使用工具

1. 基本選擇器


1. $("#id值")
2. $("標籤名")
3. $(".class名")
4. $("*")
5. $("div.c1")
6. $("div,p")動畫


2. 層級選擇器

1. $("x y")
2. $("x>y")
3. $("x+y")
4. $("x~y")this


3. 基本篩選器

1. :first
2. :last
3. :eqspa


4. 屬性選擇器

1. $("input[type='text']")
...


5. 表單選擇器

1. $(":checkbox")
...


6. 表單屬性選擇器

1. $("input:checked")
2. $(":selected")
...


7. 篩選器

1. 下一個系列
2. 上一個系列
3. 父標籤系列
4. 篩選器方法系列
.first()
.eq()
...
5. 兒子們和兄弟們
6. find()和filter()

4. 操做樣式

$box.css('background-color') // 獲取背景顏色
$box.css('background-color', 'red') // 設置背景顏色
$box.css('background-color', function() {return 'yellow'}) // 經過函數返回值設置背景顏色

0. 操做class

1. addClass()
2. removeClass()
3. hasClass()
4. toggleClass()


1. jQuery直接修改CSS屬性

$().css("color")
$().css("color", "red")
$().css({"color":"red", "font-size": "18px"})


2. 位置相關

1. offset() --> 相對窗口的偏移
2. position() --> 相對父標籤的偏移
3. 返回頂部示例
1. scroll() 滾動事件
2. scrollTop() 滾動條距離頂部的偏移距離


3. 尺寸

height
width
innerHeight --> 內容+padding
outerHeight --> 內容+padding+border


4. 文本操做

1. text()
2. html()
3. val()


5. 屬性操做

1. attr()
2. removeAttr()

.prop() --> checkbox和radio
全選、反選、取消的例子


6. 文檔操做

1. 添加到文檔內部的後面 append/appendTo
2. 添加到文檔內部的前面 prepend/prependTo
3. 同級別後面 after/insertAfter
4. 同級別前面 before/insertBefore

5. empty() --> 內部的子元素都清空
6. remove() --> 把本身都刪除

7. 替換 replaceWith/replaceAll

8. 克隆 clone()/clone(true)

5. 經常使用事件

0.經常使用

1. hover
2. keydown和keyup
3. change
4. focus和blur
5. input


1. 事件綁定的方式

1. click(function(){...})
2. .on("事件名稱", function(){...})


2. 事件委託

語法:
.on("事件名稱", "選擇器", function(){...})
$('.box').on('click', 'span', {name: 'hehe'}, function(ev){})
// 注: 經過父級box來綁定點擊事件,其實將事件委派給其子級span標籤
特色:
1. 利用事件冒泡的特色
2. 基於一個已經存在的標籤給將來的標籤添加事件處理函數


3 事件對象

// 爲jq事件對象, 兼容js事件對象
// 座標: ev.clientX | ev.clientY
// 按鍵: ev.keyCode
// 數據: ev.data.key名 => eg:ev.data.name


4. 冒泡與默認動做

// 冒泡: ev.stopPropagation();
// 默認動做: ev.preventDefault();


5. 文檔準備就緒後再執行

$(document).ready(function(){...})

6. each和data

1. each()

描述:遍歷一個jQuery對象,爲每一個匹配元素執行一個函數。
// 爲每個li標籤添加foo
$("li").each(function(){
$(this).addClass("c1");
});

1. $.each()
2. jQuery對象.each()
3. 退出當前循環 return
4. 退出整個each循環 return false

 


2. data

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對應的數據

 

6. JQ動畫

1 系統預約義

// 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


2 自定義動畫

// 參數: 作動畫的樣式們 {}, 動畫持續時間, 運動曲線, 動畫結束後的回調函數
animate({
width: 300,
height: 500
}, 300, 'linear', function() {
// 動畫結束後回調
})
// 動畫本體採用的是css動畫

 

補充:插件機制(瞭解)

相關文章
相關標籤/搜索