<img data-gif-preload data-thumb="thumb.jpg" data-src="animation.gif">
(function($) {
'use strict';
$.each($('[data-gif-preload]'), function() {
$(this).attr('src', $(this).attr('data-thumb'));
$('<img/>', {
'src': $(this).attr('data-src')
}).on('load', function() {
$(this).attr('src', $(this).attr('data-src'));
}.bind(this));
});
})(jQuery);
var $test = $('.test');
$test.css({
color: 'red',
background: 'white'
});
console.log(oldCSS($test, ['color', 'background']));
function oldCSS($element, prop) {
var current = $element.attr('style');
var old = $element.removeAttr('style').css(prop);
$element.attr('style', current);
return old;
}
jQuery.fn.stylesheet = function(props) {
var current = this.attr('style');
var old = this.removeAttr('style').css(props);
this.attr('style', current);
return old;
};
var $test = $('.test');
$test.css({
color: 'red'
});
var color = $test.stylesheet('color');
console.log(color);
$('.table-results').on('click', '.test', function(e) {});
$('#create').on('click', function() {
$(this)
.after('<button class="test">Test</button>')
.next('.test')
.on('click', function() {
alert('CLICK');
});
});
var number = 0.1396943977836136;
// Сделаем из числа строку
var string = String(number);
// Возьмем последний символ строки, сделаем из него число и добавим 1
// Это будет готовый последний символ
var increment = Number(string[string.length - 1]) + 1;
// Удалим последний символ из строки и добавим готовый символ
var result = string.slice(0, -1) + increment;
console.log(result); //> 0.1396943977836137
function incrementDigits(number) {
var string = String(number);
return Number(string.slice(0, -1) + (Number(string[string.length - 1]) + 1));
}
incrementDigits(0.521512); //> 0.521513
var a = 1;
var b = 2;
var c = 3;
var a = 1, b = 2, c = 3;
var html = '<div class="container"><h1 class="title" data-attr="true" title="test">Title</h1><p class="text">Lorem ipsum dolor sit amet.</p></div>';
var $html = $(html);
$('h1.title', $html).text(); //> Title
$('h1.title', $html).attr('data-attr'); //> true
$('h1.title', $html).data('attr'); //> true
var $html = $.parseHTML(html);
function parseHTML(string) {
var template = document.implementation.createHTMLDocument();
template.body.innerHTML = string;
return template.body.children;
}
var html = parseHTML('<div class="container"><h1 class="title" data-attr="true" title="test">Title</h1><p class="text">Lorem ipsum dolor sit amet.</p></div>')[0];
html.querySelector('.title').getAttribute('data-attr'); //> "true"
http_build_query.js
если есть $.param(), чтобы перевести обратно можете создать свой небольшой метод или гуглите unparam, deparam
;(function($) {
$.extend({
unparam: function(param) {
if (param[0] === '?') param = param.slice(1);
var re = {};
for (var i = 0, arr = param.split('&'), kv; kv = arr[i]; i++) {
kv = kv.split('=');
re[kv[0]] = kv[1];
}
return re;
}
});
})(jQuery);
var param = $.param({
el_1: 'option_1_3',
el_2: 'option_1_2'
});
//> "el_1=option_1_3&el_2=option_1_2"
var decode = $.unparam(param);
//> {el_1: "option_1_3", el_2: "option_1_2"}
// 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('Ошибка');
}
});
});
$('body').text('Loading...');
makeAjax(function(data) {
$('body').html(function() {
var result = '';
for (var user in data) {
result += '<div>'+ data[user].name + ' (' + data[user].email +')</div>';
}
return result;
}());
});
function makeAjax(done) {
return $.ajax({
url: 'https://jsonplaceholder.typicode.com/users',
method: 'GET',
dataType: 'json',
success: function(data) {
setTimeout(function() {
if (done) done(data);
}, function(min, max) {
return Math.random() * (max - min) + min
}(2e3, 3e3));
}
});
}
dataType: 'text'
вставить dataType: 'json'
и в теле функции success
не нужно JSON.parse()
document.addEventListener('DOMContentLoaded', function(event) {
document.getElementById('phone').addEventListener('input', function() {
alert('!');
}, false);
});