JQ是JS寫的插件庫(kù)，說白了坯屿，就是一個(gè)js文件,凡是用jq能實(shí)現(xiàn)的油湖，js都能實(shí)現(xiàn)，js能實(shí)現(xiàn)的领跛，jq卻不一定能實(shí)現(xiàn)
JQ的理念：Write less, do more乏德，
打開網(wǎng)頁(yè)https://www.bootcdn.cn/jquery/
可以選擇最新的.js文件載入。點(diǎn)擊復(fù)制標(biāo)簽吠昭，在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文件復(fù)制到地址欄打開喊括，可以出現(xiàn)一萬多條代碼，這就是JQ矢棚，將之復(fù)制到本地文件夾郑什，在script標(biāo)簽連接即可。無論是網(wǎng)絡(luò)引用蒲肋，還是本地引用蘑拯，在使用的時(shí)候，請(qǐng)?jiān)俅未蜷_一個(gè)script標(biāo)簽兜粘，需要寫的內(nèi)容放入新打開的標(biāo)簽內(nèi)申窘。
<!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() |
| 修改內(nèi)容 |
修改內(nèi)容 |
轉(zhuǎn)換 |
轉(zhuǎn)換 |
點(diǎn)擊 |
鼠標(biāo) |
| append() |
prepend |
before() |
after() |
empty() |
remove() |
| 追加 |
添加 |
前 |
后 |
清空 |
移除 |
<script>
$("#but").click(function () {
$(".p1").html("點(diǎn)擊后的轉(zhuǎn)變")
})
$("#div1").hover(function () {
alert("鼠標(biāo)移入")
},function () {
alert("鼠標(biāo)移出")
})
</script>
<script>
// jq轉(zhuǎn)js
$(".p1").get(0).innerText = "我被修改了";
$(".p1")[1].innerText = "我再次被修改了";
//js轉(zhuǎn)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+"個(gè)li")
})
</script>
<script>
//js轉(zhuǎn)換jq
//原生 js獲取對(duì)象
var box = document.getElementById("div1");
var p1 = document.getElementsByClassName("p1");
p1[0].innerHTML = "123"
//jq獲取對(duì)象
var $box = $("#div1");
$box.html("123")
$box.text("修改盒子")
var $p = $(".p1")
$p[0].innerText = "jq轉(zhuǎn)js對(duì)象"
$p.get(1).innerHTML = "jq轉(zhuǎn)js對(duì)象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基本使用二：
| 參數(shù) |
描述 |
| attr |
操作屬性 |
| removeAttr |
刪除操作屬性 |
| addClass |
添加屬性 |
| removeClass |
移除屬性 |
| toggleClass |
切換添加或刪除屬性 |
| hasClass |
判斷屬性是否存在 |
| each() |
遍歷 |
| index() |
索引 |
| scroll |
滾動(dòng)條使事件 |
| scrollTop |
滾動(dòng)條使事件 |
| scrollLeft |
滾動(dòng)條使事件 |
<script>
$("#div1").attr({"class":'div2','a':'b'});//添加屬性
$("#div1").removeAttr('a');//刪除屬性
$("#div1").addClass('test');//添加class屬性，無論添加多少個(gè)距糖，每一個(gè)都可以選定標(biāo)簽
$("#div1").removeClass('a');//刪除class屬性
alert($("#div1").hasClass('a'));//查詢class屬性是否存在
//each index
$(".p1").each(function (index) {//可以遍歷標(biāo)簽玄窝，打印出值
document.write(index)
});
$(".p1").click(function () {//點(diǎn)擊p標(biāo)簽牵寺，可以彈出p標(biāo)簽的索引值
alert($(this).index());
});
</script>
<script>
$(window).scroll(function () {
console.log($(document).scrollTop());//距離頂部
console.log($(document).scrollLeft());//距離左部
})
</script>
jQ基本使用三：
| 參數(shù) |
描述 |
| parent |
父元素 |
| children |
子元素 |
| siblings |
兄弟元素 |
| find |
后代元素 |
| parents |
祖宗元素 |
| position |
定位父級(jí) |
| offset |
窗口 |
| width/height |
寬/高 |
| on/off |
循環(huán)添加/移除 |
<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("距離定位父級(jí)left",$boxp.left+"<br>");
document.write("距離定位父級(jí)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>
動(dòng)畫
常用特俗符號(hào)：
| hide() |
show() |
slideUp |
slideDown |
slideToggle |
fadeIn |
fadeOut |
fadeTo |
| 隱藏 |
顯示 |
向上 |
向下 |
取反 |
淡入 |
淡出 |
自定義 |
| fadeToggle |
animate |
stop |
delay |
| 取反 |
動(dòng)畫 |
停止 |
延遲 |
<script>
//鼠標(biāo)移入隱藏悍引，移出顯示
//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
//動(dòng)畫趣斤，停止
//animate stop
$("#div1").hover(function () {
$("#div2").stop(true,true).animate({
"top":100
}, 1000)
},function () {
$("#div2").stop(true,true).animate({
"top":0
}, 500)
})
</script>
