селектор id

Описание: Выбирает один элемент с данным атрибутом ID.

jQuery('#id')

Добавлена в версию: 1.0

Идентификатор для поиска.

Для ID селекторов, jQuery использует document.getElementById(), который является чрезвычайно эффективным. Когда другой селектор прилагается к ID селектору, такой как h2#pageTitle, jQuery выполняет дополнительную проверку, прежде чем выявляет элементы на соответствие.

Всегда помните, что в качестве разработчика, ваше время, как правило, самый ценный ресурс. Не зацикливайтесь на оптимизации скорости выполнения, пока не ясно, что производительность должна быть улучшена.

Каждое значение id должно быть использовано только один раз в документе. Если более чем одному элементу был назначен тот же идентификатор, запросы, которые используют этот идентификатор будут выбирать только первый элемент в DOM. Тем не менее не следует полагаться на такое поведение; документ с более чем одним элементом, использующим такой же идентификатор недействителен.

Если ID содержит символы, такие как точки или двоеточия вы должны избежать эти символы с помощью обратной косой черты.

Примеры

Пример 1

Поиск элемента с id «myDiv».

$("#myDiv").css("border","3px solid red");

Результат выполнения кода выше:

Попробуйте сами

Пример 1 - Полный код:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
$("#myDiv").css("border","3px solid red");
  });
  </script>
  <style>
  div {
    width: 90px;
    height: 90px;
    float:left;
    padding: 5px;
    margin: 5px;
    background-color: #EEEEEE;
  }
  </style>
</head>
<body>
  <div id="notMe"><p>id="notMe"</p></div>
  <div id="myDiv">id="myDiv"</div>
</body>
</html>

Попробуйте сами

Пример 2

Находит элемент с идентификатором "myID.entry [1]". Посмотрите, как некоторые символы должны быть экранированы с обратной косой чертой.

$("#myID.entry[1]").css("border","3px solid red");

Результат выполнения кода выше:

Попробуйте сами

Пример 2 - Полный код:

<!DOCTYPE html>
<html>
<head>
  <style>
  div {
    width: 300px;
    float:left;
    padding: 2px;
    margin: 3px;
    background-color: #EEEEEE;
  }
  </style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" language="javascript">
     $(document).ready(function(){
       $("#myID.entry[1]").css("border","3px solid red");
     });
  </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>
</body>
</html>

Попробуйте сами

Была ли эта информация полезной?

Да Нет

селектор id