$()-jQuery関数

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.

JavaScript・jQueryのおすすめの本

発売日:2018/6/8

JavaScriptの初級向けの本です。基本をわかりやすく丁寧に解説してくれてます。まず第一歩はこちらからの本から。

本当によくわかるJavaScriptの教科書 はじめての人も、挫折した人も、基礎力が必ず身に付く

発売日:2015/12/16

30のLesson形式で実践的なコードを身につける事ができます。図解もあるので大変読みやすいです。jQueryをコードを書きながら覚えたい方におすすめです。

jQuery標準デザイン講座

発売日:2013/11/26

jQueryの基本から実践をわかりやすく解説してくれる良著です。jQueryのリファレンスからそのままサイトで使えるコードを身につけることができます。

jQuery最高の教科書

スポンサードリンク

スポンサードリンク