一、css()
//css( )直接寫屬性名稱是獲取屬性值，如果改多個屬性值需要加{ }，如果不加{ }可以單獨修改
alert($("#div1").css("width"))//200px? 獲取值，有單位
$("#div1").css("width","400px")//單一設置屬性值
//加{}修改多個值
$("#div1").css({
height:400,
border:"4px solid orange",
})
二、jQ中的寬高
$(document).on("click", function() {
//1.width()這個方法只能獲取css中設置的width這個屬性的值，并不是元素的顯示寬度
//height()這個方法也是一樣的
//alert($("#div1").width())? //200? 沒有單位
//width()里面不寫參數(shù)是獲取，寫上參數(shù)是設置
//$("#div1").width(400);
//2.outerWidth()相對于width()包含了邊框和padding值
//outerHeight()也是一樣的
//outerHeight()和outerWidth()括號內(nèi)部提供了一個可選參數(shù)true，如果加上true，則margin值也會被計算在內(nèi)
alert($("#div1").outerWidth())//240? 沒有單位
alert($("#div1").outerWidth(true))//280 沒有單位
})
三、offset()
$(document).on("click",function? () {
//offset()方法獲取的是，元素距離文檔的偏移量，不考慮父級元素
alert($("#content").offset().left)? //250? 沒有單位
alert($("#content").offset().top)? //250? 沒有單位
})
四、position()
$(document).on("click",function(){
//position()獲取元素本身距離 定位的 父級的 偏移量
alert($("#content").position().left) // 50? 沒有單位
alert($("#content").position().top) // 50? 沒有單位
//offsetParent()獲取或者設置最近的定位父級元素
$("#content").offsetParent().width(400);
})
五、scrollLeft&scrollTop
$(document).on("click", function() {
//console.log($("#wrap").scrollLeft())
//console.log($("#wrap").scrollTop())
//不寫值就是獲取，寫值就是設置
$("#wrap").scrollLeft(500);
//this.title = $("#wrap").scrollLeft();
});
六、插入添加節(jié)點
var? num=0;
$(document).on("click", function() {
num++;
//首先創(chuàng)建一個li
var li=$("<li>"+num+"</li>");
//1.添加在ul內(nèi)部后面的方法
//讓父級元素執(zhí)行添加
//$("#ul1").append(li);
//讓子級元素執(zhí)行添加
//li.appendTo($("#ul1"))
//2.添加在ul內(nèi)部前面的方法
//讓父級元素執(zhí)行添加
//$("#ul1").prepend(li)
//讓子級元素執(zhí)行添加
//li.perpendTo($("#ul1"))
//3.添加在同級以下，緊挨著
//后添加的元素在上面
//$("#ul1").after(li)
//后添加的元素在上面
//li.insertAfter($("#ul1"))
//4.添加在同級以上，緊挨著
//后加的元素在下面
//$("#ul1").before(li)
//后加的元素在下面
li.insertBefore($("#ul1"))
})
七、刪除節(jié)點
$(document).on("click", function() {
//remove()方法將自身以及自身內(nèi)部的所有元素全部刪除
//$("#ul1").remove();
//empty()方法將自身內(nèi)部的元素刪除，而自身不會被刪除
//$("#ul1").empty();
})
八、替換節(jié)點
$(document).on("click",function? () {
var newP=$("<p>哎呦誒</p>");
//replaceAll()替換，替換的參數(shù)為選擇器，通過給定的選擇器決定被替換元素
//可以替換多個，也可以替換一個
//newP.replaceAll("p")
//newP.replaceAll("#love")
//newP.replaceAll("p:eq(0)")
//newP.replaceAll("p:first")
})
九、復制節(jié)點
$(document).on("click", function() {
//jq中的復制，自身和子元素都會被復制，
//如果不傳入?yún)?shù)js屬性不會被復制
//如果傳入?yún)?shù)true會把js事件復制過來，而false沒有什么具體意義
var a = $("#baidu").clone();
$("#box").append(a)
})
十、遍歷節(jié)點
$(document).on("click", function() {
//1.children()獲取子元素集合，不傳入?yún)?shù)，所有子元素，
//還可以通過選擇器獲取某個或者某些子元素
//console.log($("#box").children())
//獲取子元素是p的元素
//console.log($("#box").children("p").length)
//console.log($("#box").children("div:eq(0)"))
//var div = $("#box").children("div:eq(0)");
//2.length? size()都可以獲取數(shù)組的容量
//console.log($("#box").children().length)
//console.log($("#box").children().size())
//3.html()如果什么都不寫，就是獲取標簽內(nèi)的內(nèi)容
//如果寫入，則是修改標簽內(nèi)的內(nèi)容
//div.html("我能改變文本內(nèi)容");
//var p = $("#box").children("p:eq(0)");
//4.next()找的是目標元素的同級以下緊鄰第一個元素
//console.log(p.next())
//5.siblings()如果書寫選擇器內(nèi)容，找到的是同級符合選擇器條件的所有的元素
//如果不書寫選擇器內(nèi)容，找到的是同級的所有的元素
//console.log(p.siblings("h3"))
//6.parent()獲取目標元素的父級元素
//獲取p的父級元素
//console.log(p.parent());
//7.prev()找的是目標元素的同級以上緊鄰第一個元素
//獲取p的緊鄰上一個元素
//console.log(p.prev())
//8.find()找到某個元素
//找的到第一個div，使用find
//console.log($("#box").find("div:eq(0)"))
});
十一、class操作
addClass()方法向匹配的元素增加指定的類名(一個或多個).
注意對于元素來說,class屬性可以有多個值.該方法不會移除已經(jīng)存在的值,而是在原有的基礎(chǔ)上追加一個或多個class屬性.
用attr()方法設置class屬性,是一個覆蓋的過程;而addClass()則是一個追加的過程.
class之間最終是用空格來隔開的.
如果需要添加多個類,用空格分隔類名.
removeClass()方法從被選元素移除一個或多個類.如需移除若干類,用空格來分隔類名.如果沒有傳參數(shù),該方法將會移除被選元素的所有類.
toggleClass()方法對被選元素的一個或多個類進行切換(設置或移除).
該方法檢查每個元素中的指定類,如果存在則刪除,如果不存在則添加.
通過添加參數(shù),可以設置只進行刪除或者只進行添加操作.
格式:$(selector).toggleClass(class,switch)
switch值為true時,只添加;為false時,只刪除.
hasClass()方法檢查被選元素是否包含指定的class.
還可以用is()方法實現(xiàn)同樣的功能,方法參數(shù)傳入一個選擇器字符串,比如”.className”.
$(document).on("click", function() {
//addClass()添加類名，不會出現(xiàn)覆蓋
//$("#box").addClass("color");
//toggleClass()如果傳入的類名當前沒有相當于添加，
//如果傳入的類名當前存在相當于刪除
//$("#box").toggleClass("color")
//$("#box").toggle(500)//500是毫秒，時間
});
