JQuery中的ID选择器

页面的任何操作都需要节点的支撑，开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。jQuery提供了一系列的选择器帮助开发者达到这一目的，让开发者可以更少的处理复杂选择过程与性能优化，更多专注业务逻辑的编写。

jQuery几乎支持主流的css1~css3选择器的写法

id选择器：一个用来查找的ID，即元素的id属性
$( “#id” )

id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话尽然考虑用这个选择器
下面代码使用两种方式获取id 为aaron的div,并对其css进行设置。

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><style>div {width: 100px;height: 90px;float: left;padding: 5px;margin: 5px;background-color: #EEEEEE;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head><body>   <div id="aaron"><p>id="aaron"</p><p>选中</p></div><div id="imooc"><p>id="imooc"</p><p>jQuery选中</p></div><div id="imooc"><p>id="imooc"</p><p>jQuery未选中</p></div><script type="text/javascript">//通过原生方法处理var div = document.getElementById('aaron');div.style.border = "3px solid blue";</script><script type="text/javascript">//通过jQuery直接传入id//id的唯一，只选择到了第一个匹配的id为imooc的div节点$("#aaron").css("border", "3px solid red");</script>

值得注意的是：
id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的。

JQuery中的ID选择器相关推荐

JQuery中的id选择器含有特殊字符时，不能选中dom元素的解决方法
1.jquery类库在我们实际项目中用的很多,大家经常需要根据控件的id,获取对应的html元素.但是:当id含有特殊字符的时候,是不能选中的. 2.自己简单的测试了下,jquery的id选择器只支持 ...
jQuery框架学习第二天：jQuery中万能的选择器
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
CSS中的id选择器和class选择器简单介绍
<!-- CSS中选择器 CSS有两种选择器id和class,总之如果说你想在HTML元素中设置CSS属性, 你要在元素中设置id和class选择器.那么我们现在来一个一个的介绍这两中选择器 i ...
【jQuery 教程系列第 10 篇】jQuery 中的过滤选择器（基本筛选器）
这是[jQuery 教程系列第 10 篇],如果觉得有用的话,欢迎关注专栏. jQuery 中除了一些基本选择器 ,也有一些过滤选择器,本篇博客仅挑选其中的几个简单说明一下,其它的大家可以点击 jQ ...
CSS：基本选择器中的ID选择器和class选择器的区别
ID选择器 : 通过标签的id名称来选择标签 # id 类选择器 : class选择器,选择一个类别 .className 区别: 1. ID 选择器的是以井号 # 开头来 ...
【jQuery】使用id选择器，找出外层div中嵌套的内层div
场景:为了实现一个 toggle 效果,即第一次点击一个"添加"按钮之后,会在一个(外层)div的末尾append一个新的(内层)div,第二次点击这个按钮之后,希望这个新增的(内 ...
jQuery中的基本选择器，id，class，元素，通用
常用的基本选择器: 后续的补充选择器为了后面看的方便,我们先将body中的内容展示出来: <body><p>账号:<input type="text" ...
JQuery中的全选择器（通配符）
全选择器(*选择器) 在CSS中,经常会在第一行写下这样一段样式 * {padding: 0; margin: 0;} 通配符*意味着给所有的元素设置默认的边距.jQuery中我们也可以通过传递*选择 ...
jquery 中多条件选择器,相对选择器,层次选择器的区别
一.Jquery常用的过滤选择器如下所示: 1.:first,选取第一个元素,比如$("div:first")选取第一个div元素 2.:last,选取最后一个元素,比如$(&qu ...

JQuery中的ID选择器

JQuery中的ID选择器相关推荐

最新文章

热门文章