jQuery_2_常规选择器1

Posted 2020-09-07 HepburnXiao

JQuery最核心的组成部分就是：选择器引擎。它继承了css的语法，可以对DOM元素的标签名、属性名、状态等进行快速准确的选择。

jQuery选择器的写法与CSS 选择器十分类似，只不过他们的功能不同。CSS找到元素后添加的是单一的样式，而 jQuery则添加的是动作行为。

简单选择器：

标签选择器      $("div")       获取所有div的DOM对象

div{
    color:blue;
}

 $("div").css("color", "maroon");

 

ID选择器         $("#d1")      获取一个ID为d1的DOM对象

#d1{
    color:red; 
}

 $("#d1").css("color","red") //添加一个行为，这个行为是添加样式

 

class选择器      $(".c1")        获取所有class为d1的DOM对象

 .c1{
    color:yellow;
}

$(".c1").css("color", "orange");

 

length、size()、eq(0)

$(function () {
    alert($("div").length); //长度
    alert($("div").size()); //长度
    alert($("div").eq(1).css("color", "red"));//eq()=选择某个jQuery对象
})

 

容错， 判断

$(function () {
    $("#d2").css("color", "red"); //容错，尽管没有id=2的标签不会报错

    //几种判断方式
    if ($("#d1").size() > 0) {    
        $("#d1").css("color", "red");
    }

    if($("#d1").get(0))
    {
        $("#d1").css("color", "green");
    }

    if ($("#d1")[0]) {
        $("#d1").css("color", "blue");
    }
})