jquery的概念
js query
jquery库
封装了大量js，封装js的入口函数、兼容性问题、DOM操作、事件、ajax
使用jquery
下载包
引用
<script src="jquery.js"></script>
<script>
//入口函数
$(function(){
//DOM操作三步走：事件源 事件 事件驱动
//选择器 就是来获取事件源的
id
$('#box')
class
$('.box')
标签
$('div')
//事件和事件驱动 在click方法中的函数称为回调函数
$('#box').click(function(){
//对样式的操作
.css()方法
})
});
</script>
jquery的文件讲解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wrap{
100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="box" class="wrap">qing</div>
<!--1导入模块，在前端中一个js文件是模块，一个css也可以是一个模块，一个html/png/mp3-->
<script type="text/javascript" src="./jquery.js"></script>
<script>
//jquery内部的aip 99%都是方法
console.log(jQuery)
console.log($("#box"))
//三步走
$("#box").click(function () {
//千万不要用js的属性和方法 js调用js的属性和方法 jquery对象调用的是jquery的对象和方法
$(".wrap").css(
{
"backgroundColor" :"yellow",
"300px"
}
)
})
</script>
</body>
</html>
jquery的入口函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
</head>
<body>
<div id="box">
</div>
<script>
//1.入口函数 不用等待图片资源加载完成之后就可以调用 它没有事件覆盖现象
// $(document).ready(function () {
// //回调函数
// console.log($("#box"))
// })
$(function () {
console.log($("box"))
});
$(function () {
});
</script>
</body>
</html>
jquery的动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
200px;
height: 200px;
background-color: red;
/*display: none;*/
}
</style>
</head>
<body>
<button>动画</button>
<button>动画</button>
<button>动画</button>
<button>动画</button>
<button>动画</button>
<button>动画</button>
<div id="box"></div>
<script src="jquery.js"></script>
<script>
$(function () {
console.log($("button"));
var isShow = true;
$("button").click(function () {
//隐藏，显示 第二个元素是隐藏或显示后执行的函数
// $("#box").hide(2000);
// $("#box").show(2000,function () {
// alert(22222);
// })
//显示 淡入淡出
// $("#box").fadeIn(5000);
// $("#box").fadeOut(5000);
if(isShow){
$("#box").stop().slideUp(1000);
isShow = false;
}else {
$("#box").stop().slideDown(1000);
isShow = true;
}
})
})
</script>
</body>
</html>