jquery

50 jQuery сниппетов, которые помогут вам быстрей создавать скрипты. Часть 1.

Март 10th, 2010

В этой статье будут представлены 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 уже во второй части.

Оставьте свой комментарий

', 1 => '', 2 => '', 3 => '', 4 => '', 5 => '', 6 => '', 7 => '', 8 => '', 9 => '', 10 => '', 11 => '', 12 => '', 13 => '', 14 => '', 15 => '', 16 => '', 17 => '', 18 => '', 19 => '', 20 => '', 21 => '', 22 => '', 23 => '', 24 => '', 25 => '', 26 => '', 27 => '', 28 => '', 29 => '', ), ) memory start/end/dif 23913096/24386912/473824 get_num_queries start/end/dif 6/9/3 iSapeDebugLogEnd --->