jQuery を試すには


  Google がホスティングしている jQuery を利用する




Google Hosted Libraries - Developer's Guide



Googel では、JavaScript の有名どころのライブラリをバージョン別にホスティングしてくれているので、以下のようにするだけですぐ使えるようになります。

<!-- 
	2.0.3 の部分を変更すると内容が変わります 
-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

但し、jQuery UI のほうは、JavaScript 本体のホスティングはされていますが、css は自分で用意する必要があります(好みのCSSでビルドする)

ただ、どうしてもホスティングだけで行いたい場合は、css も Google にあります( 色あいに特徴の無い平凡なもの )

▼ Google に置かれている CSS( 但し、1.10.1 以前で確認 )
//ajax.googleapis.com/ajax/libs/jqueryui/バージョン/themes/base/jquery-ui.css
▼ 例
http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css

また、オンラインでその場で試したい場合はこちらを利用してみて下さい



このツールのテキストエリアは、タブも選択状態での複数行のタブ処理も機能します(SHIFT+TAB で左方向に移動します)







  jQuery でボタンクリック (を処理) するには




通常の JavaScript では、ボタン要素に onclick 属性を書いて、その内容として関数の呼び出しを記述して関数を定義します

<script>
function test() {
	alert("こんにちは");
}
</script>
<input type="button" value="JavaScript" onclick="test();">


この記述方法は一番簡単で、処理の定義を最初に書いて、呼び出しの定義を要素と同時に書く為、矛盾無く確実に処理されます。しかし、JavaScript のイベント登録で click イベントを作成する場合、要素の記述の後で処理する必要があります。

ですから、そのような場合は load イベント等でページが表示された後の処理として書く事になります。ただ、その際は過去において、たいていにおいてブラウザ毎に考慮する必要がありました。

しかし、jQuery を使うと以下のようになります

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link type="text/css" href="http://homepage2.nifty.com/lightbox/jquery/jqcss/black-tie/jquery-ui-1.10.1.custom.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(function(){
	
	$("#btn").click(
		function() {
			alert("こんにちは");
		}
	);

});
</script>
<input type="button" id="btn" value="JavaScript">

jQuery の ロード処理は通常の load イベントよりも早く発生するように作られており、遅くとも、通常の load イベントと同時期に発生します。そして、その為の 記述方法は以下のようなもの です

<script>
$(function(){

	処理
	
});
</script>


  jQuery でボタンをクリックした事にする

この処理は、通常の JavaScript(DOM) で記述すると過去とても面倒でしたが、jQuery ですと簡潔です。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link type="text/css" href="http://homepage2.nifty.com/lightbox/jquery/jqcss/black-tie/jquery-ui-1.10.1.custom.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(function(){
	
	$("#btn").click(
		function() {
			alert("こんにちは");
		}
	);

});
</script>
<input type="button" id="btn" value="JavaScript">
<hr>
<input
	type="button"
	value="上のボタンをクリックした事にする"
	onclick='$("#btn").click();'
>


記法としては、.click の中にイベント記述が無いだけですが、付加処理が無いので選択したオブジェクトに対して直接処理を行います。




yahoo  google  MSDN  MSDN(us)  WinFAQ  Win Howto  tohoho  ie_DHTML  vector  wdic  辞書  天気 


[jquery]
CCBot/2.0 (https://commoncrawl.org/faq/)
21/01/25 10:31:40
InfoBoard Version 1.00 : Language=Perl

BatchHelper COMprog CommonSpec Cprog CprogBase CprogSAMPLE CprogSTD CprogSTD2 CprogWinsock Cygwin GameScript HTML HTMLcss InstallShield InstallShieldFunc JScript JScriptSAMPLE Jsfuncs LLINK OldProg OracleGold OracleSilver PRO PRObrowser PROc PROconePOINT PROcontrol PROftpclient PROjscript PROmailer PROperl PROperlCHAT PROphp PROphpLesson PROphpLesson2 PROphpLesson3 PROphpfunction PROphpfunctionArray PROphpfunctionMisc PROphpfunctionString PROsql PROvb PROvbFunction PROvbString PROvbdbmtn PROvbonepoint PROwebapp PROwin1POINT PROwinSYSTEM PROwinYOROZU PROwindows ProjectBoard RealPHP ScriptAPP ScriptMaster VBRealtime Vsfuncs a1root access accreq adsi ajax amazon argus asp aspSample aspVarious aspdotnet aw2kinst cappvariety centura ckeyword classStyle cmaterial cmbin cmdbapp cmenum cmlang cmlistbox cmstd cmstdseed cmtxt cs daz3d db dbCommon dbaccess dnettool dos download flex2 flex3 flex4 framemtn framereq freeWorld freesoft gimp ginpro giodownload google hdml home hta htmlDom ie9svg install java javaSwing javascript jetsql jquery jsp jspTest jspVarious lightbox listasp listmsapi listmsie listmsiis listmsnt listmspatch listmsscript listmsvb listmsvc memo ms msde mysql netbeans oraPlsql oracle oracleWiper oraclehelper orafunc other panoramio pear perl personal pgdojo pgdojo_cal pgdojo_holiday pgdojo_idx pgdojo_ref pgdojo_req php phpVarious phpguide plsql postgres ps r205 realC realwebapp regex rgaki ruby rule sboard sc scprint scquest sdb sdbquest seesaa setup sh_Imagick sh_canvas sh_dotnet sh_google sh_tool sh_web shadowbox shgm shjquery shvbs shweb sjscript skadai skywalker smalltech sperl sqlq src systemdoc tcpip tegaki three toolbox twitter typeface usb useXML vb vbdb vbsfunc vbsguide vbsrc vpc wcsignup webanymind webappgen webclass webparts webtool webwsh win8 winofsql wmi work wp youtube