jQuery day02

GT_Lee發表於2018-12-01
jQuery
瀏覽器中的頂級物件：window
頁面中的頂級物件：document

jquery中的頂級物件: jQuery.方法,jQuery.屬性 即$.方法,$.方法 -->
　　
區別：看後面呼叫的是dom寫法 還是 jq 寫法，jq幾乎都是方法 沒有屬性
　　
DOM操作麻煩 轉jq ， jq沒有相容的地方 轉dom



選擇器

id選擇器 $("#")
$("#btn").click(function(){
    this.value = "123";
    $(this).val("345");
});

標籤選擇器 $("XX")

$(function(){
    $("p").text("en");
});        
.text()方法 == innerText
物件.text()獲取
物件.text(value)   
隱式迭代 本身沒有迴圈操作，jq內部幫我們迴圈


類選擇器 $(".XX")
$("#btn").click(function(){
    $(".cls").css("backgroundColor","pink");
});

交集選擇器
$("#btn").click(function(){
    $("p.cls").css("backgroundColor","pink");
});

並列選擇器
$("#btn").click(function(){
    $("#btn,div.cls,p.cls,ul").css("backgroundColor","green");
});


層級選擇器
$("ul span").css({"backgroundColor":"pink"});    
$("ul>span").css({"backgroundColor":"red"}); 
$("ul~span").css({"backgroundColor":"red"}); 獲取後面的兄弟元素
$("ul+span").css({"backgroundColor":"red"}); 獲取直接相鄰的兄弟元素


索引選擇器
:eq(index)
:lt(index)
:gt(index)
   $("ul>li:eq(3)").css("background","red");
 $("ul>li:lt(3)").css("background","red");
 $("ul>li:gt(3)").css("background","red");
 $("ul>li:gt(5):lt(3)").css("background","red");

 

相關文章