$()-jQuery関数

なわて投稿サムネイル

$() = jQuery()

構文

$(引数)

 動 作

動作1
CSSセレクタ・HTML要素・thisなどを基に、jQuery独自の命令対象(要素)を生成する。
簡略的に表現すると、jQueryオブジェクトを生成する。
jQueryオブジェクトとは、$()関数でjQueryの独自形式に変換された要素。

動作2

引数に関数を渡すとHTMLを読み込んだ後に引数の関数が実行される。
つまり、ブラウザが関数内に記載された内容を一旦予約状態にして、HTMLを最後まで読み込んでから関数内に記載された内容を実行する。

 引 数

$(‘CSSセレクタ’)

$( ‘.celector’ )

 

$(‘HTML要素’)

$(‘ button ‘)

 

$(要素オブジェクト)

$(this)

 

複数指定タイプ

$(‘div’,’button’)
カンマ「,」でつなぐ

 

$(関数)

$(function(){

HTMLがロード(読込み完了)した後に実行する処理

});

 

コード例

 HTML 

<div id="btn-box">
  <button class="btn1">button1</button>
  <button class="btn2">button2</button>
  <button class="btn3">button3</button>
  <button class="btn4">button4</button>  
</div>

 CSS 

#btn-box{
  width:260px;
  height:30px;
  padding:20px;
}

 jQuery 

//CSSセレクター
$('.btn1').css('color','red');

//HTML要素
$('div').css('background-color','gray');

//複数指定バージョン
$('.btn2 , .btn3').css('color','blue');

//this
//thisは#btn-box buttonでマウスおバーしたbutton
$('#btn-box button')
  .on('mouseover', function() {
  $(this).stop(true).animate({
    opacity:0.5
  },500);
  })
.on('mouseout', function() {
  $(this).stop(true).animate({
    opacity:1
  },500);
  })

 実装 

See the Pen
$()
by roymoy (@roymoy)
on CodePen.