jQueryを使う

jQueryとは?
1. jQuery とは、JavaScript ライブラリの一つです。　本家サイト(英文) 　リファレンス　 jQueryの基礎
2. jQuery を利用すると、ブラウザによるJavaScriptの挙動の違いなども吸収する利点もあります。
3. 実行jQueryの基本形は、 $("セレクタ").命令　又は、jQuery("セレクタ").命令となります。
  - 色々な命令で、選択要素の操作、イベント操作、アニメーションなどの操作が可能です。
    ＊セレクタ: 操作する要素
jQueryを使う
1. まず jQuery の本体 (jquery.js 又は jquery.min.js) を jQuery サイトからダウンロード、又は CDN にリンクして使います。リンク先は、以下のものがあります。
  1. Google Ajax API CDNhttps://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js
  2. Microsoft CDN https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.0.min.js
  3. jQuery CDNhttps://code.jquery.com/jquery-3.4.1.min.js
2. 次に、DOM構築後の処理を記述します (jQueryの記述方法)
  <script type="text/javascript"> $(function(){ /* HTMLロード後の実行jQueryを記述 */ }) </script>  　<script type="text/javascript"> $(document).ready(function(){ /* HTMLロード後の実行jQueryを記述 */ }) </script>
3. 実行jQueryは、$("セレクタ").命令の形になりますが、
  ◆セレクタは、"要素"のように、対象を" "で括ります。詳細はこちら
  ◆.命令は「.css("color","red")」のように、API を記述します　詳細はこちら
  全体としてセレクタに対して命令(操作)します。命令には function()を指定することも出来ますし、入れ子にすることも出来ます
  　＊API (Application Programming Interface)
4. 纏めると、ページ全体は、以下のようになります　　表示例01
  　<!DOCTYPE html> <html> <head> <meta charset="utf-8">  <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>  <script type="text/javascript"> // spanにmouseoverするとspanのcolorがredになります $(function() { $("span").mouseover(function() { $("span").css("color", "red"); })}) // spanをmouseoutするとspanのcolorが#cc0になります $(function() { $("span").mouseout(function() { $("span").css("color", "#cc0"); })}) </script> </head> <body> <span> mouseover/mouseoutでここの色を変えます </span> </body> </html>
5. 色々な jQuery 利用のサンプル (外部サイト)
  サイト１　サイト２　サイト３　サイト４
カスタム jQuery を作る
1. プラグインの追加　　参考１　参考２　参考３　参考４　参考５
  　 jQueryのプラグインを書くには、プラグインと同名の関数をjQuery.fn オブジェクトに追加します
  jQuery.fn.Plugin = function() { // ここに Plugin を書きます }; 　(function( $ ) { $.fn.Plugin = function() { // ここに Plugin を書きます }; })( jQuery );
2. 具体例は、以下のようになります　　表示例03
  　<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> function init() { $("#fire").click(function(event){ $("#result").sample({ text: 'Hello, World!!!!', }); }); // カスタムjQuery 作成 (function($) { $.fn.sample = function(params) { var defaults = { text: "Hello World!" }; // デフォルト値に引数をマージ var config = $.extend(defaults, params); this.text(config.text); return this; }; })(jQuery); }; </script> </head> <body onload="init();"> <div id="result">Here</div> <button id="fire" />Click me!</button> </body> </html>
jQuery 外部サイト
1. jQuery UI jQuery user interfase のページです(英文)
2. jQuery日本語リファレンス本家サイト(英文) の翻訳版です
3. jQuery リファレンス古籏一浩さんのページです
4. jQuery日本語リファレンスアルファベット順で纏まっています
5. jQuery リファレンス jQuery リファレンス(英文)
6. gmap3 api Google maps 用の jQuery plugin があります(英文)
7. jquery.gmap3.jsGoogleマップを簡易に利用できるプラグインです
8. jQuery API jQuery API 日本語リファレンスです
jQuery サンプル
1. Slider 「slick」　Flex Slider
2. メニューアコーディオンメニュー　スマホ対応
3. QRコード作成 QRコードを作成JS 　(QRコード作成サイト)
関連サイト
1. jQuery速習講座jQuery が速習出来るように纏められています
2. jQuery入門の問題集入門向けの問題集（メソッド編）
3. jQueryを学ぼう！７つのサンプルで学習
4. jQuery プログラミング入門書籍「jQuery プログラミング入門」のサンプルがあります
5. jQuery開発者向けメモQuery の基本・サンプルがあります
6. jQuery基礎文法最速マスター to-R さんのサイトです
7. jQueryの基礎 Shinta さんのサイトです
8. jQuery Color Plugin本体で未対応のcolorプロパティなどのアニメーションに対応
9. jQueryプラグインの作り方jQueryでプラグインを作成する方法を掲載
10. カスタム jQuery プラグインカスタムの jQuery プラグインを作成
11. プラグインをつくってみよう「jQuery のプラグインをつくってみよう」
12. DOMとは JavaScript の入門サイトです
13. jQuery Ajax jQuery API を使った、Ajaxに関するサンプル集

　　ページ先頭へ　　　 JavaScript 　J.S.を使う　 JS-link 　jQuery 　Wordpress 　maps