JQ是JS写的插件库，说白了，就是一个js文件,凡是用jq能实现的，js都能实现，js能实现的，jq却不一定能实现
JQ的理念：Write less, do more，
打开网页https://www.bootcdn.cn/jquery/
可以选择最新的.js文件载入。点击复制标签，在html文件中直接粘贴即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-jQuery</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
</script>
</body>
</html>
本地引入：将上图种的.js文件复制到地址栏打开，可以出现一万多条代码，这就是JQ，将之复制到本地文件夹，在script标签连接即可。无论是网络引用，还是本地引用，在使用的时候，请再次打开一个script标签，需要写的内容放入新打开的标签内。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-jQuery</title>
</head>
<body>
<script src="1.css"></script>
<script>
</script>
</body>
</html>
JQ的选择器：
在jQ中使用选择器选择元素和在CSS中使用CSS选择器是一样的 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-jQuery</title>
<style type="text/css">
#div1{
width: 600px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<button id="but">按钮</button>
<div id="div1">
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$(function() {
$("#but").click(function (){
alert(123);
});
});
</script>
</body>
</html>
JQ的基本使用
| html() |
text() |
get()/[] |
$() |
click() |
hover() |
| 修改内容 |
修改内容 |
转换 |
转换 |
点击 |
鼠标 |
| append() |
prepend |
before() |
after() |
empty() |
remove() |
| 追加 |
添加 |
前 |
后 |
清空 |
移除 |
<script>
$("#but").click(function () {
$(".p1").html("点击后的转变")
})
$("#div1").hover(function () {
alert("鼠标移入")
},function () {
alert("鼠标移出")
})
</script>
<script>
// jq转js
$(".p1").get(0).innerText = "我被修改了";
$(".p1")[1].innerText = "我再次被修改了";
//js转jq
var p1 = document.getElementsByClassName("p1")[2];
$(p1).html("js修改")
</script>
<ul>
<li>111111</li>
<li>222222</li>
<li>333333</li>
<li>444444</li>
<li>555555</li>
</ul>
<script>
//遍历列表
$("ul li").each(function (i) {
document.write(i)
})
$("ul li").each(function (i) {
$(this).html("我是第"+i+"个li")
})
</script>
<script>
//js转换jq
//原生 js获取对象
var box = document.getElementById("div1");
var p1 = document.getElementsByClassName("p1");
p1[0].innerHTML = "123"
//jq获取对象
var $box = $("#div1");
$box.html("123")
$box.text("修改盒子")
var $p = $(".p1")
$p[0].innerText = "jq转js对象"
$p.get(1).innerHTML = "jq转js对象2"
</script>
<script>
function aaa() {
//length eq;//eq是等于
document.write($box.length);
$p.eq(1).html("456");
//append prepend
$p.eq(2).append(",后面追加hello");//后面追加
$p.eq(3).prepend("前面添加python，");//前面添加
//before after
$p.eq(4).before(",显示在前面");//前面显示
$p.eq(5).after("显示在后面，");//后面显示
}
aaa()
</script>
<script>
function aaa() {
//empty remove
$p.eq(0).empty();//清空
$p.eq(1).remove();//移除
}
aaa()
</script>
jQ基本使用二：
| 参数 |
描述 |
| attr |
操作属性 |
| removeAttr |
删除操作属性 |
| addClass |
添加属性 |
| removeClass |
移除属性 |
| toggleClass |
切换添加或删除属性 |
| hasClass |
判断属性是否存在 |
| each() |
遍历 |
| index() |
索引 |
| scroll |
滚动条使事件 |
| scrollTop |
滚动条使事件 |
| scrollLeft |
滚动条使事件 |
<script>
$("#div1").attr({"class":'div2','a':'b'});//添加属性
$("#div1").removeAttr('a');//删除属性
$("#div1").addClass('test');//添加class属性，无论添加多少个，每一个都可以选定标签
$("#div1").removeClass('a');//删除class属性
alert($("#div1").hasClass('a'));//查询class属性是否存在
//each index
$(".p1").each(function (index) {//可以遍历标签，打印出值
document.write(index)
});
$(".p1").click(function () {//点击p标签，可以弹出p标签的索引值
alert($(this).index());
});
</script>
<script>
$(window).scroll(function () {
console.log($(document).scrollTop());//距离顶部
console.log($(document).scrollLeft());//距离左部
})
</script>
jQ基本使用三：
| 参数 |
描述 |
| parent |
父元素 |
| children |
子元素 |
| siblings |
兄弟元素 |
| find |
后代元素 |
| parents |
祖宗元素 |
| position |
定位父级 |
| offset |
窗口 |
| width/height |
宽/高 |
| on/off |
循环添加/移除 |
<script>
//parent children siblings find parents
console.log($("#div1 ul").children());
console.log($("#div1 ul").parent());
console.log($("#div1 ul").siblings());
console.log($("#div1 ul").find());
console.log($("#div1 ul").parents());
</script>
<script>
//position offset width height
var $boxp = $("#div1").position();
document.write("距离定位父级left",$boxp.left+"<br>");
document.write("距离定位父级top",$boxp.top+"<br>");
var $boxo = $("#div1").offset();
document.write("距离窗口left",$boxo.left+"<br>");
document.write("距离窗口top",$boxo.top+"<br>");
document.write("盒子宽",$("#div1").width()+"<br>");
document.write("盒子高",$("#div1").height()+"<br>");
</script>
<script>
//on off
$("#div1 ul li").click(function () {
var index = $(this).index();
$(this).html(index+1)
});
$("#div1 ul").append("<li>666666</li>");
$("#div1 ul li").off(click);
$("#div1 ul ").on('click','li',function () {
var index = $(this).index();
$(this).html(index+1)
});
$("#div1 ul").append("<li>666666</li>");
</script>
jQ操作样式
<script>
$("#div1").css({
"width":800,
"height":400,
"border":'1px solid black',
"background":'green'
})
</script>
动画
常用特俗符号：
| hide() |
show() |
slideUp |
slideDown |
slideToggle |
fadeIn |
fadeOut |
fadeTo |
| 隐藏 |
显示 |
向上 |
向下 |
取反 |
淡入 |
淡出 |
自定义 |
| fadeToggle |
animate |
stop |
delay |
| 取反 |
动画 |
停止 |
延迟 |
<script>
//鼠标移入隐藏，移出显示
//hide show Toggle
$("#div1").hover(function () {
$("#div2").hide(1000);
},function () {
$("#div2").show(1000);
//$("#div2").toggle(1000);//取反
});
//向上隐藏，向下显示
//slideUp slideDown slideToggle delay
$("#div2").slideUp(1000);
$("#div2").slideDown(1000);
$("#div2").slideUp(1000).delay(2000).slideDown(1000);
//淡出，淡入
//fadeIn fadeOut fadeToggle delay
$("#div2").fadeOut(1000).delay(2000).fadeIn(1000);
$("#div2").fadeToggle(1000).delay(2000).fadeToggle(1000);
$("#div2").fadeTo(1000,0.2);//自定义透明度为：0.2
//动画，停止
//animate stop
$("#div1").hover(function () {
$("#div2").stop(true,true).animate({
"top":100
}, 1000)
},function () {
$("#div2").stop(true,true).animate({
"top":0
}, 500)
})
</script>
