Показать секцию по клику по кнопке или ссылке

Метод jQuery append()

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

Следующий пример добавит некоторый HTML-код ко всем абзацам после загрузки документа, а при нажатии на кнопку, добавится еще и некоторый текст к основному блоку с id #container:

<script type="text/javascript">
  $(document).ready(function(){
    // Добавление элемента ко всем параграфам после загрузки документа
    $("p").append(' <a href="#">read more...</a>');
    // Добавление текста в блок с айди container
    $("button").click(function(){
      $("#container").append("This is demo text.");
    });
  });
</script>

Использование вспомогательных методов для работы с конкретными типами данных

Библиотека jQuery предоставляет три вспомогательных метода, которые делают работу с некоторыми типами данных более удобной. Некоторые из них мы рассмотрим далее.

Получение HTML-фрагментов

Метод load() предназначен для получения только HTML-данных, что позволяет совместить запрос HTML-фрагмента, обработку ответа от сервера для создания набора элементов и вставку этих элементов в документ в одном действии. Пример использования метода load() представлен ниже:

В этом сценарии мы вызываем метод load() для элемента, в который хотим вставить новые элементы, и передаем ему URL-адрес в качестве аргумента. Если запрос завершается успешно, а полученный от сервера ответ содержит действительный HTML-фрагмент, элементы вставляются в указанное место в документе, как показано на рисунке:

Вы видите, что все элементы из файла flowers.html добавлены в документ, как мы и хотели, но поскольку у них отсутствует атрибут class, то они не укладываются в табличную компоновку страницы, используемую в основном документе. Поэтому метод load() наиболее полезен в тех случаях, когда все элементы могут быть вставлены в одно место в документе без какой-либо дополнительной обработки.

Получение и выполнение сценариев

Метод getScript() загружает файл JavaScript, а затем выполняет содержащиеся в нем инструкции. Чтобы продемонстрировать работу этого метода, я создал файл myscript.js и сохранил его вместе с файлом test.html на своем веб-сервере. Содержимое этого файла представлено в примере ниже:

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

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

Здесь мы вызываем метод getScript() для основной функции $() и передаем ему в качестве аргумента URL-адрес файла, который хотим использовать. Если сервер способен предоставить указанный файл и этот файл содержит действительный JavaScript-код, то последний будет выполнен.

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

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

В данном примере после запуска Ajax-запроса с помощью метода getScript() из документа удаляется элемент row2, для чего используется метод remove(). Данный элемент используется в файле myscript.js для вставки новых элементов. Эти элементы отбрасываются незаметным для пользователя образом, поскольку в документе селектору #row2 ничто не соответствует. Итоговый результат представлен на рисунке:

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

Получение данных в формате JSON

Для загрузки данных JSON с сервера предназначен метод getJSON(). Возможно, это наименее полезный из всех трех вспомогательных методов, поскольку он не делает с данными ничего сверх того, что делает базовый метод get().

Вставка нескольких элементов с помощью методов append() и prepend()

JQuery append() и prepend() также поддерживает передачу нескольких аргументов в качестве параметров.

Код jQuery в следующем примере вставит элемент <h1>, <p> и <img> внутри элемента <body> в качестве последних трех дочерних узлов.

<script type="text/javascript">
  $(document).ready(function(){
    var newHeading = "<h1>Note:</h1>";
    var newParagraph = document.createElement("p");
    newParagraph.innerHTML = "<em>Lorem Ipsum...</em>";
    var newImage = $('<img src="images/smiley.png" alt="Smile">');
    $("body").append(newHeading, newParagraph, newImage);
  });
</script>

Что такое DOM-свойства элементов?

Когда браузер получает HTML-код запрашиваемой страницы, он разбирает его и строит в соответствии с ним DOM-дерево. При этом HTML-теги становятся объектами (узлами этого дерева), а атрибуты – их свойствами. При этом значения DOM-свойств может отличаться от соответствующих им атрибутов. Почему так происходит, а также более подробно узнать про DOM-свойства и атрибуты, и чем они отличаются друг от друга, можно в этой статье.

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

Синтаксис функции jQuery .each()

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

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

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

var obj= 

   $.each(obj, function (index, value) {
          var first_name=value.FirstName;
          var last_name=value.LastName;
          console.log(first_name+""+last_name);
   });

Давайте посмотрим на результат, который отображает FirstName и LastName из объектной переменной:

• Andrea Ely
• John Shaw
• Leslie Mac
• David Miller
• Rehana Rewa

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

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

Корпоративные сувениры http://mgifts.ru/

Одно большое преимущество использования размещенного jQuery от Google: многие пользователи уже загрузили jQuery из Google CDN при посещении другого веб-сайта. В результате он будет загружен из кэша при посещении вашего сайта, что приводит к ускорению загрузки. Кроме того, Google CDN будет следить за тем, чтобы после того, как пользователь запросил у него файл, он был отправлен с ближайшего к ним сервера, что также приводит к ускорению загрузки.

Наиболее популярные CDN — это Google CDN и jQuery CDN. Мы рассмотрим подключение с Google CDN, но подключение с других серверов аналогично и можете выбрать любой понравившийся вариант.

Google CDN

2. Разместите полученный код между тегами и :

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

Должно получится примерно следующее:

<!doctype html>
<html>
<head>
	<title>jQuery</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<h1>Подключение jQuery</h1>
</body>
</html>

Выбор элементов

Одна из самых важных областей применения функциональности jQuery — это выбор элементов DOM. В качестве примера ниже показано, как осуществить выбор нечетных элементов img:

Чтобы выбрать элементы, вы просто передаете селектор функции $(). Библиотека jQuery поддерживает все множество CSS-селекторов, а также некоторые дополнительные селекторы, которые обеспечивают удобные возможности детализированного управления процессом выбора элементов. В данном примере используется псевдоселектор :odd, который выбирает нечетные элементы, соответствующие основной части селектора (в данном случае это селектор img, который выбирает все элементы <img>).

В случае использования селектора :odd отсчет элементов начинается с нуля, т.е. первый элемент является четным. Поначалу это может сбивать вас с толку. Наиболее полезные селекторы jQuery перечислены в таблице ниже:

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

В jQuery определены также селекторы, позволяющие выбирать элементы в соответствии с их типом:

<select>
    <option>Option<option/>
</select>

4 ответа

2

Лучший ответ

Если вы измените свой CSS (предполагая использование тегов ul/li) из:

в

Это должно позаботиться об этом для вас. Здесь результат jsFiddle.

В стороне:. Я хотел бы добавить, что вам следует избегать селекторов типа или , когда это возможно.

• Теги
• и должны всегда следовать тегам и .
• Селекторы потомков .

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

28 нояб. 2011, в 16:52
Поделиться

после вашего первого тега добавьте это

то в вашем css добавьте

это будет ваш результат http://jsfiddle.net/JGZJj/4/

28 нояб. 2011, в 17:48
Поделиться

Я не уверен на 100%, что вы после этого, но вы пробовали использовать на вашем содержимом и на ваших элементах .

28 нояб. 2011, в 17:00
Поделиться

На любом блочном элементе с фиксированной высотой поставьте атрибут css

Должен сделать ваш элемент прокручиваемым с помощью полосы прокрутки, когда она содержит грубую фиксированную высоту.

28 нояб. 2011, в 16:26
Поделиться

Ещё вопросы

• Сравнение Mocha / Chai JSON не удается
• 1Android Layout дизайн, помогите!
• 1Android растровое манипулирование
• GDB: не удалось найти оператор []
• 1Как оценить энергопотребление приложения Android? Это линейно?
• Как использовать встроенные списки с ng_admin (t.map не является функцией)
• Как добавить вкладки заголовка в ионных рамках?
• 1Как отформатировать дату и время для RFC2445 в PHP
• Как получить id элементов внутри ng-include
• 1Как сохранить список объектов в Java Server Faces 2
• 1Чтение в текстовом файле и разбиение его содержимого — можно только опубликовать каждую строку?
• 1Удаление имен столбцов при чтении контента через Inputstream в Java
• Как исправить заблокированные порты XAMPP Apache и отсутствующие зависимости, переопределенные в другой версии XAMPP
• Получение <div> и <a> одинаковой высоты рядом
• Как повернуть точку «вручную»?
• Сделать размер страницы сайта нормальным размером рабочего стола на мобильных устройствах
• 1Как добавить атрибуты в XML из сценария SQL
• 1Smarty присваивает значение переменной внутри включенного шаблона
• 1Как я могу контролировать прозрачность растрового изображения?
• Iframe: удалите прокрутку iframe и используйте прокрутку окна, чтобы просмотреть содержимое iframe
• 1Найти элемент в иерархическом списке
• 1Вызов функции оракула с MyBatis (на основе аннотаций)
• 1Почему validation_freq не работает с моделью Keras?
• Невидимая / видимая кнопка отправки в таблице
• 1Как я могу преобразовать пользовательский AST в код JS
• 1Введено неверное значение с помощью Spring PropertyPlaceholderConfigurer
• 1Удалить FILL из строки в JavaScript
• Приоритетная сортировка очереди указателей на объекты, которые меняют значение. C ++
• 1Использование рекурсивного метода для публикации процесса Java SwingWorker
• Не уверен, как сделать мой переход зацикленным
• 1Почему я получаю это исключение нулевого указателя?
• Привязка данных с использованием Node и Angular
• 1Справка Pandas: преобразовать столбец из строки с разделителями в массив столбцов
• 1Maven не загружает никаких зависимостей типа pom
• 1Анимация обводки пути в направлении пути
• 1Тернарный оператор в Java против c
• 1Рекомендации по изменению приложения для поддержки нескольких баз данных
• 1как разбить строку на список объектов
• Как перейти к следующему выпадающему после изменения значения?
• 1Нарисуйте слой GeoJson под названием дороги
• 1Electronjs: сохранение файла БД после компиляции
• 1Кто-нибудь знает, почему мои кнопки tkinter не рендерится?
• Невозможно получить слайдыCount от $ ionicSlideBoxDelegate
• 1Office.context.mailbox.item.to.getAsync обновляет поле TO с частичными данными
• 1Тег <tr> не распознается с помощью цикла php for
• Как создать запрос обновления MySQL для обновления нескольких строк в одном операторе для C #. Net Windows Применение
• 1Yii2 результат от orm в сопоставленном массиве
• 1Проблема аутентификации Linq2Twitter
• 1Распечатать содержимое списка массивов
• 1Команды не могут быть решены с помощью Autofac при хранении в списке

jQuery — Событие загрузки (load)

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

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

$(window).on('load', function() {
  // действия после полной загрузки страницы...

});

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

<img id="image" src="image.png">
...
<script>
$('#image').on('load', function() {
  console.log('Изображение загружено');
});
</script>

Активный элемент

Шаг 1) добавить HTML:

Пример

<div id=»myDIV»>  <button class=»btn»>1</button>  <button
class=»btn active»>2</button>  <button class=»btn»>3</button> 
<button class=»btn»>4</button>  <button class=»btn»>5</button>
</div>

Шаг 2) добавить CSS:

Пример

/* Style the buttons */.btn {  border: none;  outline:
none;  padding: 10px 16px;  background-color: #f1f1f1; 
cursor: pointer;}/* Style the active class (and buttons on
mouse-over) */.active, .btn:hover {  background-color: #666; 
color: white;}

Шаг 3) добавить JavaScript:

Пример

// Get the container elementvar btnContainer = document.getElementById(«myDIV»);// Get all buttons with class=»btn» inside the containervar btns =
btnContainer.getElementsByClassName(«btn»);// Loop through
the buttons and add the active class to the current/clicked buttonfor (var i = 0; i < btns.length;
i++) {  btns.addEventListener(«click», function() {   
var current = document.getElementsByClassName(«active»);   
current.className = current.className.replace(» active», «»);   
this.className += » active»;  });}

❮ Назад
Дальше ❯

document.readyСкопировать ссылку

Даже когда я использую jQuery, если у меня (или моей компании) есть контроль над проектом, я очень редко использую (или его короткую версию: ).

Дело в том, что весь JavaScript я размещаю под всем DOM, перед тегом . Так я всегда уверен, что в этот момент весь DOM уже будет обработан браузером.

Надеюсь, что вы это и так знаете, но JavaScript блокирует рендеринг страницы. Если вы разместите JavaScript над содержимым, и ваш сервер подвиснет — вы получите пустую страницу. Я много раз уже использовал этот пример, но повторюсь, что раньше (довольно давно) виджет Twitter просто вставлялся в HTML вашей страницы. Их сайт частенько падал, и мой блог (с этим виджетом) зависал на пустой странице — так что выглядело все так, будто упал мой сайт.

Эффекты jQuery

Эффекты jQuery часто работают вместе с событиями и позволяют добавлять анимацию и иным образом управлять элементами на странице.

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

Удалите теги <button> и <p> из тела файла index.html, затем добавьте в документ HTML:

В файле style.css используйте CSS, чтобы спрятать элемент overlay с помощью display: none и поместить его в центре экрана.

Вернитесь в файл scripts.js и используйте метод toggle(), который будет включать и отключать свойство CSS display (переключать none и block), скрывая и отображая наплывающий элемент при клике.

Обновите index.html. Теперь вы можете управлять наплывающим элементом, кликая по кнопкам. Вместо toggle() вы можете использовать другие встроенные элементы jQuery, например, fadeToggle() или slideToggle().

Вот краткий список популярных эффектов:

• toggle(): управляет видимостью элемента; с ним связаны эффекты show() и hide().
• fadeToggle(): управляет видимостью элемента с помощью прозрачности/непрозрачности; к нему относятся эффекты fadeIn() и fadeOut().
• slideToggle(): управляет видимостью элемента с помощью эффекта скольжения; с ним связаны slideDown() и slideUp().
• animate(): пользовательские эффекты анимации.

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

CSSHTMLJavascriptjQuery

Пример итерации по строкам таблицы с помощью .each ()

Чтобы прочитать значение каждой ячейки таблицы также можно использовать функцию jQuery . Каждая строка таблицы получает данные, выполняя цикл в HTML-таблице:

<table id="myTable" style="margin-left:50px;">
  <tr><th>Sr no</th><th>Name</th><th>Gender</th><th>Location</th></tr>
  <tr><td> 1</td><td>Satinder Singh</td><td> M </td><td> India </td></tr>
  <tr><td> 2 </td><td>Amit Sarna</td><td> M </td><td> France </td></tr>
  <tr><td> 3 </td><td>Andrea Ely</td><td> F </td><td> Brazil </td></tr>
  <tr><td> 4 </td><td>Leslie Mac </td><td> F </td><td> Australia </td></tr>
  <tr><td> 5 </td><td>Sonya David </td><td> F </td><td>America</td></tr>
</table>

Используя метод , мы получаем значение каждой ячейки строки таблицы, то есть каждое значение

$(".button").on('click', function () {

                $("#myTable tr").each(function () {
                    var self = $(this);
                    var col_1_value = self.find("td:eq(0)").text().trim();
                    var col_2_value = self.find("td:eq(1)").text().trim();
                    var col_3_value = self.find("td:eq(2)").text().trim();
                    var col_4_value = self.find("td:eq(3)").text().trim();
                    var result = col_1_value + " - " + col_2_value + " - " + col_3_value + " - " + col_4_value;
                    console.log(result);
                });
            });

Указание ожидаемого типа данных

При использовании методов get() и post() библиотеке jQuery приходится определять тип данных, получаемых от сервера в ответ на запрос. Данными может быть все что угодно, начиная от HTML-кода и заканчивая файлами JavaScript. Для определения типа данных библиотека jQuery использует содержащуюся в ответе информацию, и в частности — заголовок Content-Type. Как правило, этого вполне достаточно, но иногда jQuery приходится оказывать небольшую помощь. Обычно необходимость в этом возникает из-за указания сервером неверного MIME-типа в ответе.

Можно изменить информацию, поставляемую сервером, и сообщить jQuery, какой тип данных ожидается, передавая методам get() и post() дополнительную информацию. Аргумент может принимать одно из следующих значений:

• xml
• json
• jsonp
• script
• html
• text

В примере ниже показано, как задать ожидаемый тип данных для метода post():

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

ЗаключениеСкопировать ссылку

Моей целью было показать вам, что, хотя jQuery безумно помогала мне все эти годы (особенно годы плохой совместимости между браузерами), и со встроенной функциональностью браузеров можно уйти довольно далеко в плане обычных сценариев — когда я пишу JavaScript для того, чтобы «сделать что-нибудь» в DOM.

Перестаньте думать в парадигме «функция X не работает в браузере Y». Подходите с другой точки зрения. Какую задачу я решаю? Какой инструмент лучше всего подойдет? Для кого это делается? Я по-прежнему верю в методологию прогрессивного улучшения, но я не понимаю удовольствия лезть из кожи вон ради того, чтобы поддерживать воображаемую аудиторию пользователей (по той причине, что у нас нет данных, какие браузеры у наших пользователей).

Google (по моим последним данным) поддерживает последние и предпоследние версии браузеров. Я тоже стараюсь начинать с поддержки этих версий.

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

Итак, на этом я заканчиваю и надеюсь, что этот текст был вам полезен.

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

Может быть, некоторые из вас только знакомятся с jQuery — я надеюсь, что вы станете разбираться и дальше в том, на что способны JavaScript и DOM.

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

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

На конференциях будут нужны новые докладчики и новые эксперты: это вы.