Мой Справочник | JS | jQuery-функции

Мой Справочник | JavaScript | jQuery-функции

HTML-манипуляции
.html() создание вложенных html-тегов	`<h1>Заголовок</h1> $('h1').html('<u>Новый заголовок</u>');` `<h1><u>Новый заголовок</u></h1>`	Создаёт вложенные html-теги и меняет содержимое
.text() замена текста	`<h1>Заголовок</h1> $(function() { $('h1').text('Новый заголовок'); });` `<h1>Новый заголовок</h1>`	Меняет содержимое html-тегов, не создаёт вложенных. Даже если написать скобки <, они будут отражены как символ
.prepend() добавление во внутрь в начало	`<h1>Заголовок</h1> $('h1').prepend('<span>Some text</span>');` `<h1><span>Some text</span>Заголовок</h1>`	Добавляет html-тег во внутрь выбранного элемента в начало
.append() добавление во внутрь в конец	`<h1>Заголовок</h1> $('h1').append('<span>Some text</span>');` `<h1>Заголовок<span>Some text</span></h1>`	Добавляет html-тег во внутрь выбранного элемента в конец
.before()	`<h1>Заголовок</h1> $('h1').before('<span>Some text</span>');` `<span>Some text</span> <h1>Заголовок</h1>`	Добавляет html-тег до выбранного элемента
.after()	`<h1>Заголовок</h1> $('h1').after('<span>Some text</span>');` `<h1>Заголовок</h1> <span>Some text</span>`	Добавляет html-тег после выбранного элемента
.remove()	`<h1>Заголовок</h1> $('h1').remove();`	Удаляет выбранный html-тег
.replaceWith()	`<h1>Заголовок</h1> $('h1').replaceWith('<p>New tag</p>'); <p>New tag</p>`	Заменяет выбранный html-тег на новый
.attr() .hasAttr()	`<h1>Атрибут, наличие атрибута</h1> $('h1').attr('style', 'color:red;'); <h1 style="color: red;">Заголовок</h1>`	Установить аттрибут Можно также получать значение аттрибута сохранив его в переменную `var attrH1 = $("h1").attr("style");`
.removeAttr()	`<h1 class="title">Заголовок</h1> $('h1').removeAttr('class'); <h1>Заголовок</h1>`	Удалить аттрибут
.clone()	`$(".hello").clone() // сделаем копию элемента hello .addClass("newElement") // добавим копии класс newElement .text("И снова ... ") // изменим текст внутри нее .append(".container"); // вставим элемента container` <div class="container"> <div class="hello">Привет</div> <div class="goodbye">Пока</div> <div class="hello newElement">И снова ...</div> </div>	Склонировать элемент
.not()	`$('ul li').not(this).show();`	Не текущий элемент
DOM-манипуляции
.parent()	Родитель	Возвращает массив
.parents()	Все родители	Возвращает массив
.child()	Потомок
.children()	Все потомки
.siblings()	Все родственники на одном уровне
.eq()	`$("div").eq(8); $("#nav").children().eq(2); .get() - на чистом JS`	Выбрать 9-й div во всём документе Выбрать третий дочерний элемент внутри элемента с id="nav"
.empty()	Удалить потомков, либо удалить текст внутри тега, сам тег удалён не будет
.next() .prev()	Следующий/Предыдущий элемент на одном уровне
.nextAll() .prevAll()	Следующие/Предыдущие элементы на одном уровне
CSS-манипуляции
.addClass()	`<h1>Заголовок</h1> $('h1').addClass('title'); <h1 class="title">Заголовок</h1>`	Добавляет класс выбранному элементу
.removeClass()	`<h1 class="title">Заголовок</h1> $('h1').removeClass('title'); <h1>Заголовок</h1>`	Удаляет класс у выбранного элемента
.toggleClass()	`<h1 class="title-big">Заголовок</h1> $('h1').toggleClass('title-small'); <h1 class="title-small">Заголовок</h1>`	Переключает класс
.css()	`$('h1').css('border', '1px solid #000');` `// передать несколько свойств $('h1').css({"color":"red", "border":"1px solid red"});`	Изменить css-свойство
.height() .innerHeight() .outerHeight()		Высота элемента, Высота (с padding) Полная высота (с padding и border)
.width() .innerWidth() .outerWidth()		Ширина элемента, Ширина (с padding), Полная ширина (с padding и border)
.hide() .show() .toggle()	`$('.test').toggle('slow');`	Скрыть-показать элемент (аналог display: none;), .toggle() переключает эти состояния, можно указывать значения в милисекундах или ключевые слова
.offset().top;	`// Значение отступа в пикселях от верха окна браузера до .some-class сохраняем в переменную someVar var someVar = $(".some-class").offset().top;`	Вертикальный отступ
.find()	`$('h1 a') === $('h1').find('a');`