@Author：Runsen @Date：2019/05/22
@updated Date：2020/05/30
我是非常反对用JQ的，原生的JS效果其实比JQ差不了太多，最近还是整理下JQ的笔迹吧
菜鸟教程
文章目录
jQuery导入JQJS和JQ的转化$() 定义JQ对象eachJq操作属性操作样式
事件动画animatestopdelay
jQuery
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
JQ是JS写的插件库，说白了，就是一个js文件
导入JQ
JS和JQ的转化
$() 定义JQ对象
each
<body>
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
</ul>
<script src="jquery.js"></script>
<script>
// var $li = $("ul li");
$("ul li").each(function (i) {//第一个参数默认是序号/小标
// this.innerHTML = "我是第"+i+"个";
$(this).html("我是第"+i+"个");
})
</script>
</body>
Jq操作属性
<body>
<div id="box">
<p class="box">1</p>
<p>2</p>
<p class="wrap">3</p>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
<script>
/*
attr 设置/获取 标签属性
prop 设置/获取 标签属性 废除
removeAttr() 移除标签属性
removeProp() 废除
addClass 加class名字
removeClass
传class 移除你传的那个
没有 移除全部
toggleClass 有就删没有则加
操作class类名
jq js
html() innerHTML
text() innerText
val() value
在jq里面，设置某个值的时候，一般自带遍历
获取某个值的时候，一般获取第一个
*/
var $box = $("#box");
// alert($box.attr("id"));//读操作
$box.attr("class","show");//写操作
$box.removeAttr("class");
$("p").eq(1).addClass("box show");
// $("p").eq(1).removeClass();
$("p").eq(1).removeClass("show");
$("p").toggleClass("wrap");
alert($("p").html());
</script>
</body>
操作样式
<style>
* {
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
padding: 50px;
border: 10px solid red;
background: #aa8899;
margin: 50px auto;
position: relative;
}
#wrap{
width: 50px;
height: 50px;
background: #111caa;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id="box">
<div id="wrap"></div>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
<script>
/*
.css()
.width()
.height()
innerWidth() / innerHeight 算了padding
outerWidth() / outerHeight 算了 padding+border
offset()
该对象有top /left 属性
代表到浏览器窗口的 top/left的值
position()
该对象有top /left 属性
代表到定位父级的 top/left的值
*/
//alert($("#box").width());//200
//alert($("#box").innerWidth());//300
//alert($("#box").outerWidth());//320
// oBox.style.width = "100px";
//oBox.style.cssText ="width: 100px;height: 100px;";
// $("#box").css("width","100px");
/*$("#box").css({
"width": "100px",
"height": "100px"
});*/
//alert($("#box").offset().left);
//alert($("#box").offset().top);
alert($("#wrap").position().left);
alert($("#wrap").position().top);
</script>
</body>
就是改变类名来改变样式
事件
<body>
<ul id="box">
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
</ul>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
/*
jquery里面的事件
都是函数形式的，去掉on的那种
原理上事件都是事件绑定的形式而不是赋值的形式
jquery事件绑定、解绑
所有事件的添加都是绑定的形式
可以通过on来添加事件
*/
var oBox = document.querySelector("#box");
/*oBox.onclick = function () {
alert(1);
};
oBox.onclick = function () {
alert(2);
};*/
/*$("#box").click(function () {
alert(1);
});
$("#box").click(function () {
alert(2);
})*/
//on绑定单个事件
/*$("#box li").on("click",function () {
alert($(this).index());//index()在jq里面是方法 对应的是你的下标
});*/
//on绑定多个事件
/*$("#box").on({
"click": function () {
console.log(1);
},
"mouseenter": function () {
console.log(2);
},
"mouseleave": function () {
console.log(3);
}
});*/
//$("#box").off("mouseenter");//移除满足条件的事件
//$("#box").off();//移除事件
// $("#box").hover(function () {
// console.log(5);//移入移出都执行这个函数
// });
$("#box").hover(function () {
console.log(5);//移入函数
},function () {
console.log(9);//移出函数
});
</script>
</body>
动画
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
background: #aa8899;
}
</style>
</head>
<body>
<div id="box"></div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
/*
不传参 瞬间显示隐藏 传一个数字参数，代表毫秒，改变宽、高、透明度
show
hide
toggle
默认时间300毫秒 改变透明度
fadeIn
fadeOut
fadeTo(1000,0.1) 可以把透明度设置一个值，时间参数不能省略
默认时间300毫秒 改变高度
slideDown
slideUp
slideToggle 改变高度
这三组，不仅仅可以接受一个数字参数，能接受的参数有：
* number / string 代表动画时间（可缺省） 毫秒数 / （"fast" "normal" "slow"）
* string 代表运动曲线（可缺省）
* function 代表回调函数（可缺省）
*/
var $box = $("#box");
$(document).click(function () {
// $box.toggle(2000);
// $box.fadeTo(2000,0.2);
// $box.slideToggle(2000);
});
var off = true;
$(document).click(function () {
if(off){
// $box.hide(2000);
// $box.fadeOut(3000);
$box.slideUp(1000);
}else{
// $box.show(2000);
// $box.fadeIn(3000);
$box.slideDown(1000);
}
off = !off;
})
</script>
</body>
animate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
background: #33aa75;
}
</style>
</head>
<body>
<div id="box"></div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
/*
animate
传参：
* obj 必传 { }格式代表的变化的属性和目标值 数值变化
* number/string 可缺省 代表毫秒数 或者 三个预设好的值 默认300
* string 可缺省，代表运动曲线，默认jQuery提供"linear" 和 "swing"
* function 可缺省，代表动画结束后的回调函数
*/
var $box = $("#box");
$box.animate({
"width": "400px",
"height": "400px"
});
</script>
</body>
</html>
stop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
li{
list-style: none;
float: left;
height: 50px;
line-height: 50px;
padding: 0 10px;
background: #aa8899;
margin-right: 5px;
}
</style>
</head>
<body>
<ul id="box">
<li>佚名</li>
<li>老谭</li>
<li>空大</li>
<li>明明</li>
<li>王洁林</li>
<li>无处不风景</li>
</ul>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
<script>
/*
stop
清空动画队列，可以接受两个布尔值参数
第一个不用管
第二个决定是否瞬间到达队列终点，true 到 false(默认) 不到
*/
$("#box li").hover(function () {
$(this).stop(true,false).animate({"height": "500px"})
},function () {
$(this).stop(true,false).animate({"height": "50px"})
})
</script>
</body>
</html>
delay
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background: #33aa75;
}
</style>
</head>
<body>
<div id="box"></div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
<script>
/*
delay 只对动画有用
*/
/*$(document).click(function () {
// $("#box").delay(3000).fadeOut(2000);
$("#box").delay(3000).css("width","300px");
})*/
$("#box").delay(3000).queue(function () {
$("#box").css("width","300px");
})
</script>
</body>
</html>
更多的
http://jquery.cuishifeng.cn/
https://www.runoob.com/jquery/jquery-tutorial.html
刘润森！
认证博客专家
Python
Java
前端
17年就读于东莞XX学院化学工程与工艺专业，GitChat作者。Runsen的微信公众号是"Python之王"，因为Python入了IT的坑，从此不能自拔。公众号内容涉及Python，Java计算机、杂谈。干货与情怀同在。喜欢的微信搜索：「Python之王」。个人微信号：RunsenLiu。不关注我公号一律拉黑！！！
