JavaScript
本当は要点となる部分をサクっと把握できればいいのだろうけど、地道に作業してみた。約6000行を400行にした。 (function(window, undefined){ var jQuery = function(){ return new jQuery.fn.init(); }, _jQuery, _$, document, rootjQuery, quickExpr, is…
今まではセムーのサイトや本家のドキュメントを読みつつなんとか凌いだ感じだったけど、改めて勉強してみてjQueryとても使えると思った。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr" id="R1"> <head> </head></html>
cssの指定もjQueryで可能。以下の設定ではオンクリックイベントに関連付けられている。animateメソッドの500は500ミリ秒でfontSizeを2倍にするという意味です。1秒=1000ミリ秒。 「メソッドをチェーンする」というのは、.css().css().animate()のように連携…
該当のdivをクリックしたら「test!」と表示されます。その他イベントの種類はhttp://semooh.jp/jquery/api/events/やhttp://docs.jquery.com/Eventsを見ればサンプルコードなど載っている。 要するにjavascriptは引数に関数もとれる、というwktkな言語ですよ…
$(function(){処理})と$(docment).ready(function(){処理})は同じ。前者の方がポピュラーな書き方でしょうか。 javascriptの記述を最後に持ってくるなら下段の書き方でもok <script src="./jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("div.foo").css("color","red"); $("div.bar").css("color","blu…
ダウンロードと参考サイト http://jquery.com/ 本家サイト http://docs.jquery.com/Main_Page 本家ドキュメント http://semooh.jp/jquery/ せむーのサイト http://allabout.co.jp/internet/javascript/closeup/CU20071020A/ 高橋さんの記事(下の方に目次あり…
現段階では使い方のみを理解する findChildElementsメソッドのエイリアスです。 function $$() { return Selector.findChildElements(document, $A(arguments)); } findChildElements: function(element, expressions) { expressions = Selector.split(expre…
toggle $('test1', 'test2', 'test3')は拡張された要素が配列でかえってくるので、eachで各要素に処理を加えます。 コメントアウトしている箇所は$w関数なので注意。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
用例2 処理を加えた結果が欲しいのでcollect()を使ってarrayに収める。処理を加えるだけの場合はeach()を使う、と。 <script src="prototype1.6.js"></script> <script> function $(element){ if(arguments.length > 1){ for(var i=0, elements = [], length = arguments.length; i
用例 perlのqwみたいなの。 <script> String.prototype.strip = function(){ return this.replace(/^\s+/, '').replace(/\s+$/, ''); } function $w(string){ string = string.strip(); return string ? string.split(/\s+/) : []; } console.log(" hoge moge ".stri…
用例 引数は複数あっても大丈夫、と。 <script src="prototype1.6.js"></script> <script> function $(element){ if(arguments.length > 1){ for(var i=0, elements = [], length = arguments.length; i
partition() 配列を条件分けする <script> Array.prototype._each = function(iterator){ for(var i=0, l=this.length; i
sortBy() 基準に沿ってソートする <script> Array.prototype._each = function(iterator){ for(var i=0, l=this.length; i
min() 要素の最小値を取得する <script> Array.prototype._each = function(iterator){ for(var i=0, l=this.length; i
max() 要素の最大値を取得する <script> Array.prototype._each = function(iterator){ for(var i=0, l=this.length; i
invoke() 各要素にメソッドを適用する <script> Array.prototype._each = function(iterator){ for(var i=0, l=this.length; i
pluck() 要素のプロパティを抜き出す <script> Array.prototype._each = function(iterator){ for(var i=0, l=this.length; i
inGroupsOf() 配列をグループ分けして、要素が足りない場合はオプションで埋める <script> Array.prototype._each = function(iterator){ for(var i=0, l=this.length; i
grep() 条件にマッチする要素を取り出して処理する <script> Array.prototype._each = function(iterator){ for(var i=0, l=this.length; i
findAll(), fileter(), select 条件にあてはまる要素を全て見つける <script> Array.prototype._each = function(iterator){ for(var i=0, l=this.length; i
detect() / find() 要素を見つける <script> Array.prototype._each = function(iterator){ for(var i=0, l=this.length; i
include() 指定された値があるか <script> Array.prototype._each = function(iterator){ for(var i=0, l=this.length; i
any ある要素が条件を満たしているか <script> Array.prototype._each = function(iterator){ for(var i=0, l=this.length; i
all() <script> Array.prototype._each = function(iterator){ for(var i=0, l=this.length; i
inject 使い方よくわかってないですが。。 <script> Array.prototype._each = function(iterator){ for(var i=0, l=this.length; i
要素をグループ化して処理を加える eachSlice() <script> Array.prototype._each = function(iterator){ for(var i=0, l=this.length; i
配列になんらかの処理を加える collect() <script> Array.prototype._each = function(iterator){ for(var i=0, l=this.length; i
全ての基本は _each() each() <script> Array.prototype._each = function(iterator){ for(var i=0, l=this.length; i
Prototype.js分析 Enumerable学習法 高階関数の魅力にとりつかれつつあるので、そのスタイルをモノにするべくEnumerableをそらで書けるようになるまでひたすら写経を繰り返す。使い方をよくわかっていないメソッドもあるがコードの流れを体で覚えてしまうの…
eachSliceをprototype.jsなしの最小構成で実装 eachSliceメソッド内の「this.toArray()」はthis.collect()になる。引数にイテレータが無い場合はPrototype.Kが代入される。引数をそのまま返す関数です <script> Array.prototype._each = function(iterator){ for(var…
