jQuery — ploshadka.net

Скрываем лишнее на jQuery (минимизация строк)

Admin — Sun, 20 Jan 2019 08:00:40 +0000

Скрываем (минимизируем) строки с помощью jQuery.

Подобная реализация есть JS – минимизация на JavaScript.

Код работает следующим образом. На всех блоках навешен класс скрывающий их. При нажатии на один из блоков, скрывающий их класс — удаляется. Если снова нажать, то он снова добавляется.

Весь код для минимизации:

jQuery('menu').find('.block').each(function (el) {

var line = el.children('.lines'),
title = el.children(".title");

// Основная конструкция для минимизации
title.on('click', function(){
if (line.hasClass('hidden')) {
line.removeClass("hidden");
title.children(".arrow-down").removeClass("arrow-down").addClass('arrow-up');
} else {
line.addClass("hidden");
title.children(".arrow-up").removeClass("arrow-up").addClass('arrow-down');
}
});

// Автоматически скрываем на мобильном варианте и показываем на десктопе
jQuery('.button').on('click', function(){
if(jQuery(window).width() > 500) {
title.children(".arrow-down").removeClass("arrow-down").addClass('arrow-up');
line.removeClass("hidden");
} else {
line.addClass("hidden");
}
});

});

JavaScript и jQuery – одинаковые функции

Admin — Sat, 24 Nov 2018 13:09:36 +0000

Справочная информация по одинаковым функциям в JavaScript и jQuery. Здесь же можно увидеть наглядно отличие JS и jQuery.

Эта статья вовсе не о преимуществах jQuery. Наоборот, библиотека jQuery постепенно уходит в прошлое, ставя чистый JS код на первое место.

Эта статья-подсказка, как сделать что-то в js или jQuery, зная только один из них. Из-за того, что они похожи, очень легко запутаться.

Добавить или удалить класс

JS

Класс указывается без точки.

el.classList.add('class');
el.classList.remove('class');

jQuery

el.removeClass(".class");
el.addClass('.class');

В отличие от JS в jQuery можно сочетать добавления в одну строчку:

el.removeClass(".class").addClass('.class');

Проверить класс на существование

JS

if (el.classList.contains('class')) { }

jQuery

if (el.hasClass('class')) { }

Применить функцию ко всем объектам

JS

var
blockId = document.getElementById('id'),
class = blockId.querySelector('.class'),
el = class.querySelectorAll('.class2');

el.forEach(function(el) {}

jQuery

jQuery('id').find('.class').each(function (el) { }

Сравнение размера экрана

JS

if (window.innerWidth > 500 ) { }

jQuery

jQuery(window).width() > 500 {}

click

JS

el.addEvent('click', function(){}

jQuery

jQuery('.class').on('click', function(){}

Или:

el.on('click', function(){}

children

JS

Такого нет в JS. Надо делать иначе.

jQuery

var class = el.children('.class')

События

JS

addEventListener

jQuery

addEvent

Выбрать только элементы начиная с какого-нибудь по счету

JS

Сначала собираем элементы, затем переводим в массив. Дальше, отсекаем часть, например, 1. И после ставим нужный нам класс.

var class = previous-class.querySelectorAll('.class');
var len = class.length;

if (len > 1) {
class = Array.from(class);
class = class.slice(1);

class.forEach(function (block) {
var classInside = block.querySelector('.class-inside');
classInside.classList.add('new-class');
});
}

jQuery

Обратить внимание на :gt() Selector.

jQuery(document).ready(function($) {
var line = $('.line'),
divCount = line.length,
divLine = $('.line:gt(2)');

if(divCount > 2) {
line.each(function () {
divLine.addClass('new-class');
});
}
});

Нажатие на кнопку

Разница:

Клик в js отрабатывается с помощью функции addEvent, в jQuery с помощью on
Создание переменных в jQuery проще. В JS нужна длинная конструкция document.querySelector

JS

+function() {
var clickButton = document.querySelector('.class');

clickButton.addEvent('click', function () {
alert('123');
});
}();

jQuery

jQuery(document).ready(function($) {
var clickButton = $('.class');

$('.class2').find(clickButton).each(function () {
clickButton.on('click', function () {
alert('123');
});
});
});

Закрываем открытую область при клике за ней

JS
jQuery

data-set

Описания различий в data-set.

Data атрибуты в HTML для CSS, JavaScript, jQuery

Admin — Wed, 03 Oct 2018 08:00:30 +0000

С выходом HTML5 появилась возможность создавать свои атрибуты для любых тегов.

HTML

Атрибут начинается с data-, после тире пишем своё название. Внутри него пишем, что хотим. В коде выглядит так:

some

Теперь рассмотрим как обращаться к этому атрибуту.

CSS

Есть несколько вариантов обращения.

1. Для применения стилей

div[data-description] {
color: blue;
}

2. Для вывода содержимого

С помощью второго варианта можно вывести содержимое нужного атрибута. Например, этот способ используется для вывода подсказок при наведении:

class-new:hover::after {
content: attr(data-description);
}

JavaScript

В JavaScript обращение к атрибуту происходит через метод dataset:

var el = document.getElementsByClassName('class');
var description = el.dataset.description;

Если атрибут будет называться в несколько слов, скажем так: data-description-one, то на JS для обращения к нему, слова нужно преобразовать в такой вид: descriptionOne.

Также обращаться можно так:

var el = document.getElementsByClassName('class');
var data = el.getAttribute('description');

Применить data атрибут:

id.setAttribute('description','добавим что нужно здесь');

jQuery

В jQuery к атрибутам обращаемся так:

var description = $('.class').data('description');

Применить:

$('.class').attr('description','добавим что нужно здесь');

jQuery — как закрыть элемент при клике за его областью

Admin — Tue, 31 Jul 2018 11:19:01 +0000

Как закрыть одну область при клике на другую. Например, такое часто бывает, когда нужно закрыть меню при клике за ним.

Читайте также, как сделать такое на чистом JavaScript.

Алгоритм

При наведении мышки на один объект возникает событие, которое вешает новый класс на другой.

Мы наводим мышкой на объект с классом:
get-icon

Новый класс:
new-class

Добавляется на уже существующий:
what-class-to-add

Если мышка уходит с этого объекта, всё возвращается на исходные позиции, т.е. новый класс удаляется.

Код:

( function( $ ) {
$(document).ready(function(){

$('.get-icon').on('mouseover touchstart', function() {
if (document.querySelector('.get-icon') !== null) {
$('.what-class-to-add').addClass('new-class');
}
});

$('.get-icon').on('mouseout', function() {
if (document.querySelector('.new-class') !== null) {
$('.what-class-to-add').removeClass('new-class');
}
});
});
} )( jQuery );

Определение ошибок на ajax

Admin — Mon, 02 Jul 2018 10:41:02 +0000

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

Одна из причин почему на WordPress может не работать ajax, это когда он не разрешен незарегистрированным пользователям. Он будет вызвать ошибку 400 Bad Request.

jQuery

Для jQuery ошибки можно увидеть так:

error: function( xhr, textStatus ) {
alert( [ xhr.status, textStatus ] );
},

или так:

error: function (e) {
console.log(e);
},

JavaScript

if(request.readyState === 4) {
if(request.status === 200) {
} else {
console.log(''Произошла ошибка при запросе: ' + request.status + ' ' + request.statusText);
}
}

Как вариант, можно посмотреть что именно выводится

if(request.readyState === 4) {
if(request.status === 200) {
} else {
console.log('Произошла ошибка при запросе: ' + request.responseText);
}
}

Как при наведении мышки на один объект менять другой

Admin — Thu, 01 Mar 2018 08:00:12 +0000

Если необходимо поменять свойства элемента при наведении на него, это легко сделать с помощью CSS. А когда требуется изменить другой элемент, то здесь придётся сочетать CSS с jQuery.

Мы сделаем так, чтобы при наведении мышки на один элемент (пусть это будет #mouseover) будет изменяться элемент с class="what-will-be-changed".

В примере ниже у элемента class="what-will-be-changed" будет изменяться фоновое изображение.

Создаём файл mouseover.js. Туда записываем следующий код:

( function( $ ) {
$(document).ready(function(){
$("#mouseover").mouseover(function(){
$('.what-will-be-changed').css('background', 'url(//ploshadka.net/wp-content/themes/ploshadka.net/assets/images/img.jpg)');
});
});
} )( jQuery );

Подключаем этот файл javasript-а на странице:

Для работы скрипта также надо подключить библиотеку jQuery (если она отсутсвует). Подключим библиотеку jquery.min.js от Google:

Загрузка библиотеки с сайта Google позволяет экономить на скорости загрузки сайта. Если пользователь ранее уже загрузил такую библиотеку в своём браузере, то она закешировалась и повторно грузиться не будет.

jQuery добавляем свойства CSS

Admin — Thu, 15 Feb 2018 19:34:55 +0000

На нескольких примерах рассмотрим добавление свойств CSS на страницу сайта с помощью jQuery. Разбираем плюсы и минусы двух основных способов изменения стилей на странице.

Для изменения параметров содержимого страницы, с помощью библиотеки jQuery для JavaScript, можно воспользоваться двумя способами:

1. Изменение отдельных свойств

Изменим элементы со свойствами class-one и .class-two при наведении на элемент с классом .ploshadka-net.

$(".ploshadka-net").mouseover(function(){
$('.class-one, .class-two').css('width', '30%');
$('.class-one, .class-two').css('height', '240px');
});

Изменение классов

Этот способ предпочтительнее и удобнее, если требуется изменить много различных свойств с помощью jQuery. Если все эти свойства прописать в самом js файле, то можно серьёзно усложнить читаемость и понимание всего кода. Лучше прописать все стили в CSS файле, а с помощью jQuery менять их.

При возникновении события поменяем стиль .class-one на стили .class-one .class-two:

$('.ploshadka-net').on('mouseover mousemove', function() {

$('.class-one').removeClass().addClass('class-one class-two');

});

Если внимательно посмотреть на код выше, можно задаться вопросом, зачем мы удаляем класс class-one и его же затем возвращаем вместе с другим.

Так нужно, потому что в этом коде было решено .class-one использовать как «ярлык», чтобы в дальнейшем можно было обрабатывать этот элемент не вспоминая какой у него новый класс.

Таким образом мы очищаем его от всех классов, в том числе добавочных, а затем возвращаем первоначальный класс (который используем как «ярлык»). И добавляем новый класс, которым меняем свойства элемента.

Теперь, если нам нужно будет снова изменить этот элемент или привести его в первоначальное состояние, нам не придется прописывать ничего лишнего:

$('.class-one').removeClass().addClass('class-one');

Как сделать анимированный скроллинг наверх страницы сайта

Admin — Tue, 01 Aug 2017 07:10:44 +0000

Как сделать анимированный скроллинг к верху страницы у себя на сайте. В статье приведён рабочий скрипт на jQuery.

Следующий JavaScript поместим в файл с названием scroll_up.js:

jQuery(document).ready(function(){
appear();
jQuery(window).scroll(function(){
appear();
});
function appear() {
// Расстояние от верха сайта, когда появится кнопка.
if (jQuery(this).scrollTop() > 500) {
jQuery('#scroll_up').fadeIn('');
} else {
jQuery('#scroll_up').fadeOut('');
}
};
jQuery('#scroll_up').click(function(){
// Время скроллинга страницы вверх в миллисекундах
jQuery('body').stop().animate({scrollTop: 0}, 600);
return false;
});
});

Размещаем его в папке для скриптов у себя на сайте. У меня он лежит в папке js шаблона сайта на WordPress. Подключаем его с помощью следующей команды:

Под ним же добавляем нашу кнопку (со стрелочкой вверх):

↑

Хотя скрипт и небольшой, но далеко не самый важный чтобы грузить его в первую очередь. Помещаем наш скрипт в самый низ сайта, в файл footer.php.

CSS для кнопки скроллинга

Описываем стиль для #scroll_up:

/* SCROLL UP */
a#scroll_up {
bottom: 20px;
position: fixed;
right: 10px;
vertical-align: top;
color: #FFFFFF;
background-color: #226788;
opacity: 0.5;
filter:alpha(opacity=50); /* Для IE8 и ниже */
border-radius: 3px;
padding: 2px 12px;
text-decoration: none;
font-size: 20px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a#scroll_up:hover {
opacity: 1;
filter:alpha(opacity=100); /* Для IE8 и ниже */
}

Работу данного скрипта можно увидеть на этом же сайте.