JQuery選擇器,動畫,事件和DOM操作
JQuery是由JS封裝的一些方法,供我們調用,可以快速的實現某些JS功能,實際是JS編寫的方法包
將JQuery文件放到JS文件夾下,然後引用到<head></head>中
一、選擇器
1、Id選擇器
$("#div1")
2、Class選擇器
$(".div")
用class選擇器選出一堆對象給他們附事件,不用像Js一樣遍歷。直接附加事件,取到的所有對象都會附上事件。
註意:Js中的this,在Jquery中變為$(this)。
3、標簽選擇器
$("div")
4、並列選擇器
用,隔開
$("#div1,#div2")
5、後代選擇器
用空格隔開
6、過濾選擇器
第一個:$(".div:first")
最後一個:$(".div:last")
任意個:$(".div:eq(索引號)")
$(".div").eq(索引號)
大於:$(".div:gt(索引號)") 取到的是索引號以後的
小於:$(".div:lt(索引號)") 取到的是索引號之前的
排除:$(".div:not(選擇器)") 取到的是排除掉選擇的剩下的
$(".div:not(.div:eq(2))") 取到的是排除掉第三個剩下的
奇數個:$(".div:odd") 索引奇數個
偶數個:$(".div:even") 索引偶數個,包含0
屬性名過濾:$(".div[屬性名]")
屬性名+值過濾:$(".div[屬性名=值]") $(".div[屬性名!=值]")
內容過濾:$(".div:contains(‘字符串‘)")
包含子元素:$(".div:has(‘選擇器‘)")
二、動畫
1、show(),hide() 顯示、隱藏
2、slideDown(),slideUp() 下拉顯示,上拉隱藏
3、fadeIn(),fadeOut() 淡入淡出
4、自定義動畫 animate({目標效果},時間,回調函數) 3個參數
animate({left:"300px",top:"300px"},3000,function(){回調函數})
停止動畫,防止動畫積累: .stop()
動畫顏色漸變,需要另引Jquery.color。放在之前引用的Jquery下面。
JQuery選擇器,動畫,事件和DOM操作