Webデザイナーが覚えておくと便利なjQueryの使い方

2016/07/04

17_1
WebデザイナーとしてデザインやHTMLとCSSでコーディングはするけど、JSやPHPなどを使うところはフロントエンジニアの方にお願いするという流れってありますよね。そんなWebデザイナーの方もjQueryの使い方などを覚えておくとよく見かける動きの実装ができるようになったりと、コーディングの幅が広がって楽しいですよ!

jQeryについて

jQueryはJavaScriptというプログラム言語のライブラリファイルです。同じプログラミング内容をJavaScriptで書くとものすごく長くなるのに、jQueryを利用して書くと数行に簡略化できてしまうという便利なものです。

読み込みの方法

jQueryを利用ために、まずはファイルを読み込む必要があります。jQueryのサイトからファイルをダウンロードするか、CDNを利用してWeb上でファイルを読み込みましょう。
 

ダウンロードしたファイルでの読み込み

<script type="text/javascript" src="●●●/jquery-3.0.0.min.js"></script>

●●●の部分にはファイルを入れているディレクトリまでのパスを書いてください。
 

CDNでの読み込み

<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

 

バージョン

上記ではバージョン3.0.0を読み込んでいますが、jQueryには他にも1.●.●と2.●.●というファイル名の1系・2系のバージョンがありました。それぞれのバージョンでIEのサポートが少し変わります。
 

3系のIEサポート
・IE 9以降
 

2系のIEサポート
・IE 9以降
 

1系のIEサポート
・IE 8以降(1.13〜)
・IE 6以降(〜1.12)
 

古いバージョンもサポートしなくてはならない理由がなければ最新の3系を選択しましょう
 

書き方の基本

$(function(){
	//コードを書く場所
});

まず、これがjQueryでコードを書きますよ!というお約束のかたちになります。
 

$(function(){
	$('セレクタ').メソッド(引数);
});

お約束のかたちの中に操作したい内容を書きます。簡単に説明をすると、セレクタの要素にメソッドというアクションで引数のことをするということです。

jQueryについてはここまでにして、本題の覚えておくと便利な使い方をみていきましょう!

アニメーション

$(function(){
	$('セレクタ').animate({
	'プロパティ':'数値'
	});
});

このように、animateを利用してプロパティと数値を指定することで、セレクタをアニメーションさせることができます。
 
 

See the Pen jQuery Animation1 by madka (@madka) on CodePen.0


これはspanが1秒かけてmargin-left:300px移動するというアニメーションの書き方です。
1つめの引数のmarginLeftはcssのように単語の区切りで「-」を使わずにキャメルケースという書き方の方法を使います。2つめの引数である「1000」はアニメーションを完了させるまでの時間指定です。
※RERUNをクリックすると再びアニメーションします。
 

トップへ戻るアニメーション

使い方の1つとして「トップへ戻るボタン」があります。

See the Pen jQuery Animation2 by madka (@madka) on CodePen.0


.clickというイベントメソッドを利用して、spanがクリックされたらbodyの一番上まで0.5秒かけて移動するという指示になります。

トグルでの操作

トグルの基本

See the Pen jQuery Toggle2 by madka (@madka) on CodePen.0


toggleメソッドは繰り返し操作を指示することができます。例えば、上記で使っている.toggleはセレクタ要素の表示と非表示を切り替える操作ができます。
 
 

.activeでcssのクラス名を操作する

See the Pen jQuery Toggle1 by madka (@madka) on CodePen.0


toggleClassメソッドはセレクト要素に指定したクラス名の付与を切り替えます。上記だと.activeでフォントカラーとフォントサイズを切り替えています。
 
 

スライドで要素を表示する

See the Pen jQuery Toggle3 by madka (@madka) on CodePen.0


slideToggleメソッドを利用することで、非表示していたセレクタ要素を上からスライドさせて表示することができます。引数でスピードの調整もできます。
 
 

フェードで要素を表示する

See the Pen jQuery Toggle4 by madka (@madka) on CodePen.0


slideToggleメソッドをfadeToggleにすると、非表示になっていたセレクタ要素がフェードインして表示されます。こちらも引数でスピードの調整ができます。

ウィンドウサイズの取得

$(window).width(); //幅を取得
$(window).height(); //高さを取得

ウィンドウの幅と高さの取得は上記のように書きます。
 
 

要素の横幅をウィンドウサイズと同じにする

See the Pen jQuery WindowSize1 by madka (@madka) on CodePen.0


slideTggleメソッドでのコードに、ウィンドウの高さを取得してulにcssメソッドでheightを取得した高さ指定してあげるとウィンドウ下部までスライドするようになります。
 
 

要素の高さをウィンドウサイズと同じにする

See the Pen jQuery WindowSize2 by madka (@madka) on CodePen.0


heightだった部分をwidthにするとulがウィンドウ幅で表示されるようになります。
 
 

変更されたウィンドウサイズを取得する

$(function(){
	$(window).resize(function(){
		var w = $(window).width();
		$('セレクタ').css("width" , w + "px")
	});
});

このようにwindowにイベントメソッドであるresizeを使うとウィンドウサイズが変わっても変更されたサイズを取得することができます。

ユーザーエージェントの判別

See the Pen jQuery UserAgent1 by madka (@madka) on CodePen.0


ユーザーエージェントを取得してif文で条件分岐をするとデバイスごとに操作を適用できるようになります。
上記は、スマホのときだけ.tel-linkのテキスト(12-3456-7890の部分)がaタグで囲われてTelリンクが有効になります。

Webサイトでよくみかける動作をjQeryを使って紹介しました。いきなりJavaScriptの正規表現でコードを書くのは敷居が高いと思うので、まずjQueryからコードの書き方を覚えていくのがおすすめです!

About

madka prof

WebLifeTimesはWebデザイナーのMadkaがWeb制作に関連したことや日々のちょっと気になったことなどを調べたり記録しているサイトです。TwitterFacebookで気になったニュース記事をシェアしたり独り言をつぶやいたりしています!

New Post

Recommend