先说几句题外的：
JQuery之父John Resig绝对是个天才，他完美解决了那些脸盲、强迫症和拖延症晚期程序员的工作生活，将程序员从庞杂的代码中解放出来。尤其是那一个$用的简直出神入化。（更重要的是强迫学英语）
1.获取元素：
如果想要使用JS修改页面，一般情况下都需要先获取元素。而与原生JS相比，使用JQuery可以更简单的获取元素：
$("#id") //通过ID名获取
$(".class") //通过class名获取
$("div") //获取html中全部的div元素
$("div:first") //获取html中第一个div元素（这里只有first（第一个）和last（最后一个））
$("*") //获取全部元素
2.对元素的操作
$("#box").css("width") //获取id为box的元素的width属性
$("#box").css("width",200) //设置id为box的元素的width属性为200（这种方式只能设置一个,且会自动补全px）
$("#box").css("width","200px") //设置id为box的元素的width属性为200px(这种方式只能设置一个)
$("#box").css({"width","200"}) //设置id为box的元素的width属性为200（可以同时设置多个属性，且会自动补全px）
3.动画方法
$("div").animate(JS对象，动画时间，动画类型（只调用JQuery时只有两种方式，可以不写），回调函数)
4.页面加载完成后再执行函数
document.onload=函数 //原生JS写法
$(document).ready(函数) //只能加载DOM结构
$(函数) //只能加载DOM结构
$(window).ready() //所有资源都加载完毕
5.一个始终都在的广告框的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 2000px;
}
#div1 {
width: 100px;
height: 100px;
background: blue;
color: white;
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div id="div1"> 我是小广告 </div>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script>
$("body,html").animate({"scrollTop": 500})//保证浏览器的兼容性
$(document).scroll(function() {
var y = $(document).scrollTop();
$("#div1").stop(true,true).animate({"top": y+200}, 500);
})
</script>
</body>
</html>
6.一个高端的回到顶端的函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 2000px;
}
#div1 {
width: 100px;
height: 30px;
background: blue;
color: white;
position: fixed;
right: 0;
bottom: 0;
display: none;
}
</style>
</head>
<body>
<button id="div1"> 回到顶部 </button>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script>
$("#div1").click(function() {
$("body,html").animate({scrollTop: 0});
});
$(document).scroll(function() {
var top = $(document).scrollTop();
if (top > 200) {
$("#div1").show();
} else {
$("#div1").hide();
}
})
</script>
</body>
</html>
7.一个更简单的点击事件函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 2000px;
}
div {
width: 100px;
height: 100px;
background: blue;
color: white;
}
</style>
</head>
<body>
<div> 测试1 </div>
<div> 测试2 </div>
<div> 测试3 </div>
<div> 测试4 </div>
<div> 测试5 </div>
<div> 测试6 </div>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script>
$("div").click( m1 );
function m1() {
// this.isRed 是物体对象的属性
if (!this.isRed) {
this.Red= true; // 如果不存在，默认为true，代表 红色
} else {
this.isRed = !this.isRed;
}
if (this.isRed) {
$(this).css({"background": "red"})
} else {
$(this).css({"background": "blue"})
}
}
</script>
</body>
</html>
网友评论