// jQuery
$('body').css('background-color')
// Plain JS
getComputedStyle(document.body)['background-color']
// Вместо этого
$('#submit').onclick(function(){
//...
});
// Используйте это
$('form[name="form"]').on('submit', function(event) {
event.preventDefault();
// Отправка формы будет работать по кнопке Отправить, по нажатию Enter
// и не будет перезагружать страницу при отправке
$.ajax({
url: 'main.php',
method: 'POST',
// Метод jQuery для сериализации форм (https://api.jquery.com/serialize/)
data: $(this).serialize(),
success: function() {
alert('Успех');
},
error: function() {
alert('Ошибка');
}
});
});
$('form').on('submit', function(event) {
event.preventDefault();
console.log('https://site.com?' + $(this).serialize());
});
_btn.one('click', function(e){
var _html = _more.clone();
_html.hide().appendTo(_box).fadeIn(300);
console.log(_html);
});
_html.hide().appendTo(_box).slideDown(300);
<div class="controll">
<button type="button" data-value="all">All</button>
<button type="button" data-value="books">Books</button>
<button type="button" data-value="film">Film</button>
<button type="button" data-value="music">Music</button>
</div>
<div class="box">
<div class="item" data-value="books">
Books
</div>
<div class="item" data-value="film">
Film
</div>
<div class="item" data-value="music">
Music
</div>
<div class="item" data-value="books">
Books
</div>
<div class="item" data-value="film">
Film
</div>
</div>
(function($) {
'use strict';
$('button', $('.controll')).on('click', function(event) {
event.preventDefault();
var value = $(this).data('value');
if (value === 'all') {
$('.item', $('.box')).fadeIn(300);
} else {
$('.item[data-value!="'+ value +'"]', $('.box')).hide();
$('.item[data-value="'+ value +'"]', $('.box')).fadeIn(300);
}
});
})(jQuery);