jQuery_2_常规选择器-简单选择器

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");
    }
})

 

posted @ 2017-03-29 11:39  HepburnXiao  阅读(215)  评论(0编辑  收藏  举报