【初心者向け/ITスクール60日】JQuery2
はじめに
今日は、ITスクールに通った60日目の日で、今日学んだ知識を記事にシェアしたいと思います。本記事が、ITを勉強を始めた方々にもロードマップになればいいと思います。
昨日と同様、今日はJQueryについて、勉強しました。JQueryは重く、遅いですが、2年前基準、77%が使っている技術でした。
今は、JS、WEBブラウザーのAPIが優れているので、充分対応ができますが、CSSを操作する原理は大事だと考えました。
今日は文法よりは、知らなかった点を中心にまとめていきたいと思います。
$()
$()はセレクターと同じですが、html内にそのタグがない場合はhtml要素が追加されます。
$(<marquee> </marquee>)
html文書に<marquee>
がない場合、タグが追加されうます。
contentがないので、.text('yahoo')でyahooというテキストを追加、修正したり、.html()でタグ自体も追加することができます。
$('a').text('<b>Go to Youtube</b>'); //<b>Go to Youtube<b>というテキスト
$('a').html('<b>Go to Youtube</b>'); // Go to Youtube (太い文字)
append() , after()
$()で指定した要素の内部に.append()関数でDOM要素を入れることができます。
.after()は要素の外部にDOMを追加します。
$('#b5').click(()=>{
$('table')
.append('<tr><td>' + $('#menu').val() + '</td><td>' + $('#price').val() + '</td></tr>')
});
<button id="b5"> </button>
をクリックする場合、 tableタグ内のappend( )の()に記入したDOM要素を追加しろ。
css() vs val()
css()
`$(Element).css(attr, value)はDOM要素のCSS操作だけでなく、css(attr)で呼び出すとその valueをリターンします!
let h1Color = $("h1").css("color");
alert(h1Color);
val()
inputタグの場合、contentない空要素(void element)は$(input).val
で中に入っている値をリータンします。
attr() + switch機能
フラグ変数をコントロールすることで、2つのモードを作ることができます。
attr()はタグの属性を追加したり、valueを修正することもできます。
let c = false;
$("button").click(()=>{
if(!c){
$("img").attr("src","img/652581_code_command_develop_javascript_language_icon (1).png");
}else{
$("img").attr("src","img/4373217_java_logo_logos_icon (2).png");
}
c = !c;
})
cssと似ている関数ですが、imgのようにtag内のattributeを操作することが可能です。
let images = [
{
src:'img/1.png'
},
{
src:'img/2.png'
},
{
src:'img/3.png'
},
{
src:'img/4.png'
},
{
src:'img/5.png'
},
{
src:'img/6.png'
},
{
src:'img/7.png'
},
]
let i = 0;
setInterval(
()=>{
$('img').attr('src', images[(i++) % images.length].src);
} , 1000);
このように、setInterVal(callback, ms)
と活用することも可能です。
タグ内のimgの属性を1の秒ことに配列内のindexで回るようにコードを組んでみました。
this, parent(), children(), siblings()
要素のタグを入れる場合、CSSの適用範囲が広くなります。
その時は、まずタグの要素は指定しますが、内部からthisを入力することで、特定の要素のみ呼び出すことができます。
<table border ="1">
<tr>
<td>
<input> <button>11111111</button>
</td>
</tr>
<tr>
<td>
<input> <button>22222222</button>
</td>
</tr>
</table>
<table border ="1">
<tr>
<td>
<input> <button>33333333</button>
</td>
</tr>
<tr>
<td>
<input> <button>44444444</button>
</td>
</tr>
</table>
$('button').click(function(){
$(this).css('background-color','red');
$(this).parent().css('background-color','teal');
$(this).closest("table").css("border","blue solid 3px");
});
buttonは4つがありますが、2番ラインにthisを入れることで、動的にバインディングしてくれます。例えば222222 buttonを押せば、thisには22222 button要素が入り操作することができます。
parent()はthis基準の親タグで、22222最初のテーブルの2番目の<tr>
タグの<td>
タグになります。親ではなく、より上位のタグの呼び出したい場合はclosestタグから一番近上位要素を操作することができます。children()はthisの内部にある子要素、siblings()は同じ階級の要素を操作します。
Discussion