EugeneMir.com
Блог программиста про IT и создании сайтов

Основы jQuery

Основы jQuery
498jQuery

Jquery - это сторонняя библиотека для JS, помогающая уменьшить количество необходимого кода, параллельно увеличив функционал языка. Библиотека кроссбраузерная, поэтому код будет корректно отображаться в любом современном браузере.

$(document).ready vs $(window).load vs window.onload

$(document).ready - код начнёт выполняться сразу после того, как будет готов DOM, за исключением картинок.

$(window).load - начнёт работу когда будет готов весь DOM включая изображения.

//Вариант 1
$(document).on('ready', function(){
/* начнёт работу тогда, когда будет готов DOM, за исключением картинок */
//ваш код
});
------------------------------------------------------------------------
//Вариант 2
$(window).load(function() {
/** начнёт работу тогда, когда будет готов весь DOM, включая все: фреймы, объекты и картинок **/
});

jQuery Selectors

Селекторы - одна из самых важных частей библиотеки jQuery.

<div>
    <p></p>
    <p></p>
</div>
<div></div>
<script>
$(document).ready(function() {
 #appends text to all p elements 
 $('p').append('This is paragraph.');
 #appends text to all div elements 
 $('div').append('This is div.);
}); 
</script>

$('div') - Найти все элементы <div>

$('p,div,code') - Найти элементы <p>, <div> и <code>

$('div p') - Найти все элементы <p>, которые являются потомками <div>

$('div> p') - Найти <p>, который является дочерним элементом <div>

$(*) - Найти все элементы

$('#myDiv') - Найти элемент с идентификатором myDiv

$('div #myDiv') - Найти элемент <div> с идентификатором myDiv

$('#myDiv1, #myDiv2') - Найти несколько элементов по идентификатору, разделенных запятой.

$('.myCSSClass') - Найдите все элементы с class = myCSSClass.

$('.myCSSClass1, .myCSSClass2') - находит все элементы, атрибут класса которых установлен на myCSSClass1 или myCSSClass2

$('div.myCSSClass') - находит все элементы <div> с class = myCSSClass

$('p:first-child') - Найти все элементы <p>, которые являются первым дочерним элементом своего родительского элемента. (родительский элемент может быть любым)

$("p:last-child") - выбирает все элементы <p>, которые являются последними дочерними элементами его родительского элемента. (родительский элемент может быть любым)

$("p:nth-child(5)") - выбирает все элементы <p>, которые являются 5-м дочерним элементом своего родительского элемента. (родительский элемент может быть любым)

$("p:nth-last-child(2)") - выбирает все элементы <p>, которые являются вторым последним дочерним элементом своего родительского элемента. (родительский элемент может быть любым)

$("p:only-child") - выбирает все элементы <p>, которые являются единственным дочерним элементом своего родительского элемента. (родительский элемент может быть любым)

$('[class]') - Найти все элементы с атрибутом класса (независимо от значения).

$('div[class]') - Найдите все элементы <div>, у которых есть атрибут класса (независимо от значения).

$('div[class=myCls]') - Найти все элементы <div>, атрибуты класса которых равны myCls.

$('div[class|=myCls]') - Найти все элементы <div>, чьи атрибуты класса либо равны myCls, либо начинаются со строки myCls, за которой следует дефис (-).

$('div[class*="myCls"]') - выбирает элементы <div>, атрибуты класса которых содержат myCls.

$('div[class~= myCls]') - выбирает элементы div, атрибуты класса которых содержат myCls, разделенные пробелами.

$("div[class$='myCls']") - выбирает элементы <div>, значение атрибута класса которых заканчивается на myCls. При сравнении учитывается регистр.

$("div[class!='myCls']") - выбирает элементы <div>, у которых нет атрибута класса или значение не равно myCls.

$("div[class^='myCls']") - выбирает элементы <div>, значение атрибута класса которых начинается с myCls.

$("div:contains('tutorialsteacher')" - выбирает все элементы <div>, содержащие текст 'tutorialsteacher'.

$(":input") - выбирает все входные элементы.

$(":button") - выбирает все элементы ввода, где type = "button".

$(":radio") - выбирает все типы ввода, где type = "radio"

$(":text") - выбирает все элементы ввода, где type = "text".

$(":checkbox") - выбирает все элементы флажка.

$(":submit") - выбирает все элементы ввода, где type = "submit".

$(":пароль") - выбирает все элементы ввода, где type = "пароль".

$(":reset") - выбирает все элементы ввода, где type = "reset".

$(':image') - выбирает все элементы ввода, где type = "image".

$(':file') - выбирает все элементы ввода, где type = "file".

$(':enabled') - выбирает все включенные элементы ввода.

$(':disabled') - выбирает все отключенные элементы ввода.

$(':selected') - выделяет все выбранные элементы ввода.

$(':checked') - выбирает все отмеченные элементы ввода.

$(':hidden') - выбирает все скрытые элементы.

$(':visible') - выбирает все видимые элементы.

$('tr:odd') - выбирает все нечетные строки. (1,3,5,7 ..)

$('tr:even') - выбирает все четные строки. (0,2,4,6 ..)

Методы в jQuery

Методы jQuery позволяют манипулировать содержимым web-страницы. Каждый метод либо сам что-то возвращает, либо получает параметр и выполняет, что указано в параметре.

#Синтаксис:
$("селектор").имяМетода(параметры);

Манипулировать классами CSS

.addClass() - Добавляет класс(ы) выбранным элементам страницы. Если из этих элементов некоторые уже принадлежат каким-то классам, то новый (новые) класс добавится к существующим, а не заменит их.

$( "p" ).addClass("myclass");

.hasClass() - Проверяет наличие класса у элементов страницы.

<p id="1" class="myclass">
<p id="2">
<p id="3" class="class">
------------------------------------------
$("#1").hasClass("myclass");
#результат:
true
------------------------------------------
$("#2").hasClass("myclass");
#результат:
false
------------------------------------------
$("#3").hasClass("myclass");
#результат:
false

.removeClass() - Удаляет заданные классы у элементов на странице.

$( "p" ).removeClass("myclass");

.toggleClass() - Добавляет или удаляет заданный класс(ы) по принципу переключателя (добавляет, если элемент не содержит класса, и удаляет, если класс есть).

$( "p" ).toggleClass("myclass");
Web-Inside24