jq選擇器

// 獲取所有的頁面元素jq對象
    $(‘css3選擇器語法‘);
    var $box = $(".box:nth-child(1)");  獲取的是jq對象數組

// 拿到指定的頁面元素jq對象
    $(‘css3選擇器語法‘).eq(index);
    var $box = $(".box").eq(1);      獲取的是jq對象數組

// jq 轉 js  （ jq對像就是由數組包裹的js對象 ）
    box1 = $box[0] 從數組裏取出來
    box1 = $box.get(0) 從數組裏取出來

// js 轉 jq
    $box1 = $(box1);

jq操作元素對象

jq操作頁面內容

$(".box").eq(1).text("100")   // jq獲取標簽內容,修改標簽內容
$(".box").eq(1).text("100").html("<b>xxx</b>")      // jq支持鏈式操作

$(".box").eq(1).css("color","red")     // 修改css樣式操作
$(".box").eq(1).css("font-size","30px") 

$(".box").eq(1).css({    // 已字典的形式添加css樣式
    color:"red",
    "font-size":"30px",
})

$(
 
".box").eq(1).css("border-radius")   // jq能獲取計算後樣式

jq操作類名

addClass | removeClass

$(".box").eq(1).addClass("red")    // 添加類名
$(".box").eq(1).removeClass("red")    // 刪除類名  jq鏈式操作

$(".box").eq(1).addClass("red").removeClass("red")   // jq鏈式操作

jq操作全局屬性

$("img").attr("src","/img/1.js")；  // 設置屬性

$("img").attr("src")；   //
 
 查看全局屬性
$("img").removeAttr("src")；   // 刪除全局屬性

jq獲取盒子信息

$(".box").width();
$(".box").height();  寬高
$(".box").innerWidth();  內邊距 + 寬高
$(".box").outerWidth();  邊框 + 內邊距 + 寬高
$(".box").outerWidth(true);  外邊距 + 邊框 + 內邊距 + 寬高

位置信息 offset |

// 相對窗口偏移: 算margin產生的距離
console.log($(‘.box‘).offset().top, $(‘.box‘).offset().left);

// 絕對定位偏移(top,left): 不算margin產生的距離
console.log($(‘.box‘).position().top, $(‘.box‘).position().left);

js/jq頁面加載完畢事件

jq頁面加載完畢事件
    $(document).ready(function () {
        console.log(‘xxx‘)
    })

    一般寫成：
    $(function(){
        console.log(‘xxx‘)
    }) 簡寫,可以保證頁面加載完畢,還能保證jq局部變量


js頁面加載完畢事件
    window.onload = function () {}

jq事件

// 方法一（推薦）
$(‘.box‘).on( "click",function() {} )
$(‘.box‘).on( "click",function(ev) {
    ev.data.aaa   // 跟js事件對象一樣
})

// 方法二
$(".box".click( function() {}) )


// 右鍵事件，取消系統默認事件
$(‘.sup‘).on(‘contextmenu‘ , function(ev) {
    ev.preventDefault();   //取消事件
    或者 return false;  // 取消事件
})


// 事件冒泡：子父級擁有同樣事件，子響應事件會傳播到父級
// 子集點擊事件：

$(‘.sup‘).on(‘contextmenu‘ , function(ev) {
    ev.stopPropagation();  // 阻止子集事件冒泡
})

jQuery框架使用，jq選擇器，jq操作頁面內容， jq操作類名，jq操作全局屬性,jq獲取盒子信息,jq獲取位置信息，js/jq頁面加載完畢事件，jq事件