Вторник, 26 Июня 2012 16:09

Доступ к элемента html-страницы при помощи jQuery

Written by 
Оцени эту запись
(8 Голоса)

При помощи jQuery можно работать в элементами html-страницы по селекторам, классам или идентификаторам.

 

Для начала, нужно подключить на html-страницу библиотеку jQuery:

 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

 

Теперь мы можем эту библиотеку использовать. 

Мы можем обращаться к отдельным элементам по тегам. Например, зададим некоторую функцию, которая будет выполняться при клике на любую ссылку:

 

$('a').click(function(){});

 

Можем выделять элементы по классам:

 

$('.list').css('padding-left', '40px');

 

Так мы задали всем элементам с классом list внутренний отступ слева 40px. Допустим, список ul  имеет класс list. У списка есть элементы li и, например, в каждом из них есть ссылки. Наложим на них определенный обработчик на клик:

 

$('.list ul li a').click(fucntion(){});

 

Если у одной из ссылок есть класс active, можем обратиться именно к ней:

 

$('.list ul li a.active').click(fucntion(){}); 

 

Также можем выделить, например, третью из ссылок:

 

$('.list ul li a').eq(3).css('color', 'blue');

 

Для обращения к родителю заданного элемента нужно использовать .parent():

 

$('.list ul li a').click(function(){

$(this).parent().addClass('active');

}); 

 

Можем также обращаться в дочернему элементу при помощи children():

 

$('.list ul li').eq(4).children().removeClass('active');

 

Рассмотрим такую ситуацию:

 

<div class="cont">

<div class="header">Block Title <span class="clear">X</span></div>

<div class="body">Block Content</div>

</div>

 

Имея подобную структуру, нам нужно скрыть блок cont при клике на <span class="clear">X</span>:

 

$('.clear').click(function(){

$('.cont').fadeOut();

});

 

Это просто. Но если на странице несколько подобных блоков, а скрыть нужно именно тот, на закрытие которого был клик. Тогда начнем использовать обращение в родительским и дочерним элементам:

 

 

$('.clear').click(function(){

$(this).perent().parent('.cont').fadeOut();

});

 

Если же нужно скрыть блок body из того блока cont, на котором нажали "закрыть", то код немного изменится:

 

 $('.clear').click(function(){

$(this).perent().parent().children('.body').fadeOut();

});

 

И последним рассмотрим обращение к элементу по его идентификатору:

 

$('#elemID').click(function(){

$(this).css('display', 'none');

});

 

Скрываем элемент с id=elemID при клике на него.

 

 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов