jQuery_2_常规选择器1

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");
    }
})
时间: 2024-10-10 16:48:05

jQuery_2_常规选择器1的相关文章

常规选择器

jQuery最核心的组成部分就是:选择器引擎.它继承了CSS的语法,可以对DOM元素的标签名.属性名.状态(?)等进行快速准确的选择,并且不必担心浏览器的兼容性.jQuery选择器实现了CSS1~CSS3的大部分规则之外,还实现了一些自定义的选择器,用于各种特殊状态的选择. 简单选择器 在使用jQuery选择器时,我们首先必须使用“$()”函数来包装我们的CSS规则.而CSS规则作为参数传递到jQuery对象内部后,再返回包含页面中对应元素的jQuery对象.随后,我们就可以对这个获取到的DOM

jQuery学习笔记——jQuery常规选择器

一.简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象.随后,我们就可以对这个获取到的 DOM 节点进行行为操作了.#box {//使用 ID 选择器的 CSS 规则color:red;//将 ID 为 box 的元素字体颜色变红}在 jQuery 选择器里,我们使用如下的方式获取同样的结果:$('#box').css('color', 'red

第3章 常规选择器

学习要点: 1.简单选择器 2.进阶选择器 3.高级选择器 jQuery 最核心的组成部分就是:选择器引擎. 一.简单选择器  1.元素选择器 2.id选择器 3.类选择器 $('div').css('color','red'); //元素选择器,返回多个元素 $('#box').css('color','red'); //ID 选择器,返回单个元素 $('.box').css('color','red'); //类(class)选择器,返回多个元素 为了证明 ID 返回的是单个元素,而元素标签

jQuery学习笔记之二——常规选择器

jQuery 最核心的组成部分就是: 选择器引擎. 它继承了 CSS 的语法, 可以对 DOM 元素的标签名. 属性名. 状态等进行快速准确的选择, 并且不必担心浏览器的兼容性. 简单选择器#box { //使用 ID 选择器的 CSS 规则color:red; //将 ID 为 box 的元素字体颜色变红}在jQuery 选择器里,我们使用如下的方式获取同样的结果: $('#box').css('color', 'red'); //获取 DOM 节点对象,并添加行为 选择器 CSS 模式 jQ

jQuery常规选择器

要点: 基础选择器 id选择器.标签选择器.类选择器.子选择器 进阶选择器 群组选择器.后代选择器.通配选择器 高级选择器 层次选择器 属性选择器 一.简单选择器 主要包括id选择器.标签选择器.类选择器.子选择器 1.ID选择器,将Id为box的元素的字体颜色修饰为blue <div id="box">box</div> $("#box").css("color", "blue"); 2.标签选择器,

优化jQuery选择器

优化jQuery选择器 选择优化比以前更加重要,因为越来越多的浏览器实现了queryselectorall()并承担了将jQuery选择器转移到浏览器的责任.记住这些小技巧可以让你轻松突破学习选择器时的瓶颈. jQuery 扩展 如果可能的话,避免使用jQuery扩展选择器.这些扩展无法在性能让原生的queryselectorall() DOM提供的方法更有效,所以还是用jQuery提供的常规选择器吧. 1 2 3 4 5 // Slower (the zero-based :even sele

第一百六十八节,jQuery,表单选择器

jQuery,表单选择器 学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器 表单作为 HTML 中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以 使用之前的常规选择器或过滤器,也可以使用 jQuery 为表单专门提供的选择器和过滤器来 准确的定位表单元素. 一.常规选择器 我们可以使用 id.类(class)和元素名来获取表单字段,如果是表单元素,都必须含有 name 属性,还可以结合属性选择器来精确定位. $('input').val(); //元素名定位,默认获取第一个

【CSS】使用CSS选择器(第二部分)

1. 使用结构性伪类选择器 使用结构性伪类选择器能够根据元素在文档中的位置选择元素.这类选择器都有一个冒号字符前缀(:),例如 :empty .它们可以单独使用,也可以跟其他选择器组合使用,如: p:empty . 1.1 使用根元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title&

jQuery学习笔记(一)——选择器

常规选择器: 1.$('#box') ID选择器,获取一个ID为box的DOM对象 2.$('.box') CLASS选择器,获取一个class为box的DOM对象 3.$('div') 元素名选择器,获取一个元素名为div的DOM对象 进阶选择器: 1.$('div,#box,.box') 群组选择器,获取元素名为div.ID为box.class为box的DOM对象 2.$('div #box') 后代选择器,获取div中ID为box的DOM对象 另一种写法$('div').find('#bo