ラッキーな日々

望んでも望んでも、叶わないから望み続ける

javascript

いまさらJQUERY

投稿日:

Pocket

jQuery

  1. jQueryはJavaScriptのライブラリ
  2. 短い記述で実装できるのがjQueryのメリット
  3. jQueryを使うには、head内に記述が必要
  4. jQueryのコードはHTML内に直接記述するか、jsファイルを作るかの2パターン
  5. ページ読み込み完了のタイミングで実行するために、$(function(){ });を使う
  6. 基本的な構成は「セレクタ」と「メソッド」でなりたっている
  7. $()は、jQuery()とも書けるがWordPressではjQuery()を使う
jQueryは高速、小型、そして機能豊富なJavaScriptライブラリです。HTMLドキュメントのトラバーサルと操作、イベント処理、アニメーション、そしてAjaxのようなものが、多数のブラウザにわたって機能する使いやすいAPIによってさらに簡単になります。汎用性と拡張性の組み合わせで、jQueryは何百万もの人々がJavaScriptを書く方法を変えました。
簡単な表情
DOMトラバーサルと操作
jQueryの書き方
基本形
$(function(){
ここに処理を書く
});
基本形の中に処理を書いていくと以下のようになります。

$(function(){
$(A).B() ?AをBする
});
Aを「セレクタ」といい、
Bを「メソッド」、
Bの直後のカッコ内を「パラメータ」といいます。

ちゃんと記入するとこんな感じに

$(function(){
$(“.hoge”).css(“color”,”blue”) ?「.hoge」のcolorをblueにする
})

「.click」を使った 例

クリックすると青色になります

$(function(){
$(“.hoge”).click(function(){
$(this).css(“background-color”,”blue”)
});
});
上記の例では、class名がhogeの「クリックすると青色になります」をクリックすると、
clickイベントが走り、背景色が青になる。という感じです。

*「this」はイベント時に同じセレクタを使用するということです。

.val() の引数に値を渡すと、valueに値をセットできます。
.val() の戻り値を取得すると、value値を取得することができます。

NG
jQueryでクリックイベントを実装する時、以下のよう簡単に記述。

$(function(){
$(‘クリックする要素’).click(function(){ /* 処理内容 */ });
});
この方法では遅延読み込みさせた要素にイベントを登録することはできません

上記コードの$(‘クリックする要素’)は、ドキュメントを読み込んだ時点ではまだ存在していないからです。

.on()でdocumentから指定すると解決
ではどうするればよいのか。以下のように記述しましょう。

$(function()){
$(document).on(‘click’, ‘クリックさせる要素’, function(){ /* 処理内容 */ });
});

data-role属性はHTMLに様々な機能を追加する属性の一覧です。
a要素にdata-role=”button”を指定するとリンクをボタンとして利用できます。
ボタンなどにdata-mini=”true”を指定すると小さなボタンを利用できます。
Link button
ボタンにdata-inline=”true”を指定することでインラインボタンが作成できます。
jQuery Mobileではボタンは通常は横幅いっぱいで表示されます。
しかし、data-inline=”true”を指定することでインラインボタン、つまりテキストにフィットするサイズのボタンに変更することができます。
Cancel
jQuery 1.4からはclass=”ui-btn-inline”を追加するだけでボタン形状にすることが可能
data-theme属性でjQuery Mobileのカラーテーマが選択可能です。
テーマコンセプト
jQuery Mobile は、ページのデザインを「テーマ(Theme)」という仕組みで提供しています。テーマはスタイルシートとシンプルなアイコンセットから構成されています。
デフォルトで用意されているテーマを使えますが、ユーザー独自のカスタムテーマを作成することもできます。
テーマの重要なコンセプトとしては、色に関する設定が構造的なレイアウト設定から分離されていることです。
色に関する設定は「スウォッチ(Swatch)」と呼んでおり、テーマに複数含めることができます。テーマに含まれているスウォッチは、ウィジェットごとに自由に選択して使うことができます。
スウォッチ
バージョン1.4では、デフォルトで用意されているスウォッチは “a” と “b” の2つです。
aは白とグレーを基調とした明るめの色で、bは黒を基調とした暗めの色に設定されています。
デフォルトのデザインはスウォッチ”a”をベースとしています。
スウォッチはページごとに切り替えることもできますし、同じページの中でもウィジェットごとにどれを選択するか指定することもできます。ウィジェットがデフォルトでもっているスウォッチはほとんどの場合 “null” です。これは親要素から継承することを意味します。
スウォッチを指定するには、データ属性もしくはクラスをウィジェットとなるHTML要素に「data-theme=”b”」や「class=”ui-btn-c”」などと付与します。

jQuery Mobileとは?
 jQuery Mobileは、jQueryを拡張するライブラリ(プラグイン)の一種で、名前のとおり、スマホ/タブレットに代表されるモバイル対応アプリを開発するための機能を提供

data-role=”page”

jQuery Mobileで基本的なページ構成

スポンサーリンク
スポンサーリンク

comment

メールアドレスが公開されることはありません。

ラッキーです(*_*)計算して *

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

いまさらjquery mobile

jQuery Mobileにおけるページ遷移  jQuery Mobileでは、同一ドメインに対するリンクは、自動的にAjax式リンクとなります。Ajax式リンクでは、リンク先のページをいったん非同期 …

ディレクティブ?? 忘れたよ みのむしさん

ディレクティブってなんだっけ ディレクティブ(Directive)とは、プログラミングのコマンドのような意味で使われる用語で、プログラミング言語の一部の構成要素を指す。 この構成要素とは、コンパイラや …

json

JSON javascript object notation javascriptで記述 var obj={sun:”日”,mon:”月”,tue:& …

canvas

canvas html5 canvas リファレンスで検索 jabascript 言葉 jqery 言葉  

キャメルケース ケバブケース  らくだ?

キャメルケース ケバブケース    キャメルケース(英: camelcase)は、複合語をひと綴りとして、要素語の最初を大文字で書き表すことをいう。キャメルケースとは、大文字が「らくだのこぶ」のように …

調べよう

ありがとう

【プロフィール】
はじめまして EveryDayisaGoodDayです。日本語に直すと日々是好日となります。
個人事業者です。望んでいたわけではないですが、いつのまにかそうなっていました。

病気をしてから、物忘れがひどいのでこのブログは私的な備忘録です。
さっきやったことも忘れるのでブログ自体も迷走中。
望んでも 望んでも 叶わないから望み続ける。

ペットのおうち

鍵開け 鍵修理 24時間 緊急対応
24時間対応鍵トラブル緊急サービスの全国展開おなじみのマルチ救急24岡山市鍵トラブル修理サービスホームページがリニューアル。

岡山市で、お住い 金庫 バイク 原付の鍵トラブルに緊急対応。

  • 鍵をなくしてドアが開けられない。
  • 鍵穴の不具合で鍵が回らない。
  • 鍵が折れた

鍵のトラブルでお困りならお気軽にお問合せ下さい。

深夜の突然の水漏れやトイレのつまりに困ったことは、ありませんか?

全国24時間対応で水漏れ修理 トイレつまりに深夜でも緊急に出動してくれる水道修理サービスがあります。

水漏れ 排水つまりでお困りならこちらの安心の水道修理サービスをご利用してみてください。