jQuery
1.简介
- jQuery概述:
- jQuery特点:
- jQuery使用原因:
2.安装
- 直接引用
- CDN引用
- 常见CDN
- 下载连接
3.jQuery语法
1、基本使用
2、jQuery选择器
3、jQuery事件
语法
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#res{width: 600px; heigth:200px; font-size: 50px; font-weight: bold; line-height: 200px;background-color:red;}
</style>
</head>
<!--基本使用-->
<body>
<!--//注册jQuery-->
<script src="jquery-3.4.1.min.js"></script>
<button id="btn">填充数据</button>
<div id="res">
这里!!!!
</div>
<script type="text/javascript">
function fun(){
$("#res").hide();
}
//第一种绑定方法
$("#btn").click(fun);
//第二种绑定方法
$("#res").mouseenter(function(){
alert("触发了mouseleave 事件!!");
});
</script>
</body>
</html>
4.jQuery效果
1、jQuery隐藏
- 示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#res{width: 600px; heigth:200px; font-size: 50px; font-weight: bold; line-height: 200px;background-color:red;}
</style>
</head>
<!--显示和隐藏-->
<body>
<!--//注册jQuery-->
<script src="jquery-3.4.1.min.js"></script>
<button id="btn1">隐藏按钮</button>
<button id="btn2">显示按钮</button>
<button id="btn3">切换按钮</button>
<div id="res">
这里是测试区域!!!!
</div>
<script type="text/javascript">
$(function(){
//隐藏按钮
function fun(){
$("#res").hide();
}
//第一种绑定方法
$("#btn1").click(fun);
//显示按钮
$("#btn2").click(function(){
$("#res").show();
});
//切换按钮
$("#btn3").click(function(){
$("#res").toggle(1000,function(){
alert("finshed!!!");
});
});
});
</script>
</body>
</html>
2、jQuery淡入/淡出
- 示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#res{width: 600px; heigth:200px; font-size: 50px; font-weight: bold; line-height: 200px;background-color:red;}
</style>
</head>
<!--测试淡入/淡出-->
<body>
<!--//注册jQuery-->
<script src="jquery-3.4.1.min.js"></script>
<button id="btn1">淡入按钮</button>
<button id="btn2">淡出按钮</button>
<button id="btn3">切换按钮</button>
<div id="res">
这里是测试区域!!!!
</div>
<script type="text/javascript">
$(function(){
//淡入按钮
function fun(){
$("#res").fadeIn(3000);
//设置透明度
$("#res").fadeTo(1000,0.9);
}
//第一种绑定方法
$("#btn1").click(fun);
//淡出按钮
$("#btn2").click(function(){
$("#res").fadeOut(3000);
});
//切换按钮
$("#btn3").click(function(){
$("#res").fadeToggle(1000,function(){
alert("finshed!!!");
});
});
});
</script>
</body>
</html>
3、jQuery滑动
- 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#res{width: 600px; heigth:200px; font-size: 50px; font-weight: bold; line-height: 200px;background-color:red;}
</style>
</head>
<!--测试滑动-->
<body>
<!--//注册jQuery-->
<script src="jquery-3.4.1.min.js"></script>
<button id="btn1">向上滑动</button>
<button id="btn2">向下滑动</button>
<button id="btn3">切换滑动</button>
<div id="res">
这里是测试区域!!!!
</div>
<script type="text/javascript">
$(function(){
//淡入按钮
function fun(){
$("#res").slideUp(1000);
}
//第一种绑定方法
$("#btn1").click(fun);
//淡出按钮
$("#btn2").click(function(){
$("#res").slideDown();
});
//切换按钮
$("#btn3").click(function(){
$("#res").slideToggle(1000,function(){
alert("finshed!!!");
});
});
});
</script>
</body>
</html>
4、jQuery动画
创建动画
格式
停止动画
链式编程
回调函数
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div{width: 300px;height: 100px;border: solid 5px #f00;}
</style>
</head>
<!--jQuery动画演示-->
<body>
<!--引用jQuery-->
<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
//为启动动画按钮绑定事件
$("#btn1").click(function(){
//添加动画
$(".div").animate({
width:'105px',
height:'+=50px',
borderWidth:'+=10px'
},3000,function(){
alert("动画加载成功!!");
});
});
//为停止动画按钮添加事件
$("#btn2").click(function(){
//停止动画
$(".div").stop();
});
});
</script>
<button id="btn1">启动动画</button>
<button id="btn2">停止动画</button>
<div id="div" class="div"></div>
</body>
</html>
5、jQuery DOM操作
- 参考我另一篇博客: jQuery DOM操作.
6、jQuery AJAX操作
- 参考我另一篇博客: jQuery AJAX操作.
7、jQuery 遍历
- 遍历祖先
- 遍历孩子
- 遍历兄弟
- 过滤遍历
- 遍历示例代码1;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{width:300px; height: 300px; border: solid 10px #f00;}
#d21{width:300px; height: 100px; background-color: #ff0;}
#d22{width:300px; height: 100px; background-color: #00f;}
#d23{width:300px; height: 100px; background-color: #0f0;}
#d3{width:100px; height: 100px; background-color: #999; margin-left: 100px;}
</style>
</head>
<!--遍历-->
<body>
<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
//parent 直接父节点
//$("#d3").parent().css("backgroundColor","#111");
//parents 所有父节点
//$("#d3").parents().css("border","dotted 3px #f00");
//parents 部分父节点1
//$("#d3").parents("#d1").css("border","dotted 3px #f00");
//parents 部分父节点2
//$("#d3").parentsUntil("#d1").css("border","dotted 3px #f00");
//children() 所有直接子孙
//$("#d1").children().css("border","solid 5px #ccc")
//find() 选定的直接子孙
$("#d1").find("#d22").css("border","solid 5px #ccc");;
});
</script>
<div id="d1">
<div id="d21">
<div id="d3"></div>
</div>
<div id="d22"></div>
<div id="d23"></div>
</div>
</body>
</html>
- 遍历示例代码2;
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style type="text/css">
#d{width: 500px; height: 500px; border: 5px solid #f00;}
#d1{width:500px; height:100px; background-color: #ff0;}
#d2{width:500px; height:100px; background-color: #0f0;}
#d3{width:500px; height:100px; background-color: #00f;}
#d4{width:500px; height:100px; background-color: #0ff;}
#d5{width:500px; height:100px; background-color: #ccc;}
</style>
</head>
<!--遍历同胞节点-->
<body>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
//$("#d2").siblings().html("siblings");
//$("#d2").next().html("next");
//$("#d2").nextAll().html("nextAll");
//$("#d2").nextUntil("#d5").html("nextUntil");
//$("#d2").prev().html("prev");
//$("#d5").prevAll().html("prevAll");
//$("#d5").prevUntil("#d3").html("preUntil");
//$("#d").children().first().html("first");
//$("#d").children().last().html("last");
//$("#d").children().eq(1).html("second");
//$("#d").children().filter("#d3").html("d3");
//$("#d").children().not("#d3").html("not d3");
})
</script>
<div id="d">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
</div>
</body>
</html>
8、jQuery noConflict方法