www.Litecode.ru – Сборник рецептов для создания сайтов

Примеры jQuery для начинающих

ГлавнаяJavaScript → Примеры jQuery для начинающих

jQuery — javascript библиотека, состоящая из кроссбраузерных функций — оплеток для манипулирования элементами DOM (Document Object Model — Объектная модель документа). Главный ее принцип это автоматическое применение нужного механизма, в зависимости от браузера. К примеру, получение элемента html документа по ID, в разных браузерах происходит по разному. До появления jquery, я использовал такую функцию:

function getObj(objID){
    if (document.getElementById) {return document.getElementById(objID);}
    else if (document.all) {return document.all[objID];}
    else if (document.layers) {return document.layers[objID];}
}

Чтобы это же действие совершить в jquery, достаточно сделать так:

$('#objID') или jQuery('#objID')

Обращение к функции $() равносильно jQuery(), так как первая является алиасом для второй. Если Вы не используете других библиотек, подобных jquery, то можете смело обращаться к пространству имен через $(). В противном случае лучше использовать непосредственное имя объекта — jQuery. Далее, считаем что нет других библиотек.

Начало работы с jQuery

Итак, начинаем работу. Первым делом необходимо получить новейшую версию библиотеки jquery с официального сайта проекта http://jquery.com/ или скачать jquery здесь. В архиве и на официальном сайте лежат две версии: сжатая и девелоперская. На сайте лучше использовать сжатую, а если захочется поэкспериментировать воспользуйтесь второй. Первым делом подключаем библиотеку jquery в тело страницы:

<script src="../jquery-1.4.3.js" type="text/javascript"></script>

После этого пространство имен javascript, определено таким образом, что обращение к функции $() занято jquery и получить любой элемент документа html в виде объекта, можно выражением $('#objID'). Где objID - ID объекта.

jQuery и CSS

В качестве первого примера рассмотрим работу jquery и CSS. Существует два основных способа манипулирования CSS с помощью jquery: изменение одного атрибута или сразу нескольких. Выполняются они через функцию css(). Выглядит в теории это примерно так:

$('#objID').css('display','block')
$('#objID').css({
    display:'block,
    margin:'10px',
    color:'#ffffff'
})

Пример изменения одного атрибута CSS

Исходный код:

  <input type="button" value="Нажми!" onclick="$('#span').css('display','')">
    <span id="span" style="display:none;background:#00968E;padding:5px;color:#fff;">
        Пример изменения одного атрибута удался!
    </span>  

Пример изменения нескольких атрибутов CSS

Пример изменения нескольких атрибутов!

Исходный код:

<script>
    function demo_css(){
        $('#span2').css({
            color:'#ffffff',
            padding:'5px',
            background:'#980000'
        });
    }
</script>
<input type="button" value="Нажми!" onclick="demo_css();">
<span id="span2">Пример изменения нескольких атрибутов!</span>

Изменение текста и html

Для изменения текста или html кода существуют функции text() и html().

$('#objID').text('Тру ля ля')
$('#objID').html('

Тру ля ля

')

Причем, если попытаетесь с помощью функции text() вставить html код, то получите его в исходном виде. Функция text() все экранирует.

Пример использования text()

Исходный код:

<script>
    function set_text(){
        $('#span3').text('Спасибо!');
    }
</script>
<input type="button" value="Нажми!" onclick="set_text();">
<span id="span3"></span>

Пример использования html()

Исходный код:

<script>
    function set_html(){
        $('#span4').html('<span style="background:#980000;color:#ffffff;padding:5px;">Спасибо! Так гораздо лучше.</span>');
    }
</script>
<input type="button" value="Нажми!" onclick="set_html();">
<span id="span4"></span>

Управление атрибутами с помощью jQuery

Функция attr() манипулирует любыми атрибутами элемента. С ее помощью можно добавить или изменить title, href, value, src и так далее.

Пример использования attr()

Исходный код:

<script>
    function plus_ten(){
        
        var cur_value = $('#text').attr('value');
        cur_value = parseInt(cur_value) + 10;
        $('#text').attr('value',cur_value);
        
    }
</script>
<input type="button" value="+10" onclick="plus_ten()">
<input type="text" id="text" value="0"/>

Обработчики событий в jQuery

Полный список доступен по адресу http://api.jquery.com/category/events/. Приведу лишь несколько примеров. Самый распространенный обработчик события onclick. В jQuery можно перехватить через функцию click().

Пример использования click()

Исходный код:

<input type="button" id="butt" value="У меня есть обработчик .click()">
<script>
    $('#butt').click(function(){
        alert('Решили проверить?');
    });
</script>

Пример использования keyup()

Введите что-нибудь: 

Вы ввели: 

Исходный код:

Введите что-нибудь: <input type="text" id="text2" value=""/>
<br/>
Вы ввели: <span id="text2_target" style="color:#fff;padding:5px;"></span>
<script>
    $('#text2').keyup(function(){
        if ($('#text2').val()){
            $('#text2_target').css({background:'#980000'});
        } else {
            $('#text2_target').css({background:'#ffffff'});
        }
        $('#text2_target').text($('#text2').val());
    });
</script>

Пример использования bind()

Кликни по мне!

Исходный код:

<style>
    div#log{
    background:#1C93A5;
    width:300px;
    height:100px;
    padding:10px;
    color:#fff;
    }
</style>
<div id="log"><b>Кликни по мне!</b><br/><b id="coord"></b></div>
<script>$(document).ready(function() {
    $('#log').bind('click', function(e) {
        $('#coord').html('Координата X: <b class="red">'+ e.pageX + '</b> Координата Y: <b class="red">' + e.pageY + '</b>');
    });
});
</script>