Jquery css

Используйте самую свежую версию jQuery.

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


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

<!-- Включаем определенную версию jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<!-- Включаем самую свежую версию jQuery из ветки 1.6 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

Последний пример будет включать самую свежую версию jQuery 1.6.x автоматически, но учтите, что она кэшируется только на один час.

$.proxy()

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

<div id="panel" style="display:none">
	<button>Закрыть</button>
</div>

Нужно скрывать панель при нажатии кнопки. Пробуем сделать код:

$('#panel').fadeIn(function(){
	// this указывает на #panel
	$('#panel button').click(function(){
		// this указывает на button
		$(this).fadeOut();
	});
});

В результате имеем проблему — исчезает кнопка, а не панель. С помощью можно сделать так:

$('#panel').fadeIn(function(){
	// Используем $.proxy чтобы привязать this:

	$('#panel button').click($.proxy(function(){
		// this указывает на #panel
		$(this).fadeOut();
	},this));
});

Теперь все выполняется так, как нужно. Функция получает два аргумента  – оригинальную функцию и контекст. Она возвращает новую функцию, в которой значение this соответствует контексту.

Вставка новых элементов

Метод Append предназначен для создания и вставки нового элемента в уже существующий контекст. Технически, новый элемент вставляется прямо перед закрывающимся тегом родителя.

Сначала мы хотим показать как это делается на чистом JavaScript, чтоб вы лучше прочувствовали, насколько jQuery упрощает работу.

В JavaScript перед тем как добавить какой-то элемент, нам нужно его создать при помощи метода .createElement(). В следующем примере, мы создаем элемент <div> и помещаем его в переменную.

var div = document.createElement('div');

Для того, чтобы вставить новый элемент на страницу, необходимо воспользоваться методом .appendChild(). В следующем примере, мы добавляем новый элемент в тело документа:

var div = document.createElement('div');
document.body.appendChild(div);

Если мы посмотрим на код страницы через Developer Tool, то увидим наш новый элемент сразу перед закрывающимся тегом </body>.

Теперь, давайте сделаем то же самое с помощью jQuery. Тут всё гораздо проще. Всё, что нам нужно, так это воспользоваться методом .append():

$('body').append('<div>');

Выполнив данный код, вы получите точно такой же результат. Новый элемент будет добавлен в тело документа. Только тут, нам это обошлось в одну строчку кода.


Используйте атрибут HTML5 data

Атрибут HTML5 data предназначен для простого включения данных в веб страницу. Он удобен для обмена данными между сервером и клиентской частью, когда  требуется вывод из блока <script> или используется скрытая разметка.

С последними обновлениями метода jQuery атрибут HTML5 data автоматически вытаскивается и становится доступен для использования. Вот пример:

<div id="d1" data-role="page" data-last-value="43" data-hidden="true"
	data-options='{"name":"John"}'>
</div>

Получение доступа к данным атрибута data  очень просто обеспечить:

$("#d1").data("role");			// "page"
$("#d1").data("lastValue");		// 43
$("#d1").data("hidden");		// true;
$("#d1").data("options").name;		// "John";

Перебор текущих элементов (.each)

Синтаксис метода each (пременяется только к выбранным элементам):

.each(function);
// function - функция, которая будет выполнена для каждого элемента текущего объекта

Разберём, как работает метод на следующем примере (переберём элементы ):

<div id="id1"></div>
<div id="id2">
  <p></p>
  <hr>
  <p></p>
  <div id="id3"></div>
</div>

<script>
// после загрузки DOM страницы выполнить
$(function(){

  // перебрать элементы div на странице
  $('div').each(function (index, element) {
    // index (число) - текущий индекс итерации (цикла)
      // данное значение является числом
      // начинается отсчёт с 0 и заканчивается количеству элементов в текущем наборе минус 1
    // element - содержит DOM-ссылку на текущий элемент

    console.log('Индекс элемента div: ' + index + '; id элемента = ' + $(element).attr('id')); 
  });

});

// Результат:
  // Индекс элемента div: 0; id элемента = id1
  // Индекс элемента div: 1; id элемента = id2
  // Индекс элемента div: 2; id элемента = id3

</script>

В вышеприведённом примере метод each использует текущий набор (элементы, выбранные посредством селектора ). В качестве обработчика метода each всегда выступает функция, которая будет выполнена для каждого элемента текущего набора (в данном случае для каждого элемента ). Данная функция имеет 2 необязательных параметра. Один из них (index) представляет собой порядковый номер текущей итерации, а второй (element) — DOM ссылку на текущий элемент. Кроме этого внутри функции доступно ключевое слово , которое также как и второй параметр, содержит DOM-ссылку на текущий элемент.

Например, выведем в консоль значение атрибута для всех элементов на странице:

$('a').each(function() {
  console.log($(this).attr('href'));
});

Например, выведем в консоль все внешние ссылки, расположенные на странице:

$('a').each(function() {
  var link = $(this).attr('href');
  if ((link.indexOf('http://') == 0) || (link.indexOf('https://') == 0)) {
    console.log('href ссылки = ' + link);
  }
});

// Если на странице расположены следующие ссылки:
  // <a href="https://www.yandex.ru/">Яндекс</a>
  // <a href="post/2898">Как работает JavaScript?</a>
  // <a href="http://getbootstrap.com/">Bootstrap</a>
// То в консоли увидим следующий результат:
  // https://www.yandex.ru/
  // http://getbootstrap.com/

Например, рассмотрим, как организовать цикл each по элементам DOM, имеющих класс (переберём все элементы одного класса).

<!-- HTML-код -->
<div class="name">Raspberry pi</div>
<div>single-board compute</div>
<div class="name">Intel Galileo Gen2</div>
<div class="price">19$</div>
<div class="name">Pine A64 Plus</div>

<script>
// с помощью функции jQuery.each ($.each)
$.each($('.name'),function(index,data) {
  console.log('Порядковый номер: ' + index + ' ; Содержимое: ' +$(data).text());
});

// с помощью метода jQuery .each 
$('.name').each(function(index,data) {
  console.log('Порядковый номер: ' + index + ' ; Содержимое: ' +$(data).text());
});

// Получим следующий ответ:
//   Порядковый номер: 0 ; Содержимое: Raspberry pi
//   Порядковый номер: 1 ; Содержимое: Intel Galileo Gen2
//   Порядковый номер: 2 ; Содержимое: Pine A64 Plus
</script>

Например, разберём, как перебрать все элементы на странице.

<script>
$('*').each(function() {
  console.log(this);
});
</script>

Например, выведем значение всех элементов на странице.

$('input').each(function() {
  console.log($(this).val());
});

Например, переберём все дочерние элементы, расположенные в с (each children).

<!-- HTML список -->
<ul id="myList">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<script>
$('ul#myList').children().each(function(){
  console.log($(this).text());
});

// Результат:
//   HTML
//   CSS
//   JavaScript
</script>

Рассмотрим способ, с помощью которого можно определить последний индекс (элемент) в методе jQuery .

// выбираем элементы 
var myList =  $('ul li');
// определяем количество элементом в выборке
var total = myList.length;
// осуществляем перебор выбранных элементов
myList.each(function(index) {
  if (index === total - 1) {
    // это последний элемент в выборке
  }
});

Выбор полей формы

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


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

К счастью, jQuery обеспечивает несколько специфических для форм селекторов, которые облегчают жизнь:

Селектор Описание Пример
Выбирает все кнопки формы.
Выбирает все чекбоксы.
Выбирает все поля загрузки фала.
Выбирает все поля ввода изображения.
Выбирает все поля пароля.
Выбирает все радио кнопки.
Выбирает все кнопки перезагрузки формы.
Выбирает все кнопки отправки формы.
Выбирает все поля ввода текста.
Выбирает все поля формы, включая элементы , , и .
Выбирает все отмеченные чекбоксы радио кнопки.
Выбирает все элементы .
Выбирает все недоступные поля формы.
Выбирает все Доступные поля формы.

Кроме того, что написано, можно использовать, например, для выбора всех чекбоксов на странице. Однако, действует быстрее, так как jQuery может использовать функцию JavaScript для быстрого ограничения объемов поиска только элементами . Это действительно для jQuery вообще — для ускорения кода всегда ограничивайте объем для работы селекторов там, где возможно. Например, действует очень медленно, так как jQuery должен найти каждый отдельный элемент  на странице.

Следующий пример ищет форму, которая имеет атрибут со значением , затем выбирает все отмеченные радио кнопки в форме:

var selectedElements = $("form input:radio:checked");

Apply Multiple CSS Properties

You can apply multiple CSS properties using a single JQuery method CSS( {key1:val1, key2:val2….). You can apply as many properties as you like in a single call.

Here is the syntax for the method −

selector.css( {key1:val1, key2:val2....keyN:valN})

Here you can pass key as property and val as its value as described above.

Example

Following is an example which adds font color as well as background color to the second list item.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css({"color":"red", "background-color":"green"});
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

This will produce following result −

Setting Element Width & Height

The width( val ) and height( val ) method can be used to set the width and height respectively of any element.

Example

Following is a simple example which sets the width of first division element where as rest of the elements have width set by style sheet

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div:first").width(100);
            $("div:first").css("background-color", "blue");
         });
      </script>
		
      <style>
         div { 
            width:70px; height:50px; float:left; 
            margin:5px; background:red; cursor:pointer; 
         }
      </style>
   </head>
	
   <body>
      <div></div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
   </body>
</html>

This will produce following result −

Локальное хранилище и jQuery

Локальное хранилище чрезвычайно просто использовать для хранения информации на стороне клиента. Добавьте ваши данные к глобальному объекту :

localStorage.someData = "This is going to be saved across page refreshes and browser restarts";

Плохая новость заключается в том, что локальное хранилище не поддерживается в старых браузерах.  Можно использовать один из  плагинов jQuery, которые обеспечивают альтернативу, если недоступен. Таким образом, хранилище данных на стороне клиента всегда будет работать.

Пример использования плагина jQuery $.jStorage:

// Проверяем наличие "key" в хранилище
var value = $.jStorage.get("key");
if(!value){
	// Если нет - загружаем данные с сервера
 	value = load_data_from_server();
 	// и сохраняем их
	$.jStorage.set("key",value);
}

// Используем значение

Apply CSS Properties


This is very simple to apply any CSS property using JQuery method css( PropertyName, PropertyValue ).

Here is the syntax for the method −

selector.css( PropertyName, PropertyValue );

Here you can pass PropertyName as a javascript string and based on its value, PropertyValue could be string or integer.

Example

Following is an example which adds font color to the second list item.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css("color", "red");
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

This will produce following result −

Примеры

Пример: добавляем html каждому из div-ов

<!DOCTYPE html>
<html>
<head>
 <style>
 .red { color:red; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <span>Hello</span>
 <div></div>
 <div></div>
 <div></div>
<script>$("div").html("<span class='red'>Hello <b>Again</b></span>");</script>
</body>
</html>

Демо:

Пример: добавляем html каждому из <div>, а затем сразу же дополняем его содержимое.

<!DOCTYPE html>
<html>
<head>
 <style>
 div { color:blue; font-size:18px; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <div></div>
 <div></div>
 <div></div>
<script>
   $("div").html("<b>Wow!</b> Such excitement...");
   $("div b").append(document.createTextNode("!!!"))
             .css("color", "red");
</script>
</body>
</html>

Демо:

Делайте селекторы проще.

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

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

$('li a')	// Отлично, но медленно
$('li.selected a')	// Лучше
$('#elem')	// Самый лучший вариант

Выбор по id — самый быстрый вариант. Если вам нужно выбрать класс, предварите его имя тегом – . Такая оптимизация существенно влияет на процессы в старых браузерах и мобильных устройствах.

Доступ к DOM всегда будет самой медленной частью любого приложения JavaScript, поэтому минимизация в данном процессе необходима. Одним из способов оптимизировать процесс является кэширование результатов, которые выдает jQuery. Используйте переменные, которые будут содержать объект jQuery, чтобы использовать их в коде скрипта.

var buttons = $('#navigation a.button');

// Некоторые предпочитают использовать префикс $ в именах переменных jQuery:
var $buttons = $('#navigation a.button');

Еще один момент, о котором следует помнить, заключается в том, что jQuery предоставляет вам большой набор дополнительных селекторов (таких как , , ), которые не являются селекторами CSS. В результате, если вы используете их, то библиотека не задействует функцию . Чтобы оптимизировать процесс следует сначала выбрать элементы, а затем фильтровать их:

$('a.button:animated');	// Не используется querySelectorAll()
$('a.button').filter(':animated');	// В данном варианте используется querySelectorAll()

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


С этим читают