jqery选择器的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box1">123</div>
<div id="box2">456</div>
</body>
<script src="../jquery.js"></script>
<script>
var obox1 = document.getElementById("box1");
console.log(obox1);//元素
obox1.style.background = "red"; //写样式
var obox2 = $("#box2");
console.log(obox2);//伪数组
obox2.css("background","blue");//写样式
// jq的DOM对象和原生的DOM对象的转换：
// jq转原生：
// 解析数组
// 通过get方法
obox2[0].style.background = "blue";
obox2.get(0).style.background = "blue";
// 原生转jq：
// 使用jq的函数包裹原生DOM对象
$(obox1).css("background","yellow")
</script>
</html>
jquery选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery.js"></script>
</head>
<body>
<h1>一级标题1</h1>
<h1 style="display: none">一级标题2</h1>
<h1>一级标题3</h1>
<ul class="list">
<li>html</li>
<li class="red">javascript</li>
<li>php</li>
<li>css</li>
<li class="red">mysql</li>
<li>python</li>
</ul>
<ul class="list">
<li>link1</li>
<li></li>
<li>link3</li>
<li></li>
<li>link5</li>
<li>link6</li>
</ul>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div id="cont">4</div>
<div id="cont">5</div>
<div id="cont">6</div>
<div class="msg">
<div class="xbox">
<h2>二级标题2-1</h2>
<h2>二级标题2-2</h2>
</div>
<h2>二级标题1-1</h2>
<h2>二级标题1-2</h2>
</div>
<span>7</span>
<span>8</span>
<span>9</span>
<input type="text" name="user">
<input type="text">
<input type="password" name="user">
</body>
<script>
// ID失明特性,，有多个同名id，默认直选第一个同名ID；
$("#cont").css("background","red");
//其他选择器与css中用法大致相同，记住重点的用法。考略性能较高的方法；
id为cus的父节点中的第一个div元素
$("#cus").parents("div:first").css({"color":"red","border":"2px solid red"}); $(".box").css("background","red");
$("span").css("background","red")
$(".msg h2").css("background","red");
$(".msg").find("h2").css("background","red")//后代
$(".msg>h2").css("background","red")
$(".msg").children("h2").css("background","red")//儿子
$(".msg+span").css("background","red")
$(".msg").next("span").css("background","red")//兄弟
$(".msg~span").css("background","red")
$(".msg").nextAll("span").css("background","red")//下面所有的兄弟
$("input[type=text][name]").css("background","red")//类型选择器；
</script>
</html>
jquery判断选择器和操作class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{100px;height:100px;}
.red{background: red}
.yellow{background: yellow}
.border{border: solid 4px black}
</style>
<script src="../jquery.js"></script>
</head>
<body>
<input type="button" value="点我试试">
<div class="box" id="red"></div>
</body>
<script>
// console.log($(".box").is(".red"))//false
// console.log($(".box").is("#red"))//true
// console.log($(".box").hasClass("yellow"))//false
//// $(".box")[0].className = "red" //box被替换成class了；
// $(".box").addClass("red border");//直接在类名box后加了两个类red 和 border
// $(".box").removeClass("red");//删除了其中的一个类名red；
//
$("input")[0].onclick=function () {
if($(".box").is(".red")){
$(".box").removeClass("red")
}
else{
$(".box").addClass("red")
}
}
</script>
</html>
jquery的内置动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{100px;height:100px;background: red;position: absolute;left:0;top:0;}
</style>
<script src="../jquery.js"></script>
</head>
<body>
<div class="box"></div>
<br>
<br>
<br>
<br>
<br>
<input type="button" id="btn" value="开始">
</body>
<script>
//先左移500，然后下移300，再宽度增加100
$("#btn")[0].onclick=function () {
$(".box").animate({
left:500
}).animate({
top:300,
}).animate({
"+=100"
})
}
</script>
</html>
jquery的非内置动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{200px;height:200px;background: red}
</style>
<script src="../jquery.js"></script>
</head>
<body>
<input type="button" value="隐藏" id="btn1">
<input type="button" value="显示" id="btn2">
<input type="button" value="隐藏/显示" id="btn3">
<input type="button" value="上拉" id="btn4">
<input type="button" value="下拉" id="btn5">
<input type="button" value="上拉/下拉" id="btn6">
<input type="button" value="淡出" id="btn7"> //fadeIn()
<input type="button" value="淡入" id="btn8"> //fadeOut()
<input type="button" value="淡出/淡入" id="btn9">
<input type="button" value="半透明" id="btn10">
<div class="box"></div>
</body>
<script>
//点击第一个按钮，让盒子先隐藏再显示最后颜色变黄
$("#btn1")[0].onclick=function () {
$(".box").hide(2000).show(2000,function () {
$(".box").css("background","yellow")
})//在show后面加一个回调函数，才可以在显示完之后变成黄色，不会发生异步；
// $(".box").hide(2000).show(2000).css("background","yellow");//发生了异步，会在按钮的瞬间变成黄色；
}
//显示
$("#btn2")[0].onclick=function () {
$(".box").show(2000)
}
//显示/隐藏
$("#btn3")[0].onclick=function () {
$(".box").toggle(2000)
}
//上拉
$("#btn4")[0].onclick = function(){
$(".box").slideUp(1000)
}
$("#btn5")[0].onclick = function(){
$(".box").slideDown(1000)
}
$("#btn6")[0].onclick = function(){
$(".box").slideToggle()
}
$("#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.5)
}
</script> </html>
动画执行顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{100px;height:100px;background: red;position: absolute;left:0;top:0;}
</style>
<script src="../jquery.js"></script>
</head>
<body>
<div class="box"></div>
<br>
<br>
<br>
<br>
<br>
<input type="button" id="btn" value="开始">
</body>
<script>
animate支持同步函数。若不支持，则需要使用queue
box右移持续时间2s，然后下移。
$("#btn")[0].onclick = function() {
$(".box").animate({
left: 600
}, 2000, function () {
$(".box").animate({
top: 500
})
})
}
box右移持续时间2s，然后下移。然后再变色
$("#btn")[0].onclick = function() {
$(".box").animate({
left:600
},2000).animate({
top:500
},function(){
$(".box").css("background","yellow")
})
}
box右移持续时间2s，然后下移持续2s。然后再变色，再左移
$("#btn")[0].onclick = function() {
$(".box").animate({
left:600
},2000).animate({
top:500
},2000) .queue(function(next){
$(".box").css("background","yellow")
next();
}).animate({
left:0
})
}
</script>
</html>
jquery动画的延迟和停止
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{100px;height:100px;background: red;position: absolute;left:0;top:0;}
</style>
<script src="../jquery.js"></script>
</head>
<body>
<div class="box"></div>
<br>
<br>
<br>
<br>
<br>
<input type="button" id="btn" value="开始">
<input type="button" id="btn2" value="停止">
</body>
<script>
//延迟1s右移，移动时间2s，延迟1s下移，延迟1s左移，延迟1s下移动
// $("#btn")[0].onclick = function() {
//
// $(".box").delay(1000).animate({
// left:600
// },2000).delay(1000).animate({
// top:500
// }).delay(1000).animate({
// left:0
// }).delay(1000).animate({
// top:0
// })
//
// }
$("#btn")[0].onclick=function () {
$(".box").animate({
left:600
},2000).animate({
top:500
},2000).animate({
left:0
},2000).animate({
top:0
},2000)
}
$("#btn2")[0].onclick = function(){
$(".box").stop(true,false);
}
// stop():两个参数，都是布尔值，默认为false
// 1.动画队列:false：不操作；true：清空了
// 2.当前动画:false：立即停止；true：立即到终点
stop()等价于stop(false,false):停止被选元素当前的动画，但允许完成以后队列的所有动画。
</script>
</html>
jq的模块：
// jq的模块 // 选择器：$.fn // 动画：$.fx // 毫秒数，频率 $.fx.interval = 100; //控制这个页面的所有动画每隔100ms做一帧动画。 //是否做动画 $.fx.off=true;//控制这个页面的所有动画都是去动画效果，直接到达终点。
ps：实际开发中基本不会用到这两个属性
$("#btn")[0].onclick = function(){ $(".box").animate({ left:600 },2000).animate({ top:500 }) }