В этой статье будут представлены 50 наиболее используемых сниппетов jquery, которыми пользуются разработчики JavaScript. В этой статье будет минимум объяснений, он вся посвящена кускам кода.
1. Как создать вложенный фильтр
Ниже в примере фильтр удаляет все элементы (:not) (:has) у которых нет вложенных элементов с классом .selected
.filter(":not(:has(.selected))")
2. Как повторно использовать ваши элементы поиска
var allItems = $("div.item");
var keepList = $("div#container1 div.item");
$(formToLookAt + " input:checked").each(function() {
keepList = keepList.filter("." + $(this).attr("name"));
});</div>
3. Как проверить существует ли определенный класс у элемента
У этого метода добавлена поддержка в jQuery начиная с версии 1.4. Он позволяет проверить есть ли у элемента определенный класс.
$("input").has(".email").addClass("email_icon");
4. Как переключить файл с css стилями
Сниппет ищет нужный вам media тип и меняет его атрибут как вам это нужно.
$('link[media='screen']').attr('href', 'Alternative.css');
5. Как ограничить сферу выбора (оптимизация)
var in_stock = $('#shopping_cart_items input.is_in_stock');
<ul id="shopping_cart_items"> <li> <input value="Item-X" name="item" class="is_in_stock" type="radio"> Item X</li> <li> <input value="Item-Y" name="item" class="3-5_days" type="radio"> Item Y</li> <li> <input value="Item-Z" name="item" class="unknown" type="radio"> Item Z</li> </ul>
6. Как правильно использовать ToggleClass
a.toggleClass('blueButton');
7. Как установить специфическую функцию для IE
if ($.browser.msie) { // Internet Explorer is a sadist. }
8. Как заменить элемент
$('#thatdiv').replaceWith('fnuh');
9. Как убедиться, что элемент является пустым
if ($('#keks').html()) { //Nothing found ;}
10. Как узнать индекс элемент в неупорядоченном списке
$("ul > li").click(function () {
var index = $(this).prevAll().length;
});
11. Как повесить функцию на событие
$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});
12. Как добавить элемент в html
$('#lal').append('sometext');
13. Как использовать свойства объектов при создании элементов
var e = $("", { href: "#", class: "a-class another-class", title: "..." });
14. Как использовать фильтр multiple-attributes
var elements = $('#someid input[type=sometype][value=somevalue]').get();
15. Как сделать предварительную загрузку изображений с помощью jQuery
jQuery.preloadImages = function() { for(var i = 0; i').attr('src', arguments[i]); } };
// Usage $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');
На этом первая часть окончена. Продолжим описывать 50 сниппетов для jQuery уже во второй части.