$
Может принимать контекст, исходя из которого будут выбираться элементы. Контекст, как и сам элемент может быть в виде:
.selector
, .context
)document.querySelector('.selector')
, document.querySelector('.context')
)document.querySelectorAll('.selector')
, document.querySelectorAll('.context')
) - в этом случае в качестве контекста выбирается первый подходящий элемент$
:var $p = $('p');
$($p); // вернёт исходный $p
$
В $
можно передать произвольную строку с HTML разметкой. В таком случае функция вернёт коллекцию, созданную с помощью данной строки:
var $p = $('<p class="hello there">Hello</p>'); // {0: p.hello.there, length: 1}
var $links = $('<a href="#0" class="hello there">Hello</a><a href="#0" class="hello there">Hello</a><a href="#0" class="hello there">Hello</a><a href="#0" class="hello there">Hello</a><a href="#0" class="hello there">Hello</a>');
// {0: a.hello.there, 1: a.hello.there, 2: a.hello.there, 3: a.hello.there, 4: a.hello.there, length: 5}
append
, prepend
, before
, after
Вставляют переданную HTML-строку или объект вида $
в разметку:
<!--Исходная разметка-->
<div class="container">
<button>Hello!</button>
</div>
$('.container').append('<p class="world">There!</p>');
<!--append-->
<div class="container">
<button>Hello!</button>
<p class="world">There!</p>
</div>
$('.container').prepend('<p class="world">There!</p>');
<!--prepend-->
<div class="container">
<p class="world">There!</p>
<button>Hello!</button>
</div>
$('.container').before('<p class="world">There!</p>');
<!--before-->
<p class="world">There!</p>
<div class="container">
<button>Hello!</button>
</div>
$('.container').after('<p class="world">There!</p>');
<!--after-->
<div class="container">
<button>Hello!</button>
</div>
<p class="world">There!</p>