jQuery选择器之id选择器

jQuery选择器之id选择器

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

jQuery几乎支持主流的css1~css3选择器的写法,我们从最简单的也是最常用的开始学起

id选择器:一个用来查找的ID,即元素的id属性

$( "#id" )

id选择器也是基本的选择器,jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。原生语法的支持总是非常高效的,所以在操作DOM的获取上,如果能采用id的话尽然考虑用这个选择器

值得注意:

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

<!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="https://www.imooc.com/static/lib/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节点

$("#imooc").css("border", "3px solid blue");

</script>

 

</body>

 

</html>

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值