Главная » Языки программирования

Html and jquery example

Содержание
  1. Простые примеры jQuery
  2. Открывающийся блок
  3. Открывающийся блок (вариант 1)
  4. Открывающийся блок (вариант 2)
  5. Открывающийся блок (вариант 3)
  6. Отмечаем все chekbox одним кликом
  7. Отмечаем все chekbox одним кликом (вариант 1)
  8. Отмечаем все chekbox одним кликом (вариант 2)
  9. Заполни поле
  10. Заполни поле
  11. Счётчик символов
  12. Счётчик символов
  13. Проверка полей с помощью jQuery
  14. Проверка полей с помощью jQuery (проверка имени)
  15. Проверка полей с помощью jQuery (проверка емаил)
  16. Выпадающее меню
  17. Выпадающее меню (вариант 1)
  18. Выпадающее меню (вариант 2)
  19. Выпадающее меню (вариант 3)
  20. Выпадающее меню (вариант 4)
  21. Выпадающее меню (вариант 5)
  22. Таймер на jQuery
  23. Таймер на jQuery
  24. Плавающий или фиксированный блок на jQuery
  25. Плавающий блок DIV (вариант 1)
  26. Плавающий блок DIV (вариант 2)
  27. Выезжающее меню на jQuery
  28. .html()
  29. Contents:
  30. .html() Returns: String
  31. version added: 1.0 .html()
  32. Additional Notes:
  33. Example:
  34. Demo:
  35. .html( htmlString ) Returns: jQuery
  36. version added: 1.0 .html( htmlString )
  37. version added: 1.4 .html( function )
  38. Examples:

Простые примеры jQuery

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

Для каждого примера я привожу его исходный код и демо для просмотра в действии. Итак, начнём по-порядку с самого простого.

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

Саму библиотеку можно скачать на официальном сайте jQuery.com

Да, ещё один нюанс, на этой странице приведены примеры только в целях ознакомления, помните, что некоторые из них могут некорректно работать в старых браузерах и особенно это касается любимого Интернет Эксплорера.

Читайте также:  Python строка включает строку

Открывающийся блок

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

Содержимое блока, который
открывается после клика.

Содержимое блока, который
открывается после клика.

Содержимое блока, который
открывается после клика.

Открывающийся блок (вариант 1)

Рядом со ссылкой, после клика по которой открывается блок информации, можно вставить изображения «плюс» и «минус». Я не стал вставлять картинки, вы сможете сделать это самостоятельно, я лишь покажу вам пример реализации.

Содержимое блока, который
открывается после клика.

Содержимое блока, который
открывается после клика.

Содержимое блока, который
открывается после клика.

Открывающийся блок (вариант 2)

Наконец, можно сделать открывающийся блок при отмеченном чебоксе (при установке «птички»).

Содержимое блока, который
открывается при отмеченном чебоксе.

Содержимое блока, который
открывается при отмеченном чебоксе.

Открывающийся блок (вариант 3)

Эти примеры вы можете применить на своём сайте, это немного оживит его. Что ж, смотрим следующие примеры.

Отмечаем все chekbox одним кликом

Подобная функция есть на сайте mail.ru, когда нужно отметить в своём почтовом ящике все письма и произвести с ними некоторые действия. В этом примере я покажу как отметить все чебоксы одним кликом на jQuery.

Отмечаем все chekbox одним кликом (вариант 1)

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

Отмечаем все chekbox одним кликом (вариант 2)

С помощью таких нехитрых скриптов можно значительно усовершенствовать свой сайт.

Заполни поле

В этом примере пользователю дают подсказку, что в поле нужно ввести своё имя, если поставить курсор в поле, то надпись исчезнет и наоборот до тех пор, пока пользователь не введёт своё имя.

Заполни поле

Счётчик символов

С помощью jQuery мы можем подсчитывать сколько символов пользователь ввёл в текстовое поле.

Счётчик символов

Проверка полей с помощью jQuery

Обычно проверка введённых данных начинается в момент нажатия на кнопку «Отправить», «Зарегистрироваться» и т.п. Проверка производится средствами php и в принципе это наиболее правильный вариант, но, в случае возникновения ошибок пользователю придётся повторять нажатие на кнопку, поэтому в целях экономии времени и ресурсов можно производить дополнительную проверку с помощью jQuery, естественно, без перезагрузки страницы.

Проверка полей с помощью jQuery (проверка имени)

Чтобы проверить введённый емаил требуется немного иной подход.

Проверка полей с помощью jQuery (проверка емаил)

Выпадающее меню

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

Выпадающее меню (вариант 1)

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

Выпадающее меню (вариант 2)

Выпадающее меню (вариант 3)

Пункты в этом меню раскрываются по клику

Выпадающее меню (вариант 4)

Выпадающее меню (вариант 5)

Таймер на jQuery

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

Ссылка для скачивания файла появится через сек.

В исходном коде приведен вариант без кнопки запуска таймера, т.е. он начнёт отсчёт после загрузки страницы. HTML + CSS + JQUERY

Таймер на jQuery

Плавающий или фиксированный блок на jQuery

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

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

Контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент

Плавающий блок DIV (вариант 1)

Во втором случае блок плавает в пределах блока с чёрной рамкой.

Контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент

Плавающий блок DIV (вариант 2)

Выезжающее меню на jQuery

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

Источник

.html()

Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.

Contents:

.html() Returns: String

Description: Get the HTML contents of the first element in the set of matched elements.

version added: 1.0 .html()

This method is not available on XML documents.

In an HTML document, .html() can be used to get the contents of any element. If the selector expression matches more than one element, only the first match will have its HTML content returned. Consider this code:

In order for the following ‘s content to be retrieved, it would have to be the first one with class=»demo-container» in the document:

div class="demo-container">
 div class="demo-box">Demonstration Box div>
 div>

The result would look like this:

div class="demo-box">Demonstration Box div>

This method uses the browser’s innerHTML property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters.

Additional Notes:

  • By design, any jQuery constructor or method that accepts an HTML string — jQuery(), .append(), .after(), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, ). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.

Example:

Click a paragraph to convert it from html to text.

html>
html lang="en">
head>
 meta charset="utf-8">
 title>html demo title>
 style> 
 p 
 margin: 8px;
 font-size: 20px;
 color: blue;
 cursor: pointer;
 >
 b 
 text-decoration: underline;
 >
 button 
 cursor: pointer;
 >
 style>
 script src="https://code.jquery.com/jquery-3.7.0.js"> script>
 head>
body>
 
p>
 b>Click b> to change the span id="tag">html span>
 p>
p>
 to a span id="text">text span> node.
 p>
p>
 This button name="nada">button button> does nothing.
 p>
 
script> 
$( "p" ).on( "click", function( ) 
 var htmlString = $( this ).html();
 $( this ).text( htmlString );
>);
 script>
 
 body>
 html>

Demo:

.html( htmlString ) Returns: jQuery

Description: Set the HTML contents of each element in the set of matched elements.

version added: 1.0 .html( htmlString )

version added: 1.4 .html( function )

A function returning the HTML content to set. Receives the index position of the element in the set and the old HTML value as arguments. jQuery empties the element before calling the function; use the oldhtml argument to reference the previous content. Within the function, this refers to the current element in the set.

The .html() method is not available in XML documents.

When .html() is used to set an element's content, any content that was in that element is completely replaced by the new content. Additionally, jQuery removes other constructs such as data and event handlers from child elements before replacing those elements with the new content.

Consider the following HTML:

div class="demo-container">
 div class="demo-box">Demonstration Box div>
 div>

The content of can be set like this:

$( "div.demo-container" )
 .html( "
All new content. You bet!
" );

That line of code will replace everything inside :

div class="demo-container">
 p>All new content. em>You bet! em> p>
 div>

As of jQuery 1.4, the .html() method allows the HTML content to be set by passing in a function.

$( "div.demo-container" ).html(function( ) 
 var emphasis = "" + $( "p" ).length + " paragraphs!";
 return "
All new content for " + emphasis + "
";
>);

Given a document with six paragraphs, this example will set the HTML of to

All new content for 6 paragraphs!

.

This method uses the browser's innerHTML property. Some browsers may not generate a DOM that exactly replicates the HTML source provided. For example, Internet Explorer prior to version 8 will convert all href properties on links to absolute URLs, and Internet Explorer prior to version 9 will not correctly handle HTML5 elements without the addition of a separate compatibility layer.

To set the content of a element, which does not contain HTML, use the .text() method and not .html() .

Note: In Internet Explorer up to and including version 9, setting the text content of an HTML element may corrupt the text nodes of its children that are being removed from the document as a result of the operation. If you are keeping references to these DOM elements and need them to be unchanged, use .empty().html( string ) instead of .html(string) so that the elements are removed from the document before the new string is assigned to the element.

Examples:

Add some html to each div.

Источник

Оцените статью
© 2024 Программирование