🙆

【初心者向け/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要素を追加しろ。

(element).remove()で指定した要素を全部消したり、(element).empty()で子要素を消すことも可能です。

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