| ページ一覧 | ブログ | twitter |　 書式 | 書式(表) |

MyMemoWiki

「JQuery」の版間の差分

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
(ページの作成:「==jQuery== [CSS][CSS3][レスポンシブWebデザイン] *[http://www.atmarkit.co.jp/fdotnet/jqueryref/index/index.html 逆引き] *[jQuery はじめに] [はじめ…」)
 
 
(同じ利用者による、間の6版が非表示)
1行目: 1行目:
−
==jQuery==
+
| [[Node.js]]  |  [[TypeScript]] |  [[CSS]] | [[CSS3]] | [[レスポンシブWebデザイン]] |
−
[CSS][CSS3][レスポンシブWebデザイン]
+
==[[jQuery]]==
−
 
 
 
*[http://www.atmarkit.co.jp/fdotnet/jqueryref/index/index.html 逆引き]
 
*[http://www.atmarkit.co.jp/fdotnet/jqueryref/index/index.html 逆引き]
−
*[jQuery はじめに] [はじめに]
+
*[[jQuery はじめに|はじめに]]
 
{{amazon|4873114683}}
 
{{amazon|4873114683}}
 
===ready()メソッド===
 
===ready()メソッド===
−
*jQueryはready()メソッドを実装している
+
*[[jQuery]]はready()メソッドを実装している
−
*ready()メソッドは、一般にDOMのドキュメントオブジェクトにバインドされるカスタムイベントハンドラ
+
*ready()メソッドは、一般に[[DOM]]のドキュメントオブジェクトにバインドされるカスタムイベントハンドラ
 
*唯一の引数として関数を受け取る
 
*唯一の引数として関数を受け取る
−
*この関数にはDOMがトラバースや操作を実行できるようになったときに実行されるJavaScriptのコードが含まれる
+
*この関数にはDOMがトラバースや操作を実行できるようになったときに実行される[[JavaScript]]のコードが含まれる
−
<blockquote>ready()イベントハンドラは、JavaScriptのwindow.onloadイベントにかわるjQueryの機能であり、必要に応じて何度でも利用できる。</blockquote>
+
&lt;blockquote&gt;ready()イベントハンドラは、[[JavaScript]]のwindow.onloadイベントにかわるjQueryの機能であり、必要に応じて何度でも利用できる。&lt;/blockquote&gt;
−
  jQuery(document).ready(function(){
+
  [[jQuery]](document).ready(function(){
 
   alert('ready!');
 
   alert('ready!');
 
  });
 
  });
 
===ready()イベントを使うためのショートカット===
 
===ready()イベントを使うためのショートカット===
−
  jQuery(function(){
+
  [[jQuery]](function(){
 
   alert('ready');
 
   alert('ready');
 
  });
 
  });
−
<blockquote>このイベントが必要になるのは、ページの先頭で<head>で囲まなければいけない場合のみ。</body>の直前に配置することで、ready()イベントは使わずにすむ。</body>の位置では、DOM要素だけでなく、それよりも前にあるすべてのものを読み込んでから、JavaScriptを実行することになる</blockquote>
+
&lt;blockquote&gt;このイベントが必要になるのは、ページの先頭で&lt;head&gt;で囲まなければいけない場合のみ。&lt;/body&gt;の直前に配置することで、ready()イベントは使わずにすむ。&lt;/body&gt;の位置では、DOM要素だけでなく、それよりも前にあるすべてのものを読み込んでから、[[JavaScript]]を実行することになる&lt;/blockquote&gt;
  
 
===$グローバルオブジェクト===
 
===$グローバルオブジェクト===
−
*$ グローバルオブジェクトは、jQuery に置き換えられます。
+
*$ グローバルオブジェクトは、[[jQuery]] に置き換えられます。
−
*$() は、jQuery() 関数のエイリアスとなります
+
*$() は、[[jQuery]]() 関数のエイリアスとなります
 
====$の競合を回避する====
 
====$の競合を回避する====
−
*$はjQueryのエイリアスだが、'jQuery' という表現とはことなり、'$'は、他のライブラリと競合する可能性がある。
+
*$は[[jQuery]]のエイリアスだが、'[[jQuery]]' という表現とはことなり、'$'は、他のライブラリと競合する可能性がある。
−
*しかしながら、jQuery ではなく、$ を利用したい。
+
*しかしながら、[[jQuery]] ではなく、$ を利用したい。
−
*匿名関数を作成し、その関数にjQueryオブジェクトを渡したのち、jQueryオブジェクトへのパラメータポイントとして、$を使う
+
*匿名関数を作成し、その関数に[[jQuery]]オブジェクトを渡したのち、[[jQuery]]オブジェクトへのパラメータポイントとして、$を使う
 
  (function($){ // $ パラメータを使ってプライベートスコープを作成する関数
 
  (function($){ // $ パラメータを使ってプライベートスコープを作成する関数
 
   // 競合の心配なく、$ を利用できる
 
   // 競合の心配なく、$ を利用できる
−
  })(jQuery) // 匿名関数を呼び出し、jQueryオブジェクトを渡す
+
  })([[jQuery]]) // 匿名関数を呼び出し、[[jQuery]]オブジェクトを渡す
 
==セレクタとフィルタ==
 
==セレクタとフィルタ==
 
===セレクタ===
 
===セレクタ===
−
[CSS]
+
[[CSS]] |
−
*jQueryでは、CSS1-3仕様で規定されているセレクタのほとんどをサポートしているだけでなく、カスタムセレクタを採用している
+
*[[jQuery]]では、CSS1-3仕様で規定されているセレクタのほとんどをサポートしているだけでなく、カスタムセレクタを採用している
 
{|class="wikitable"
 
{|class="wikitable"
 
!名称
 
!名称
57行目: 56行目:
 
|-
 
|-
 
|子セレクタ
 
|子セレクタ
−
|$("要素1 > 要素2")
+
|$("要素1 &gt; 要素2")
 
|-
 
|-
 
|隣接セレクタ
 
|隣接セレクタ
188行目: 187行目:
 
|$(":hidden")
 
|$(":hidden")
 
|-
 
|-
−
|visibleフィルタ
+
|[[vi]]sibleフィルタ
−
|$(":visible")
+
|$(":[[vi]]sible")
 
|-
 
|-
 
|}
 
|}
209行目: 208行目:
  
 
====length====
 
====length====
−
*jQueryオブジェクトのエレメント数を保持
+
*[[jQuery]]オブジェクトのエレメント数を保持
 
  $("img").each(function(){
 
  $("img").each(function(){
 
     if ($(this).closest("a[target]").length == 0) {
 
     if ($(this).closest("a[target]").length == 0) {
215行目: 214行目:
 
     }
 
     }
 
  });
 
  });
−
===プラグイン===
+
===[[プラグイン]]===
 
====作成====
 
====作成====
−
*jQuery プラグインの作成
+
*[[jQuery プラグインの作成]]
 
====DataTables====
 
====DataTables====
−
*jQuery DataTables 動的に高さを変更
+
*[[jQuery DataTables 動的に高さを変更]]
−
==Tips==
+
==[[Tips]]==
−
*jQuery Tips
+
*[[jQuery Tips]]
  
−
====jQuery Cheat Sheet====
+
====[[jQuery]] Cheat Sheet====
−
*{{ref jQuery-17-Visual-Cheat-Sheet1.pdf}}
+
*{{ref [[jQuery]]-17-Visual-Cheat-Sheet1.pdf}}

2020年10月24日 (土) 02:32時点における最新版

| Node.js | TypeScript | CSS | CSS3 | レスポンシブWebデザイン |

jQuery

4873114683.09.MZZZZZZZ.jpg link

ready()メソッド

  • jQueryはready()メソッドを実装している
  • ready()メソッドは、一般にDOMのドキュメントオブジェクトにバインドされるカスタムイベントハンドラ
  • 唯一の引数として関数を受け取る
  • この関数にはDOMがトラバースや操作を実行できるようになったときに実行されるJavaScriptのコードが含まれる

<blockquote>ready()イベントハンドラは、JavaScriptのwindow.onloadイベントにかわるjQueryの機能であり、必要に応じて何度でも利用できる。</blockquote> 

jQuery(document).ready(function(){
  alert('ready!');
});

ready()イベントを使うためのショートカット

jQuery(function(){
  alert('ready');
});

<blockquote>このイベントが必要になるのは、ページの先頭で<head>で囲まなければいけない場合のみ。</body>の直前に配置することで、ready()イベントは使わずにすむ。</body>の位置では、DOM要素だけでなく、それよりも前にあるすべてのものを読み込んでから、JavaScriptを実行することになる</blockquote>

$グローバルオブジェクト

  • $ グローバルオブジェクトは、jQuery に置き換えられます。
  • $() は、jQuery() 関数のエイリアスとなります

$の競合を回避する

  • $はjQueryのエイリアスだが、'jQuery' という表現とはことなり、'$'は、他のライブラリと競合する可能性がある。
  • しかしながら、jQuery ではなく、$ を利用したい。
  • 匿名関数を作成し、その関数にjQueryオブジェクトを渡したのち、jQueryオブジェクトへのパラメータポイントとして、$を使う
(function($){ // $ パラメータを使ってプライベートスコープを作成する関数
  // 競合の心配なく、$ を利用できる
})(jQuery) // 匿名関数を呼び出し、jQueryオブジェクトを渡す

セレクタとフィルタ

セレクタ

CSS |

  • jQueryでは、CSS1-3仕様で規定されているセレクタのほとんどをサポートしているだけでなく、カスタムセレクタを採用している
名称 例
ユニバーサルセレクタ $("*")
IDセレクタ $("#id名")
クラスセレクタ $(".クラス名")
要素セレクタ $("要素名")
グループセレクタ $("セレクタ，セレクタ...")
子孫セレクタ $("要素1 要素2")
子セレクタ $("要素1 > 要素2")
隣接セレクタ $("要素1 + 要素2")
間接セレクタ $("要素1 ~ 要素2")
fist-child疑似クラス $("要素:fist-child")
last-child疑似クラス $("要素:last-child")
nth-child疑似クラス $("要素:nth-child(番号)")
onln-child疑似クラス $("要素:only-child")
[attribute] $("[属性名]")
[attribute='vbalue'] $("[属性名='値']")
[attribute^='value'] $("[属性名^='値']")
[attribute $='value'] $("[属性名$='値']")
[attribute*='value'] $("[属性名]*='値'")
[attribute｜='value'] $("[属性名｜='値']")
[attribute~='value'] $("[属性名~='値']")

フィルタ

fistフィルタ $("要素:first")
lastフィルタ $("要素:last")
evenフィルタ $("要素:even")
oddフィルタ $("要素:odd")
eqフィルタ $("要素:eq(番号)")
gtフィルタ $("要素:gt(番号)")
ltフィルタ $("要素:lt(番号)")
headerフィルタ $(":header")
アニメーションフィルタ $("要素:animated")
否定疑似クラス $("要素:not(セレクタ)")
containsフィルタ $("要素:contains(文字列1)")
emptyフィルタ $("要素:empty")
hasフィルタ $("要素1:has(要素2)")
parentフィルタ $("要素:parent")
buttonフィルタ $(":button")
checkboxフィルタ $(":checkbox")
checkedフィルタ $(":checked")
disabledフィルタ $(":disabled")
enabledフィルタ $(":enabled")
fileフィルタ $(":file")
imageフィルタ $(":image")
inputフィルタ $(":input")
passwordフィルタ $(":password")
radioフィルタ $(":radio")
resetフィルタ $(":reset")
selectedフィルタ $(":reset")
submitフィルタ $(":submi")
textフィルタ $(":text")
hiddenフィルタ $(":hidden")
visibleフィルタ $(":visible")


API

.each()

  • 合致した全てのエレメントに対して関数を実行
$("img").each(function(){
    $(this).closest("a").attr("target","_blank");
});

.closest()

  • 開始要素から最も近い親要素を選択
$("img").each(function(){
    $(this).closest("a").attr("target","_blank");
});

length

  • jQueryオブジェクトのエレメント数を保持
$("img").each(function(){
   if ($(this).closest("a[target]").length == 0) {
       $(this).closest("a").attr("target","_blank");
   }
});

プラグイン

作成

DataTables

Tips

jQuery Cheat Sheet

  • {{ref jQuery-17-Visual-Cheat-Sheet1.pdf}}
「https://www.typea.info/tips_/index.php?title=JQuery&oldid=30686」から取得

© 2006 矢木浩人