Python-jQuery
1. jQuery是什麽？
1. 是一個工具，簡單方便的實現一些DOM操作
2. 不用jQuery完全可以，但是不明智。
3. jQuery能做的事兒
1. 查找標簽
2. 修改樣式
3. 事件
4. AJAX （Django中講）
5. 插件機制
4. jQuery是一個類庫，類似於Python中的模塊
jQuery版本
1. 壓縮版和未壓縮版的區別
2. 1.x和3.x都可以使用
jQuery如何使用！！！
1. 選擇好版本
2. 先導入再使用
2. jQuery對象和DOM對象
jQuery對象才能調用jQuery的方法
通過jQuery選擇器找到的就是jQuery對象
jQuery對象[0] --> DOM對象
$(DOM對象) --> jQuery對象
如果一個變量保存的是jQuery對象，我們通常會給變量名添加$前綴
3. jQuery的內容
1.基本的語法：
(找標簽).(要做的事兒)
$ <==> jQuery
$("選擇器").方法()
2. 查找標簽
// $(css選擇器語法)
// eg: $(‘.box‘) 得到的是一個存放原生js對象的數組, 就是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")
3. 基本篩選器
1. :first
2. :last
3. :eq
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
在匹配的元素集合中的所有元素上存儲任意相關數據或返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。
.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() 參數同上
2 自定義動畫
// 參數: 做動畫的樣式們 {}, 動畫持續時間, 運動曲線, 動畫結束後的回調函數
animate({
width: 300,
height: 500
}, 300, ‘linear‘, function() {
// 動畫結束後回調
})
// 動畫本體采用的是css動畫
Python-jQuery