【jQuery基礎編1】jQueryの概要からセレクタやメソッドまで解説

JavaScript
※読者がhtml/CSSの基礎知識がある前提で書いています。
※このページは筆者のアウトプット用に作りました。誤記があればYUUKIまでお知らせください。

 

jQueryについて

 

jQuery(ジェイクエリー)とは、JavaScriptのWebブラウザ用のライブラリのこと。

ライブラリとは、少ない記述でプログラムを書けるファイルを指す。

 

jQueryで何ができる?

Webブラウザに表示されるテキストや画像に動的な変化を付けることができる。

 

freewall

photoswipe

出典:https://techacademy.jp/magazine/11368

 

jQueryの使い方

jQueryの読み込み方には二種類ある。

 

  • Web上のソースを読み込む方法
  • jQueryの公式サイトからダウンロードし、格納先にアップして読み込む方法

 

簡単なのは前者だが、ここでは後者のやり方を説明する。

 

  1. jQueryの公式サイトからjsファイルをダウンロードし、格納先にアップロード
  2. htmlファイルの<head>タグの中に、scriptタグを使ってjQueryライブラリを読み込む記述を行う
  3. <script type="text/javascript" src="jQueryの格納先.js"></script>
    <script type="text/javascript" src="jQueryの記述ファイル.js"></script>
  4. jQueryファイルにコードを記述する

 

セレクタとメソッド

 

jQUeryではまずこのような形を作る。

// jQueryの形

jQuery(document).ready(function(){
 //ここに書く
 });

 

次に「ここに書く」にjQueryオブジェクトを作成する。

 

jQUeryオブジェクトとは、セレクタによって指定された対象を言う。

例えば$から始まる文はjQueryオブジェクトである。

 

$('.yuuki').fadeOut(1500); //jQueryオブジェクト

 

セレクタとは

 

HTMLの要素の場所を指定すること

 

基本的な書き方は

$('//セレクタ')

 

idのセレクタを指定するには、id名の前に「#」を付ける

例:id=”yuuki” を読み込む場合

$('#yuuki')

 

classのセレクタを指定するには、class名の前に「.」を付ける

 

例:div class=”yuuki” を読み込む場合

 

$('.yuuki')

 

メソッドとは

 

オブジェクトを操作する命令文のこと

 

基本的な書き方は

 

$('.yuuki').//メソッド();

 

メソッドには多くの命令文を使用する。

代表的なものにhideメソッドがある。

 

hideメソッドを使えば、要素を隠すことができる。

 

//hideメソッドを使用した例

$('.yuuki').hide(); //yuukiクラスの要素が消える

 

これで「yuukiクラス」の要素を隠すことができる。

 

引数とは

メソッドの()の部分に「引数」を入れることで、メソッドに文字や数値の情報を渡すことができる。

 

//hideメソッドに1000の引数を入れる

$('.yuuki').hide(1000); //1秒かけて要素が消える

 

 

jQueryの基礎まとめ

  • jQueryではWeb上の文字や画像に動きを付けることができる
  • jQueryを使うには、HTMLで読み込む
  • jQueryの基本文は、$(‘セレクタ’).メソッド(引数); で、この一文はjQueryオブジェクトと言う。
勉強会で聞いた!評判のプログラミングスクール3選
ポテパンキャンプ

【特長】
3ヶ月のスクール代を全額キャッシュバック!
実質無料で学べるプログラミングスクールです。

【こんな人にオススメ】
・Railsチュートリアルをやり切った
・お金はないがやる気はある
・Ruby/Railsを中心に学びたい
・初心者の域を脱したい

TECH::EXPERT

【特長】
600時間の学習!
スパルタカリキュラムで高収入な転職を実現させるプログラミングスクールです。

【こんな人にオススメ】
・最短最速でエンジニア転職したい
・今の環境をいますぐ変えたい
・お金があってやる気もある
・もう挫折したくない

DMM WEBCAMP

【特長】
転職成功率98%
基礎からプロダクト制作まで徹底したカリキュラムで学べるプログラミングスクールです。

【こんな人にオススメ】
・Web系企業に就職・転職したい
・インフラ系からスキルチェンジしたい
・短期間で集中して学びたい
・チーム開発を学びたい

JavaScriptjQuery
この記事を書いた人

元専業アフィリエイター・ブロガー。
Webエンジニアを目指している24歳。
運営メディアは月間150万pvを超えたことも。

YUUKIをフォローする
シェアする
YUUKIをフォローする
YUUKIのWebエンジニア道

コメント