jQuery - основы

Немного истории

Что такое jQuery?

Разработал Джон Резиг.
Библиотека была представлена общественности на компьютерной конференции «BarCamp» в Нью-Йорке в 2006 году.

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX

Почему jQuery?

    // HIDING ALL IMAGES: VANILLA JAVASCRIPT 

    var images = document.getElementsByTagName("img");

    for (var i = 0; i < images.length; i++) {
        var currentImage = images[i]l
        currentImage.style.display = "none";
    }

    //Oh, cool. That's heaps simple. Thanks, Javascript.


    // HIDING ALL IMAGES: JQUERY

    $("img").hide();

    // /giphy mind blown

MIND BLOWN!

А еще и кроссбраузерность!

Почему jQuery?

    // CREATE A PARAGRAPH, ADD TEXT, STYLE IT AND APPEND IT TO THE HEADER - VANILLA JS

    var p = document.createElement('p');
    var textNode = document.createTextNode('Welcome!');

    p.appendChild(textNode);
    p.style.color = 'black';
    p.style.backgroundColor = 'red';
    p.className = 'special';
    var header = document.getElementsByTagName('header')[0];
    header.appendChild( p );


    // CREATE A PARAGRAPH, ADD TEXT, STYLE IT AND APPEND IT TO THE HEADER - JQUERY

    var $p = $("<p>Welcome!</p>");
    $p.css({ color: "black", backgroundColor: "red" });
    $p.addClass( "special" );
    $("header").append( $p );

    //Note: prefixing a variable name with the $ symbol is just a convention, 
    //      reminding you that this is a jQuery object, to which all jQuery methods
    //      are available.

Как работает jQuery

$(".warning").hide();

DOM - дерево элементов

З типа действий с DOM 

1. Manipulation
2. Traversal
3. Events

Документация

http://api.jquery.com

Как подключить jQuery в проект

<script src="/jquery/jquery-2.1.3.min.js"></script>

Избежать конфликт с другими библиотеками

;(function($){
    //Ваш код
})(jQuery);

var $j = jQuery.noConflict();

$j( "div" ).hide();

Основы

$( document ).ready(function() {
   $( "p" ).addClass( "special" );
});

jQuery селектор -  поиск элементов

<p>Paragraph</p>

<div id="main"> </div>

<p class="intro"></p>

<div class="container">
    <p></p>
</div> 

<ul>
    <li></li>
    <li class="special"> </li>
    <li></li>
    <li></li>
</ul>

    $("p");

    $("#main");

    $("p.intro");

    $(".container p");





    $("ul li.special");

Пачка селекторов в справочнике

Особенность

DOM Node !== jQuery Object
HTML Element !== DOM Node

Фильтры

// Refining selections.
$( "div.foo" ).has( "p" );         // div.foo elements that contain <p> tags
$( "h1" ).not( ".bar" );           // h1 elements that don't have a class of bar
$( "ul li" ).filter( ".current" ); // unordered list items with class of current
$( "ul li" ).first();              // just the first unordered list item
$( "ul li" ).eq( 5 );              // the sixth

$('div:first');     // выбираем первый div в доме
$('div:last');      // выбираем последний div в доме
$('div:not(.red)'); // выбираем div'ы у которых нету класса red
$('div:even');      // выбираем четные div'ы
$('div:odd');       // выбираем нечетные div'ы
$('div:eq(N)');     // выбираем div идущим под номером N в DOMe
$('div:gt(N)');     // выбираем div'ы, индекс которых больше чем N в DOMe
$('div:lt(N)');     // выбираем div'ы, индекс которых меньше чем N в DOMe
$(':header');       // выбо заголовоков h1, h2, h3 и т.д.
$('div:animated');  // выбор элементов с активной анимацией

var divs = $( "div" );

// Doesn't work!
if ( $( "div.foo" ) ) {
    ...
}

// Testing whether a selection
// contains elements.
if ( $( "div.foo" ).length ) {
    ...
}

Проверка, выбран ли элемент

Работа с выбранными элементами

var $aTag = $( "a" );

// Read the html content of the element.
var content = $aTag.html();
// => 

// Read the href attribute of the element.
var link = $aTag.attr("href");

// Read the font-size property of the element
var fontSize = $aTag.css("font-size");

var $aTag = $( "a" );

// Change the HTML content of the element
var content = $aTag.html("Click This Link!");

// Change the href attribute of the element.
var link = $aTag.attr("href", "www.google.com");

// Change the value of properties of the element.
var fontSize = $aTag.css({
	"font-size" : "40px",
	"text-decoration" : "none",
	);

Чтение

Запись

Работа с атрибутами

$( "a" ).attr( "href" ); 

$( "a" ).attr( "href", "allMyHrefsAreTheSameNow.html" );
 
$( "a" ).attr({
    title: "all titles are the same too!",
    href: "somethingNew.html"
});

Чтение

Запись

$( "a" ).removeAttr( "hidden" )

Удаление

Работа с классами

$( ".container" ).addClass( "row" );

$( ".container" ).removeClass( "row" ); 

$( ".container" ).toggleClass( "row" );

$( ".container" ).hasClass( "row" );

Chaining

var $aTag = $( "a" );

// Change the HTML content of the element
$aTag.html("Click This Link!").attr("href", "www.google.com")
    .css({
	"font-size" : "40px",
	"text-decoration" : "none",
	);

$("ul#list")
    .html("Click This Link!")
    .find("li.active")
    .removeClass("active") // теперь работатем с li
    .end() // возвращаемся к "ul#list"
    .addClass("no-active");

Возвращение к исходной выборке