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默认停止的是当前动画