JQUERY 函数的使用 DOM选择器 动画

JQUERY语法

函数的使用DOM用法选择器动画内置动画自定义动画动画的配置

函数的使用

$() 执行使用 $().abc() 连缀使用：局部方法 $.abc() 全局使用 window.onload = function(){ console.log("页面和资源加载完成"); document.onload = function(){ console.log("页面加载完成"); } $(document).ready(function(){ console.log("页面加载完成") }) $(function(){ console.log("页面加载完成") })

DOM用法

$("#box"),style.background = “yellow” $("#box").css(“background”,“yellow”)

转换成原生写法 box[0].style.background = “yellow” 或者 box.get(o).style.background = “yellow”

选择器

跟css用法差不多

$("#box").css("background","red"); // id $(".cont").css("background","red"); //class $("span").css("background","red"); //元素 $("input[name]").css("background","red"); $("input[name=user]").css("background","red"); $("input[name=user][value]").css("background","red"); // $(".box .msg h2") // 后代 // $(".box h2"） // $(".box").find("h2") // // 子 // $(".box>h2") // || // $(".box").children("h2") // // 下一个兄弟 // $(".box+.cont") // || // $(".box").next(".cont") // // 下所有兄弟 // $(".box~.cont") // || // $(".box").nextAll(".cont") // 找li里面第一个子元素 // $("ul").find("li:first").css("background","red") // $("ul").find("li").first().css("background","red") // 找li里面最后一个子元素 // $("ul").find("li:last").css("background","red") // $("ul").find("li").last().css("background","red") //找不是red class li元素 // $("ul").find("li:not(.red)").css("background","red") // $("ul").find("li").not(".red").css("background","red") // 找奇数/偶数 索引的li 注意从0开始 // $("ul").find("li:even").css("background","red"); // $("ul").find("li:odd").css("background","red"); // eq 类似于n-th // $("ul").find("li:eq(3)").css("background","red"); // $("ul").find("li").eq(3).css("background","red"); // 找li中 h标签 // $("ul").find("li:contains(h)").css("background","red"); //找li里面内容为空的 // $("ul").find("li:empty").css("background","red"); // 找ul 的class名字有red // $("ul:has(.red)").css("background","red"); // 找被影藏/显示的ul // $("ul:hidden").css("background","red"); // $("ul:visible").css("background","red"); // console.log($("#box").is(".red")) // console.log($("#box").hasClass("pink")) //添加/删除指定的class 根据class名字 // $("#box").addClass("green"); // $("#box").removeClass("pink");

动画

jq的动画分为三部分： // 内置动画：封装好的固定动画 // 自定义动画：自行组合动画效果 // 动画的设置

内置动画： // 显示隐藏 // 上拉下拉 // 淡出淡入，半透明

内置动画

$("#btn1")[0].onclick = function(){ $(".box").hide(1000) // 隐藏 } $("#btn2")[0].onclick = function(){ $(".box").show(1000) //显示 } $("#btn3")[0].onclick = function(){ $(".box").toggle(1000) //隐藏/显示 }

$("#btn4")[0].onclick = function(){ $(".box").slideUp(2000,function(){ alert(“动画结束了”); //向上滑 }) } $("#btn5")[0].onclick = function(){ $(".box").slideDown(2000) //向下滑 } $("#btn6")[0].onclick = function(){ $(".box").slideToggle(2000) //向上滑/向下滑 }

$("#btn7")[0].onclick = function(){ $(".box").fadeOut() // 渐变影藏 } $("#btn8")[0].onclick = function(){ $(".box").fadeIn() //渐变显示 } $("#btn9")[0].onclick = function(){ $(".box").fadeToggle() // 渐变影藏/渐变显示 }

$("#btn10")[0].onclick = function(){ $(".box").fadeTo(1000,0.1) //渐变 第一个参数指渐变持续时间 第二个参数指opacity }

自定义动画

$("#btn")[0].onclick = function(){ // 数值类css属性 // $(".box").animate({ // width:"+=300px" // },2000,function(){ // alert(1) // })

// 动画之间的执行顺序：同步 // 链式动画 // $(".box").animate({ // left:400 // }) // $(".box").animate({ // top:400 // }) // $(".box").animate({ // left:400 // },function(){ // $(".box").animate({ // top:400 // }) // }) // $(".box").animate({ // left:400 // }).animate({ // top:400 // }) // 动画与其他方法之间的顺序：异步 // $(".box").animate({ // left:400 // }).animate({ // top:400 // }).css("background","yellow") // 将动画和其他方法之间的异步变成同步 // $(".box").animate({ // left:400 // },function(){ // $(".box").css("background","yellow") // }) // $(".box").animate({ // left:400 // }).queue(function(next){ // $(".box").css("background","yellow") // next(); // }).animate({ // top:200 // }) }

动画的配置

$("#btn1")[0].onclick = function(){ // $(".box").delay(2000).animate({ // left:300 // }) $(".box").animate({ left:500 },5000).animate({ top:300 },5000).animate({ left:0 },5000).animate({ top:30 },5000) } $("#btn2")[0].onclick = function(){ // 数值类css属性 $(".box").stop(true,false) }

// delay():延迟 // stop():停止 // 参数1：动画队列 // true：清空队列；false：不清空队列 // 参数2：当前动画 // true：当前动画立即到终点；false：立即停止当前位置 // 动画： // 动画队列：等待动画 // 当前动画：正在执行的动画 // stop默认停止的是当前动画