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");