Содержание

jQuery

jQuery - фреймворк фокусирующаяся на взаимодействии JavaScript и HTML.

Самым распространенным в данный момент языком программирования на клиентской части является JavaScript. Появилось множество JS- библиотек, позволяющих реализовать красивые графические эффекты, анимацию, общение с сервером без перезагрузки страницы, в общем, инструментарий для облегчения жизни веб-разработчикам. Многие из них отличает либо большая сложность, либо ограниченность функциональности. Наибольшую популярность у разработчиков завоевали лишь несколько библиотек, одной из которых является Что такое фреймворк JQuery.

Конкурирующие продукты, например, Prototype, Mootools, ExtJS.

К явным плюсам JQuery можно отнести: небольшой объем и совместимость с основными браузерами.

И еще одно несомненное преимущество – это то, что библиотека может претендовать на то, чтобы стать стандартом в веб-разработке. Ведь не спроста такой монстр как Microsoft собирается включить ее в состав своего набора инструментов Использование IDE Microsoft Visual Studio Code.

Подключение библиотеки: 

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

Синтаксис jQuery

Кавычки: Строка может быть определена с помощью одинарных или двойных кавычек. Вы можете вставлять одинарные кавычки внутри двойных и наоборот. Если Вы используете двойные кавычки внутри двойных, то они должны экранированы обратным слешем.

Использование jQuery

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta name="keywords" content="HTML,CSS,XML,JavaScript" />
        <meta name="author" content="darkfire" />
        <meta charset="UTF-8" />
        <title>jQuery</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.1.min.js">
        </script>
    </head>
    <body>
        <div>
            <h1>Использование jQuery</h1>
        </div>
        <div>
            <!-- Появляется скрытый div. Применяется визуальный эффект slideDown.           -->
            <script type="text/javascript">
                $(document).ready(function(){
                    $("#button").click(function(){
                        $("#panel").slideDown("slow");
                    });
                    <!-- Добавляет каждому абзацу событие mouseover-->
                    $("p").mouseover(function () { 
                        $(this).css("color","red"); 
                    }); 
 
                });
            </script>
        </div>
        <a href="#" id="button">Отобразить панель</a>
    </div>
    <div id="panel" style="display:none; width:1500px; height:100px; background:pink;">
        Привет! Hello!
    </div>
    <p>Просто абзац.</p>
    <p>Just roll the mouse over me.</p> 
    <p>Or me to see a color change.</p>
</body>
</html>

Функция $(document).ready()

Функция $(document).ready() - является обработчиком готовности документа.

Обработчик onload объекта windows для выполнения назначенной им функции, требует полную загрузку документа. То есть броузер задерживает выполнение обработчика onload не только до момента создания полного дерева DOM, но также ждет, пока будут загружены все изображения и другие внешние ресурсы и страница отобразиться в окне броузера. В результате пользователь может визуально заметить задержку между тем моментом, когда он впервые увидит страницу, и тем, когда будет выполнен сценарий onload.

Библиотека jQuery для решения проблемы задержки onload, предоставляет способ запуска программного кода сразу после загрузки дерева DOM и до загрузки внешних изображений. Сначала производится обертывание экземпляра document документа в функцию jQuery(), а затем применяется метод ready(), которому передается функция для исполнения после того, как документ станет доступен для манипуляции. Вызывая функцию jQuery() или $(), мы тем самым предписываем броузеру дождаться, пока дерево DOM (и только дерево DOM) будет полностью загружено, прежде чем выполнить этот код. В одном и том же HTML документе это прием может использоваться многократно и броузер выполнит все указанные функции в порядке следования объявлений, в отличии от обработчика onload, который позволяет указать только одну функцию. 

jQuery(document).ready(function() {
alert('Можно грузить внешние картинки!');
});
jQuery(function() {
alert('Можно грузить внешние картинки!');
});
$(document).ready(function() {
alert('Можно грузить внешние картинки!');
});
$(function() {
                alert('Можно грузить внешние картинки!');
});

Полный пример. 

<!DOCTYPE html>
<html lang="ru">
    <head>
        <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
        <script type="text/javascript">
            $(function() {
                alert('Можно грузить внешние картинки!');
            });</script>
    </head>
    <body>
        <div class="container">

        </div>
    </body>
</html>

$.getScript

Функция $.getScript(url, callback) - загружает сценарий, указанный в параметре url, выполняя запрос GET к указанному серверу. В случае успеха вызывается функция обратного вызова, указанная в параметре callback. Функция обратного вызова зачатую необязательна, поскольку в случае успешной загрузки автоматически выполнится загружаемый сценарий.

Подключение обработчика событий $.bind() и $.on()

Метод on() введен в jQuery-1.7, чтобы объединить три метода библиотеки, устанавливающие обработчики событий на элементы страницы: .bind(), .delegate(), .live(). Сами эти методы считаются теперь устаревшими, хотя еще поддерживаться. Установить обработчик, срабатывающий только один раз, по прежнему можно только с помощью отдельного метода .one(). Убрать установленный обработчик можно с помощью метода off().

Функция $.bind служит для подключения обработчика(ов) событий. Зачастую обработчик события объявляют как безымянную функцию, но можно присвоить и именованную функцию. 

$('#fridwhois').bind('submit', {form: 'this.form'}, sendFrWhois);

function sendFrWhois(event) {
    alert(event.data.form);
    var inwh = document.getElementById('inwh');
    alert(inwh.value);// выведем значение в Edit: <input placeholder="example.com" id="inwh"/>
}

Анимация

// Реализация в jQuery
$("#side").slideDown( 1000, function(){
$(this).slideUp( 1000 );
});
$("#body").hide( "fast" );

Функции jQuery

jQuery AJAX

В jQuery существуют вспомогательные функции. Они принадлежат пространству имен jQuery/$, а не Объект Object Window HTML DOM.

Взаимодействие с Принципы построения AJAX JS:

.load()

$.parseJSON или JSON.parse

Современные браузеры для преобразования строк в формате json, предоставляют метод JSON.parse(). Так как есть вероятность того, что пользовательский браузер устаревший или попросту не имеет метода JSON.parse(), для этого случая в jQuery разработана вспомогательная функция $.parseJSON(). При использовании функции $.parseJSON(), jQuery будет пытаться в первую очередь использовать встроенный в браузер метод JSON.parse и только в том случае если этой поддержки нет, будут использованы средства предоставляемые JavaScript. 

{"temp01" : "value01"}
{"temp": 777}
var obj = jQuery.parseJSON('{"name":"John"}');
alert(obj.name); // будет выведено John
var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );  // будет выведено true
$.getJSON("json.php",
function(data){
$("#bar")
.css("background","yellow")
.html(data.var1+", "+data.var2);
});

Содержимое json.php: 

{"var1":"value1","var2":777}

FAQ