проголосовало
3 пользователей

JavaScript программирование (2)

JavaScript. Кто целенаправленно учил JS?:) Думаю, таких будет не много. Хвастайтесь.

JavaScript программирование →  Scroll плагин для Jquery

Тем, кому нужен яваскриптовый скрол, есть хороший плагин для Jquery
jquery, scroll, plugin
1
17 августа 2010, 14:46
igorok
комментировать

JavaScript программирование →  Увеличение скорости работы javascript скрипта в jQuery

Сегодня у нас по расписанию дрочерство.

11 правил, следуя которым можно увеличить производительность скрипта, написанного с использованием jQuery.

Разметка, на основе которой будут примеры:
<div id="content">
        <form method="post" action="/">
                <h2>Traffic Light</h2>
                <ul id="traffic_light">
                        <li><input type="radio" class="on" name="light" value="red" /> Red</li>
                        <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
                        <li><input type="radio" class="off" name="light" value="green" /> Green</li>
                </ul>
                <input class="button" id="traffic_button" type="submit" value="Go" />
        </form>
</div>

1. Искать элемент нужно по его аттрибуту id. Если у элемента нет id, то нужно указывать ближайший к нему элемент с id:

var active_light = $('#traffic_light .on');

Если мы ищем элемент через id, то это происходит быстро, потому что используется метод DOM getElementById.

2. Использовать имя тега перед названием класса:

var active_light = $('#traffic_light input.on');

Тогда используется метод DOM getElementsByTagName и среди выбранных элементов ищется тот, у которого есть класс 'on'.
Выборка элементов по названию класса — одна из самых медленных выборок в jQuery.

Но никогда не надо ставить имя тега перед id:
var active_light = $('div#traffic_light');

Будут выбраны все элементы с тэгом 'div', а уже потом среди них будет найден элемент с нужным id.

3. Кешируйте объекты jQuery:

Если вы используете объект больше чем один раз, вместо того, чтобы поворять несколько раз выборку елемента:
$('#traffic_light input.on).bind('click', function(){...});
$('#traffic_light input.on).css('border', '3px dashed yellow');
$('#traffic_light input.on).css('background-color', 'orange');
$('#traffic_light input.on).fadeIn('slow');

сохраните его в локальную переменную:
var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function(){...});
$active_light.css('border', '3px dashed yellow');
$active_light.css('background-color', 'orange');
$active_light.fadeIn('slow');

'$' перед именем переменной можно ставить, чтобы показать что в ней храниться объект jQuery.

4. Выстраивайте код в цепочки:

Поскольку большинство методов jQuery возвращают после выполнения объект jQuery, то предыдущий пример можно написать так:
var $active_light = $('#traffic_light input.on');
$active_light.bind('click',
 function(){return false;})
        .css('border', '3px dashed yellow')
        .css('background-color', 'orange')
        .fadeIn('slow');
 

Это позволит нам сократить размер кода.

5. Используйте подзапросы:

var $traffic_light = $('#traffic_light'),
        $active_light = $traffic_light.find('input.on'),
        $inactive_lights = $traffic_light.find('input.off');

Поскольку мы сохранили объект в переменной, то следующие выборки будут производиться только в сохраненном объекте, а не во всем дереве элементов.

6. Минимизируйте работу с DOM-деревом

Поскольку манипуляции (удаление, перемещение и вставка новых элементов) с деревом DOM довольно медленные, то вместо того, чтобы вставлять каждый элемент в DOM:

var top_100_list = [...],
$mylist = $('#mylist');

for (var i=0, l=top_100_list.length; i<l; i++)
{
        $mylist.append('<li>' + top_100_list[i] + '</li>');
}

лучше сначала создать набор элементов в переменной, чтобы потом за один шаг вставить его в DOM:
var top_100_list = [...],
$mylist = $('#mylist'),
top_100_li = "";

for (var i=0, l=top_100_list.length; i<l; i++)
{
        top_100_li += '<li>' + top_100_list[i] + '</li>';
}

$mylist.html(top_100_li);


7. Используйте делегирование событий:

Каждое событие «всплывает» в DOM дереве к элементам-предкам. Это можно использовать когда нескольким элементам на одно и то же событие нужно выполнить одинаковую функцию.

Вместо того, чтобы привязывать к каждому из этих элементов свое событие:
$('#entryform input).bind('focus', function(){
        $(this).addClass('selected');
}).bind('blur', function(){
        $(this).removeClass('selected');
});

можно привязать событие к элементу-родителю:
$('#entryform).bind('focus', function(e){
        var cell = $(e.target);  

        cell.addClass('selected');
}).bind('blur', function(e){
        var cell = $(e.target);
        cell.removeClass('selected');
});


8. Привязывать к странице только относящиеся к ней скрипты.

Обычно все складывается в один большой скрипт, который вставляется на все страницы сайта и выполняется на событие $(document).ready(). Но даже если функция не работает на данной конкретной странице, то все равно тратится время на поиск элементов, к которым привязана эта функция.

Поэтому можно разделить скрипт на несколько частей или же структирировать его сдедующим образом:
var mylib =
{
        article_page :
        {
                init : function()
                {
                        ...
                }
        },
        traffic_light :
        {
                init : function()
                {
                        ...
                }
        }
}

а на странице, где мы хотим использовать функции, относящиеся, например, к traffic_light перед закрывающим вставить:
<script type="text/javascript">
    mylib.article.init();
</script>
</body>


9. Задержать загрузку до $(window).load

Чаще всего разработчики jQuery выполнение скрипта привязывают к событию $(document).ready(). Событие происходит в то время рендеринга страницы, когда объекты все еще загружаются. Иногда можно наблюдать что страница подвисает во вермя загрузки. Причиной этого могут быть именно функции, которые привязаны к $(document).ready().

Чтобы избавиться от этого, можно часть функций привязать к событию $(window).load(), которое происходит уже после того, как все содержимое страницы (включая содержимое iframe) уже загружено.
$(window).load(function(){
        // функции jQuery, инициализируемые после загрузки страницы
});

Сюда можно поместить анимацию, происходящую например, по клику на что-нибудь, drag'n'drop, прелоад невидимых картинок.

10. Сжимать js код

Хотя это не и не имеет отношения именно к jQuery.
Это можно делать с помощью YUICompressor, Dojo ShrinkSafe или Google Closure Compiler.

11. Читайте документацию

http://doc.jquery.com/
jquery, js, оптимизация
2
13 ноября 2009, 12:47
igorok
комментировать

JavaScript программирование →  Добавить страницу в избранное

Работает это в следующих браузерах:
Internet Explorer (Win), FireFox (Win/Mac), Opera (Win), Netscape (Win/Mac), Mozilla (Mac)

Не работает в Safari (Win/Mac). Тех кто знает решение — жду в личке или в комментах.
Вернее в Safari выдает пользователю сообщение: «Что бы добавить страницу в избранное нажмите CTRL-D.»
Ну или Command-D — в зависимости от платформы.

function bookmark(title, url) {
        if (title == undefined)
                title = document.title;
        if (url == undefined)
                url = top.location.href;
        if (window.sidebar) {
                // Firefox
                window.sidebar.addPanel(title, url, '');
        } else if (window.opera && window.print) {
                // Opera
                var t = document.createElement('a');
                t.setAttribute('rel', 'sidebar');
                t.setAttribute('href', url);
                t.setAttribute('title', title);
                t.click();
        } else if(window.external ) {
                // IE
                window.external.AddFavorite(url, title);
        }
        else {
//сюда уже проверку сами вставите, хотя, по идее это условие никогда не выполнится
//но для надежности пусть будет
                alert('Что бы добавить страницу в избранное нажмите CTRL-D.');
        }
        return false;
}
 
if (window.external || window.sidebar || (window.opera && window.print)) {
        document.write('<a href="/#"  onclick="bookmark(\'Сайт о веб-программировании\',
\'http://php5.com.ua\'); return false;">Добавить в избранное<\/a>');
}
else {
//проверяем макинтош это или писюк
        this.agent = navigator.userAgent;
        this.mac = this.agent.indexOf("Mac")>-1;
//для макинтоша соответственно выводим
        if (this.mac) document.write('Что бы добавить страницу в избранное нажмите Command-D.');
//для PC выводим
        else document.write('Что бы добавить страницу в избранное нажмите CTRL-D.');
}
JavaScript, добавить в избранное
3
16 сентября 2009, 01:08
igorok
комментировать

JavaScript программирование →  Оптимизация загрузки JavaScript файлов на веб-странице (асинхронная загрузка скриптов)

Привет, умники:)
Сегодня мы будем заниматься дрочерством, а именно — оптимизировать загрузку HTML страницы. В наше время информационных технологий без JavaScript в веб-разработке никуда. И чем дальше, тем больше нагружаются страницы этим самым яваскриптом. Как известно, объявление js файлов лежит у нас в
<head>
. И, пока не подтянутся эти js файлы, загрузка страницы блокируется, если их много, то это может быть не очень приятным моментом. Что делать?

Создаем функцию загрузки js файла. А-ля include:
function include(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

И ложим ее в файлик include.js.
Далее после тега
</body>
прописываем наш скрипт include.js и загрузку необходимого нам js файлов.

<script type="text/javascript" src="http://your.com/include.js"></script>
<script type="text/javascript">
include("http://your.com/main.js", function(){
    //initialization code
});
</script>


Прикол в том, что все сводится к этим двум файлам include.js и main.js и мы имеем два http запроса. Скорее всего у вас на странице больше двух js файлов, тогда необходимо провести предварительную подготовку при помощи Sprockets, mod_concat или combo handler, сведя все файлы к main.js

Зачем добавлять именно после тега
</body>
. Будет гарантия что мы получим все необходимые нам DOM элементы и не нужно использовать window.onload.

И еще, для фанатов JQuery. Он тоже так умеет http://docs.jquery.com/Ajax/jQuery.getScript.
JavaScript, загрузка, скрипт
2
5 августа 2009, 13:19
igorok
комментировать

JavaScript программирование →  Мягкий (smooth) cкролл (прокрутка, scroll) окна (блока) при помощи JQuery


function enable_smooth_scroll() {
    function filterPath(string) {
        return string
                .replace(/^\//,'')
                .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
                .replace(/\/$/,'');
    }

    var locationPath = filterPath(location.pathname);
   
    var scrollElement = 'html, body';
    $('html, body').each(function () {
        var initScrollTop = $(this).attr('scrollTop');
        $(this).attr('scrollTop', initScrollTop + 1);
        if ($(this).attr('scrollTop') == initScrollTop + 1) {
            scrollElement = this.nodeName.toLowerCase();
            $(this).attr('scrollTop', initScrollTop);
            return false;
        }    
    });
   
    $('a[href*=#]').each(function() {
        var thisPath = filterPath(this.pathname) || locationPath;
        if  (   locationPath == thisPath
                && (location.hostname == this.hostname || !this.hostname)
                && this.hash.replace(/#/, '')
            ) {
                if ($(this.hash).length) {
                    $(this).click(function(event) {
                        var targetOffset = $(this.hash).offset().top;
                        var target = this.hash;
                        event.preventDefault();
                        $(scrollElement).animate(
                            {scrollTop: targetOffset},
                            500,
                            function() {
                                location.hash = target;
                        });
                    });
                }
        }
    });
}
 


Что делать с функцией


В html прописываем:

<script>
$(document).ready(function() {
    enable_smooth_scroll();
});
</script>
<a href="#fuck">ХУЙ</a>
<div id="fuck"></div> <!-- Размещаем блок в качестве якоря туда, куда нужно крутить. Это не обязательно должен быть div -->
 


UPD: http://demo.php5.com.ua/smooth-scroll/ добавил демо

--
На правах рекламы: Уроки по фотошоп
--
jquery, JavaScript, scroll, прокрутка
1
23 июля 2009, 15:04
igorok
6 +6

JavaScript программирование →  Обход выбранных элементов (чекбоксов) в JQuery

Итак, когда мы выбрали интересующие нас элементы после прочтения статьи о селекторах в JQuery, было бы неплохо «вынуть» то, что мы получили.
Например, имеем группу из четырех чекбоксов, выбором которых будем удалять записи:

<input type="checbox" name="delete-article[]" value="1" class="delete-article">
<input type="checbox" name="delete-article[]" value="2" class="delete-article">
<input type="checbox" name="delete-article[]" value="3" class="delete-article">
<input type="checbox" name="delete-article[]" value="4" class="delete-article">


Собственно, JavaScript:
<script type="text/javascript">
var array_delete_articles = $("input:checkbox[class=delete-article]:checked"); // загнали в переменную, что бы по несколько раз не делать выборку
if(array_delete_articles.size() == 0){ // т.к. чекбоксов у нас на странице может быть еще много, то ввели класс, по которому будет осуществляться выборка, в принципе можно было сделать селектор через имя чекбокса, но я не пробовал (получится?)
        alert("Отметьте хотя бы один чекбокс для удаления статьи.")
}
else {
        array_delete_articles.each(
                function() { // ajax запрос на удаление артикла
                        $.ajax({
                                type: "GET",
                                url: '/article/delete/' + this.value
                        });
                }
        );
}
</script>


Ну, в общем как-то так:) Надеюсь, кому-то помогло.
jquery, checkbox, селекторы
1
26 июня 2009, 17:27
igorok
комментировать

JavaScript программирование →  JQuery Flot на русском языке

В продолжение темы построения графиков с использованием плагина Flot.

На днях я закончил перевод документации Flot на русский язык. Теперь можно скачать примеры и документацию Flot на русском.

Т.к. я не профессиональный переводчик, в переводе есть неточности. Вчера отдал перевод вычитать переводчику, но не факт, что это будет скоро. Если у кого-то есть желание оказать посильную помощь — велкам.
flot, графики, jquery, плагины
0
29 мая 2009, 10:47
igorok
комментировать

JavaScript программирование →  JS Функция для получения случайного цвета

Столкнулся с необходимостью получения случайного цвета в Java Script.

Задача была сделать логотип на сайте Антилебедева, как в оригинале.

Нашел одно решение, которое достойно говнокода.

Так же нашлось более изящное решение.

// @format (hex|rgb|null) : Format to return, default is integer
function random_color(format)
{
 var rint = Math.round(0xffffff * Math.random());
 switch(format)
 {
  case 'hex':
   return ('#0' + rint.toString(16)).replace(/^#0([0-9a-f]{6})$/i, '#$1');
  break;
 
  case 'rgb':
   return 'rgb(' + (rint >> 16) + ',' + (rint >> 8 & 255) + ',' + (rint & 255) + ')';
  break;
 
  default:
   return rint;
  break;
 }
}


Ну, если нужен только HEX, то можно вот так:

(Math.round(0xFFFFFF * Math.random()).toString(16) + "000000").replace(/([a-f0-9]{6}).+/, "#$1").toUpperCase();
color, rand, JavaScript, цвета
0
22 апреля 2009, 00:37
igorok
комментировать

JavaScript программирование →  Селекторы в JQuery в примерах

Для опытов соорудим html страницу:

<div id="header">
    <h1><a href="/" title="homepage">Title</a></h1>
    <h2>Sub-title <span>small description</span></h2>
</div>
<div id="wrapper">
    <div id="content">
        <div class="post">
            <h3>Post Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
               Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
               vel varius augue tortor vel tortor.</p>
            <span>Image Title</span>
            <img src="/image1.jpg" alt="Image Alt Text"/>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
               Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
               vel varius augue tortor vel tortor.</p>
            <span class="inner-banner">Banner Text</span>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
               Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
               vel varius augue tortor vel tortor.</p>
        </div>
        <span id="banner"><img src="/banner1.jpg" alt="Big Banner"/></span>
        <div class="post">
            <h3>Post Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
               Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
               vel varius augue tortor vel tortor.</p>
            <span>Image Title</span>
            <img src="/image2.jpg" alt="Image Alt Text"/>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
               Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
               vel varius augue tortor vel tortor.</p>
            <span class="inner-banner">Banner Text</span>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
               Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
               vel varius augue tortor vel tortor.</p>
        </div>
    </div>
</div>
<div id="sidebar">
    <ul>
         <li><a href="/item0.html">Menu Item 0</a></li>
         <li><a href="/item1.html">Menu Item 1</a></li>
         <li><a href="/item2.html">Menu Item 2</a></li>
         <li><a href="/item3.html">Menu Item 3</a></li>
    </ul>
</div>
<div id="footer">
    Copyright 2008
</div>
 


Выбор элементов по Id либо ClassName:

$('#sidebar');    // выбор элемента с id = sidebar
$('.post');       // выбор элементов с class = post
$('div#sidebar'); // выбор элемента div с id = sidebar
$('div.post');    // выбор элементов div с class = post


Иерархия объектов в DOM



Выборка деток:

$('div span');            // выбор всех span элементов в элементах div


Аналогичный результат можно получить используя следующую конструкцию:

$('div').find('span');    // выбор всех span элементов в элементах div


Выборка только непосредственных деток:

$('div > span');          // выбор всех span элементов в элементах div, где span является прямым потомком div'a


Группируем селекторы:

$('div, span');          // выбор всех div и span элементов


Ищем по соседям:

$('span + img');         // выбор всех img элементов перед которыми идут span элементы
$('span ~ img');         // выбор всех img элементов после первого элемента span
$('#banner').prev();     // выбор предыдущего элемента от найденого
$('#banner').next();     // выбор следующего элемента от найденого


Выборка всех элементов, всех родителей, всех деток:

$('*');                // выбор всех элементов
$('p > *');            // выбор всех потомков элементов p
$('p').children();     // --
$('p').parent();       // выбор всех прямых предков элементов p
$('* > p');            // выбор всех предков элементов p (скорей всего Вам не понадобится)
$('p').parents();      // --
$('p').parents('div'); // выбор всех предков элемента p которые есть div (parents принимает в качестве параметра селектор)


Фильтры



Фильтров в jQuery реализовано достаточно много:

$('div:first');     // выбираем первый div в доме
$('div:last');      // выбираем последний div в доме
$('div:not(.red)'); // выбираем div'ы у которых нету класса red
$('div:even');      // выбираем четные div'ы
$('div:odd');       // выбираем нечетные div'ы
$('div:eq(N)');     // выбираем div идущим под номером N в DOMe
$('div:gt(N)');     // выбираем div'ы, индекс которых больше чем N в DOMe
$('div:lt(N)');     // выбираем div'ы, индекс которых меньше чем N в DOMe
$(':header');       // выбо заголовоков h1, h2, h3 и т.д.
$('div:animated');  // выбор элементов с активной анимацией


Фильтры по контенту и видимости:

$('div:contains(text)'); // выбираем div'ы содержащие текст
$('div:empty');          // выбираем пустые div'ы
$('div:has(p)');         // выбираем div'ы которые содержат p
$('div.red').filter('.bold') // выбираем div'ы которые содержат класс red и класс bold
$('div:hidden');         // выбираем скрытые div'ы
$('div:visible');        // выбираем видимые div'ы


Фильтры по атрибутам:

$("div[id]");           // выбор всех div с атрибутом id
$("div[title='my']");   // выбор всех div с атрибутом title=my
$("div[title!='my']");  // выбор всех div с атрибутом title не равного my
$("div[title^='my']");  // выбор всех div с атрибутом title начинающихся с my
                        // <div title="myCat">,<div title="myCoffee">, <div title="my...">
$("div[title$='my']");  // выбор всех div с атрибутом title заканчивающихся на my
                        // <div title="itsmy">,<div title="somy">, <div title="...my">
$("div[title*='my']");  // выбор всех div с атрибутом title содержащим my
                        // <div title="itsmy">,<div title="myCat">, <div title="its my cat">,<div title="...my...">


Стоит отдельно отметить следующий фильтр:

$("a[rel~='external']"); // выбор всех A с атрибутом rel содержащим external в списке значений разделенных пробелом


В результате его работы будут выбраны следующие теги:

<a href="" rel="external">link</a> — да
<a href="" rel="nofollow external">link</a> — да
<a href="" rel="external nofollow">link</a> — да
<a href="" rel="friend external follow">link</a> — да
<a href="" rel="external-link">link</a> — нет


Для работы с элементами форм есть ряд селекторов позволяющий выбирать по типу элемента и фильтров — enabled/disabled/selected/checked:

$(":text");            // выбор всех input элементов с типом =text
$(":radio");           // выбор всех input элементов с типом =radio
                       // и так далее
$("input:enabled");    // выбор всех включенных элементов input
$("input:checked");    // выбор всех отмеченных чекбоксов


Группируем фильтры:

$("div[name=city]:visible:has(p)"); // выбор видимого div'a с именем city, который содержит тег p


Полезные селекторы для работы с элементами форм:

$("form select[name=city] option:selected").val(); // получение выбранного(-ых) элементов в селекте city
$("form :radio[name=some]:checked").val(); // получение выбранного значения радиобатона с именем some
$("form :checkbox:checked"); // выбор всех выбранных чекбоксов


Работа с элементом SELECT



Удалить все элементы списка:

$('select[@name=mySelect] option').remove();


Добавить в список новый элемент:

$('select[@name=mySelect]').append('<option>Новый элемент списка</option>');


Например, список формируется из XML данных таким образом:

$(xml).find('file').each( function(){
        $('select[@name=loadFileName]').append('<option>'+$(this).find('title').text()+'</option>');
});


Схема здесь проста: мы ищем все теги , обрабатываем их с помощью .each() — находим и загоняем текст в следующий пункт списка.

Сделать выделенным первый пунки списка:

$('select[@name=loadFileName] option:first').attr('selected', 'yes');


Принудительно снять выделение с элемента списка:

$('select[@name=loadFileName] option:first').removeAttr('selected');


Получить значение выделенного пункта из списка:

Тут есть два варианта. Первый, если вы используете аттрибут <option value=«some value»>:

var file = $('select[@name=loadFileName] option:selected').val();


И второй вариант: вы не задаете value, вас интересует то, что заключено между … (как у меня в проекте):

var file = $('select[@name=loadFileName] option:selected').text();
 

Теперь переменная file содержит нужное нам значение.

Проверить, выбран ли какой-нибудь элемент списка. Это нужно делать обязательно, иначе в приложении могут возникнуть проблемы:

if( typeof $('select[@name=loadFileName] option:selected').text() === 'undefined' ){
       alert('Ни один элемент списка не выбран');
}


Превратить список в «автомасштабируемый, т.е. отобразить в списке ровно столько элементов, сколько в нем есть:

$('select[@name=loadFileName]').attr('size', $('select[@name=loadFileName] option').size());


Сделать недоступны для выбора отдельный элемент:

$('select[@name=loadFileName] option:contains('текст нужного элемента')').attr('disabled', 'disabled');


Разрешить выделение всех ранее недоступных элементов можно так:

$('select[@name=loadFileName] option:disabled').removeAttr('disabled');
jquery, селекторы, JavaScript
0
8 апреля 2009, 10:11
igorok
2 +2

JavaScript программирование →  FAQ JQuery на русском

Как выбрать элемент по его id или классу?



Выбираем элемент с id «myDivId». Поскольку id является уникальным, это выражение всегда выбирает один элемент. Или ничего не выбирает, если элемента с таким id не существует.

$('#myDivId');


Выбираем элемент(ы) с классом «myCssClass». Поскольку любое количество элементов может иметь этот класс, это выражение будет выбирать любое количество элементов.

$('.myCssClass');


Выбранный элемент может быть присвоен переменной javascript, например, так:

var myDivElement = $('#myDivId');


В выбранном элементе есть возможность задействовать другие функции JQuery

// получаем значение элемента
      var myValue = $('#myDivId').val();
      // устанавливаем значение элемента
      $('#myDivId').val("hello world");


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

$('#myDivId'); // хорошо
      $('div#myDivId'); // плохо
      $('span.myCssClass'); // хорошо
      $('.myCssClass'); // плохо


Как проверить имеет ли элемент специфический класс?



Можно использовать метод is() вместе с подходящим селектором.

if ( $('#myDiv').is('.pretty') )
      $('#myDiv').show();


Заметьте, что этот метод позволяет проверять также и другие вещи. Например можно проверить, скрыт ли элемент (при использовании селектора :hidden).

if ( $('#myDiv').is(':hidden') )
      $('#myDiv').show();


Начиная с версии 1.2 был добавлен hasClass.

$("div").click(function(){
      if ( $(this).hasClass("protected") )
      $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
      });
 


В этом коде добавляется некая анимация для элемента(ов) с классом protected. Обратите внимание, что имя класса тут записывается без точки.

Как проверить существование элемента?



Вы можете использовать свойство length набора jQuery, возвращенного селектором.

if ( $('#myDiv').length )
      $('#myDiv').show();
 


Не всегда необходимо проверять, существует ли элемент. Следующий код показал бы элемент, если он существует, и не сделал бы ничего (и никакой ошибки не возникло бы), при его отсутствии.

$('#myDiv').show();


Как определить состояние переключаемого элемента?



Можно проверить состояние, используя селекторы:visible или:hidden.

var isVisible = $('#myDiv').is(':visible');
      var isHidden = $('#myDiv').is(':hidden');


Можно воздейстовать на элемент, основываясь на его видимости, просто включите «:visible» или «:hidden» в выражение селектора.

$('#myDiv:visible').animate({left: '+=200px'}, 'slow');


Как выбирать элементы, которые имеют спец. символы в id?



Некоторые фреймворки могут генерить уникальные id, которые содержат в себе спец. символы (например, ‘.’ или ‘[..]‘). Проблема состоит в том, что эти символы имеют специальное значение в CSS. Что делать? Смотрим ниже:

$("#some.id") // не работает
      $("#some\\.id") // работает
      $("#some[id]") // не работает
      $("#some\\[id\\]") // работает


Как разрешать/запрещать использование элемента?



Можно разрешать/запрещать элемент, устанавливая атрибут ‘disabled’ в значение ‘disabled’ (чтобы запретить использование элемента) или присвоить тому же атрибуту пустое значение «, или же просто удалить атрибут ‘disabled’ (чтобы разрешить использование элемента). Как это сделать? Смотрим ниже:

// запрещаем использование элемента #x
      $("#x").attr("disabled","disabled");
      // разрешаем  использование элемента #x
      $("#x").attr("disabled","");
      // разрешаем  использование элемента #x
      $("#x").removeAttr("disabled");


HTML код для тестов:

<select id="x" style="width: 200px;"> <option>Один</option> <option>Два</option> <option>Три</option> </select>
      <input onclick="$('#x').attr('disabled','disabled')" type="button" value="Disable" />
      <input onclick="$('#x').removeAttr('disabled')" type="button" value="Enable" />


Как отметить/снять отметку с элемента checkbox?



Можно отметить/снять отметку c элемента checkbox, устанавливая атрибуту ‘checked’ значение ‘checked’ (чтобы отметить элемент) или установить атрибуту ‘checked’ пустое значение »« (чтобы снять отметку).

// отмечаем checkbox с id="c"
      $("#c").attr("checked", "checked");
      // снимаем отметку checkbox'а с id="c"
      $("#c").attr("checked","");
 


HTML код для теста:

<label><input id="c" type="checkbox" />это подопытный checkbox</label>


Как получать значения выбранной опции элемента select?



Элементы select обычно имеют два значения, к которым нужно обратиться. Это значение атрибута value соответствующего элемента option и его текстовое значение.

HTML для примера:

<select id="myselect"> <option value="1">Mr</option> <option value="2">Mrs</option> <option value="3">Ms</option> <option value="4">Dr</option> <option value="5">Prof</option> </select>


Из него можно получить значение атрибута value, выбранной опции:

$("select#myselect").val();


Или получить текст выбранной опции:

$("#myselect option:selected").text();


Как заменить текст в третьем элементе в списке из десяти элементов?



Селектор:eq() или метод .eq() позволяют выбрать необходимый элемент. Для того что бы заменить текст, сначала его нужно получить, например, методом .text(), а потом отдать куда необходимо. Пример ниже:

// не работает
  $(this).find('li a').eq(2).text().replace('foo','bar');

  // работает
  var $thirdLink = $(this).find('li a').eq(2);
  var linkText = $thirdLink.text().replace('foo','bar');
  $thirdLink.text(linkText);
jquery, FAQ, селекторы
0
31 марта 2009, 15:29
igorok
1 +1
←  сюда    туда  →
1 2 →
© Сайт работает на базе движка LiveStreet
© 2008 |  О проекте