var items = $('.item'),
per = 4,
i = 1,
total = 0;
$('.more').on('click', function(){
total = per * (i++);
items.slice(0, total).show();
$(this)[total >= items.length ? 'hide' : 'show']();
}).click();function extend() {
for (var i = 1; i < arguments.length; i++)
for (var key in arguments[i])
if (arguments[i].hasOwnProperty(key))
arguments[0][key] = arguments[i][key];
return arguments[0];
}
function test(value) {
var defaults = {
check: 0,
point: true
};
return extend(defaults, value);
}
console.log( test() ); // Object { check=0, point=true}
console.log( test({check: 555}) ); // Object { check=555, point=true}
console.log( test({check: 10, point: false}) ); // Object { check=10, point=false}var chbx = $(':checkbox');
chbx.on('change', function(){
chbx.next('span').text('');
chbx.filter(':checked').next('span').text('checked');
});var list = document.querySelectorAll('[id^="list-block"]');
[].forEach.call(document.querySelectorAll('[id^="wow-block"]'), function(el, i){
if (el.classList.contains('this')) {
list[i].classList.add('active');
}
});<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Загрузка файла по URL</title>
<style type="text/css">
@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css');
body {
padding: 20px;
}
</style>
<script src="../js/jquery-2.1.4.min.js"></script>
</head>
<body>
<form class="form-horizontal" id="img2b64">
<h2>Input</h2>
<div class="form-group">
<label class="col-sm-2 control-label">Convert via:</label>
<div class="col-sm-10">
<select class="form-control" name="convertType">
<option value="Canvas" selected>Canvas</option>
<option value="FileReader">FileReader</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">URL:</label>
<div class="col-sm-10">
<input type="url" name="url" class="form-control" placeholder="Insert an IMAGE-URL" value="http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" required />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-default">
</div>
</div>
</form>
<div class="output form-horizontal" style="display: none">
<hr>
<h2>Output</h2>
<div> <strong class="col-sm-2 text-right">Converted via:</strong>
<div class="col-sm-10"> <span class="convertType"></span> </div>
</div>
<div> <strong class="col-sm-2 text-right">Size:</strong>
<div class="col-sm-10"> <span class="size"></span> </div>
</div>
<div> <strong class="col-sm-2 text-right">Text:</strong>
<div class="col-sm-10">
<textarea class="form-control textbox"></textarea>
</div>
</div>
<div> <strong class="col-sm-2 text-right">Link:</strong>
<div class="col-sm-10"> <a href="#" class="link"></a> </div>
</div>
<div> <strong class="col-sm-2 text-right">Image:</strong>
<div class="col-sm-10"> <img class="img" alt=""> </div>
</div>
</div>
<script>
// Конвертируем файл с помощью Canvas
function convertImgToDataURLviaCanvas(url, callback, outputFormat) {
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
canvas = null;
};
img.src = url;
}
// Конвертируем файл с помощью FileReader
function convertFileToDataURLviaFileReader(url, callback) {
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.send();
}
$('#img2b64').submit(function(event) {
var imageUrl = $('[name=url]',this).val(),
convertType = $('[name=convertType]',this).val(),
convertFunction = convertType === 'FileReader' ?
convertFileToDataURLviaFileReader :
convertImgToDataURLviaCanvas;
convertFunction(imageUrl, uploadImageToServer);
event.preventDefault();
});
function uploadImageToServer (base64Img){
$.ajax({
url: 'upload.php',
type: 'POST',
data: {
image: base64Img
},
success: function(result){
}
});
}
</script>
</body>
</html><?php
if(!empty($_POST['image'])) {
$data = explode(',', $_POST['image']);
file_put_contents('my-image.png',base64_decode($data[1]));
}$('paren_static_element').on('event', 'child_dinamic_elemnet', function(){
});<button cart_reload='["cart_items","item_col_out"]'>Single quotes</button>
<!-- или -->
<button cart_reload="["cart_items","item_col_out"]">Entity</button>var order = ['Erofeev', 'Harms', 'Pushkin'],
ia, ib;
$('#testWrapper div').sort(function(a, b) {
ia = order.indexOf(a.id);
ib = order.indexOf(b.id);
if (ia < 0 && ib >= 0) {
return 1;
}
if (ia >= 0 && ib < 0) {
return -1;
}
return ia - ib;
}).appendTo('#testWrapper');var order = ['Erofeev', 'Harms', 'Pushkin'],
ia, ib;
$('#testWrapper div').sort(function(a, b) {
ia = order.indexOf(a.id);
ib = order.indexOf(b.id);
if (ia < 0 || ib < 0) {
return -ia - -ib;
}
return ia - ib;
}).appendTo('#testWrapper');var arr = [];
$('img:not(img + img)').each(function() {
arr.push( $(this).nextUntil(':not(img)').andSelf() ) ;
});
console.log(arr);$('img:not(img + img)').each(function() {
$(this).nextUntil(':not(img)').andSelf().wrapAll('<div />');
});var td = $('#timeGrid td'),
selection = {
single: function(el) {
td.not(el).removeClass(this.cl);
this.ctrl(el);
},
shift: function(el) {
if (typeof this.last !== 'number') {
return this.single(el);
}
var till = $(el).index(this.slcr),
from = this.last;
if (from > till) till = [from, from = till][0];
td.not(td.eq(this.last)).removeClass(this.cl);
td.slice(from, till).add(el).addClass(this.cl);
},
ctrl: function(el) {
$(el).addClass(this.cl);
this.last = $(el).index(this.slcr);
console.log(this.last);
},
slcr: '#timeGrid td',
cl: 'pressedTime',
last: null
};
td.on('click', function(e) {
method = !e.shiftKey && !e.ctrlKey ? 'single' : (e.shiftKey ? 'shift' : 'ctrl');
selection[method](this);
});var table = $('#timeGrid'),
td = $('td', table),
selection = {
single: function(el) {
td.not(el).removeClass(this.cl);
this.ctrl(el);
},
shift: function(el) {
if (typeof this.last !== 'number') {
return this.single(el);
}
var till = $(el).index(this.slcr),
from = this.last;
if (from > till) till = [from, from = till][0];
td.not(td.eq(this.last)).removeClass(this.cl);
td.slice(from, till).add(el).addClass(this.cl);
},
ctrl: function(el) {
$(el).addClass(this.cl);
this.last = $(el).index(this.slcr);
},
slcr: '#timeGrid td',
cl: 'pressedTime',
last: null
};
var pressed = false;
td.on({
mousedown: function(e) {
method = !e.shiftKey && !e.ctrlKey ? 'single' : (e.shiftKey ? 'shift' : 'ctrl');
selection[method](this);
pressed = true;
},
mouseenter: function() {
if (pressed) {
selection.shift(this);
}
}
});
$(document).on('mouseup', '*', function(e) {
pressed = false;
});<button id="open">Открыть модальное окно</button>
<div class="modal-layer">
<div class="modal-content">
<!-- контент -->
</div>
</div>.modal-layer {
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
background: rgba(0, 0, 0, .5);
opacity: 0;
-webkit-transition: all .5s linear;
transition: all .5s linear;
}
.modal-layer::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-left: -0.36em;
}
.modal-content {
display: inline-block;
width: 75%;
padding: 15px;
border-radius: 10px;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, .5);
background: #fff;
vertical-align: middle;
}
.modal-layer.open {
visibility: visible;
opacity: 1;
}var modal = document.querySelector('.modal-layer');
document.getElementById('open').addEventListener('click', function() {
modal.classList.add('open');
document.body.style.overflow = 'hidden';
}, false);
modal.addEventListener('click', function(e) {
if (e.target === this) {
this.classList.remove('open');
document.body.style.overflow = 'auto';
}
}, false);var myselect = document.getElementById('myselect'),
selIndx = 0;
myselect.addEventListener('focus', function() {
selIndx = this.selectedIndex;
this.options[this.options.length - 1].selected = true;
}, false);
myselect.addEventListener('blur', function() {
this.selectedIndex = selIndx;
}, false);
myselect.addEventListener('change', function() {
selIndx = this.selectedIndex;
this.blur();
}, false);console.time() и console.timeEnd()) или профилирования (console.profile() и console.profileEnd()).var a = 'a',
b = 'b';
console.time("Test ==");
for(var i = 0; i < 1000; i++) {
if(a == b){}
}
console.timeEnd("Test ==");
console.time("Test ===");
for(var i = 0; i < 1000; i++) {
if(a === b){}
}
console.timeEnd("Test ===");var sel = document.querySelector('select');
sel.options[0].textContent = 'от ' + sel.options[0].textContent;
sel.addEventListener('change', function(){
var curIndex = this.selectedIndex;
[].forEach.call(this.options,function(opt, i){
if(i === curIndex) {
opt.textContent = 'от ' + opt.textContent;
} else {
opt.textContent = opt.textContent.replace(/[^\d]+/,'');
}
});
});[].forEach.call(this.options,function(opt, i){
opt.textContent = i === curIndex ? 'от ' + opt.textContent : opt.textContent.replace(/[^\d]+/,'');
});document.addEventListener('DOMContentLoaded', function(){
// весь ваш код тут
}, false);</body>