Как использовать jQuery, чтобы сделать сайты более динамичными?

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

Я пытаюсь выполнить 2 вещи, которые я видел на веб-сайте покупок.

Первое: Сделать слова появляются при наведении курсора мыши изображение как этот example

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

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

Чтобы проверить свои навыки, я начал этот тест , чтобы попытаться выполнить то, что я хочу.

< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" > < /script> 
 
<script> 
 

 
$(img).mouseenter(handlerIn).mouseleave(handlerOut); 
 

 

 
</script >

.img { 
 
    background-color: #f6f6f6; 
 
    width: 241px; 
 
    height: 341px; 
 
}

<body> 
 
    <div class="img">an image 
 
    <div> 
 
</body>

Я знаю, что есть что-то делать с этим $(selector).mouseenter(handlerIn).mouseleave(handlerOut); за первое, что я пытаюсь сделать.

Для второго, что я знаю, что есть что-то делать с .toggle()

Будьте вежливы со мной, ребята, я новичок и только начинаете, чтобы выяснить, как начать использовать JQuery.

Большое спасибо!

источник

2015-02-04 user23524697

Первая задача достижима с помощью html/css.Вы должны создать скрытый элемент и сделать его видимым с помощью: hover в css. –

Вы можете использовать функцию hover: $(selector).hover(handlerIn, handlerOut) см: http://api.jquery.com/hover/

// You want this code to run after the document has been loaded 
    jQuery(document).ready(function() { 
     // Use .img to target all elements with the class 'img' 
     $('.img').hover(function() { 
      // This function is called when the mouse hovers over the element 
      // Because this is function is an eventListener that is attached 
      // to an element, you can call 'this' to target the element 
      // that is being hovered over 
      var image = jQuery(this); 

      // Use the .append() function to insert content into an element 
      image.append("<div class='quick-view'>Quick view</div>") 
     }, 
     function() { 
      // This function is called when the mouse leaves the element 
      // In here we want to remove the quick-view element, so 
      // first we have to find it. Again, use 'this' to 
      // target the element that is hovered over. 
      var image = jQuery(this); 

      // Use the .find() function to look for the quick-view element 
      // inside the element with the .img class: 
      var quick-view = image.find('.quick-view'); 

      // Now to remove the quick-view element, use .remove() 
      quick-view.remove(); 
     }); 
    });

ниже код будет прикрепить слушатель OnClick к быстрому просмотру элементу, так что вы можете сказать сценарию, что делать, когда быстро -view элемент.
Примечание, что мы не используем

jQuery('.quick-view').click(function() {});

Это происходит потому, что это будет прикрепить функцию щелчка ко всем элементам с классом «быстрого просмотра», после загрузки документа. Но после загрузки документа нет элементов с классом «быстрый просмотр». Эти элементы создаются динамически. Поэтому мы должны использовать специальную функцию jQuery, функцию .on(), которую мы присоединим к элементу body. См http://api.jquery.com/on/

jQuery('body').on('click', '.quick-view', function() { 
    // Even though the listerner seems to be attached to the body 
    // you can still call 'this' to target the quick-view element. 
    // In here you can add the box with more details to the body 
    jQuery('body').append("<div class='more-info'>more info</div>") 
});

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

источник

2015-02-04 00:49:09

Спасибо за ваш построенный ответ! – user23524697

Как использовать jQuery, чтобы сделать сайты более динамичными?

ответ

Смежные вопросы