python前端jQuery進階

知識點預習
1.jQuery特殊效果2.鏈式調用 3.屬性操作 4.jQuery循環 5.jQuery事件

01- jQuery的特殊效果

//1. 淡入淡出 fade
// $(".box").fadeIn();
// $(".box").fadeOut();
// $(".box").fadeToggle();

//2. 顯示隱藏
// $(".box").hide();
// $(".box").show();
// $(".box").toggle();

//3.捲開 捲起
// $(".box").slideDown();
// $(".box").slideUp();
// $(".box").slideToggle();

jQuery鏈式調用
jQuery對象的方法會在執行完後返回這個jQuery對象,所有jQuery對象的方法可以連起來寫

03- 層級菜單案例

//1.點擊分類的 '水果' 下面的ul 打開
var $next = $(this).next().slideToggle();

// 2. 每次 只打開一個 ,其他的關閉 siblings()
// 2.1 $next 對象 是你選中的 a 標籤下面的 ul列表
// 2.2 $next 需要獲取 父元素 parent() li標籤
// 2.3 通過li標籤 獲取 其他的同級 元素siblings()
// 2.4 獲取同級元素 li 下面的 子元素 children()
// 2.5 li 子元素有兩個 過濾下 childer("ul")
// 2.6 slideup()

$next.parent().siblings().children("ul").slideUp();

jQuery操作屬性
prop() 獲取和設置標籤屬性
讀取的時候用雙引號包裹屬性即可
設置屬性時,要用{}包裹屬性val() 獲取及設置value屬性 input標籤的值獲取及設置

html() 獲取和修改標籤包裹的內容

05- 對話框案例
val() 獲取input標籤的value

06- jQuery的循環遍歷
each
遍歷的函數內 this表示當前遍歷出來的元素 表示一個元素動態類型

07- 手風琴效果
更改當前點擊li標籤前面和後面的元素left值
去到右邊的位置:

第 4 個到右邊的位置:727 — 21
第 3 個到右邊的位置:727 - 212
第 2 個到右邊的位置:727 - 213
第 1 個到右邊的位置:727 - 214
到右邊的位置的公式:727-21(5-$(this).index())
焦點事件
focus() 讓文本輸入框自動獲取焦點,
blur() 失去焦點

09- 鼠標事件
進入子元素 會觸發事件
mouseover() 鼠標進入(進入子元素也觸發)
mouseout() 鼠標離開(離開子元素也觸發)

進入子元素 不會觸發事件 -- 建議使用
mouseenter() 鼠標進入(進入子元素不觸發)
mouseleave() 鼠標離開(離開子元素不觸發)
hover() 同時爲mouseenter和mouseleave事件指定處理函數

$div01.hover(function (event) {
$(this).animate({'margin-top':event.type == 'mouseenter' ? 100 : 50});
})

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章