jQuery
をテンプレートにして作成
LECTURE
担当科目一覧
ソーシャルデザイン概論/2024
ソーシャルデザイン演習/2024
情報デザイン論/2024
情報デザイン演習IIA/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*jQuery
[[jQuery/Selector]]｜[[jQuery/Method]]｜[[jQuery/Sample]]
~
jQueryとは、JavaScriptの様々な表現機能を使いやすくまとめ...
//&color(red){注）Web標準ブラウザ：Firefox、Chrome、Safar...
~
***CONTENTS
#contents2_1
~
**はじめに
jQuery は 何が便利なのか。比較のために JavaScriptだけで記...
-対象となる HTML
<ul id="SiteNavi''>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>
以下いずれも、すべての<li>項目の文字の色を赤に変更するス...
-JavaScript で直接操作する場合（[[DOM>JavaScript/DOM]]の...
var navi = document.getElementById('SiteNavi');
val list = navi.getElementsByTagName('li');
for( var i=0; i<list.length; i++){
var item = list[i];
item.style.color = "red";
}
-jQuery で操作する場合
$('#SiteNavi li').css( 'color' , 'red');
以上、jQuery を使うと記述が劇的にシンプルになるのがわかり...
~
~
**jQuery を利用するには
jQueryを利用するには、jQuery本体をダウンロードして、サイ...
~
***ダウンロードしてサイトローカルに置く場合
ネットワークに未接続の環境でも、動作を確認することができ...
-1) 以下の公式サイトから jQuery本体をダウンロード。
http://jquery.com/
jQuery本体は、''jquery-3.5.1.js'' のような名前のファイル...
--jquery-x.xx.x.js
通常バージョン：ふつうにソースコードとして読める状態のフ...
--jquery-x.xx.x.min.js
ミニマムバージョン：「スペース」や「改行」が省略されて、...
以下の事例では、jQueryについては、ダウンロードしたものを...
-2) HTMLファイルの <head> に以下の1行を追加します。
<script src="js/jquery-x.xx.x.min.js"></script>
&small(これは、サイトローカルに js フォルダがあって、その...
~
***CDN を使う場合
制作環境が常にネットワークに接続した状態であればこちらが...
HTMLファイルの <head> に1行の script タグを追加するだけで...
-jQuery公式サイトのCDNを利用する場合
<script src="https://code.jquery.com/jquery-3.5.1.min.j...
以下のページから最新版の埋め込みコードを取得できます。
https://code.jquery.com/
-Google のCDNを利用する場合
<script src="https://ajax.googleapis.com/ajax/libs/jquer...
以下のページから最新版の埋め込みコードを取得できます。
https://developers.google.com/speed/libraries/
~
~
**jQueryコードの書き方
***基本構文
//jQuery は、JavaScriptの文法上は Functionオブジェクトに...
// window.$ = window.jQuery = function( ){ };
//
jQuery の構文は、正確に書くと以下のような形になっています。
jQuery( セレクタ ).メソッド( パラメータ );
''実際のコードでは jQuery のエイリアス $ を使って以下のよ...
$( セレクタ ).メソッド( パラメータ );
例：$("#menu").slideToggle('slow');
~
***実行タイミング
JavaScript を用いたコンテンツは一般に HTMLのコード（DOM）...
jQuery にはページが完全に読み込まれたかどうかを判定する...
jQuery( document ).ready( function ( ) {
// ここに処理を記述します
} );
''実際にはこれを簡略化した以下の枠組みに入れて記述するの...
$ ( function ( ) {
// ここに処理を記述します
});
~
***実際の書き方事例
id="button" の部分のクリックで id="menu" の部分が 表示/非...
HTML側に、id="button" と id="menu" が定義された場所が必要...
$( function() {
$( "#button" ).click( function() {
$( "#menu" ).slideToggle('slow');
});
});
~
***リファレンス
ライブラリ関数というのは様々存在するので、「覚えて使う」...
-公式リファレンス http://api.jquery.com/
-日本語リファレンス
--http://semooh.jp/jquery/
--http://js.studio-kingdom.com/jquery
~
~
**セレクタとメソッド
***jQueryのセレクタ
記事を独立させました。> [[jQuery/Selector]]
~
***jQueryのメソッド
記事を独立させました。> [[jQuery/Method]]
~
~
**よくある質問
***jQueryのダウンロードの方法について
jQueryのダウンロードのページにいっても、何をダウンロード...
jQueryに限らず、JavaScriptのライブラリーファイルというの...
で、それで問題ありません。それをそのまま保存しましょう。
それが見えている状態で、ブラウザのアドレス欄を確認してみ...
要はそれを .js ファイルとして取得すればいいので、そのまま...
~
***jQueryの動作をスマホでも・・
jQuery, jQuery UI は、スマートフォン（タッチデバイス）で...
-ダウンロード
http://touchpunch.furf.com/
-導入方法
以下のように jQuery UI Touch Punch のスクリプトを読み込む...
<script src="jquery.ui.touch-punch.min.js"></script>
~
~
終了行:
*jQuery
[[jQuery/Selector]]｜[[jQuery/Method]]｜[[jQuery/Sample]]
~
jQueryとは、JavaScriptの様々な表現機能を使いやすくまとめ...
//&color(red){注）Web標準ブラウザ：Firefox、Chrome、Safar...
~
***CONTENTS
#contents2_1
~
**はじめに
jQuery は 何が便利なのか。比較のために JavaScriptだけで記...
-対象となる HTML
<ul id="SiteNavi''>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>
以下いずれも、すべての<li>項目の文字の色を赤に変更するス...
-JavaScript で直接操作する場合（[[DOM>JavaScript/DOM]]の...
var navi = document.getElementById('SiteNavi');
val list = navi.getElementsByTagName('li');
for( var i=0; i<list.length; i++){
var item = list[i];
item.style.color = "red";
}
-jQuery で操作する場合
$('#SiteNavi li').css( 'color' , 'red');
以上、jQuery を使うと記述が劇的にシンプルになるのがわかり...
~
~
**jQuery を利用するには
jQueryを利用するには、jQuery本体をダウンロードして、サイ...
~
***ダウンロードしてサイトローカルに置く場合
ネットワークに未接続の環境でも、動作を確認することができ...
-1) 以下の公式サイトから jQuery本体をダウンロード。
http://jquery.com/
jQuery本体は、''jquery-3.5.1.js'' のような名前のファイル...
--jquery-x.xx.x.js
通常バージョン：ふつうにソースコードとして読める状態のフ...
--jquery-x.xx.x.min.js
ミニマムバージョン：「スペース」や「改行」が省略されて、...
以下の事例では、jQueryについては、ダウンロードしたものを...
-2) HTMLファイルの <head> に以下の1行を追加します。
<script src="js/jquery-x.xx.x.min.js"></script>
&small(これは、サイトローカルに js フォルダがあって、その...
~
***CDN を使う場合
制作環境が常にネットワークに接続した状態であればこちらが...
HTMLファイルの <head> に1行の script タグを追加するだけで...
-jQuery公式サイトのCDNを利用する場合
<script src="https://code.jquery.com/jquery-3.5.1.min.j...
以下のページから最新版の埋め込みコードを取得できます。
https://code.jquery.com/
-Google のCDNを利用する場合
<script src="https://ajax.googleapis.com/ajax/libs/jquer...
以下のページから最新版の埋め込みコードを取得できます。
https://developers.google.com/speed/libraries/
~
~
**jQueryコードの書き方
***基本構文
//jQuery は、JavaScriptの文法上は Functionオブジェクトに...
// window.$ = window.jQuery = function( ){ };
//
jQuery の構文は、正確に書くと以下のような形になっています。
jQuery( セレクタ ).メソッド( パラメータ );
''実際のコードでは jQuery のエイリアス $ を使って以下のよ...
$( セレクタ ).メソッド( パラメータ );
例：$("#menu").slideToggle('slow');
~
***実行タイミング
JavaScript を用いたコンテンツは一般に HTMLのコード（DOM）...
jQuery にはページが完全に読み込まれたかどうかを判定する...
jQuery( document ).ready( function ( ) {
// ここに処理を記述します
} );
''実際にはこれを簡略化した以下の枠組みに入れて記述するの...
$ ( function ( ) {
// ここに処理を記述します
});
~
***実際の書き方事例
id="button" の部分のクリックで id="menu" の部分が 表示/非...
HTML側に、id="button" と id="menu" が定義された場所が必要...
$( function() {
$( "#button" ).click( function() {
$( "#menu" ).slideToggle('slow');
});
});
~
***リファレンス
ライブラリ関数というのは様々存在するので、「覚えて使う」...
-公式リファレンス http://api.jquery.com/
-日本語リファレンス
--http://semooh.jp/jquery/
--http://js.studio-kingdom.com/jquery
~
~
**セレクタとメソッド
***jQueryのセレクタ
記事を独立させました。> [[jQuery/Selector]]
~
***jQueryのメソッド
記事を独立させました。> [[jQuery/Method]]
~
~
**よくある質問
***jQueryのダウンロードの方法について
jQueryのダウンロードのページにいっても、何をダウンロード...
jQueryに限らず、JavaScriptのライブラリーファイルというの...
で、それで問題ありません。それをそのまま保存しましょう。
それが見えている状態で、ブラウザのアドレス欄を確認してみ...
要はそれを .js ファイルとして取得すればいいので、そのまま...
~
***jQueryの動作をスマホでも・・
jQuery, jQuery UI は、スマートフォン（タッチデバイス）で...
-ダウンロード
http://touchpunch.furf.com/
-導入方法
以下のように jQuery UI Touch Punch のスクリプトを読み込む...
<script src="jquery.ui.touch-punch.min.js"></script>
~
~
ページ名:
