<html>
<head>
<script type="text/javascript"src="js/jquery">
</head>jquery
</html
text 修改内容， show 显示操作
hide 方法关闭 click 点击事件
show（里面可添加函数 slow） 动画特效
$（div：even） 取得偶数 odd 为奇数
jquery
兼容各种主流的浏览器
min压缩版
jQuery是前端框架,下载jQuery的js包来实现
jQuery是同时和JavaScript脚本一起使用的
在脚本中创建 function.名称 函数
在网页加载完成之后,使用$来调用实现函数
jquery
下载
1.压缩
2.
创建新的数据库，创建新的数据，
后代选择器 中间用空格
子代选择器 中间用>符号
什么是jQuery？
jQuery是一个封装好的JavaScript框架，可以更加简单的实现一些js的功能。
里面提供了很多简单易用，功能强大的东东。
兼容各个浏览器。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>引入jQuery</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
</body>
</html>
使用前先引入
<script type="text/javascript" src="xxxx.jQuery.js" ></script>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>onload事件的几种方式</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// function init(){
// alert("init");
// }
// window.onload = init;
// window.onload = function () {
// alert("init");
// };
// function init(){
// alert("init");
// }
// $(init);//用来指定网页加载完成后要执行的函数
$(function(){
alert("init");
});
</script>
</head>
<body>
<p>
想要等文档加载完再执行的函数<br />
1，在body里面添加onload事件<br />
2，window.onload = function (){}<br />
3，$(function(){});<br />
</p>
</body>
</html>
想要等文档加载完再执行的函数
1，在body里面添加onload事件
2，window.onload = function (){}
3，$(function(){});
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>jQuery id选择器</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
// $("#one");//它会返回一个jQuery对象
$("#one").show();//display:block
});
</script>
</head>
<body>
<div id="one" style="display:none;">Category: Selectors</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>jQuery id选择器</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
// $("#one");//它会返回一个jQuery对象
// $("#one").show();//display:block
$("#one").text("jQuery");
});
</script>
</head>
<body>
<div id="one">Category: Selectors</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>jQuery id选择器</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
// $("#one");//它会返回一个jQuery对象
// $("#one").show();//display:block
// $("#one").text("jQuery");
// $("#one").get(0).innerText = "jQuery";
//DOM对象
// var div = document.getElementById("one");
// div.innerText = "DOM";
// document.getElementById("one").innerText = "DOM";
// var div = document.getElementById("one");
// div.style.display = "block";
document.getElementById("one").style.display = "block";
});
</script>
</head>
<body>
<div id="one" style="display:none">Category: Selectors</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>jQuery id选择器</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
// $("#one");//它会返回一个jQuery对象
// $("#one").show();//display:block
// $("#one").text("jQuery");
$("#one").get(0).innerText = "jQuery";
//DOM对象
// var div = document.getElementById("one");
// div.innerText = "DOM";
// document.getElementById("one").innerText = "DOM";
// var div = document.getElementById("one");
// div.style.display = "block";
// document.getElementById("one").style.display = "block";
});
</script>
</head>
<body>
<div id="one">Category: Selectors</div>
</body>
</html>
jQuery方式
jQuery文档
地址：http://api.jquery.com/
文档下面的几个分类
选择器 Selectors
属性操作 Attributes
特效 Effects
事件 Events
CSS样式处理 CSS
遍历 Traversing
操作DOM节点 Manipulation
jQuery对象和DOM对象的区别
获取并添加事件
$("#id").click(function(){ });
获取并设置内容
$("#id").innerHTML = ""; // 错误
$("#id").html("");
获取html元素
$("#id")
参数是选择器
选择器有哪些
全部、类、标签、ID、多个
选择器返回的是一个jQuery对象
http://api.jquery.com/category/selectors/basic-css-selectors/
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>jQuery选择器</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$("*")
$("#one")
$(".two")
$("div")
});
</script>
</head>
<body>
<div id="one">Category: Selectors</div>
<div class="two">Category: Selectors</div>
<div class="two">Category: Selectors</div>
</body>
</html>
选择器有哪些
全部、类、标签、ID、多个
选择器返回的是一个jQuery对象
http://api.jquery.com/category/selectors/basic-css-selectors/
jquery插件
validation (表单校验插件)
pickadate (选择日期)
echarts（统计图）
chosen （选择城市）
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>jQuery广告弹窗</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style type="text/css">
#ad{
width:300px;
height:300px;
background-color:antiquewhite;
position:fixed;
bottom:0;
right:0;
display:none;
}
</style>
<script type="text/javascript">
setTimeout(function(){
$("#ad").show();
},3000);
setTimeout(function(){
$("#ad").hide();
},5000);
$(function(){
$("#closeBtn").click(function(){
$("#ad").hide();
});
});
</script>
</head>
<body>
<div id="ad">
<button id="closeBtn">关闭</button>
</div>
</body>
</html>
授课教师
SiKi学院老师
课程特色
下载资料(1)
视频(20)
