jQuery элементы

Опубликовано 2012.08.08 в разделе JavaScript

Для доступа к DOM элементам на странице достаточно знать идентификатор элемента, его класс или любые другие отличительные признаки. Другими словами-селекторы. Например,если средствами jQuery необходимо получить объект элемента-то следует написать:
  1. $(element);
Предположим у нас есть поле ввода с идентификатором field:
  1. <!--Поле ввода-->
  2. <input type="text" id="field" value="Test string" class="my-class" />
  3.  
  4. <!--Сам скрипт-->
  5. <script type="text/javascript">
  6. var el=$('#field');
  7. </script>
Вот и всё.Переменная el является объектом поля ввода. Теперь из него можно получить значение поля,его аттрибуты и т.д. Например:
  1. <script type="text/javascript">
  2. var el_val=$('#field').val();
  3. alert(el_val); /*Выведет Test string*/
  4. </script>
Если нужно наоборот-записать значение в поле-то напишем так:
  1. <script type="text/javascript">
  2. $('#field').val('New value');
  3. /*Теперь в поле ввода будет строка New value*/
  4. </script>
Для обращения к аттрибутам поля следует написать так:
  1. <script type="text/javascript">
  2. var el_class=$('#field').attr('class');
  3. alert(el_class); /*Выведет my-class*/
  4. </script>
И для записи значения в аттрибут код будет примерно таким же, как и с установкой значения, только метод будет другим и нужно будет указать 2 аргумента:
  1. <script type="text/javascript">
  2. $('#field').attr('class','new-class');
  3. </script>
  4. <!--Теперь поле ввода будет выглядеть так-->
  5. <input type="text" id="field" value="Test string" class="new-class" />
Ну и если у элемента нет id, но мы знаем его класс,то обратимся по классу:
  1. var el=$('.my-class');
  2.  
  3. /*или по самому элементу*/
  4. var el=$('input');
Вот и всё. Если вы разбираетесь в CSS, то для вас не составит труда написать следующее:
  1. var el=$('div.main > input#first');

0 Комментариев

Оставить комментарий

Ваш комментарий успешно создан

Ваш комментарий

  • Для выделения кода оберните его в тэги <code> и </code>
  • Отметьте шестерёнку