Jquery link

Сразу код без воды (номера строк не скопируются):

  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>  <script>  $(function() {   alert('Подключена последняя версия jQuery через CDN');  });  </script>

Быстрый старт (основа HTML5):

<!doctype html>  <html lang="ru">  <head>   <meta charset="utf-8">   <title>HTML5</title>   <meta name="description" content="HTML5">   <meta name="author" content="SitePoint">   <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>   <link rel="stylesheet" href="css/styles.css?<?=time()?>">   <script src="js/scripts.js?<?=time()?>"></script>  </head>    <body>   <script>   $(function() {   alert('Подключена последняя версия jQuery через CDN');   });   </script>  </body>  </html>


jQuery — лучшая библиотека для простого использования возможностей Ajax и JavaScript анимации. Когда вы познаете возможности jQuery, вы будете неделю радоваться от того счастья, что столкнулись с данной библиотекой.

Многие воспринимают данную библиотеку, как лишним огромным куском кодом который несет в себе много лишнего и считают что лучше использовать чистый JavaScript. Но файл jQuery весит всего ~32кб, и более того, он уже давно закеширован у каждого интернет-пользователя, т.к. многие подключают jQuery через Google. Следовательно, вообще не требуется никакого времени на загрузку данной библиотеки на Вашем сайте, более того, загрузка же Ваших JavaScript кодов потребуется.

А так же jQuery полностью кроссбраузерный, а создавая скрипты на чистом JavaScript, можно упустить многие нюансы, и при этом в самих же браузерах постоянно меняется обработка JavaScript, следовательно легче доверить кроссбраузерность jQuery нежели, самому, постоянно следить, работает ли JavaScript как задумано на Вашем сайте во всех браузерах или нет. И самый главный минус, неиспользования jQuery — огромная и напрасная трата лишнего времени, нежели когда в jQuery уже все готово и продумано. А самый главный плюс jQuery — он никак не нагружает браузеры клиентов «многим лишним, в чем по Вашему мнению Ваш сайт не нуждается».


Данную библиотеку с легкостью может понять любой верстальщик PSD дизайнов для сайтов, достаточно лишь хорошо этого захотеть. В следующих статьях я буду писать о том как пользоваться данной библиотекой с примерами. И вы увидите все ее прекрасные возможности и удобства. В данной статье я очень подробно описываю как правильно подключить jQuery через Google или с помощью файловой системы личного хостинга.

Для подключения JQuery предпочтительней использовать сервис CDN или Google Code.

Чтобы подключить JQuery к Google или CDN нужно ввести между тегами <head>…</head>, с указанием точной версии (в данном случае 3.4.1 на 1 января 2020) следующий код:

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

Последнюю версию jQuery можно узнать на официальном сайте jQuery, чтобы получить код подключения выберите minified версию и вам его выдадут

Подключать jQuery через CDN или Google необходимо, т.к. библиотека много весит. А если у всех она подключена через один файл в интернете, то, тогда не придется каждый раз на каждом сайте ее грузить себе на компьютер, т.к. она уже закеширована.

Привожу пример полностью подключенного jQuery через CDN:

<html>  	<head>  		<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>  		<script>  		$(function() {  			alert('Подключена последняя версия jQuery через CDN');  		});  		</script>  	</head>  </html>

Если Вы хотите подключить jQuery через свою файловую систему на своем хостинге, Вам необходимо скачать jQuery библиотеку с официального сайта , загрузить в любое удобное место файлов своего сайта, и написать следующий код (на данный момент, скачиваемый с официального сайта файл jQuery называется «jquery.min.js»):

<html>  	<head>  		<script src="/путь_к_папке_с_файлом/jquery.min.js"></script>  		<script>  		$(function() {  			alert('Подключена локальная версия jQuery через собственный хостинг');  		});  		</script>  	</head>  </html>

После успешного подключения, у вас должно появиться alert сообщение, о том что jQuery подключен.

veynik.ru

Подключение jquery через Google или Microsoft

Чтобы подключить последнюю версию jquery через Google нужно добавить одну строку кода внутри <head> – все предельно быстро и удобно:

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

Для подключения точной версии (в данном случае 1.11.0):


 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

Точный номер последней версии всегда можно посмотреть здесь, а затем просто поменять эти цифры в коде и все будет работать.

Для подключения jquery через Microsoft добавляем код:

 <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.11.0.min.js"></script> 

Подключение с Google хорошо тем, что многие сайты одинаково подключают jQuery – именно через Google API и всегда есть высокая вероятность того, что эта библиотека уже загружена в кэш браузера пользователя и не будет загружаться во второй раз.

Подключение jquery скачиванием файла с библиотекой

Подключаем jQuery со страницы своего сайта – это дольше, но надежнее. Для этого нужно:
скачать библиотеку jquery с официального сайта, сохранить в файл, назовем его jquery-1.11.0.min.js, положить в папку js на нашем сайте и добавить следующий код в <head>:

 <script type="text/javascript" src="/js/jquery-1.11.0.min.js"></script> 

В src
задается путь где лежит наш файл с jquery, который нужно подключить на страницу сайта.

И, наконец, самый надежный и бронебойный вариант – подключение с Google, если Google недоступен – подключение со своего сайта:

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> if (typeof jQuery == 'undefined') {  document.write(unescape("%3Cscript src='/js/jquery-1.11.0.min.js' type='text/javascript'%3E%3C/script%3E")); } </script> 

Или самый современный вариант – прописываем в <head> следующий код:

 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.11.0"); google.setOnLoadCallback(jQueryIsLoaded); function jQueryIsLoaded() {  alert('jQuery от Google загружен'); } if (typeof jQuery == 'undefined') {  document.write(unescape("%3Cscript src='/js/jquery-1.11.0.min.js' type='text/javascript'%3E%3C/script%3E")); } </script> 

www.stijit.com


Сжатый и несжатый варианты jQuery

jQuery доступна в сжатом и несжатом варианте. Несжатую версию удобно использовать во время разработки и отладки вашего сайта. Сжатая версия практически бесполезна при отладке, однако она значительно меньше весит и поэтому ее целесообразно применять на выпущенной версии сайта, для более оптимальной работы (сжатый скрипт будет быстрее подключен к странице, а так же быстрее обработан).

Начиная с jQuery-1.9 доступна так же карта исходников (sourcemap). С помощью нее можно производить отладку сжатой версии, так, как если бы она не была. Подробнее о картах исходников можно прочитать здесь (англ.).

Версии jQuery

Сейчас существует две основные ветки версий jQuery 1.x и 2.x. Их отличия заключаются лишь в том, что в версиях 2.x перестали поддерживаться браузеры IE версий 8, 7 и 6. Это позволило уменьшить размер jQuery более чем на 10%, а так же немного ускорить работу библиотеки. Пока что старые версии IE все еще в ходу, поэтому рекомендуется использовать ветку 1.x.

Практически каждая следующая версия jQuery совместима с предыдущими. То есть, если ваш сайт работает с jQuery-1.7, то его можно безболезненно переводить на jQuery-1.8. Исключением стала версия jQuery-1.9, в которой некоторые (сомнительные) функции были удалены. Для того чтобы перевести сайт с jQuery 1.8 и меньше, на 1.9 (или более новые версии), можно воспользоваться следующим руководством (англ.).

Загрузка и подключение jQuery


Загружать jQuery желательно с официального сайта. Уже на первом экране будут ссылки на свежие версии jQuery 1.x и 2.x, в сжатых и не сжатых вариантах. Чтобы закачать файлы по этим ссылкам, нужно кликнуть по ним правой клавишей и выбрать «Сохранить ссылку как».

После того как вы скачали нужный файл с jQuery, нужно закачать его на сервер, где располагается ваш сайт и подключить его на страницы своего сайта, прописав до него путь:

Подключение jQuery с CDN

Существует альтернативный вариант подключить jQuery на страницы вашего сайта (не закачивая библиотеку на сервер). Можно подключить библиотеку, которая находится не на вашем сервере, а на серверах CDN. Существуют несколько таких хранилищ, наиболее известные и надежные из них Google CDN, Microsoft CDN, а так же CDN который организовали создатели jQuery.


Подключить jQuery с CDN не сложнее, чем со своего сервера — необходимо просто прописать соответствующий путь до него. Вот например как подключается библиотека с официального CDN jQuery:

Узнать о некоторых трюках подключения jQuery с CDN можно здесь.

Собственная сборка jQuery

Исходный код (его можно найти и скачать с github.com) jQuery разделен на модули. Поэтому, в случае, если вам не требуется поддержка некой функциональности (например ajax), можно сделать собственную сборку jQuery, включающую только необходимые модули (описание того как это сделать есть на github.com). Правда стоит заметить, что едва ли это приведет к заметному приросту производительности, размер jQuery около 90кб, столько же весит средняя по размерам и качеству картинка. К тому же, будучи подключенным один раз, jQuery будет закеширован браузером и при следующих обращениях будет браться уже от туда.

jquery.page2page.ru

Ромчик

Уроки по jQuery


Доброго времени суток. Мы продолжаем изучать библиотеку JavaScript — jQuery. В прошлой статье мы познакомились с достоинствами данной библиотеки и ее недостатками. А сегодня мы уже начнем изучение jQuery и первым делом, что мы сделаем — это подключим данную библиотеку к нашему проекту. А рассмотрим мы два способа подключия jQuery и остановимся на их плюсах и минусах. Так, что приступим.

Первое, что мы сделаем подготовим наш проект. Сразу уточню я не буду подробно останавливаться на верстке, все внимание будет сосредоточено на jQuery.

Создадим виртуальный хост, например, jquery. В нем будет основной файл index.php, директория js — со скриптами JavaScript, директория img — директория с картинками и директория css — директория с файлами стилей CSS.  

В index.php добавим следующий код:

  <!doctype html>  <html lang="ru">  <head>   <meta charset="UTF-8">   <link href="./css/style.css" rel="stylesheet" media="screen">   <title>Изучаем jQuery</title>  </head>  <body>  <div id="wrapper">   <div id="header">Header</div>   <div id="content">   Content   </div>   <div id="sidebar">Sidebar</div>   <div id="clear"></div>  </div>  <div id="footer">  Footer  </div>  </body>  </html>  

В файл style.css, который находится в директории css, поместим следующий код:


  html, body{   padding:0;   margin:0;   height:100%;   position:relative;  }  /* Header */    #header {   background-color: red;   height: 100px;   width: 900px;   margin: 0 auto;  }    /* Content */    #wrapper{   background:#CCC;   min-height:100%;   margin: 0 auto;   width: 900px;  }  #content{   float: left;   width: 700px;  }  #clear{   clear: both;   height: 50px;  }    /* Footer */    #footer{   background:#36F;   height:50px;   margin: 0 auto;   width: 900px;   margin-top:-50px;   position:relative;  }  

Код для этих файлов я пояснять не буду. Просто давайте проверим, что у нас получилось. Переходим, в моем случае я набираю в браузере jquery и попадаю на локальный сервер apache, на виртуальный хост jquery и вижу:

Подготовка проекта

Отлично проект к подключению jQuery готов. Теперь мы можем приступить к непосредственному подключению jQuery. JQuery можно подключить двумя способами: первый скачать библиотеку jQuery и разместить ее в нашем проекте и второй способ подключить jQuery библиотеку через CDN. И дальше мы рассмотрим оба способа.

Для подключения библиотеки этим способом необходимо скачать ее с официального сайта. Для этого переходим на официальный сайт:

официальный сайт jQuery

И жмем «Download jQuery»

Переходим на следующую страницу, где выбираем версию jQuery библиотеки. На момент написания можно было скачать две версии: jQuery 1.9.1 (устраевшая, но поддерживающая браузеры IE6/7/8) и jQuery 2.0.0 (последняя версия, которая уже не поддерживает браузеры IE6/7/8)

Если Вы качаете библиотеку для production, т. е. для готового проекта, то выбирайте сжатую версию Download the compressed, production jQuery… Если же качаете библиотеку для development, т. е. для разрабатываемого проекта, то качайте не сжатую библиотеку Download the uncompressed, development jQuery… Почему? Для рабочего проетак лучше сжатая версия, т. к. весит меньше. А для development — просто иногда хочется заглянуть в код, любопытство 🙂

Скачиваем jQuery

Я скачал не сжатую версию jQuery 1.9.1 и назвал файл с этой библиотекой jquery.js Теперь помещаем этот файл в папку js нашего проекта.

Открываем файл index.php и между тегами <head> и </head> помещаем следующий код:

    <script type="text/javascript" src="./js/jquery.js"></script>    

Т.о. мы подключили библиотек jQuery к нашему проекту. Давайте проверим.

Для этого создадим в директории js еще один файл script.js и поместим в него следующий код:

    $(function(){    alert('jQuery работает');    });    

Данный код ничего особенного не делает, просто выводит сообщение «jQuery работает». Проверим, открываем через браузер нашу страницу и видим:

Проверка работоспособности jQuery

Как видим jQuery мы подключили и она работает.

Плюсы данного способа Вы не зависите от других сервисов. Минус — пользователь постоянно загружает библиотеку jQuery (а это влияет на загрузку самого сайта).

Данный способ рекомендуется использовать во время разработки, когда у Вас нет под рукой интернета, скорость интернета очень низкая или трафик достаточно дорогой.

Что такое CDN? CDN (Content Delivery Network) — сеть доставки контента. И так, при использовании CDN само ядро jQuery уже храниться на стороне. Это может быть Google, Microsoft, Yandex или сам jQuery. Выбирать Вам. Я использую CDN от Google (самый стабильный, может конечно я не прав). Хотя следует отметить и CDN от Yandex они выкладывают и плагины за что им огромное спасибо.

Для того, чтобы подключить jQuery через CDN от Google. Откройте файл index.php и в тегах строку:

    <script type="text/javascript" src="./js/jquery.js"></script>    

замените на:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    

Проверяем.

Если же Вы хотите использовать CDN от Yandex, то замените на:

    <script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>  

Проверяем и видим аналогичный результат.

Преимущество данного метода заключается в скорости загрузки Вашего сайта, а это происходит из-за тог, что если пользователь заходил на какой-либо сайт, который использует тот же самый CDN и ту же самую библиотеку (имеется ввиду версию) jQuery, то она у него уже закэширована и не требует повторной загрузки.

Вот в принципе и все. Мы с Вами рассмотрели два способа подключения библиотеки jQuery к проекту. Какой из способ использовать выбирать Вам. А на этом пока все.

web-programming.com.ua

The Wrong Ways

But I get the feeling that a few less experienced jQuery users are referencing jQuery like this:

http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js

Notice the less specific version number — “1.7” instead of “1.7.2”.

Or, even worse:

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

Notice the whole version number — “1” instead of “1.7” or “1.7.2”.

Or, worst of all:

http://code.jquery.com/jquery-latest.js

Notice no version number, just a plain reference to the “latest” version, whatever that might be.

So why is it wrong to link to jQuery using one of those last three methods? And is it ever right to do that?

What About Development?

The only time you should link to jQuery using one of those three methods is during development or when experimenting. You should never use those methods in production.

In fact, by testing how things work in different point releases, you could find a bug and you’d help the jQuery dev team by reporting this. So there are cases, in development, where using these types of general version references could be handy.

Why Not Drop One or More Decimal Versions?

You’ll notice that if you link to jQuery version 1.7 (with the third decimal digit missing), this will automatically reference the most recent 1.7.x release. And if you link to jQuery version 1, this will take you to the latest 1.x release. Some people feel this is best, because it gives you the latest version.

Sure, it sounds good, and we certainly should want to use the latest version of any piece of code or software. But think about IE6 for a moment. Why was that browser’s market share so high for so long? It was because many enterprise applications were built specifically for that browser, and upgrading to IE7 or later would break those applications.

The same problem could occur if you link to a non-specific jQuery version. If you build your website for jQuery 1.7.2, then, unless you later upgrade your code or do thorough testing, you need to ensure that the site references and uses only the 1.7.2 release and nothing later.

Even from one point release to another, there is the potential for breaking changes. For example, Paul Irish tells me that jQuery’s $.browser property will be deprecated in jQuery 1.8. There are other deprecated features that will stop working in later versions, potentially even small point releases.

Yes, even from 1.7.2 to 1.7.3 there could be a breaking change. Although it’s probably unlikely to happen, the mere possibility is enough to demonstrate that it’s not safe to link to jQuery without referencing a fully-specific version.

What About jquery-latest.js?

Naturally, the same principle applies to this. The jquery-latest.js file that’s hosted on jQuery.com seems to always link to whatever is the latest version. But that file is not even minified. It’s obviously not put there for production-level code.

Any Further Technical Thoughts?

If anyone has any specific examples of changes that may have broken a site or app’s functionality in a point release, or if you have any other technical info on why this isn’t a good idea, please comment.

I’ll be happy to update the article if I’ve misstated anything.

www.impressivewebs.com

jQuery Logo

jQuery — это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Но изучение надо с чего-то начинать, и лично моё мнение — лучше всего начинать с наглядных примеров, и они далее…

Как же все-таки работает jQuery?

Ну для начала Вам понадобиться сам фреймворк, его вы сможете скачать с домашней страницы проекта, затем проинициализировать:

  <head>   <script type="text/javascript" src="jquery.js"></script>  </head>  

А основные моменты Вам поможет понять следующая диаграмма:
Jquery link  

Как получить элемент с помощью jQuery?

Для того чтобы понимать как работает селектор Вам все-же необходимы базовые знания CSS, т.к. именно от принципов CSS отталкивает селектор jQuery:

  • $("#header") — получение элемента с id=«header»
  • $(«h3») — получить все <h3> элементы
  • $(«div#content .photo») — получить все элементы с классом =«photo» которые находятся в элементе div с id=«content»
  • $(«ul li») — получить все <li> элементы из списка <ul>
  • $(«ul li:first») — получить только первый элемент <li> из списка <ul>

Выдвижная панель

Начнем с простенького примера — слайд-панель, она у нас будет двигаться вверх/вниз по клику на ссылке (см. пример)
Jquery link
Реализуем это следующим образом, по клику на ссылку, у нас будет переключаться её класс (между «active» и «btn-slide»), а панелька с id=«panel» будет выдвигаться/прятаться. (класс «active» изменяет позицию фонового изображения, см. CSS файл во вложении).

  $(document).ready(function(){   $(".btn-slide").click(function(){   $("#panel").slideToggle("slow");   $(this).toggleClass("active");   });  });  

 

Магические исчезновения

Этот пример покажет как можно красиво и легко убирать растворять элементы (см. пример):
Jquery link

Когда мы кликаем по картинке <img class=«delete»>, будет найден родительский элемент <div class=«pane»>, и его прозрачность будет медленно изменяться от opacity= 1.0 до opacity=hide:

  $(document).ready(function(){     $(".pane .delete").click(function(){   $(this).parents(".pane").animate({ opacity: "hide" }, "slow");   });    });  

Связанная анимация

Теперь пример посложнее, но он поможет Вам лучше понять jQuery. Всего несколько строк кода заставят квадрат двигаться, изменять размер и прозрачность. (см. пример):
Jquery link
Line 0: когда прогрузилась страница (DOM готов к манипуляциям)
Line 1: привязываемся к событию click для элемента <a class=«run»>
Line 2: манипулируем элементом <div id=«box»> — уменьшаем его прозрачность до 0.1, наращиваем позицию left еще на 400px, со скоростью 1200 (milliseconds)
Line 3: затем медленно изменяем следующие параметры: opacity=0.4, top=160px, height=20, width=20; скорость анимации указывается вторым параметром: «slow», «normal», «fast» или в миллисекундах
Line 4: затем opacity=1, left=0, height=100, width=100, скорость — «slow»
Line 5: затем opacity=1, left=0, height=100, width=100, скорость — «slow»
Line 6: затем top=0, скорость — «fast»
Line 7: затем slideUp (с дефолтной скоростью анимации — «normal»)
Line 8: затем slideDown, скорость — «slow»
Line 9: возвращаем false для того чтобы браузер не перешел по ссылке

  $(document).ready(function(){   $(".run").click(function(){     $("#box").animate({opacity: "0.1", left: "+=400"}, 1200)   .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")   .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")   .animate({top: "0"}, "fast")   .slideUp()   .slideDown("slow")   return false;   });   });

Гармошка #1

Пример реализации «гармошки». (см. пример)
Jquery link
Теперь приступим к разбору полетов:
Первой строчкой мы добавляем класс «active» первому элементу <h3> внутри <div class=«accordion»> (класс«active» отвечает за позиционирования фонового рисунка — иконки со стрелочкой). Во второй строчке мы прячем все не первые <p> элементы внутри <div class=«accordion»>.
Когда происходит клик по заголовку <h3>, для следующего в нём элемента <p> будет применен эффект slideToggle, затем для всех остальных элементов <p> будет применен эффект slideUp. Следующие действие изменяет класс заголовка на «active», затем ищем все остальные заголовки <h3> и убираем у них класс «active»

  $(document).ready(function(){   $(".accordion h3:first").addClass("active");   $(".accordion p:not(:first)").hide();     $(".accordion h3").click(function(){     $(this).next("p").slideToggle("slow")   .siblings("p:visible").slideUp("slow");   $(this).toggleClass("active");   $(this).siblings("h3").removeClass("active");    });      });  

Гармошка #2

Этот пример схож с предыдущим, лишь отличается тем, что мы указываем открытую по умолчанию панельку. (см. пример)

В CSS у нас указано для всех элементов <p> display:none. Теперь нам необходимо открыть третью панель. Для этого мы можем написать следующее $(".accordion2 p").eq(2).show(), где eq обозначает равенство. Помните, что индексирование начинается с нуля:

  $(document).ready(function(){     $(".accordion2 h3").eq(2).addClass("active");   $(".accordion2 p").eq(2).show();     $(".accordion2 h3").click(function(){   $(this).next("p").slideToggle("slow")   .siblings("p:visible").slideUp("slow");   $(this).toggleClass("active");   $(this).siblings("h3").removeClass("active");   });    });  

Анимация для события hover #1

Данный пример поможет создать Вам очень красивую анимацию для события hover (надеюсь, Вы знаете что это?), (см. пример):
Jquery link

Когда Вы наводите мышкой на элемент меню (mouseover), происходит поиск следующего элемента <em>, и анимируется его прозрачность и расположение:

  $(document).ready(function(){   $(".menu a").hover(function() {   $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");   }, function() {   $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");   });  });  

Анимация для события hover #2

Данный пример чуть-чуть посложней предыдущего примера: для формирования подсказки используется атрибут linktitle (см. пример)
Jquery link
Первым делом добавим тэг <em> в каждый элемент <a>. Когда произойдет событие mouseover, мы возьмем текст из атрибута «thetitle» и сохраним его в переменной «hoverText», затем этот текст будет вставлен в тэг <em>:

  $(document).ready(function(){     $(".menu2 a").append("<em></em>");     $(".menu2 a").hover(function() {   $(this).find("em").animate({opacity: "show", top: "-75"}, "slow");   var hoverText = $(this).attr("title");   $(this).find("em").text(hoverText);   }, function() {   $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");   });    });  

Кликабельные блоки

Этот пример демонстрирует как сделать кликабельным блок с текстом, а не только ссылку (см. пример):
Jquery link
Создадим список <ul> с классом class=«pane-list» и мы хотим сделать элементы <li> кликабельными. Для начала привяжемся к событию click для элемента ".pane-list li"; когда пользователь будет кликать по элементу списка, наша функция произведет поиск тэга <a> и сделает редирект на страницу указанную в атрибуте href.

  $(document).ready(function(){     $(".pane-list li").click(function(){   window.location=$(this).find("a").attr("href"); return false;   });    });  

Складывающиеся панельки

Ну а теперь чуть-чуть скомбинируем предыдущие примеры и создадим ряд складывающихся панелек (наподобие как в Gmail организован inbox). (см. пример)
Jquery link 

  • скрываем все элементы <div class=«message_body»> после первого.
  • скрываем все элементы <li> после пятого
  • клик по <p class=«message_head»> — вызывает метод slideToggle для следующего элемента <div class=«message_body»>
  • клик по <a class=«collpase_all_message»> — вызывает метод slideUp для всех <div class=«message_body»>
  • клик по <a class=«show_all_message»> — скрывает элемент, и отображает <a class=«show_recent_only»>, так же вызывается метод slideDown для всех <li> послепятого
  • клик по <a class=«show_recent_only»> — скрывает элемент, и отображает <a class=«show_all_message»>, так же вызывается метод slideUp для всех <li> после пятого
  $(document).ready(function(){     //hide message_body after the first one   $(".message_list .message_body:gt(0)").hide();     //hide message li after the 5th   $(".message_list li:gt(4)").hide();     //toggle message_body   $(".message_head").click(function(){   $(this).next(".message_body").slideToggle(500)   return false;   });     //collapse all messages   $(".collpase_all_message").click(function(){   $(".message_body").slideUp(500)   return false;   });     //show all messages   $(".show_all_message").click(function(){   $(this).hide()   $(".show_recent_only").show()   $(".message_list li:gt(4)").slideDown()   return false;   });     //show recent messages only   $(".show_recent_only").click(function(){   $(this).hide()   $(".show_all_message").show()   $(".message_list li:gt(4)").slideUp()   return false;   });    });  

Имитация Backend’a WordPress’a

Я думаю многие из читателей сталкивались с админской частью wordpress’a, точнее с редактирование комментариев. Попробуем сделать что-то подобное. Для анимации фонового цвета нам понадобиться соответствующий плагин для jQuery. (см. пример)
Jquery link

  • добавим класс «alt» к каждому чётному элементу <div class=«pane»> (данный класс изменяет цвет фона элемента)
  • клик по <a class=«btn-delete»> инициирует появление сообщения (alert), так же происходит анимация фонового цвета и прозрачности (backgroundColor и opacity) для <div class=«pane»>
  • клик по <a class=«btn-unapprove»> — вызывает анимацию фона у <div class=«pane»> (цвет изменяется на желтый и обратно) и добавляет класс «spam»
  • клик по <a class=«btn-approve»> — вызывает анимацию фона у <div class=«pane»> (цвет изменяется на зеленый и обратно) и удаляет класс «spam»
  • клик по <a class=«btn-spam»> — вызывает анимацию фона у <div class=«pane»> (цвет изменяется на красный), и изменяет параметр «opacity» на «hide»
  //don't forget to include the Color Animations plugin  $(document).ready(function(){     $(".pane:even").addClass("alt");     $(".pane .btn-delete").click(function(){   alert("This comment will be deleted!");     $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")   .animate({ opacity: "hide" }, "slow")   return false;   });     $(".pane .btn-unapprove").click(function(){   $(this).parents(".pane").animate({ backgroundColor: "#fff568" }, "fast")   .animate({ backgroundColor: "#ffffff" }, "slow")   .addClass("spam")   return false;   });     $(".pane .btn-approve").click(function(){   $(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast")   .animate({ backgroundColor: "#ffffff" }, "slow")   .removeClass("spam")   return false;   });     $(".pane .btn-spam").click(function(){   $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")   .animate({ opacity: "hide" }, "slow")   return false;   });  });  

Галерея изображений

Простейший пример реализации галереи, без перезагрузки страницы. (см. пример)
Jquery link
 Для начала добавим тэг <em> в заголовки <h2>
 По клику на изображения в <p class=thumbs> выполняем следующие действия:

  • сохраняем значение атрибута «href» в переменной «largePath»
  • сохраняем значение атрибута «title» в переменной «largeAlt»
  • заменяем в элементе <img id=«largeImg»> значение атрибута «scr» и «alt» значениями из переменных «largePath» и «largeAlt»
  • так же присваиваем элементу «h2 em» значение из «largeAlt»
  $(document).ready(function(){     $("h2").append('<em></em>')     $(".thumbs a").click(function(){     var largePath = $(this).attr("href");   var largeAlt = $(this).attr("title");     $("#largeImg").attr({ src: largePath, alt: largeAlt });     $("h2 em").html(" (" + largeAlt + ")"); return false;   });      });

habr.com

link Downloading jQuery

Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download a sourcemap file for use when debugging with a compressed file. The map file is not required for users to run jQuery, it just improves the developer's debugger experience. As of jQuery 1.11.0/2.1.0 the //# sourceMappingURL comment is not included in the compressed file.

To locally download these files, right-click the link and select "Save as…" from the menu.

link jQuery

For help when upgrading jQuery, please see the upgrade guide most relevant to your version. We also recommend using the jQuery Migrate plugin.

Download the compressed, production jQuery 3.4.1

Download the uncompressed, development jQuery 3.4.1

Download the map file for jQuery 3.4.1

You can also use the slim build, which excludes the ajax and effects modules:

Download the compressed, production jQuery 3.4.1 slim build

Download the uncompressed, development jQuery 3.4.1 slim build

Download the map file for the jQuery 3.4.1 slim build

jQuery 3.4.1 release notes

link Downloading jQuery using npm or Yarn

jQuery is registered as a package on npm. You can install the latest version of jQuery with the npm CLI command:

As an alternative you can use the Yarn CLI command:

This will install jQuery in the node_modules directory. Within node_modules/jquery/dist/ you will find an uncompressed release, a compressed release, and a map file.

link Downloading jQuery using Bower

jQuery is also registered as a package with Bower. You can install the latest version of jQuery with the command:

This will install jQuery to Bower's install directory, the default being bower_components. Within bower_components/jquery/dist/ you will find an uncompressed release, a compressed release, and a map file.

The jQuery Bower package contains additional files besides the default distribution. In most cases you can ignore these files, however if you wish to download the default release on its own you can use Bower to install jQuery from one of the above urls instead of the registered package. For example, if you wish to install just the compressed jQuery file, you can install just that file with the following command:

link jQuery Migrate Plugin

We have created the jQuery Migrate plugin to simplify the transition from older versions of jQuery. The plugin restores deprecated features and behaviors so that older code will still run properly on newer versions of jQuery. Use the uncompressed development version to diagnose compatibility issues, it will generate warnings on the console that you can use to identify and fix problems. Use the compressed production version to simply fix compatibility issues without generating console warnings.

There are two versions of Migrate. The first will help you update your pre-1.9 jQuery code to jQuery 1.9 up to 3.0. You can get that version here:

Download the compressed, production jQuery Migrate 1.4.1

Download the uncompressed, development jQuery Migrate 1.4.1

The second version helps you update code to run on jQuery 3.0 or higher, once you have used Migrate 1.x and upgraded to jQuery 1.9 or higher:

Download the compressed, production jQuery Migrate 3.1.0

Download the uncompressed, development jQuery Migrate 3.1.0

link Cross-Browser Testing with jQuery

Be sure to test web pages that use jQuery in all the browsers you want to support. The Microsoft Developer Resources site makes available virtual machines for testing many different versions of Internet Explorer. Older versions of other browsers can be found at oldversion.com.

link jQuery Pre-Release Builds

The jQuery team is constantly working to improve the code. Each commit to the Github repo generates a work-in-progress version of the code that we update on the jQuery CDN. These versions are sometimes unstable and never suitable for production sites. We recommend they be used to determine whether a bug has already been fixed when reporting bugs against released versions, or to see if new bugs have been introduced.

Download the work-in-progress jQuery build

link Using jQuery with a CDN

CDNs can offer a performance benefit by hosting jQuery on servers spread across the globe. This also offers an advantage that if the visitor to your webpage has already downloaded a copy of jQuery from the same CDN, it won't have to be re-downloaded.

link jQuery's CDN provided by StackPath

The jQuery CDN supports Subresource Integrity (SRI) which allows the browser to verify that the files being delivered have not been modified. This specification is currently being implemented by browsers. Adding the new integrity attribute will ensure your application gains this security improvement as browsers support it.

To use the jQuery CDN, just reference the file in the script tag directly from the jQuery CDN domain. You can get the complete script tag, including Subresource Integrity attribute, by visiting https://code.jquery.com and clicking on the version of the file that you want to use. Copy and paste that tag into your HTML file.

Starting with jQuery 1.9, sourcemap files are available on the jQuery CDN. However, as of version 1.10.0/2.1.0 the compressed jQuery no longer includes the sourcemap comment in CDN copies because it requires the uncompressed file and sourcemap file to be placed at the same location as the compressed file. If you are maintaining local copies and can control the locations all three files, you can add the sourcemap comment to the compressed file for easier debugging.

To see all available files and versions, visit https://code.jquery.com

link Other CDNs

The following CDNs also host compressed and uncompressed versions of jQuery releases. Starting with jQuery 1.9 they may also host sourcemap files; check the site's documentation.

Note that there may be delays between a jQuery release and its availability there. Please be patient, they receive the files at the same time the blog post is made public. Beta and release candidates are not hosted by these CDNs.

  • Google CDN
  • Microsoft CDN
  • CDNJS CDN
  • jsDelivr CDN

link About the Code

jQuery is provided under the MIT license.

The code is hosted and developed in the jQuery GitHub repository. If you've spotted some areas of code that could be improved, please feel free to discuss it on the Developing jQuery Core Forum. If you'd like to participate in developing jQuery, peruse our contributor site for more information.

To find and download plugins developed by jQuery contributors, please visit the Plugins site. Plugin authors are responsible for maintenance of their plugins. Feedback on plugins should be directed to the plugin author, not the jQuery team.

link Build from Git

Note: To just use the latest work-in-progress version of jQuery, please try the jQuery Pre-Release Build described above.

All source code is kept under Git revision control, which you can browse online. The repository's README has more information on building and testing your own jQuery, as well as instructions on creating a custom build that excludes some APIs to reduce file size.

If you have access to Git, you can connect to the repository here:

You can also check out and build a specific version of jQuery from GitHub:

The README file for a specific version will have instructions for building that version, as the process has changed over time.


jquery.com


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector