- Шпаргалка Jquery
- Идентификаторы и классы Jquery
- Иерархия элементов Jquery
- Фильтрация элементов Jquery
- Работа с формами
- Стили Jquery
- Расположение элементов
- «Прокрутка» элементов
- Работа с массивами и циклами
- События Jquery
- События мыши
- Действия клавиатуры
- События формы
- События загрузки страницы
- События браузера
- Отмена действий
- Анимация Jquery
- jQuery alert()
- jQuery alert()
- jQuery alert()
- Tutorials
- How to Create jQuery Alert Message Box in HTML
- What is jQuery Alert Message Box?
- How to Write and Create jQuery Alert Message Box
Шпаргалка Jquery
Важно: если выбрать с помощью JQ объект на странице которого нет( ну например тег a) то JQ не возвратит ошибку. Для jq объект будет, но длина коллекции объекта будет 0 (length 0). Для проверки наличия элемента следует делать так: var x = $(‘a’) if(x.length>0)
Идентификаторы и классы Jquery
| $(‘#mydiv’) | получим элемент с id #mydiv |
| $(‘.mydiv’) | получим элемент с классом #mydiv |
| $(‘div’) | получим все дивы |
| $(‘div.mydiv’) | получим все элементы с классом mydiv |
Иерархия элементов Jquery
| $(‘div h1’) | все h1 внутри div |
| $(‘div’).find(‘h1’) | все h1 внутри div |
| $(‘div > h1’) | все h1 внутри div, где h1 потомок div |
| $(‘div, h1’) | все div и h1 |
| $(‘h1 + img’) | все картинки после h1 |
| $(‘#mydiv’).prev() | элемент, который стоит перед элем. с ид mydiv |
| $(‘#mydiv’).next() | элемент, который стоит после элем. с ид mydiv |
| $(‘*’) | все элементы на странице |
| $(‘span > *’) | все элементы на странице которые потомки span |
| $(‘span’).children() | все потомки span |
| $(‘span’).parent() | все предки span |
| $(‘span’).parents() | все предки span |
| $(‘span’).parents(‘a’) | все предки span, которые a |
Фильтрация элементов Jquery
| $(‘a:first’) | первая ссылка |
| $(‘a:last’) | последняя ссылка |
| $(‘div:not(.mydiv)’) | див без класса mydiv |
| $(‘a:even’) | четнные ссылки |
| $(‘а:odd’) | нечетные ссылки |
| $(‘a:eq(4)’) | ссылка по счёту 4 |
| $(‘a:gt(4)’) | ссылка с индексом больше 4 |
| $(‘a:lt(4)’) | ссылка с индексом меньше 4 |
| $(‘:header’) | получим все заголовки документа |
| $(‘div:contains(«мой текст»)’) | вернёт див с текстом «мой текст» |
| $(‘div:empty’) | получим пустые дивы |
| $(‘div:has(a)’) | див содержащий ссылки |
| $(‘span’).filter(‘.myclass’) | спан содержащий класс myclass |
| $(‘div:hidden’) | получим скрытые дивы |
| $(‘div:visible’) | полчим видимые дивы |
| $(«div[style]») | все блоки с атрибутом style |
| $(«div[title = ‘abc’]») | все блоки с атрибутом title «abc» |
| $(«div[title != ‘abc’]») | все блоки с атрибутом title без «abc» |
| $(«div[title ^= ‘ab’]») | блоки с атрибутом title который начинается с «ab» |
| $(«div[title $= ‘bc’]») | блоки с атрибутом title который заканчивается на «bc» |
| $(«div[title *= ‘xz’]») | блоки с атрибутом title в котором есть «xz» |
Работа с формами
| $(«:text») | инпуты с атрибутом тип text |
| $(«:radio») | инпуты с атрибутом тип text radio |
| $(«input:enabled») | включенные инпуты |
| $(«input:checked») | выбранные чекбоксы |
| $(«form select option:selected») | активные блоки select |
| $(«form :radio[name=abc]:checked»).val() | выбираем активный радибютон с значением abc и получаем его значение |
| $(«form :checkbox:checked») | выбираем все активные чекбоксы |
Стили Jquery
| myelem.css() | задаём элем. стиль |
| myelem.addClass(‘myclass’) | К элементу добавит myclass |
| if(myelem.hasClass(‘myclass’)) | Проверяет существует ли myclass |
| myelem.removeClass(‘myclass’) | Удаляет myclass |
| myelem.toggleClass(‘myclass’) | Создаёт если существует, если нет то удаляет |
| myelem.attr(‘class’, ‘myclass’) | У элемента создаётся атрибут myclass |
| myelem.removeAttr(‘myclass’) | Удаляет атрибут myclass |
| myelem.html(«Мой текст») | вставляет в елемент текст или html код |
| alert(myelem.html()) | выводит в аллерт значение элемента |
| alert($(‘input’).val()) | выводит в аллерт значение элемента формы |
| myelem.after(« мой блок «) | добавит перед элементом див с текстом мой блок |
| myelem.before(« мой блок «) | добавит после элемента див с текстом мой блок |
| myelem.append(« мой блок «) | добавить в начало иерархии |
| myelem.prepend(« мой блок «) | |
| myelem.wrap(« мой блок «) | оборачиваем элем. в тег |
| myelem.empty() | очищаем значение элем. |
| elem.remove() | удаляем значение элем. |
Расположение элементов
| offset() или offset().top, offset().left | возвращает положение дом элемента в документе, данные выводятся как объект: < top: 20, left: 20 >или только top и left |
| offset(< top: 20, left: 20 >) | задаёт положение элемента дом по заданным координатам |
«Прокрутка» элементов
| scrollLeft() | вернёт значение «прокрученности» по горизонтали первого выбранного элем. |
| scrollLeft(val) | задаёт величину горизонтальной прокрутки для каждого заданного элемента |
| scrollTop() | вернёт значение «прокрученности» по вертикали первого выбранного элем. |
| scrollTop(val) | задаёт величину вертикальной прокрутки для каждого заданного элемента |
Работа с массивами и циклами
/*вывод кол-ва элементов в обёрнутом наборе*/ alert($('.topmenu a').size()); $('.topmenu a').each(function()< /*перебор всех элементов 'a' в меню по очереди и вывод их высоты*/ alert($(this).css('height')); /*вывод по очереди текста из теге Li*/ alert($(this).html()); >); События Jquery
События мыши
| .click() | отслеживает clik по элементу или запускает это действие |
| .dblclick() | отслеживает двойной click по элементу или запускает это действие |
| .hover() | отслеживает наведения или уход курсора с элемента |
| .mousedown() | отслеживает нажатия клавиши мышки или запускает это действие |
| .mouseup() | отслеживает поднятия клавиши мышки или запускает это действие |
| .mouseenter() | отслеживает появления курсора в области элемента или запускает это действие |
| .mouseleave() | отслеживает ухода курсора из области элемента или запускает это действие. |
| .mousemove() | отслеживает передвижения курсора в области элемента или запускает это действие |
| .mouseout() | отслеживает выход курсора из области элемента или запускает это действие |
| .mouseover() | отслеживает появления курсора в области элемента или запускает это действие |
| .toggle() | Поочереди исполняет одну из двух или более установленных функций при click по элементу |
Действия клавиатуры
| .keydown() | отслеживает переход клавиши клавиатуры в нажатое состояние или запускает это действие |
| .keyup() | отслеживает возвращение клавиши клавиатуры в отнажатое состояние или запускает это действие |
| .keypress() | отслеживает ввод символа с клавиатуры или запускает это действие |
События формы
| .focus() | Задаётся обработчик получения фокуса или запусикает это событие |
| .blur() | Задаётся обработчик потери фокуса или запускает это событие |
| .focusin() | Задаётся обработчик получения фокуса самим элементом или одним из его дочерних |
| .focusout() | Задаётся обработчик потери фокуса самим элементом или одним из его дочерних |
| .select() | Задаётся обработчик выделения текста или запускает это событие |
| .submit() | Задаётся обработчик отсылки формы или запускает это событие |
| .change() | Задаётсяа обработчик изменения элемента формы или запускает это событие |
События загрузки страницы
| .ready() | отслеживает готовность дерева дом |
| .load() | отслеживает завершение загрузки элемента |
| .unload() | Задаётся обработчик выхода со страницы. |
События браузера
| .error() | выдаёт ошибку при загрузке элемента, если тот отсутствует |
| .resize() | отслеживает изменения размеров окна браузера или запускает это действие |
| .scroll() | отслеживает «проскроленность» элементов документа или запускает это действие |
//делает див box то видимым то невидимым //при нажатии на див button $('#button').click(function()< $('#box').toggle(); >); Важно: console.log(this) возвратит DOM элемент тега li и мы не сможем к нему обратиться через jquery. Для того что бы нам возвращался элемент не DOM а JQ нужно писать console.log($(this))
Отмена действий
//Действия по умолчанию $('a').on('click', function(event)< event.preventDefault(); //для отмены перехода по ссылке раскоментир. //console.log(); >); //Всплытия пузырька $('*').on('click', function(event)< event.stopPropagation(); >); Анимация Jquery
| show( ) | показывает выбранный блок |
| hide( ) | скрывает выбранный блок |
| toggle( ) | переключение между show/hide |
| slideDown( speed, callback ) | выдвигает блок вниз тоесть увеличивает высоту от 0 до 100% |
| slideUp( speed, callback ) | задвигает блок вверх тоесть уменьшает высоту от 100% до 0 |
| slideToggle( speed, callback ) | переключение между slideDown/slideUp |
| fadeIn( speed, callback ) | показывает блок за счёт изменения прозрачности |
| fadeOut( speed, callback ) | скрывает блок за счёт изменения прозрачности |
| fadeTo( speed, opacity, callback ) | изменяет прозрачность блока до заданного значения |
| fadeToggle( speed, callback ) | переключение между fadeIn/fadeOut |
//animate( properties, [ duration ], [ easing ], [ callback ] ) $("#buttonAppend").click(function()< //$("li").hide(); //$("li").toggle(); //$("li").animate(, 3000); $("li").animate(, 1000).animate(, 1000); >); $("#buttonSlideDown").click(function(elem)< //$("select").slideDown(5000); $("li").fadeIn(5000); >); $("#buttonSlideUp").click(function(elem)< //$("select").slideUp(5000); $("li").fadeOut(5000); >); jQuery alert()
In an application alert boxes are used to provide information at run time. These information helps user of applications to do tasks further with more information at runtime.
jQuery alert()
jQuery alert()
In this section we will discuss about alert box in jQuery.
In an application alert boxes are used to provide information at run time. These information helps user of applications to do tasks further with more information at runtime. Alert box can be popped up after happening an event such as click event or after completing a line of code execution. .click() function in jQuery helps in to bind the click event, JavaScript event.
Here I am giving a simple example which will demonstrate you about how an alert box can display information. In this example we will display an alert box after clicking a button and the click event is generated. When a user will execute this example and click on the button then the alert box will be displayed.
jQueryAlertExample.html
p < color:red; margin:5px; cursor:pointer; >p:hoverClick on button
To run the above example you will have to download the jquery-1.9.1.js file. When you will run the above example then the output will be as follows :
Tutorials
- What is jQuery?
- Downloading and Installing jQuery
- jQuery to Retrieve Server’s Current Time
- jQuery Load Content
- jQuery to Vertical Image Scroller
- jQuery Toggle the Div
- jQuery to text changes with fading effect
- jQuery to text changes with sliding effect
- jQuery Drop Down Menu
- jQuery chain-able state of transition
- jQuery To Simple tabs
- jQuery to Simple Image Scroller
- jQuery To Slide Effects tabs
- jQuery to Show Data Randomly
- jQuery to Post Data Check
- jQuery to Image Changes With Sliding Effect
- jQuery to Image Magnifier
- jQuery to Image Changes With Fading Effect
- jQuery to «Hello World»
- jQuery To Fade Effects tabs
- jQuery to validate Email Address
- jQuery To Hide the Div
- jQuery To Custom tabs
- jQuery to Select Multiple CheckBox
- jQuery To callback tabs
- jQuery to Auto Image Scroller
- No Max-height Fixed
- With Fixed Max-Height
- jQuery — jQuery Tutorials and examples
- jQuery — jQuery Tutorials and examples
- jQuery Demos
- jQuery Features
- jQuery Hello World
- jQuery Hello World alert
- How jQuery works?
- jQuery with other libraries
- jQuery Utility Functions
- jQuery selectors
- Use of Selectors
- jQuery CSS Selector
How to Create jQuery Alert Message Box in HTML
In this tutorial, learn how to create or add a jQuery alert message box in HTML content. The short answer is to use the jQuery alert() and pass the content as the argument to display on alert.
jQuery offers many useful functions to use and perform various useful tasks for your application. The jQuery alert message is one of the best ways to display notifications to users. While writing any code, you have to use alert messages on the click of the button or occurring of some event.
What is jQuery Alert Message Box?
An alert message is a notification or information that you can provide to the users on occurring of some event. It is a message box of browser-defined default size which comes on click of some button or opening of a page. When someone submitting a form or going from one page to another page you bother to display an alert box.
Below is the simple alert box that displays when someone clicks on a button. You can click the below button to see the alert message box.
Get Alert Click this button to see the alert message now.
You can use an alert message box to display a warning, success, or informational messages to the users who come to your web page.
How to Write and Create jQuery Alert Message Box
To write alert messages box to display important notifications to users, you have to use the jQuery alert() . It depends upon you which occurrence of the event, you want to show the alert messages box.