jQuery 다양한 (wrapAll, MutationObserver 등)
11901 단어 jQuery
sample.js
// Bootstrap, jQueryは各自読み込んでください。
$(() => {
const main = $('<div id="main"></div>');
$('body').html(main);
const cat = 'https://drive.google.com/uc?export=view&id=1vhfW5iAbMOnkM5nGsYDmEAntikVMWKw4';
const img_tag = `<div class="img-wrapper" style="text-align: center"><img src="${cat}" style="width: 100px;"></div>`;
for (let i = 0; i < 6; i++) {
$('#main').append(`${img_tag}`)
}
// スリープ
setTimeout(() => {
$('.img-wrapper').wrapAll('<div class="container"></div>');
// 3つずつrowで囲む
do {
$('#main').children('.container').children('.img-wrapper:lt(3)').wrapAll('<div class="row"></div>')
} while($('.container').children('.img-wrapper').length)
// .col-4を付与
$('#main').find('.img-wrapper').addClass('col-4');
}, 4000)
// スリープ
setTimeout(() => {
// タイトルを挿入
$('#main').prepend('<h2 id="title">猫ですがなにか?</h2>');
// MutationObserverをタイトルにセット
let observer = new MutationObserver(() => {
let new_title = "猫アレルギーなんですか?"
$('#title').text(new_title);
});
// 属性の変化を検知
const conf = {
attributes: true,
attributesFilter: ['style']
};
const title = document.getElementById('title');
observer.observe(title, conf);
}, 8000)
// スリープ
setTimeout(() => {
$('#title').css({'text-align': 'center'});
$('#main').find('.img-wrapper').removeClass('col-4');
$('.img-wrapper').each((index, element) => {
$(element).wrap('<div class="cat-wrapper col-4"></div>');
});
$('.cat-wrapper').append('<p class="neko_text">猫ですが?</p>');
$('.neko_text').css({'text-align': 'center'})
}, 12000)
// スリープ
setTimeout(()=> {
$('.neko_text').each((index, element) => {
let text = $(element).text();
let new_text = text.replace('猫です', '犬じゃないんです');
$(element).text(new_text);
});
}, 16000)
});
/*wrapAll,wrapInner
children,find
$(function() {}) は $(document).ready(function{})と一緒
do {} while()
length
each(function(index, element) {})
.text(), replace(),
document.getElementById(),$()
MutationObserver
append, prepend
*/
Reference
이 문제에 관하여(jQuery 다양한 (wrapAll, MutationObserver 등)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/momonoki1990/items/6ae03f5c178e4f290100텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)