ID 选择器 (“#id”)| jqueryAPI 2.2 中文手册- AspRain.cn 致力于Web开发技术翻译整理

jQuery API 2.2.0

ID 选择器 (“#id”)

分类:选择器 > 基本选择器

id selector

描述:选择一个带有给定的元素id属性的元素。

加入于: 1.0
jQuery( "#id" )

id: 要搜索的ID,通过元素的元素属性id指定。

针对id选择器,jQuery会使用JavaScript函数document.getElementById(),它十分有效。当别的选择器匹配到id选择器时,比如说h2#pageTitle,jQuery在识别元素是否匹配之前实施了一个额外的检查。

用一个id选择器作为参数,调用jQuery()或者($()),将返回一个jQuery对象,它包含了一个或零个DOM元素。

每一个id值必须只在document中使用一次。如果更多的元素被分配了同样的id,则使用id查询将只选择DOM中的第一个匹配的元素。然而,这种行为并不应该被依赖;一个document中不止一个元素使用相同的id是不合法的。

如果id包含了一些特殊字符,比如说句号(.)和冒号(:),你就必须用反斜杠转义这些字符

示例

选择带id“myDiv”的元素,并给它一个红色边框。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>id demo</title>
  <style>
  div {
    width: 90px;
    height: 90px;
    float: left;
    padding: 5px;
    margin: 5px;
    background-color: #eee;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
 
<script>
$( "#myDiv" ).css( "border", "3px solid red" );
</script>
 
</body>
</html>

演示结果

选择带id"myID.entry[1]"的元素,并给它一个红色边框。注意,某些字符必须如何用反斜杠转义。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>id demo</title>
  <style>
  div {
    width: 300px;
    float: left;
    padding: 2px;
    margin: 3px;
    background-color: #eee;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div id="myID.entry[0]">id="myID.entry[0]"</div>
<div id="myID.entry[1]">id="myID.entry[1]"</div>
<div id="myID.entry[2]">id="myID.entry[2]"</div>
 
<script>
$( "#myID\\.entry\\[1\\]" ).css( "border", "3px solid red" );
</script>
 
</body>
</html>

演示结果

如果网页上不能运行示例,请点击http://www.asprain.cn/jQueryAPI/id-selector.htm查看示例。

如果你觉得本文档对你有用,欢迎给翻译作者支付宝打赏,支持翻译作者源源不断翻译更多有用的技术文档。