Help us understand the problem. What is going on with this article?

マークアップ講座 Part4 jQuery - JavaScript

More than 5 years have passed since last update.

jQuery - JavaScript

jQueryとは

『jQuery』
http://jquery.com/

  • JavaScriptライブラリ
  • 2006年リリース
  • John Resig (ジョン・レシグ)

『John Resig - JavaScript Programmer』
http://ejohn.org/
 

現在の最新バージョン(2014年9月現在)

  • IE互換版(PC) : 1.11.1
  • IE非対応版(Mobile) : 2.1.1  

※ JavaScriptとは

  • EcmaのECMAScript + W3CのDOM = JavaScript
  • DOM操作、通信、ストレージ制御、グラフィック制御、メディア操作  

jQueryの特長

  • クロスブラウザ実装に適している

  • ドットシンタックスのシンプル、軽量、CSSライクな構文

  • CSSとの高い親和性

  • Ajax、コールバック取得など複雑な実装も容易

  • プラグインが豊富、プラグイン開発が手軽に行える

  • 圧倒的なシェア : 利用Webサイト60.1% JSライブラリ中94.0%
    『W3Techs - extensive and reliable web technology surveys』
    http://w3techs.com/
     

※ jQuery ≠ jQuery Mobile

  • jQueryとjQuery Mobileは別物
  • jQuery Mobileの利用メリットはほとんどない(私見)  

jQueryの基本構文

基本構文

jQuery(‘.sample’).html('text'); (以下”$”)
$('.sample').html('text');

$(selector).method(value);

$(セレクタ).メソッド(値);

セレクタ

$('[element]').html('text');

$('#[id]').html('text');

$('.[class]').html('text');

$('[[attribute]]').html('text');

$('[[attribute=value]]').html('text');

Event Handling (delegate)

$(document).on('click', '.sample', function () {
  sampleFunction();
});

document ready

$(document).ready(function() {
  sampleFunction();
});
$(document).ready(sampleFunction);

■ 省略型
$(function() {
  sampleFunction();
});
$(sampleFunction);

window load

$(window).load(function() {
  sampleFunction();
});

$(window).load(sampleFunction);

method

『jQuery API Documentation』
http://api.jquery.com/

本講座で取り扱うメソッド

取得系

メソッド 内容
$().text(); テキストの取得と設定
$().html(); HTMLコードの取得と設定
$().on(); イベント(delegate)の設定
$().off(); イベント(delegate)の解除
$().height(); 高さの取得と設定
$().scrollTop(); スクロール量の取得
$().css(); CSS要素の取得と設定
on、height、scrollTop

http://codepen.io/sekiyaeiji/pen/nIqrJ?editors=001

css

http://codepen.io/sekiyaeiji/pen/Ckgse?editors=101

処理系

メソッド 内容
$().fadeIn(); フェード処理により表示状態に遷移
$().fadeOut(); フェード処理により非表示状態に遷移
$().fadeToggle(); fadeIn処理とfadeOut処理の反復
$().slideDown(); 縦スライドにより表示状態に遷移
$().slideUp(); 縦スライドにより非表示状態に遷移
$().slideToggle(); slideDown処理とslideUp処理の反復
$().addClass(); class値を付与
$().removeClass(); class値を削除
$().toggleClass(); addClass処理とremoveClass処理の反復

 

【WORKSHOP1】 書いてみましょう1

<p></p>
$('p').html('テキスト').css({'color': '#f00'});
fadeIn、fadeOut、fadeToggle

http://codepen.io/sekiyaeiji/pen/LxhsJ?editors=101

slideDown、slideUp、slideToggle

http://codepen.io/sekiyaeiji/pen/AJfiu?editors=101

addClass、removeClass、toggleClass

http://codepen.io/sekiyaeiji/pen/igeqd?editors=011
 

【WORKSHOP3】 動かしてみましょう

http://codepen.io/sekiyaeiji/pen/DxLCK

↑ こちらを[Fork]

slideToggleを利用した、ブロックの表示・非表示の処理を書いてみましょう
うまく動いたら、fadeToggleも試してみましょう
 

モダン実装 : jQuery + CSS Animation

jQuery(JS)アニメーションより処理が軽い

slide

http://codepen.io/sekiyaeiji/pen/eFkoG?editors=011

fade

http://codepen.io/sekiyaeiji/pen/tuGny?editors=011
 

JavaScriptの基本構文

即時関数

(function () {
  [JS Code]
})();

定義

var sampleVariable = 'サンプルテキスト';

関数

function sampleFunction ([引数]) {
  [処理]
}

条件文

if ([条件式]) {
  [処理]
}
else if ([条件式]) {
  [処理]
}
else {
  [処理]
}

デバッグログ

console.log([変数]);

console.log('[ログコメント]');

コメントアウト

// 1行コメント

/*
複数行
コメント
*/

http://codepen.io/sekiyaeiji/pen/Gwtvd?editors=001

【WORKSHOP2】 書いてみましょう2

$(window).load(function() {
  console.log('window load');
});

$(document).ready(function() {
  console.log('document ready');
});

 

jQuery実装

jQuery読み込み

google api利用

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

jQuery実装 1 モーダルウィンドウ

http://codepen.io/sekiyaeiji/pen/qbush?editors=011
 

jQuery実装 2 スクロールハンドリング

http://codepen.io/sekiyaeiji/pen/FhvGi?editors=011
 

jQuery実装 3 パララックスの基礎

http://codepen.io/sekiyaeiji/pen/zbEBD?editors=001

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした