Jquery полезные приемы

Категория: / DEV Блог / PHP (LAMP)
Выборки

$("#header") // получение элемента с id="header"
$("h3") // получить все <h3> элементы
$("div#content .photo") // получить все элементы с классом ="photo" которые находятся в элементе div с id="content"
$("ul li") // получить все <li> элементы из списка <ul>
$("ul li:first") // получить только первый элемент <li> из списка <ul>
 
// два элемента
$('#links_out,#links_in')
//по маске
$('#myEle\\S*').each();


Аттрибуты

// 1
 var title = $("em").attr("title");
    $("div").text(title);
 
// 2
 $("img").attr({
          src: "/images/hat.gif",
          title: "jQuery",
          alt: "jQuery Logo"
        });
    $("div").text($("img").attr("alt"));
 
// 3
$("button:gt(1)").attr("disabled","disabled");


Массивы (arrays)

// простой массив
$.each(
 var,
 function(k,v){  v.__attributes=="2" ? alert(v) : skip(); }
 );
 
// dom-элементы
$('#item').each(function(i, field){
      $("#results").append(field.value + " ");
    });


getElementsByName

$("*[name=customerType]")


CSS, Class

$("p").css({ color: "red", background: "blue" });
$("p").css("color","red");
 
$("p").addClass("selected")
$("p").removeClass("selected")
$("p").toggleClass("selected")


Удаление

$(element).click(function() {
    $(this).fadeOut(500, function() { $(this).remove(); });
});



Удаление

С анимационным эффектом

// opacity:'toggle'
$(".pane .delete").click(function(){
        $(this).parents(".pane").animate({ opacity: "hide" }, "slow");
    });



Ссылка на родителя

$('ul').parent().find('')


Ссылка на себя self

метод {
var self = this;
$(document).ready(function() { self.doSomething(); });
}


Checkboxes

Проверяем на чекнутость.

// 1
$('#checkBox').attr('checked');
 
// 2
$('#edit-checkbox-id').is(':checked');
 
// 3
$("input[@type=checkbox][@checked]").each(
    function() {
       // код
    }
);


Разное

Обход элементов с вызовом для каждого триггера через интервал времени.
Вызов таймера с функцией с передаваемыми параметрами.

var _g_delay = 0;
var _timer_delay = 500;
var _timer_delay_rand = 500;
 
function _delay_trigger(sel, trig) {
    $(sel).each(function(k,item){
        var delay = _g_delay + _timer_delay + Math.floor(Math.random() * _timer_delay_rand);
        _g_delay = delay;
       
        setTimeout(
        (function(item, trig)
            {
                return function() {$(item).trigger(trig)};
            }
        )(item, trig), delay);
    });
}


Документация по исходному коду jquery



html/jquery.html (большой plain-html файл с подсветкой)