JQuery 基本使用、操作樣式、簡單動畫

JQ與JS

• JQ是JS寫的插件庫，就是一個JS文件
• 凡是用JQ能實現的，JS都能實現，JS能實現的，JQ不一定能實現
  
  

引入

• BootCDN：https://www.bootcdn.cn/jquery/
• 本地文件引入：<script src="js/jq.js"></script>
• 線上引入：<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

選擇元素

• 在JQ中使用選擇器選擇元素和在CSS中使用CSS選擇器是一樣的
• $("p,span").click(function () { ... });
• 方法內使用時，選擇當前選中的元素，用this：$(this)
  
  

基本使用一

• 修改內容
  • html()
  • text()
• jq/js對象轉換
  • get()/[]
  • $()
• 點擊事件
  • 單擊：click()
  • 雙擊：dblclick()
• 滑鼠滑入滑出：hover()
• 添加內容
  • 前：prepend()
  • 後：append()
• 添加標簽
  • 前：before()
  • 後：after()
• 移除值
  • empty()
  • remove()

// 修改內容
$("#p1").html("<h1>11</h1>");//html()
$("#p2").text("<h1>12</h1>");//text()

//將jq對象轉換為js對象
var p = $('p');
p.get(0).innerHTML=("<h1>21</h1>");//get()
p[1].innerText=("<h1>22</h1>");//[]

// 將js對象轉換為jq對象
var sp1 = document.getElementsByClassName('sp1');
$(sp1).text("23");//$()

//單擊
$("#p1").click(function () {
    alert("單擊")
});
//雙擊
$("#p2").dblclick(function () {
    alert('雙擊')
});

// 滑鼠滑入滑出
$("#p2").hover(function () {
    alert("滑鼠滑入")
},function () {
    alert("滑鼠滑出")
});

//添加內容
var p2 = $("#p2");
p2.prepend("在前==preend==");//prepend()
p2.append("==append==在後");//append()

//添加標簽
var p1 = $("#p1");
p1.before("<p id='p0'>p1_前</p>");//before()
p1.after("<p class='p'>p1_後</p>");//after()

//移除
$('#p1').empty();//清空內容、標簽還在
$('#p2').remove();//連標簽一起刪除

基本使用二

• 操作屬性
  • attr()
  • removeAttr()
• 添加/移除Class屬性的值
  • addClass()
  • removeClass()
• 判斷：hasClass()
• 索引
  • each()
  • index()
• 滾動條事件
  • scroll()
  • scrollTop()
  • scrollLeft()

var div1 = $("#div1");
// 操作屬性
div1.attr("aaa","bbb");
// alert(div1.attr("aaa"));//bbb
div1.removeAttr("aaa");

// 添加/移除class屬性的值
div1.addClass("divClass1");
div1.addClass("divClass2");//class="divClass1 divClass2"
div1.removeClass("divClass1");//class標簽還在，但沒有值

//判斷Class是否有這個值
// alert(div1.hasClass("divClass"));

//遍歷 each()
$("ul li").each(function (i) {
    $(this).text("元素下標："+i)
});

//下標  index()
$("li").click(function () {
    alert($(this).index())
});

// 滾動條事件
$(window).scroll(function () {
    console.log("左："+$(document).scrollLeft());//離左邊
    console.log("上："+$(document).scrollTop());//離上邊
})

基本使用三

• 父級元素：parent()
• 子級元素：children()
• 兄弟：siblings()
• 後代：find()
• 祖宗：parents()

// 查找父級元素
console.log($("li").parent());
// 查找子級元素
console.log($("#div1").children());
// 查找兄弟元素
console.log($("#p2").siblings());
// 查找後代元素
console.log($("ul").find("li"));//find必須給參數
// 查找祖輩元素
console.log($("#li3").parents());

操作CSS樣式

$("..").css({...})

//設置
$("#div1").css({
    "height":"300px",
    "width":"300px",
    "border":"1px red solid"
});
//獲取
console.log($("#div1").css("border"));

簡單動畫

• 隱藏： hide()
• 顯示： show()
• 向上：slideUp()
• 向下：slideDown()
• 取反：slideToggle()
• 淡入：fadeIn()
• 淡出：fadeOut()
• 自定義：fadeTo()
• 取反：fadeToggle()
• 動畫：animate()
• 停止：stop()
• 延遲：delay()

// //顯示
// $("#btn1").click(function () {
//     $("#div1").show(500)//設置動畫時間
// });
// // 隱藏
// $("#btn2").click(function () {
//     $("#div1").hide()
// });

// //向上
// $("#btn1").click(function () {
//     $("#div1").slideUp(2000);//設置動畫時間
//     //取反：向上完畢之後會自動返回
//     // $("#div1").slideToggle(2000);
//
// });
// // 向下
// $("#btn2").click(function () {
//     $("#div1").slideDown();
//     $("#div1").slideToggle(500);//取反
// });

// //淡入
// $("#btn1").click(function () {
//     $("#div1").fadeIn(1500);//設置動畫時間
//     $("#div1").fadeToggle(500);//取反
//
// });
// // 淡出
// $("#btn2").click(function () {
//     $("#div1").fadeOut(1500);
// });
// // 自定義
// $("#btn3").click(function () {
//     // 參數：動畫時間，透明度（0-1）
//     $("#div1").fadeTo(1000,0.3);
// });

//自定義動畫
$("#btn1").click(function () {
    //動畫時間3秒、延遲3秒
    //完成或者停止時，3秒過後才能繼續後續點擊的動畫操作
    $("#div1").animate({
        width: "600px",
        height: "400px",
        opacity: "0.3"  //透明度
    }, 3000).delay(3000)
});
//自定義動畫
$("#btn2").click(function () {
    //動畫時間3秒、延遲2秒
    //完成或者停止時，2秒過後才能繼續後續點擊的動畫操作
    $("#div1").animate({
        width: "100px",
        height: "100px",
        opacity: "1"  //透明度
    },3000).delay(2000)
});
// 停止動畫
$("#btn3").click(function () {
    $("#div1").stop();
});