$()-jQuery関数

$() = jQuery()

構文

$(引数）

動作

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

動作２

引数に関数を渡すと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>

syntax2html

CSS

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

syntax2html

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);
  })

syntax2html

実装

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

$() = jQuery()

動 作

引 数

$(‘CSSセレクタ’)

$(‘HTML要素’)

$(要素オブジェクト)

複数指定タイプ

$(関数)

JavaScript・jQueryのおすすめ

動作

引数