<input type="button" onclick="test1()" value="TEST1" /> <div id="res"></div>
function test1(){
$('#res').append('TEST<br>');
$.when(
async1(),
async2(),
async3()
).done(
function(){
$('#res').append('すべての非同期処理を実行しました。');
}
).fail(function(){
alert('非同期処理の失敗');
})
}
function async1(){
var dfd = $.Deferred();
window.setTimeout(function(){
$('#res').append("<div class='text-success'>①ネコ</div>");
dfd.resolve();
}, 1000);
return dfd.promise();
}
function async2(){
var dfd = $.Deferred();
window.setTimeout(function(){
$('#res').append("<div class='text-warning'>②ヤギ</div>");
dfd.resolve();
}, 300);
return dfd.promise();
}
function async3(){
var dfd = $.Deferred();
window.setTimeout(function(){
$('#res').append("<div class='text-danger'>③カニ</div>");
dfd.resolve();
}, 1200);
return dfd.promise();
}
var v = _getValueEx($('#xxx'));
/**
* タグ種類を問わずに要素から値を取得する
* @param elm 要素
* @returns 要素の値
*/
function _getValueEx(elm){
var v = undefined;
var tagName = elm.prop("tagName");
if(tagName == 'INPUT' || tagName == 'SELECT' || tagName=='TEXTAREA'){
// type属性を取得する
var typ = elm.attr('type');
if(typ=='checkbox'){
v = 0;
if(elm.prop('checked')){
v = 1;
}
}
else if(typ=='radio'){
var opElm = form.find("[name='" + f + "']:checked");
v = 0;
if(opElm[0]){
v = opElm.val();
}
}
else{
v = elm.val();
}
}else{
v = elm.html();
}
return v;
}
<script>
function test1(btn){
var btnElm = $(btn);
var trElm = btnElm.parents('tr');
var row_index = trElm.index();
alert('行番=' + row_index);
}
</script>
<table class="tbl2">
<thead>
<tr><th>id</th><th>コード</th><th>名前</th><th>備考</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>neko</td><td>猫</td><td><input type="button" onclick="test1(this)" value="test1" /></td></tr>
<tr><td>2</td><td>yagi</td><td>山羊</td><td><input type="button" onclick="test1(this)" value="test1" /></td></tr>
<tr><td>3</td><td>same</td><td>鮫</td><td><input type="button" onclick="test1(this)" value="test1" /></td></tr>
<tr><td>4</td><td>wasi</td><td>鷲</td><td><input type="button" onclick="test1(this)" value="test1" /></td></tr>
<tr><td>5</td><td>goki</td><td>御器</td><td><input type="button" onclick="test1(this)" value="test1" /></td></tr>
</tbody>
</table>
var tbl = jQuery('#tbl1); // テーブル要素を取得
var tr1 = tbl.find('tbody tr:first-child'); // 最初の行要素
if(obj1 instanceof jQuery){
console.log('jQueryオブジェクト');
}else{
console.log('別のオブジェクト');
}
$(function(){
// jQuery.uiが読み込まれていなければ読む込む
if(typeof jQuery.ui == 'undefined'){
// jQuery.ui.cssを読み込む
var css_link = document.createElement('link');
css_link.rel = 'stylesheet';
css_link.href = 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css'
document.body.appendChild(css_link);
css_link.onload = function() {
console.log('load jquery.ui.css');
// jQuery.ui.jsを読み込む
var js_scr = document.createElement('script');
js_scr.type = "text/javascript";
js_scr.src = 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js';
document.body.appendChild(js_scr);
js_scr.onload = function() {
console.log('load jquery.ui.js');
init(); // 初期化を行う
}
}
}else{
init(); // 初期化を行う
}
});
function init(){
console.log('ここで任意の初期化を行う');
}
jQuery.fn.jquery jQuery.ui.version
例
console.log($.fn.jquery); // jQueryのバージョンを出力
console.log($.ui.version); // jQuery UI のバージョンを出力
<div data-xxx="a">AAA</div>
<script>
$(function(){
var elm = $('[data-xxx]');
console.log(elm.html());// 出力→ AAA
});
</script>
for(var i=0;i<10000;i++){
var text = $("#iroha").html();
}
var obj = $("#iroha");
for(var i=0;i<10000;i++){
var text = obj.html();
}
<div id="test1">ティラノサイウルス</div> <input type="button" value="検証" onclick="test1()" class="btn btn-primary" />
var m_obj;
// 初期化
$(() => {
m_obj = $("#test1");
})
function test1(){
$("#test1").html('キノボリトカゲ');
alert(m_obj.html());// →キノボリトカゲ
}
検証
<div id="animal">
<div class="neko">白ネコ</div>
<div class="inu">黒犬</div>
<div class="neko">赤ネコ</div>
<div class="neko">巨大ネコ</div>
<div data-test="yagi">やぎ</div>
<div data-test="yagi">ゴート</div>
</div>
var animal = $("#animal");
var nekos = animal.find('.neko');
console.log(nekos.eq(0).html());// → 白ネコ
console.log(nekos.eq(1).html());// → 赤ネコ
console.log(nekos.eq(2).html());// → 巨大ネコ
console.log(nekos.length);// → 3
var inu = animal.find('.inu');
console.log(inu.eq(0).html());// → 黒犬
console.log(inu.length);// → 1
var tanuki = animal.find('.tanuki');
console.log(tanuki.eq(0).html());// → undefined
console.log(tanuki.length);// → 0
var yagi = animal.find("[data-test='yagi']");
console.log(yagi.eq(0).html());// → やぎ
console.log(yagi.eq(1).html());// → ゴート
console.log(yagi.length);// → 2