Hatena::ブログ(Diary)

三等兵

2010-04-17

jQueryリーディング#01

あれこれやってると頭が腐りそうなので、ときどき息抜きに読んでいこうかなと。でもほとんどあれ。予想というか仮説立てなので間違えてたらお助け><

http://jquery.com/

v1.4.2


全体的な構造のイメージ

jQueryはさわりとどこかのライブラリ見るぐらいしか扱ってないのでよくわからんけど、書き方からみるに、1つのオブジェクトにメソッド詰め込みまくってるのだと思う。メソッドチェーンできるのは自分自身を返すため。つまり、それぞれのメソッドはそのDOMを返すようになっているからだろう。ガチムチDOMライブラリがjQueryなんだよきっと。

とりあえずあってるかしらないけどここが出発点。そのオブジェクトと、メソッドをみていけば分かりやすいんじゃないかと思っているけどあってるかな?このへんを踏まえて読んでいく。


16行目〜

(function( window, undefined ) {
//
})(window);

windowオブジェクトをローカルに持ってきてる。undefinedは引数に入れているだけ。これは、

var undefined;

と同じことでしょうね。windowはなんでローカルに?んー、わからん。


19行目〜

ここからはローカルの領域上のトップレベルの変数を定義。いろいろ使う場面が多いのだと思う。

var jQuery = function( selector, context ) {
  return new jQuery.fn.init( selector, context );
},

これは$関数の部分かな。んで、newしてる。え?newか?関数を代入しているわけではないね。

おそらくjQuery.fn.init()には、全部?かどかしらないけどメソッド詰め込まれるのかな。ということは、jQuery.fn.init.prototype以下になんやかんやされてるんじゃないか。

あとjQueryという変数は後でwindow.$に代入するだろう。

  _jQuery = window.jQuery,
  _$ = window.$,

このwindowってのはグローバルにつながるwindowオブジェクトだよね?ああ、そうか。windowオブジェクト上にjQueryだの$といったプロパティがあったら_jQueryや_$に格納させているのか。

あれ?ん?それでどうするんだろ?コードの最後みたらわかったっぽい。6238行目。

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

この通りグローバルにあった場合プロパティを退避させて、ローカルのjQueryに差し替えているんだよきっと。それで362行目で元に戻すのがあった。

noConflict: function( deep ) {
  window.$ = _$;
  if ( deep ) {
    window.jQuery = _jQuery;
  }
    return jQuery;
  }

あーわかった。グローバルからjQueryにアクセスするためには、window.jQueryからしかできないようにされているね!window持ってきてるのもそういうことか。

そういえばそうだ。かなりヒキコモリンなjQuery。うーん、素晴らしい。

こうやってみるとフレームワークとは言い難い。prototype.jsってJSそのものを拡張していた。それを思うとjQueryはやっぱりDOM超円滑ライブラリかな。


  document = window.document,
  rootjQuery,
  quickExpr = /^[^<]*(<[\w\W]+>)[^>]*$|^#([\w-]+)$/,
  isSimple = /^.[^:#\[\.,]*$/,
  rnotwhite = /\S/,
  rtrim = /^(\s|\u00A0)+|(\s|\u00A0)+$/g,
  rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/,
  userAgent = navigator.userAgent,
  browserMatch,
  readyBound = false,
  readyList = [],
  DOMContentLoaded,

ここは良いや。documentはドキュメントそのもので、userAgentはブラウザだよね確か。正規表現はわからん。


  toString = Object.prototype.toString,
  hasOwnProperty = Object.prototype.hasOwnProperty,
  push = Array.prototype.push,
  slice = Array.prototype.slice,
  indexOf = Array.prototype.indexOf;

ここはそのままメソッドコピー。


ほとんど「なんとなく」なのであっているかどうか分からん。でもどういう仕組みになっているのか、ってのを見るのは面白いし、予想立てするのも面白いな。

後から間違いに気づければ良いでしょう。

2009-09-06

jQueryの門を叩きました

すっかり使い方を忘れてしまった。さっぱり。

htmlソース

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
//処理
});
</script>

</head>
<body>
</body>
</html>

ボタンを押すと文字が出てくるようにする。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){

$("button").click(function(){
    $("p").append("hello");
  });

});
</script>

</head>
<body>
<p></p>
<button>button</button>
</body>
</html>

文字が出てくるというか、これはつけ加えるってことになるな。


エフェクトを使って文字が出てくるように
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){

$("button").click(function(){
    $("p").show();
  });
  
});
</script>

</head>
<body>
<p style="display: none">とびでてじゃーじゃんーん!</p>
<button>button</button>
</body>
</html>

これが出てくるってこと。でもstyle使ってやるあたりどうにかならんか。

$("p").show("slow");

で、良い感じ。


文字の表示、非表示を行う。エフェクトつき
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){

$("button").click(
  function(){
    $("p").toggle("slow");
  });
  
});
</script>

</head>
<body>
<p style="display: none">とびでてじゃーじゃんーん!</p>
<button>button</button>
</body>
</html>

こりゃすばらしい。表示と非表示がこんな簡単にできてしまうとは。


コンテンツをドラッグ&ドロップできるプラグインを使ってみる

デモはこちら。

http://fromvega.com/wordpress/2007/07/14/easydrag-jquery-plugin/

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.easydrag.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){
	$("#box").easydrag();
	$("#box").ondrop(); 
});

</script>

</head>
<body>
<div style="height:100px; width:100px; background: red;" id="box">とびでてじゃーじゃんーん!</div>
</body>
</html>

おー動く動く。ときどきさわらないと忘れてしまいますね。もう少し応用して使えるようになりたいなあ。