jQuery取値・賦値の基本方法
/*TEXTを取得する.AREATEXTの値*/var textval=$("#text_id").attr("value"); //またはvar textval=$("#text_id").val(); /*ラジオボタンの値*/var valradio=$("input[@type=radio][@checked])を取得します.val(); /*(items)というradioが選択するアイテムのセットの値*/var item=$('input[@name=items]@@checked])を取得する.val(); /*チェックボックスの値*/var checkboxval=$("#checkbox_id")を取得します.attr("value"); /*ドロップダウンリストの値*/var selectval=$('#select_id')を取得します.val();
その他の方法
//テキストボックス、テキスト領域:$("#text_id").attr("value",'');//コンテンツ$("#text_id").attr("value",'test');//内容//複数選択ボックスcheckbox:$("#chk_id").attr("checked",'');//$("#chk_id")をチェックする.attr("checked",true);//if($("#chk_id").attr('checked')=true)/////ラジオグループradio:$("input[@type=radio])が選択されているかどうかを判断します.attr("checked",'2');//value=2の項目を現在選択されている//ドロップダウンボックスselect:$(「#select_id」)に設定します.attr("value",'test');//value=testの項目を現在選択する$("")に設定.appendTo("#select_id")/ドロップダウンボックスのoption$("#select_id")を追加します.empty();//クリアドロップダウンボックスは、(items)というradioが選択するアイテムのセットの値var item=$('input[@name=items][@checked])を取得する.val();//選択するとval()=undefinedはselectが選択された項目のテキストvar item=$("select[@name=items]option[@selected])を取得する.text(); selectドロップダウンボックスの2番目の要素は、現在選択する値$('#select_id')[0]である.selectedIndex = 1; radioラジオグループの2番目の要素は、現在選択されている値$('input[@name=items])です.get(1).checked = true; //フォーム$(「form」).each(function(){ .reset(); });
1.要素$("#myid")を選択する効果はdocumentに等しい.getElementById("myid")ですが、書く文字はかなり少ないですね.
jQueryオブジェクトをhtml要素に変換する必要がある場合は、その0番目の要素を取るだけでよい.たとえば、$("#myid")はjQueryオブジェクトを返し、$("#myid")[0]はhtml要素を返します.
すべてのimg要素を選択すると、$("img")と書きます.
class="TextBox"を持つdiv要素()を選択した場合は、$("div.TextBox")と書きます.
myatttr属性を持つエレメント$("div[myattr])myattr属性を持つエレメント$("div[myattr='myclass'])属性が[myattr!='myclass']属性がmyで始まる[myattr^='my']属性がclassで終わる[myattr$='class']属性がclaの3文字[myattr*='cla']を含む
1つの選択が複数の要素を返し、1つの要素を返すたびに、いくつかの属性を要素に適用する場合は、$("div")と書くことができます.each(function() { $(this).css(”background-color”, “#F00″); alert($(this).html()); $(this).width(”200px”); });
2.イベントはページにonloadイベント処理方法$(function(){alert("ページ構造のロードが完了したが、一部の画像はまだロードされていない可能性がある(一般的には、このイベントは十分である)});
ページに複数のonloadイベント処理方法$(function(){alert("私が最初に実行する");})をバインドすることができます.
$(function(){alert("私は2番目に実行されます");});
特殊イベント$("#myid")をバインドします.keydown(function){alert("keydownイベントをトリガー");});
これらの一般的なイベントに加えて、一般的でないイベントはbindメソッドでバインドする必要があります.
3.要素の属性/方法は1つの要素の高さを得て、$("#myid").Height()は要素の位置を得る,$("#myid").offset()はoffsetオブジェクトを返し、要素の位置のtopをとると$("#myid").offset().top,?leftを取ると$("#myid").offset().leftは要素のinnerHTML,$("#myid").html()は要素のinnerText,$("#myid").text()は、テキストボックスの値,$("#myid")を得る.val()は要素の属性を得る,$("#myid").attr(”myattribute”)
以上の方法の基本的特徴として、パラメータを持たずに値をとること、パラメータを持つ設定値(offsetを除く)を持つこと、例えば$("#myid")がある.height(”20″); $(”#myid”).html(”asdasd”) $(”#myid”).val(”asdasd”)
offsetは読み取り専用であることに注意してください.
1つの要素に属性$("#myid")を設定する.attr("width","20%)は属性$("#myid")を読み出す.attr("width")は一度に複数の属性$("#myid")を指定する.attr({disabled:"disabled",width:"20%),height:"30"})属性$("#myid")を削除する.removeAttr(”disabled”)
スタイル$("#myid")を適用します.addClass("myclass")スタイル$("#myid")を削除します.removeClass(”myclass”)
スタイル$("#myid")を追加します.css("height","20 px")にスタイル$("#myid")のセットを追加します.css({height:"20 px",width:"100 px"})では、スタイルを追加する場合、このスタイルの名前はcssの名前であり、例えばstyle="background-color:#FF 0000"であり、対応するjQueryの書き方は$("#myid")であることに注意する必要がある.css("background-color"、"#FF 0000")しかし、スタイルのセットを加えると、スタイルの名前はjavascriptのcssの名前になります.例えば、myid.style.background Color="#FF 0000"、対応するjQueryの書き方は$("#myid").css({backgroundColor:”#FF0000″})
4.関係に基づいてエレメントを検索し、自分と同じレベルの次のエレメント$("#myid")を検索します.next()は、自分と同じクラスの自分の下にあるすべての要素$("#myid")を探します.nextall()は自分と同じクラスの前の要素$("#myid").prev()は、自分と同じクラスの自分の上にあるすべての要素$("#myid")を探します.prevAll()は自分の第1世代の子要素$("#myid").children()は自分の最初の親要素$("#myid").parent()は自分のすべての親要素$("#myid").parents()例:$("div.l 4").parents().each( function() { alert($(this).html()); });
class=l 4のdivのすべての親要素を得て、alertは彼らのhtmlを出します
例:$("div.l 4").parents(”div.l2″).each(function() { alert($(this).html()); }); class=l 4の親要素が得られます.この親要素はdivであり、class=l 2でなければなりません.
ここで言うすべての方法は、式を持っていてもいいです.式の書き方は第1部を参考にしてください.
5.メンテナンス要素はbodyに1つの要素$("body")を追加する.append("")この文はbody終了ラベルの前にhtmlを挿入し、結果として
$(”body”).prepend("")この文はbody開始ラベルにhtmlを挿入し、結果として
6.AJAXはgetメソッドで1ページ$を要求する.get(”http://www.google.com」、「q=jquery」、function(data,status){alert(data)})は要求を表すhttp://www.google.com,パラメータはq,パラメータの値はjquery,要求終了後(成功か失敗かにかかわらず)後続のfunctionを実行し,このfunctionには2つの固定パラメータがあり,dataとstatus,dataは返されるデータであり,statusは今回の要求の状態である.
postメソッドでページ$を要求する.post(……..) パラメータとgetメソッド
7.その他の方法$trim(str)str前後のスペースを$.browserは、現在のユーザーブラウザのタイプ$を返します.browser.バージョンは現在のブラウザのバージョンを返します
8.プラグインjQueryはプラグインをサポートし、http://jquery.com/plugins/既製のプラグインがたくさんありますので、自分で書いてもいいです.参考にしてください.http://docs.jquery.com/Core/jQ.....end#objectおよびhttp://docs.jquery.com/Core/jQuery.extend#object
1,ドロップダウンボックス:var cc 1=$(".formc select[@name='country']option[@selected]).text();//ドロップダウンメニューの選択項目のテキスト(真ん中にスペースがあることに注意)var cc 2=$('.formc select[@name="country"]')を得る.val();//ドロップダウンメニューの選択項目の値var cc 3=$('.formc select[@name="country"]')を得る.attr("id");//ドロップダウンメニューの選択項目のID属性値$("#select").empty();//ドロップダウンボックス/$(「#select」).html(''); $("").appendTo("#select")//ドロップダウンボックスのoptionを追加して少し説明します:1.select[@name='country']option[@selected]は、name属性を有し、この属性値が'country'のselect要素の中のselected属性を有するoption要素を表す.@の先頭にあるのは後ろに付いているのが属性であることがわかります.
2,ラジオボックス:$("input[@type=radio][@checked]).val();//ラジオボックスの選択項目の値を得る(真ん中にスペースがないことに注意)$("input[@type=radio][@value=2]).attr("checked",'checked');//ラジオボックスvalue=2を選択状態に設定.(真ん中にスペースがないことに注意)
3,チェックボックス:$("input[@type=checkbox][@checked]).val();//チェックボックスの選択した1番目の値$("input[@type=checkbox][@checked])を得る.each(function(){//チェックボックスは一般的に複数選択されているため、alert($(this).val()をループ出力することができます. });
$("#chk1").attr("checked",'');//チェックしない("#chk 2").attr("checked",true);//チェックif($("#chk 1").attr('checked')==undefined){}//チェックしたかどうかを判断
その他の方法
$( "#id" ).html()= "" ; // $( "#id" ).html( "test" );
$("#id").val("");
//テキストボックス、テキスト領域:$("#text_id").attr("value",'');//コンテンツ$("#text_id").attr("value",'test');//内容//複数選択ボックスcheckbox:$("#chk_id").attr("checked",'');//$("#chk_id")をチェックする.attr("checked",true);//if($("#chk_id").attr('checked')=true)/////ラジオグループradio:$("input[@type=radio])が選択されているかどうかを判断します.attr("checked",'2');//value=2の項目を現在選択されている//ドロップダウンボックスselect:$(「#select_id」)に設定します.attr("value",'test');//value=testの項目を現在選択する$("")に設定.appendTo("#select_id")/ドロップダウンボックスのoption$("#select_id")を追加します.empty();//クリアドロップダウンボックスは、(items)というradioが選択するアイテムのセットの値var item=$('input[@name=items][@checked])を取得する.val();//選択するとval()=undefinedはselectが選択された項目のテキストvar item=$("select[@name=items]option[@selected])を取得する.text(); selectドロップダウンボックスの2番目の要素は、現在選択する値$('#select_id')[0]である.selectedIndex = 1; radioラジオグループの2番目の要素は、現在選択されている値$('input[@name=items])です.get(1).checked = true; //フォーム$(「form」).each(function(){ .reset(); });
1.要素$("#myid")を選択する効果はdocumentに等しい.getElementById("myid")ですが、書く文字はかなり少ないですね.
jQueryオブジェクトをhtml要素に変換する必要がある場合は、その0番目の要素を取るだけでよい.たとえば、$("#myid")はjQueryオブジェクトを返し、$("#myid")[0]はhtml要素を返します.
すべてのimg要素を選択すると、$("img")と書きます.
class="TextBox"を持つdiv要素()を選択した場合は、$("div.TextBox")と書きます.
myatttr属性を持つエレメント$("div[myattr])myattr属性を持つエレメント$("div[myattr='myclass'])属性が[myattr!='myclass']属性がmyで始まる[myattr^='my']属性がclassで終わる[myattr$='class']属性がclaの3文字[myattr*='cla']を含む
1つの選択が複数の要素を返し、1つの要素を返すたびに、いくつかの属性を要素に適用する場合は、$("div")と書くことができます.each(function() { $(this).css(”background-color”, “#F00″); alert($(this).html()); $(this).width(”200px”); });
2.イベントはページにonloadイベント処理方法$(function(){alert("ページ構造のロードが完了したが、一部の画像はまだロードされていない可能性がある(一般的には、このイベントは十分である)});
ページに複数のonloadイベント処理方法$(function(){alert("私が最初に実行する");})をバインドすることができます.
$(function(){alert("私は2番目に実行されます");});
特殊イベント$("#myid")をバインドします.keydown(function){alert("keydownイベントをトリガー");});
これらの一般的なイベントに加えて、一般的でないイベントはbindメソッドでバインドする必要があります.
3.要素の属性/方法は1つの要素の高さを得て、$("#myid").Height()は要素の位置を得る,$("#myid").offset()はoffsetオブジェクトを返し、要素の位置のtopをとると$("#myid").offset().top,?leftを取ると$("#myid").offset().leftは要素のinnerHTML,$("#myid").html()は要素のinnerText,$("#myid").text()は、テキストボックスの値,$("#myid")を得る.val()は要素の属性を得る,$("#myid").attr(”myattribute”)
以上の方法の基本的特徴として、パラメータを持たずに値をとること、パラメータを持つ設定値(offsetを除く)を持つこと、例えば$("#myid")がある.height(”20″); $(”#myid”).html(”asdasd”) $(”#myid”).val(”asdasd”)
offsetは読み取り専用であることに注意してください.
1つの要素に属性$("#myid")を設定する.attr("width","20%)は属性$("#myid")を読み出す.attr("width")は一度に複数の属性$("#myid")を指定する.attr({disabled:"disabled",width:"20%),height:"30"})属性$("#myid")を削除する.removeAttr(”disabled”)
スタイル$("#myid")を適用します.addClass("myclass")スタイル$("#myid")を削除します.removeClass(”myclass”)
スタイル$("#myid")を追加します.css("height","20 px")にスタイル$("#myid")のセットを追加します.css({height:"20 px",width:"100 px"})では、スタイルを追加する場合、このスタイルの名前はcssの名前であり、例えばstyle="background-color:#FF 0000"であり、対応するjQueryの書き方は$("#myid")であることに注意する必要がある.css("background-color"、"#FF 0000")しかし、スタイルのセットを加えると、スタイルの名前はjavascriptのcssの名前になります.例えば、myid.style.background Color="#FF 0000"、対応するjQueryの書き方は$("#myid").css({backgroundColor:”#FF0000″})
4.関係に基づいてエレメントを検索し、自分と同じレベルの次のエレメント$("#myid")を検索します.next()は、自分と同じクラスの自分の下にあるすべての要素$("#myid")を探します.nextall()は自分と同じクラスの前の要素$("#myid").prev()は、自分と同じクラスの自分の上にあるすべての要素$("#myid")を探します.prevAll()は自分の第1世代の子要素$("#myid").children()は自分の最初の親要素$("#myid").parent()は自分のすべての親要素$("#myid").parents()例:$("div.l 4").parents().each( function() { alert($(this).html()); });
class=l 4のdivのすべての親要素を得て、alertは彼らのhtmlを出します
例:$("div.l 4").parents(”div.l2″).each(function() { alert($(this).html()); }); class=l 4の親要素が得られます.この親要素はdivであり、class=l 2でなければなりません.
ここで言うすべての方法は、式を持っていてもいいです.式の書き方は第1部を参考にしてください.
5.メンテナンス要素はbodyに1つの要素$("body")を追加する.append("")この文はbody終了ラベルの前にhtmlを挿入し、結果として
$(”body”).prepend("")この文はbody開始ラベルにhtmlを挿入し、結果として
6.AJAXはgetメソッドで1ページ$を要求する.get(”http://www.google.com」、「q=jquery」、function(data,status){alert(data)})は要求を表すhttp://www.google.com,パラメータはq,パラメータの値はjquery,要求終了後(成功か失敗かにかかわらず)後続のfunctionを実行し,このfunctionには2つの固定パラメータがあり,dataとstatus,dataは返されるデータであり,statusは今回の要求の状態である.
postメソッドでページ$を要求する.post(……..) パラメータとgetメソッド
7.その他の方法$trim(str)str前後のスペースを$.browserは、現在のユーザーブラウザのタイプ$を返します.browser.バージョンは現在のブラウザのバージョンを返します
8.プラグインjQueryはプラグインをサポートし、http://jquery.com/plugins/既製のプラグインがたくさんありますので、自分で書いてもいいです.参考にしてください.http://docs.jquery.com/Core/jQ.....end#objectおよびhttp://docs.jquery.com/Core/jQuery.extend#object
1,ドロップダウンボックス:var cc 1=$(".formc select[@name='country']option[@selected]).text();//ドロップダウンメニューの選択項目のテキスト(真ん中にスペースがあることに注意)var cc 2=$('.formc select[@name="country"]')を得る.val();//ドロップダウンメニューの選択項目の値var cc 3=$('.formc select[@name="country"]')を得る.attr("id");//ドロップダウンメニューの選択項目のID属性値$("#select").empty();//ドロップダウンボックス/$(「#select」).html(''); $("").appendTo("#select")//ドロップダウンボックスのoptionを追加して少し説明します:1.select[@name='country']option[@selected]は、name属性を有し、この属性値が'country'のselect要素の中のselected属性を有するoption要素を表す.@の先頭にあるのは後ろに付いているのが属性であることがわかります.
2,ラジオボックス:$("input[@type=radio][@checked]).val();//ラジオボックスの選択項目の値を得る(真ん中にスペースがないことに注意)$("input[@type=radio][@value=2]).attr("checked",'checked');//ラジオボックスvalue=2を選択状態に設定.(真ん中にスペースがないことに注意)
3,チェックボックス:$("input[@type=checkbox][@checked]).val();//チェックボックスの選択した1番目の値$("input[@type=checkbox][@checked])を得る.each(function(){//チェックボックスは一般的に複数選択されているため、alert($(this).val()をループ出力することができます. });
$("#chk1").attr("checked",'');//チェックしない("#chk 2").attr("checked",true);//チェックif($("#chk 1").attr('checked')==undefined){}//チェックしたかどうかを判断