简介和背景
JQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
好了，话不多说，让我们进去JQuery的世界！
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>
网友评论