jQueryの勉強・基本編(自分用)

風見聡 @kazami7

Ajax = Asynchronous Javascript+XML。ページの一部のみを更新する技術。※文字コードはUTF-8のみ。※原則として同一ドメイン内のファイルのみアクセスできる。※chromeではローカルでAjaxが動かない。Firefox、Safariを使う。

風見聡 @kazami7

Ajax。ボタンクリックでid1の要素に外部HTMLファイルのid2の要素を取得表示する $function(){ $("button").click( function(){$("#id1").load("../aa.html #id2"); }); });

風見聡 @kazami7

Ajax。RSS等のXMLファイルを取得表示する $.ajax({ url:'rss.xml', dataType:'xml', success: function(data){ 取得したXMLに対する処理 } }); ※XMLはeach関数でHTMLに書き換え処理をして表示する

風見聡 @kazami7

続き。function(data){ $("item",data).each( function(){ $("dl").append("<dt><a href='"+$("link,this").text()+"'>"); }); 取得したdataのitem要素毎にdt要素を追加

風見聡 @kazami7

each=繰り返し処理。テーブルのth,tdを行ごとにtdに整形 $("table tr").each(function(){ $(this).html("<td>"+ $("th",this).text() +$("td",this).text() +"</td">); });

風見聡 @kazami7

jQuery勉強中。$("#logo").attr("src","logo.jpg"); ⇒idがlogoの要素にSRC属性を設定。 $("#logo").addClass("hidden"); ⇒idがlogoの要素にhiddenクラスを設定。 ※removeClassはその逆

風見聡 @kazami7

続き。$("button").click(function(){ $("input").val("");}); button要素をクリックしたらinput要素の内容を空にする。※.focus(function()フォーカス時 ※.blur(function) フォーカス外れ時

風見聡 @kazami7

続き。.one("focus",function(){}); 1回目のフォーカス時 .change(function(){}); フォーム部品が操作された時 .submit(function(){}); フォーム送信直前に処理する※return false;を書くと送信キャンセル

風見聡 @kazami7

jQueryでバリデ。$("form").submit(function(){ if( $("input[name="name"]").val()==""){ $("input[name="name"]").after("名前が未入力"); return false;} });

風見聡 @kazami7

続き。$("input[type="checkbox"]:checked") ⇒チェックボックス、ラジオボタンがチェックされた時 $("option:selected") ⇒セレクトボックスが選択された時 ※ラジオボタン＝input[type="radio"]

風見聡 @kazami7

続き。Javascriptオフの場合への対策:表示・非表示を切り替えるメニュー等のjQueryを実装する場合、CSSで初期状態を非表示にするのではなく、jQueryで非表示にする。＝Javascriptオフでも内容は見られるようにする。

風見聡 @kazami7

jQuery勉強中。※訂正※ idがimageの要素の取得 var $images = $('#image'); アニメーション $function(){$('#box').animate({width:'300px'},1000);⇒idがboxの要素を1000ミリ秒かけ横幅増

風見聡 @kazami7

jQuery勉強中。※訂正※ idがimageの要素の取得 var $images = $('#image'); アニメーション $function(){$('#box').animate({width:'300px'},1000);⇒idがboxの要素を1000ミリ秒かけ横幅増

風見聡 @kazami7

※訂正2※ jQuery勉強中。$("#id1").text($("#id2").text()); ⇒id1の要素にid2の要素のテキストを上書き $("#id1").on("click","a",function(){ }); ⇒id1のa要素クリック時に処理を実行

風見聡 @kazami7

※訂正2※ jQuery勉強中。$("#id1").text($("#id2").text()); ⇒id1の要素にid2の要素のテキストを上書き $("#id1").on("click","a",function(){ }); ⇒id1のa要素クリック時に処理を実行

風見聡 @kazami7

※訂正2※ jQuery勉強中。$("#id1").text($("#id2").text()); ⇒id1の要素にid2の要素のテキストを上書き $("#id1").on("click","a",function(){ }); ⇒id1のa要素クリック時に処理を実行

風見聡 @kazami7

※訂正3※function(data){ $("item",data).each( function(){ $("dl").append("<dt><a href='"+$("link",this).text()+"'>"); }); dataのitem要素毎にdtとリンクを追加

風見聡 @kazami7

※訂正3※function(data){ $("item",data).each( function(){ $("dl").append("<dt><a href='"+$("link",this).text()+"'>"); }); dataのitem要素毎にdtとリンクを追加

風見聡 @kazami7

※訂正3※function(data){ $("item",data).each( function(){ $("dl").append("<dt><a href='"+$("link",this).text()+"'>"); }); dataのitem要素毎にdtとリンクを追加