Підказки та прийоми з програмування на jQuery
Це стаття-шпаргалка по програмуванню на jQuery. Тут для зручності я зібрав прийоми і часто використовувані мною функції при програмуванні. Стаття буде поповнюватися в міру необхідності.
Зміст
q = $ ( 'li label> input: checkbox'); $ ( 'Input: checkbox: checked'); $ ( '[Data-k = король]'); // коли значення атрибута задано в одне слово $ ( '[data-k = "король голий"]'); // коли значення атрибута задано декількома словами $ ( 'input [name = "txt1"]'); // вибрати елемент на ім'я $ (this) .parent ( "li"); // вибрати безпосередньо батьківський з тегом li елемент зазначеного елемента $ (this) .parents ( "li"); // вибрати на будь-якому рівні батьківський з тегом li елемент зазначеного елемента $ (this) .children ( "li"); // вибрати всіх дітей з тегом li зазначеного елемента slo = $ (this) .prev ( "a"). Html (); // попередній елемент з тегом a slo = $ (this) .next ( "a"). Html (); // наступний елемент з тегом a res1 = $ ( ". Disl: first"); res2 = $ ( ". disl: last");Нумерація починається від 1.
$ ( "# Town: nth-child (2)"). Attr ( "selected", "selected"); // буде обраний 2-й елемент з початку $ ( "# town: nth-child-last (2)"). Attr ( "selected", "selected"); // буде обраний 2-й елемент з кінця $ ( "# town option: nth-child (3)"). After ($ ( '<option value = "Voronezh"> Вороніж </ option>')); // додати новий елемент option в списку select після 3-го елемента з початку $ ( 'div: not (#foo)'); // вибере все div, у яких id НЕ foo $ ( 'div: not (.foo)'); // вибере все div, у яких класах не foo $ ( 'div: has (a)'); // поверне все div, всередині яких міститься тег a $ ( 'div: not (: has (a))'); // поверне все div, всередині яких не міститься тег aВластивість length працює швидше, ніж метод size (), тому його використання переважніше.
sl = $ ( ". ol2col li"). length; // поверне кількість li в списку sl = $ ( "select [id = town] option"). Size (); // поверне кількість елементів option в списку select $ ( "# town option: selected"). Text (); $ ( "# Foo"). Height (); // реальна висота елемента $ ( "# foo"). InnerHeight (); // реальна висота елемента з урахуванням padding $ ( "# foo"). OuterHeight (); // реальна висота елемента з урахуванням padding і border-width $ ( "# foo"). OuterHeight (true); // реальна висота елемента з урахуванням padding, border-width і margin $ ( "# foo"). Width (); // реальна ширина елемента $ ( "# foo"). InnerWidth (); // реальна ширина елемента з урахуванням padding $ ( "# foo"). OuterWidth (); // реальна ширина елемента з урахуванням padding і border-width $ ( "# foo"). OuterWidth (true); // реальна ширина елемента з урахуванням padding, border-width і margin h1 = document.body.clientHeight; // висота вікна браузера виключаючи смугу прокрутки w1 = document.body.clientWidth; // ширина вікна браузера виключаючи смугу прокрутки h2 = window.innerHeight; // висота вікна браузера включаючи смугу прокрутки (зазвичай = h1) w2 = window.innerWidth; // ширина вікна браузера включаючи смугу прокрутки (зазвичай = w1 + 17px) le = $ (this) .offset (). Left; // відстань зліва to = $ (this) .offset (). Top; // відстань зверху $ ( "# foo"). Position (). Left; // відстань зліва $ ( "# foo"). Position (). Top; // відстань зверху z = $ (this) .val (); // отримати значення атрибута value тега input z = $ ( "div"). Html (); // отримати дані, що містяться між відкриває і закриває тегом div z = $ ( "label"). Text (); // отримати текст всередині тега label виключаючи містяться в ньому інші теги $ ( '. Ool label> [type = "checkbox"]'). Prop ( 'checked'); // повертає true, якщо checkbox відзначений і false - якщо немає el = $ ( '[name = "vop"]: checked'). Val (); // покаже вибране значення серед радіо-кнопок з name = "vop"У змінну max потрапить довжина, в змінну elem - сам елемент.
var A = $ ( '. ol2col li span'), max = 0, elem; A.each (function () {if (this.offsetWidth> max) max = this.offsetWidth, elem = this;}); $ ( ". Zn"). Css ( "left", "245px"); // якщо властивість одне $ ( ". Zn"). Css ({ "left": "100px", "top": "150px"}); // якщо властивостей кілька $ ( ". Elm"). Css ( "height", ""); // видалить з атрибута style елемента elm властивість height $ ( ". Elm"). Attr ( "style", ""); // видалить всі css-властивості, що містяться в атрибуті style у елемента elm $ ( ". Zn"). Attr ( "class", "spp"); // якщо атрибут один $ ( ". Zn"). Attr ({ "class": "spp", "title": "Тема"}); // якщо атрибутів кілька $ ( '. Elm'). RemoveAttr ( "style"); // видалить атрибут style у елемента elm, з усіма css-властивості в ньому $ ( "div"). Html ( "мороз <br> і сонце"); // замінити вміст тега div (теги будуть сприйняті в структуру DOM) $ ( "label"). Text ( "мороз <br> і сонце"); // замінити текст тега label (теги НЕ будуть сприйняті в структуру DOM) $ (this) .val ( "король"); // замінити значення атрибута value тега input $ ( 'textarea [name = "tx"]'). Val ( "король \ nголий"); // замінити вміст многострочного текстового поля textarea $ ( '. Ool label> [type = "checkbox"]'). Prop ( 'checked', true); // встановити пташку в checkbox $ ( '# town option: selected'). Each (function () {this.selected = false;}); $ ( ". Mr li span"). Click (function () {// команди}); $ ( "Body"). On ( "click", "#psk", function () {// команди}); $ (Document) .click (function (event) {if ($ (event.target) .closest ( '# foo'). Length) return; // команди event.stopPropagation ();}); $ ( "Body"). On ( "focusout", ".new", function () {// команди}. Подія установки або зняття пташки.
$ ( 'Li label> input: checkbox'). On ( "change", function () {// команди});Оброблювач відразу для двох подій mouseenter і mouseleave.
$ ( '# MyId'). Hover (function () {alert ( 'Навели');}, function () {alert ( 'Відвели');});Оброблювач mouseover стоїть на контейнері буде ініціювати спрацьовування події кожен раз при наведенні курсору на дочірні елементи, mouseenter - ініціює спрацьовування події одного разу при наведенні курсору на поточний елемент.
$ ( '# Foo'). Mouseenter (function () {alert ( 'Навели');}); $ ( '# Foo'). Mouseover (function () {alert ( 'Навели');});Оброблювач mouseout стоїть на контейнері буде ініціювати спрацьовування події кожен раз при виході з дочірніх елементів, mouseleave - ініціює спрацьовування події одного разу при виході курсора з поточного елемента.
$ ( '# Foo'). Mouseleave (function () {alert ( 'Відвели');}); $ ( '# Foo'). Mouseout (function () {alert ( 'Відвели');}); $ ( '# MyColor [type = "color"]'). On ( 'input', function () {d = 'a {color:' + $ (this) .val () + ';}'; alert ( d);}); $ ( 'Select'). On ( "change", function () {// команди}); $ ( "Input, textarea"). Bind ( "change paste keyup", function () {// команди}); $ ( "<Div>", {id: "psk", text: "Привіт!", Css: { "left": "100px", "top": "120px"}}). AppendTo ( "body") ; $ (This) .before ( '<a name="k1"> </a>'); // поставимо мітку перед зазначеним елементом $ (this) .after ( '<a name="k2"> </a>'); // поставимо мітку після зазначеного елемента $ ( '# my1'). AppendTo ( '# cont'); // запише елемент my1 всередину елемента cont в самому його кінці $ ( '# my2'). PrependTo ( '# cont'); // запише елемент my2 всередину елемента cont в самому його початку $ ( '# cont'). Append ($ ( '# my1'). Parent ( "li")); // переміщаємо елемент всередину cont в самому його кінці $ ( '# cont'). Prepend ($ ( '# chbb'). Html ()); // переміщаємо вміст всередину cont в самому його початку el = $ ( ". Hello"). Clone (); // клонує елемент hello з усім його вмістом в змінну el $ ( ". Hello"). Clone (). AppendTo ( ". Container"); // скопіює елемент hello в кінець елемента container, при цьому оригінальний hello також залишиться на своєму старому місці $ ( "# psk"). Remove (); $ ( '. Zn'). Each (function (i) {// звернутися до поточного елементу можна через $ (this) // i - це лічильник, порядковий номер елемента в перебирається наборі (рахунок починається з 0)}); function sorting (res, isAscOrder) {var mylist = $ (res); var listitems = mylist.children ( 'li'). get (); listitems.sort (function (a, b) {var compA = $ (a) .text (). toUpperCase (); var compB = $ (b) .text (). toUpperCase (); return (isAscOrder? 1: - 1) * ((compA <compB)? -1: (compA> compB)? 1: 0);}); isAscOrder =! isAscOrder; $ .Each (listitems, function (idx, itm) {mylist.append (itm);}); } Sorting ( '# myul', true); // запуск сортування для списку myul в прямому порядку sorting ( '# myul', false); // запуск сортування для списку myul в зворотному порядку $ ( '# frm'). Submit (); $ (This) .hide (); // приховати елемент (місце займане елементом залишається за ним) $ (this) .show (); // показати елемент $ ( ". New"). Focus (); h1 = Math.ceil (5.2); // поверне 6 - округлює в більшу сторону h2 = Math.round (5.2); // поверне 5 - округлює за математичними правилами h2 = Math.round (5.5); // поверне 6 - округлює за математичними правилами h3 = Math.floor (5.2); // поверне 5 - округлює в меншу сторону str = "привіт"; pm = $ .trim (str); // поверне: 'привіт'Нумерація починається від 0. Позиція першого символу - включається, позиція останнього символу не включається.
var str = "Моя рядок" str.substring (0,3) // Моя (позіція1 д.б <позіція2) str.substring (3,0) // Моя (якщо позіція1> позіція2, то це рівнозначно тому, що позіція1 <позіція2) str.substring (1,2) // про str.substring (4) // "рядок" (якщо позіція2 не задана, то повертає до кінця рядка)Нумерація починається від 0.
var str = "abcdefghij"; str.substr (1,2); // bc str.substr (-3,2); // hi (якщо позиція <0, то відлік починається з кінця рядка) str.substr (-3); // hij (якщо довжина не задана, то повертає до кінця рядка) str.substr (1); // bcdefghij str.substr (-20,2); // ab (якщо позиція <0 і позиція по модулю> довжини рядка, то позиція = 0) str.substr (20,2); // "" (якщо позиція> довжини рядка, то повертає порожній рядок) str = text.toLowerCase (); // поверне все символи рядка в нижній регістр str = text.toUpperCase (); // поверне все символи рядка в верхньому регістрі str = str.charAt (0) .toUpperCase () + str.substr (1) .toLowerCase (); // поверне перший символ рядка в верхньому регістрі, інші - в нижньому var arr = []; // створити порожній масив var arr = [ "Яблуко", "Апельсин", "Слива"]; // створити масив (нумерація масиву починається з індексу 0 автоматично) arr [9] = 5; // задати значення масиву за індексом k = arr [0]; // привласнити значення змінної за індексом масиву r = arr.length; // дізнатися кількість елементів масиву включаючи порожні елементи (вважає як останній індекс + 1) var myArray = {}; // створити порожній асоціативний масив myArray [ "ключ1"] = "значення1"; // задати значення асоціативного масиву по строковому ключу k = myArray [ "ключ1"]; // привласнити значення змінної по ключу асоціативного масиву r = Object.keys (myArray) .length; // дізнатися кількість елементів асоціативного масиву for (i = 1; i <arr.length; i ++) {alert (arr [i]); } For (key in myArray) {alert (key + "=" + myArray [key]); } Var i = 0; while (i <3) {alert (i); i ++; } Var i = 0; do {alert (i); i ++; } While (i <3); id = 5; sl = 'тест'; // змінні для передачі в php-скрипт $ .ajax ({type: "POST", url: "http://domain.ru/script.php", data: "id =" + id + "& sl =" + sl, success: function (msg) {alert (msg); // виведемо результат, який прийшов від сервера}}); // Перетворення в рядок var a = String (55); // "55" var a = String (null); // "null" var a = String (false); // "false" var a = String (undefined); // "undefined" var a = true + "test"; // "truetest" var a = "123" + undefined; // "123undefined" // Перетворення в число var a = + "123"; // 123 var a = + "1.55"; // 1.55 (для коректного перетворення в число в рядку повинні бути тільки цифри і не більше однієї точки) var a = parseInt ( "123ab", 10); // 123 (10 - десяткова система числення) var a = + "\ n 123 \ n \ n"; // 123 (прогалини і переноси рядків попередньо обрізаються) var a = + true; // 1 var a = + false; // 0 var a = + undefined; // NaN var a = + null; // 0 // Перетворення в логічний тип var a = !! 2; // true var a = !! "тест"; // true var a = !! $ ( "# mel"); // true var a = !! 0; // false var a = !! ""; // false var a = !! null; // false var a = !! undefined; // false var a = !! NaN; // false a = x% y // поверне залишок про цілочисельного ділення 12% 5 // 2 -1% 2 // -1 NaN% 2 // NaN 1% 2 // 1 2% 3 // 2 -4% 2 // -0 5.5% 2 // 1.5 function hello (a, b) {z = a + b; return z; } S = hello ( 'frm', 3); var timerId = setTimeout (function () {alert ( 'Привіт'); // цей код буде виконаний через 1000 мілісекунд або 1 секунду} 1000); clearTimeout (timerId); // скасує виконання таймера в змінної timerId, якщо ця команда буде виконана раніше, ніж настане час виконання таймера var timerId = setInterval (function () {alert ( "тик"); // цей код виконається через 2 секунди і далі буде виконуватися кожні 2 секунди}, 2000); clearInterval (timerId); // скасує виконання інтервального функції в змінної timerId setTimeout (function run () {res = func (i); // запуск якоїсь своєї функції zd = res +1500; setTimeout (run, zd); // запустить саму себе ще раз через 1,5 секунди, якщо попередня функція повернула 0} 1000); // виконається через 1 секунду HTML: <p class = "sptl"> спойлер1 </ p> <div> <p> Прихований текст для <br> першого спойлера </ p> </ div> <p class = "sptl" > спойлер2 </ p> <div> <p> Прихований текст для другого спойлера </ p> </ div> $ ( ". sptl"). next (). hide (); // за замовчуванням спойлери приховані $ ( ". Sptl"). Click (function () {$ (this) .next (). SlideToggle ();}); // приховати-відкрити спойлер при натисканні $ ( '. Foo'). SlideToggle (1000, sdvig); // де функція sdvig виконається після відпрацювання анімаціїЧитайте всі статті з IT - Шпаргалки по програмуванню:
Мітки: checkbox , html , input , javascript , jquery , атрибут , вибрати , значення , змінити , масив , підказка , програмування , подія , вміст , тег , дізнатися , умова , фокус , цикл , шпаргалка , елементПоділитися статтею:
ToUpperCase (); return (isAscOrder? 1: - 1) * ((compA <compB)?CompA> compB)?