Рубрика: <span>JQuery</span>

Подсветить выбранный активный (или текущий) пункт меню с применением библиотеки javascript JQUERY

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
li {
  flex-grow: 1;
}
a {
  display: block;
  text-align: center;
  margin-bottom: 0.3em;
  text-decoration: none;
  color: #000000;
  font-size: 1em;
  width: 7em;
  border-radius: 10px;
  padding: 1em;
  background-color: rgb(171, 190, 207);
}
a.active,a:hover {
    color:rgb(255, 255, 255);
    background-color:#000000;
}
<ul class="menu">   
          <li><a href="#1">Ссылка 1</a></li>
          <li><a href="#2">Ссылка 2</a></li>
          <li><a href="#3">Ссылка 3</a></li>
          <li><a href="#4">Ссылка 4</a></li>
          <li><a href="#5">Ссылка 5</a></li>
        </ul>
 
$(document).ready(function(){
        $(".menu a[href]").each(function() {
               if ("http://site.ru"+$(this).attr("href") == window.location.href)
               {
                   /*$(".active").removeClass("active");*/
                   $(this).addClass("active");
                   }
               });
            }); 

Результат работы меню — выбираем ссылку, выбранная страница перезагружается и соответствующий пункт меню подсвечивается в соответствии со стилем css.

Подсветить выбранный пункт меню JQUERY пример

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

 
$(document).ready(function(){
        $(".menu a[href]").click(function() {
               if (!$(this).hasClass('active')) { 
                $(this).addClass('active'); 
                } else { 
                $(this).removeClass('active');
                }
            });
        }); 
 

Демонстрация работы программы подсветка кнопки при нажатие — нажмите на кнопки ниже

Пример кода на php — подсветка выбранного меню

<ul>
<li><a href="index.php" <?php if ($_SERVER["REQUEST_URI"] == "/index.php") {echo 'class="active"';}?>>ГЛАВНАЯ</a></li>
</ul>

 

JQuery

Модальное окно WordPress с использованием CSS, JQuery — пример открытие и закрытие модального окна и получение номера телефона для обратного звонка.


JQuery код для модального окна (суть состоит в добавление и удалении класса с помощью JQuery, дополнительные примеры можно посмотреть здесь)

jQuery(document).ready(function() {   
       
        jQuery(".send-data-open-modal").click(function() {
            jQuery(".send-data-back-modal").addClass('active');
        });
        jQuery(".close-modal").on("click", function() {
            jQuery(".send-data-back-modal").removeClass('active');
        });

        jQuery(".send-data-form-modal .mymodal-submit").on("click", function() {
            setTimeout(() => {
                if (jQuery(".send-data-form-modal .mymodal-response-output").text() == 'Благодарим Вас за обращение. Сообщение отправлено.') {
                    jQuery('.send-data-modal-state').addClass('active');
                    setTimeout(() => {
                        jQuery(".send-data-back-modal").removeClass('active');
                    }, 2000);
                } else {
                    console.log(jQuery(".send-data-form-modal .mymodal-response-output").text());
                }
            }, 1000);
        });        
    });

Стиль модального окна

 
/** {
    margin: 0;
    padding: 0;
}*/


.button-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 14%;
}

/* style button */
.button-open-modal {
    box-sizing: border-box;
    background: #51c89a;
    font-size: 18px;
    color: #fff;
    border-radius: 36px;
    padding: 8px 18px;
}

/* button */
.send-data-open-modal {
    cursor: pointer;
}

/* modal */
.send-data-back-modal.active {
    display: flex;
}

.send-data-back-modal {
    background-color: rgba(192, 186, 186, 0.455);
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    display: none;
}
/* forma */
.send-data-form-modal {
    text-align: center;
    position: relative;
    box-sizing: border-box;
    padding: 20px 50px;
    background: #FFFFFF;
    border: 1px solid #d9d4d1;
    border-radius: 4px;
    width: 44%;
		box-shadow: 0 2px 4px 0 rgba(0,0,0,0.4),0 4px 16px 0 rgba(0,0,0,0.18);
	-webkit-animation-name: anim;
  -webkit-animation-duration: 0.4s;
  animation-name: anim;
  animation-duration: 0.4s;
}
/* x */
.close-modal {
    position: absolute;
    left: 94%;
    top: 15px;
    cursor: pointer;
    font-size: 30px;
    /*font-weight: bold;*/
    font-family: 'Open Sans', sans-serif;
}
/* text */
.request-form-modal-title {
    font-weight: bold;
    font-size: 30px;
}

.request-form-modal-info {
    font-weight: normal;
    font-size: 16px;
    margin-top: 12px;
}
/* fields form */
.request-form-fields {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 18px;
}

.request-form-fields span.mymodal-form-field.your-name {
    width: 49%;
}

.request-form-fields span.mymodal-form-field.myphone {
    width: 49%;
}

.request-form-fields input {
    width: 100%;
    font-weight: 500;
    font-size: 16px;
    padding: 15px;
    border: 1px solid #d9d4d1;
    box-sizing: border-box;
    border-radius: 4px;
}

.request-form-fields input[type=submit] {
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    padding: 16px 0px;
    background: #51c89a;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    width: 46%;
    margin-top: 18px;
    margin-left: 54%;
}

.request-form-fields span.mymodal-form-field.your-message {
    width: 100%;
}

.request-form-fields textarea {
    background: #FFFFFF;
    border: 1px solid #d9d4d1;
    box-sizing: border-box;
    padding: 14px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 18px;
    margin-top: 18px;
    width: 100%;
    height: 160px;
}

/* form message state */
.send-data-modal-state {
    display: none;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    padding: 20px 50px;
    width: 50%;
    background: #FFFFFF;
    border: 1px solid #d9d4d1;
    border-radius: 4px;
}

.send-data-modal-state.active {
    display: block;
}
	
@-webkit-keyframes anim {
  from {
		top:-400px; 
		opacity:0
	} 
  to {
		top:0; 
		opacity:1
	}
}

@keyframes anim {
  from {
		top:-400px; 
		opacity:0
	}
  to {
		top:0; 
		opacity:1
	}
}

HTML код

<div class="button-wrap">
  <div class="button-open-modal send-data-open-modal">
    Оставить заявку
   </div>
</div>

<div class="send-data-back-modal">
    <div class="send-data-form-modal">
        <span class="close-modal"><i class="fas fa-times"></i></span>
        <div class="request-form-modal-title">Форма обратной связи</div>
        <div class="request-form-modal-info">В течение 30 минут мы вам позвоним</div>
        <div class="myform">
            <form action="/script.php" method="post" class="myform-action">
                    <div class="request-form-fields">
                        <span class="mymodal-form-field your-name">
                            <input type="text" name="your-name" size="40" aria-required="true" aria-invalid="false" placeholder="Ваше имя">
                        </span><br>
                        <span class="mymodal-form-field myphone">
                            <input type="tel" name="myphone" size="40" aria-required="1" placeholder="Номер телефона" data-mask="+7 (___) ___-__-__">
                        </span><br>
                        <span class="mymodal-form-field your-message">
                            <textarea name="your-message" cols="40" rows="10" aria-invalid="false" placeholder="Ваше сообщение"></textarea>
                        </span><br>
                        <input type="submit" value="Отправить" class="mymodal-submit">
                        <span class="mymodal-spinner"></span>  
                    </div>
                    <div class="mymodal-response-output"></div>
            </form>
        </div>
    </div>
    <div class="send-data-modal-state">
        <div class="request-form-modal-title">Благодарим Вас за обращение!</div>
        <div class="request-form-modal-info">В течении 30 минут мы вам позвоним</div>
    </div>
</div>

Интерактивный пример, нажмите на кнопку

Оставить заявку
Форма обратной связи
В течение 30 минут мы вам позвоним



Благодарим Вас за обращение!
В течении 30 минут мы вам позвоним

Пример вызова модального окна
Модальное окно WordPress пример

JQuery

Пример использования slidetoggle из библиотеки JQuery

JQuery slidetoggle пример

Демонстрационный пример работы метода slidetoggle на библиотеки JQuery. При нажатие на кнопку шторка опускается вниз, при повторном нажатие шторка поднимается вверх.

JQuery

Таблица — Аналогия методов jQuery с JavaScript

Команда название Синтаксис на jQuery Синтаксис на JavaScript
Создать элемент
$('<div/>');
document.createElement('tag');
Выбрать элемент
$(obj);$('#id');
document.querySelector(obj); 
или 
document.querySelectorAll(obj);
или
document.getElementById('id');
Удалить элемент
$(obj).remove();
obj.remove();
Найти элемент
$(obj).find(selector);
obj.querySelectorAll(selector);
Копирование элемента
$(obj).clone();
obj.cloneNode(true);
Hide скрыть элемент
$(obj).hide();
obj.style.display='none';
Show показать элемент
$(obj).show();
obj.style.display='';
Получить родительский элемент
 $(obj).parent();
obj.parentElement;
или 
obj.parentNode;
Получить дочерний элемент
$(obj).children();
obj.children;
obj.firstElementChild;
obj.children[0];
obj.lastElementChild;
Получить следующий элемент
 $(obj).next();
obj.nextElementSibling;
Получить предыдущий элемент
 $(obj).prev();
obj.previousElementSibling; 
Добавить класс
 $(obj).addClass('className');
obj.classList.add('className');
Изменить класс
$(obj).attr('class','className');
obj.classList.replace('className');
Удалить класс
$(obj).removeClass('className'); 
$(obj).removeClass();
obj.classList.remove('className'); 
obj.removeAttribute('class');
Получить класс
$(obj).attr('class');
obj.getAttribute('class');
Проверка существования класса
$(obj).hasClass('className');
obj.classList.contains('className');
 
$(obj).toggleClass('className');
obj.classList.toggle('className');
Добавить атрибут
$(obj).attr('style','color: #fff');
obj.setAttribute('style','color: #fff');
Удалить атрибут
obj.setAttribute('style','color: #fff');
obj.removeAttribute('style');
Получить текст
 obj.remove();
obj.textContent;
Изменить текст
$(obj).text('newText');
 language="js"]$(obj).text('newText');
Получить атрибут
$(obj).attr('value');
obj.getAttribute('value');
Получить ширину и высоту элемента
$(obj).width();
$(obj).height();
obj.scrollWidth; 
obj.scrollHeight;
Добавление строк
$(obj).before(text);
$(obj).after(text);
$(parentEl).prepend(obj);
$(parentEl).append(obj);
obj.before(text);
obj.after(text);
obj.prepend(text);
obj.append(text);
Получить HTML
$(obj).html();
obj.innerHTML
Изменить HTML
 $(obj).html('newHTML');
obj.innerHTML='newHTML';
Добавление  элементов в HTML
$(obj).before(html);
$(obj).after(html);
$(parentEl).prepend(obj);
$(parentEl).append(obj);
obj.insertAdjacentHTML('beforebegin',html);
obj.insertAdjacentHTML('afterend',html);
obj.insertAdjacentHTML('afterbegin',html);
obj.insertAdjacentHTML('beforeend',html);
 
$(obj).replaceWith(newHTML);
obj.outerHTML='newHTML';
Получить CSS
$(obj).css('propertyName');
obj.getComputedStyle(obj)['propertyName']
Изменить CSS
$(obj).css('font-size', '24px');
obj.style.fontSize='24px';
Получить значения
$(obj).val();
obj.value
Изменить значения
$(obj).val('newValue');
obj.value='newValue';
Цикл each
$(selector).each(function(index,el){
 // your code 
});
var mas=document.querySelectorAll(obj);
mas.forEach(function(el, index){
// your code 
});
wrap
$(obj).wrap('<div class="elWrapper"></div>');
tag= document.querySelector(obj).innerHTML;
newTag='<span id="">'+tag+'</span>';
document.querySelector(obj).outerHTML=newTag;
unwrap
$(obj).unwrap();
wrapperEl=document.querySelector(obj);
while(wrapperEl.firstChild){
wrapperEl.before(wrapperEl.firstChild);
}
wrapperEl.remove();
Событие при загрузке DOM
jQuery(function($){
//code
});
 document.addEventListener(
'DOMContentLoaded',()=>{
//code
});
Событие on
 $(obj).on('eventName',()=>{
//code
});
 obj.addEventListener('eventName',()=>{
//code 
});
Событие при изменение параметров экрана
$(window).resize(function(){
//code
});
window.addEventListener(
'resize',()=>{
//code
});

JQuery