欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery选择器之id选择器使用介绍

程序员文章站 2022-06-20 18:35:59
jquery选择器之id选择器 页面的任何操作都需要节点的支撑,开发者如何快速高效的找到指定的节点也是中的一个重点。jquery提供了一系列的选择器帮助开发者达到这一目的,让开发...

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>

p {

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>

<p id="aaron">

<p>id="aaron"</p>

<p>选中</p>

</p>

<p id="imooc">

<p>id="imooc"</p>

<p>jquery选中</p>

</p>

<p id="imooc">

<p>id="imooc"</p>

<p>jquery未选中</p>

</p>

<script type="text/javascript">

//通过原生方法处理

var p = document.getelementbyid('aaron');

p.style.border = "3px solid blue";

</script>

<script type="text/javascript">

//通过jquery直接传入id

//id的唯一,只选择到了第一个匹配的id为imooc的p节点

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

</script>

</body>

</html>

jQuery选择器之id选择器使用介绍