js スニペット と メモ
目次
aがundefinedかどうか
if (typeof a === "undefined") {
//
}
以下の全てがfalseと判断される
if (undefined) {
// 実行されない
}
if (null) {
// 実行されない
}
if (0) {
// 実行されない
}
if ('') {
// 実行されない
}
if (false) {
// 実行されない
}
画像のプリロード
var _s = $('img').attr('src');
var _o = _s.replace(/\.\w+$/, '_o' + '$&');
$('
').attr('src', _o);
指定の画像が読み込み終わったら
var $img = new Image();
$img.onload = function() {
//読み込み終わったら
}
$img.src = 'img_path';
‘use strict’
‘use strict’は、関数単位に適用する
外部のコードが適用していない可能性があるため。
function neko() {
'use strict'
//
}
function inu() {
'use strict'
//
}
jQuery 要素の存在を確認してから実行
$('.neko').on('click',function(){
if ($('.inu')[0]) {
alert();
}
});
参考サイト
[JS][jQuery] 要素の存在を確認する6通りのコードと実行速度 | きほんのき即時関数
var inu = (function() {
return 1 + 2;
})();
論理演算子
var a = true;
if (a || b) {// この場合左辺のみ、評価される
//
}
if (b || a) {// この場合左辺から評価されるが、bは存在しないため、エラーになるので注意
//
}
for文
var arry = ['inu', 'neko', 'usagi'];
for (var i = 0; i < arry.length; i++) {
console.log(arry[i]);
}
//inu
// neko
// usagi
for (var i in arry) {
console.log(arry[i]);
}
//inu
// neko
// usagi
var arry = {
width : 100,
height: 200
};
for (var m in arry) {
console.log(m + ' '+ arry[m]);
}
// width 100
// height 200
配列の指定要素を削除する delete演算子
var fruits_array = ['apple','orenge','cherry','banana'];
delete fruits_array[2];
// ["apple", "orenge", undefined × 1, "banana"]
配列の指定要素を削除する spliceメソッド
var fruits_array = ['apple','orenge','cherry','banana'];
fruits_array.splice(2, 1);
// ["apple", "orenge", "banana"]
配列の指定要素を削除する 「指定の値」をもつ要素を削除する
var fruits_array = ['apple','orenge','cherry','banana', 'apple','cherry'];
for(i=0; i<fruits_array.length; i++){
if(fruits_array[i] == "cherry"){
fruits_array.splice(i, 1);
}
}
form on submit の無効化
$('form').on('submit',function() {
if (true) {
return false;
}
});
高さや幅を取得(横縦デバッグ)
$(function() {
if ($('#windowSizes').length < 1) {
$('body').append('<div id="windowSizes"></div>');
$('#windowSizes').css({
'background' :'rgba(0, 0, 0, 0.6)',
'color' : '#fff',
'position' :'fixed',
'top': 0,
'left' : 0,
'width': '200px',
'height' :screen.availHeight + 'px',
'padding' : '10px',
'z-index' : '999999'
});
}
function debug(text){
$('#windowSizes').html(text);
$('#windowSizes').css({
'height' :window.innerHeight
});
}
$(window).on('scroll touchmove resize',function() {
debug(''
+ '画面幅 => ' + screen.width
+ '<br>有効画面幅 => ' + screen.availWidth
+ '<br>表示領域幅1 => ' + window.innerWidth
+ '<br>表示領域幅2 => ' + $(window).width()
+ '<br>表示領域幅3 => ' + document.documentElement.clientWidth
+ '<br>ウィンドウ幅 => ' + window.outerWidth
+ '<br><br>==========<br>'
+ '<br>画面高 => ' + screen.height
+ '<br>有効画面高 => ' + screen.availHeight
+ '<br>表示領域高1 => ' + window.innerHeight
+ '<br>表示領域高2 => ' + $(window).height()
+ '<br>表示領域高3 => ' + document.documentElement.clientHeight
+ '<br>ウィンドウ高 => ' + window.outerHeight
+ '<br><br>==========<br>'
+ '<br>ドキュメント幅 => ' + $(document).width()
+ '<br>ドキュメント高 => ' + $(document).height()
);
});
});
簡易 上固定
if ($('#windowSizes').length < 1) {
$('body').append('<div id="windowSizes"></div>');
$('#windowSizes').css({
'background' :'rgba(0, 0, 0, 0.6)',
'color' : '#fff',
'position' :'fixed',
'top': 0,
'left' : 0,
'width': '100%',
'padding' : '10px',
'font-size': '10px',
'z-index' : '999999',
'overflow': 'scroll',
'max-height': '90%'
});
}
function debug(text){
$('#windowSizes').text(text);
}
window.onerror = function(msg, url, line, col, error) {
debug(msg);
};
高さや幅を取得(横縦デバッグ) 簡易 下固定
if ($('#windowSizes').length < 1) {
$('body').append('<div id="windowSizes"></div>');
$('#windowSizes').css({
'background' :'rgba(0, 0, 0, 0.6)',
'color' : '#fff',
'position' :'fixed',
'bottom': 0,
'left' : 0,
'width': '100%',
'padding' : '10px',
'z-index' : '999999',
'overflow': 'scroll',
'max-height': '100%'
});
}
function debug(text){
$('#windowSizes').text(text);
}
window.onerror = function(msg, url, line, col, error) {
debug(msg);
};
スクロールし終えたら発動
$(function(){
var setTimeoutId = null;
$(window).on('scroll',function(){
if( setTimeoutId ) {
clearTimeout( setTimeoutId ) ;
}
setTimeoutId = setTimeout( function() {
console.log('scroll');
setTimeoutId = null ;// setTimeoutIdを空にする
}, 500 ) ;
});
});
リサイズし終えたら発動
$(function(){
var setTimeoutId = null;
$(window).on('resize',function(){
if( setTimeoutId ) {
clearTimeout( setTimeoutId ) ;
}
setTimeoutId = setTimeout( function() {
console.log('resize');
setTimeoutId = null ;// setTimeoutIdを空にする
}, 500 ) ;
});
});
カウントダウン
締め切り間近なキャンペーンページなどで使えそうな機能として使えるかも
$(function() {
function getText(time) {
var calc = new Date( (new Date(time)) - ( new Date() ));
var y = calc.getUTCFullYear() - 1970 + "年";
var m = calc.getUTCMonth() + "カ月";
var d = calc.getUTCDate() - 1 + "日";
var h = calc.getUTCHours() + "時間";
var min = calc.getUTCMinutes() + "分";
var sec = calc.getUTCSeconds() + "秒";
var mil = calc.getUTCMilliseconds() + "ミリ秒";
return "" + y + m +d + h + min + sec + mil;
}
setInterval(function () {
$('#demo').html(getText('2020/7/24 20:00:00'));
},30);
});
コメント
同じカテゴリの前後の記事
WEBの最新記事
- KATOON.NET
- WEB
- js スニペット と メモ