Hatena::Groupjavascript

willnetの日記

2009-12-29

styleプロパティ

13:24

getter onlyのプロパティみたいなので

document.getElementById("hoge").style = "display:block";

みたいなことはできない。

document.getElementById("hoge").setAttribute("style", "display:block");

のようにsetAttributeを使うとよさげ

TikeTike2011/12/15 17:33I saercehd a bunch of sites and this was the best.

yrpkcgyrpkcg2011/12/16 01:23Xl1uQC <a href="http://alxzapzuhodl.com/">alxzapzuhodl</a>

dijisutoxfdijisutoxf2011/12/16 22:19joF4VQ , [url=http://kegxlfwdjlmw.com/]kegxlfwdjlmw[/url], [link=http://ftmeujzzmgsm.com/]ftmeujzzmgsm[/link], http://ilxcjijvtpoi.com/

kbrpoclkbrpocl2011/12/18 20:19oqbDh0 <a href="http://wizztnqiijco.com/">wizztnqiijco</a>

toqhwhsttoqhwhst2011/12/19 01:42xDwf5J , [url=http://tfnlugsgxxji.com/]tfnlugsgxxji[/url], [link=http://mmbjzkvynwob.com/]mmbjzkvynwob[/link], http://ryrninpnpeax.com/

2009-12-24

jQuery.fn.get()

21:00

普通のDOMオブジェクト配列を返す。引数に数値を入れた場合は該当するインデックスの配列の中身を返す

クロスブラウザ対応

20:51

jQuery時代に生きるクロスブラウザ対応の知恵 8選 : tech.kayac.com - KAYAC engineers' blogを見て気になった点のメモ

文字列の最後の文字列を取得したいとき

str[str.length - 1]

IEではうまくうごかない

str.slice(-1)

だとうまくいく

scriptタグにはcharsetを設定するべき

charsetをせっていしていないときに日本語を書いたときにブラウザがcharsetを間違えることがあるらしい。

amddncrtcnamddncrtcn2011/03/11 13:43xBkxhG <a href="http://macjwgzmqpdn.com/">macjwgzmqpdn</a>, [url=http://ipojiepwukyx.com/]ipojiepwukyx[/url], [link=http://ozdfwfmltvuw.com/]ozdfwfmltvuw[/link], http://nbbkfdkiqbzi.com/

2009-12-22

jQuery.appendTo()

00:16

引数はselectorなので下記のようなことは出来ない

$("<span />").appendTo($("<div></div>"));

Manipulation/appendTo - jQuery JavaScript Library

jQuery.fn.hover()

22:16

hoverはmouseover, mouseoutの組み合わせで実装できるのかと思ったけど、内部に別の要素が存在したときの挙動が微妙に違うみたい。

Aというdiv内にBというimgがある場合、B上にカーソルが入ってもAのoutは発生しません。これはdivのmouseoutイベントを用いた場合とは違う動作になるので注意してください

http://semooh.jp/jquery/api/events/hover/over%2C+out/

jQuery()

21:57

第二引数にDOM要素を指定できるのは知らなかったなー。

documentの最初のform内にある、全てのinputタグでtypeがradioのものを抽出する。

$("input:radio", document.form[0]);
http://semooh.jp/jquery/api/core/jQuery/expression%2C+context/

jQuery.extend

20:29

jQueryのプロトタイプに関数を定義する方法 - willnetの日記 - g:javascriptで書いたようにjQuery.extend()がよくわかってかったので調べた。

jQuery日本語リファレンスだと説明が古いようなので本家のリファレンスを参照した。

Utilities/jQuery.extend - jQuery JavaScript Library


ソース

jQuery.extendとjQuery.fn.extendは同じ関数。

jQuery.extend = jQuery.fn.extend = function() {
	// copy reference to target object
	var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;

	// Handle a deep copy situation
	if ( typeof target === "boolean" ) {
		deep = target;
		target = arguments[1] || {};
		// skip the boolean and the target
		i = 2;
	}

	// Handle case when target is a string or something (possible in deep copy)
	if ( typeof target !== "object" && !jQuery.isFunction(target) )
		target = {};

	// extend jQuery itself if only one argument is passed
	if ( length == i ) {
		target = this;
		--i;
	}

	for ( ; i < length; i++ )
		// Only deal with non-null/undefined values
		if ( (options = arguments[ i ]) != null )
			// Extend the base object
			for ( var name in options ) {
				var src = target[ name ], copy = options[ name ];

				// Prevent never-ending loop
				if ( target === copy )
					continue;

				// Recurse if we're merging object values
				if ( deep && copy && typeof copy === "object" && !copy.nodeType )
					target[ name ] = jQuery.extend( deep, 
						// Never move original objects, clone them
						src || ( copy.length != null ? [ ] : { } )
					, copy );

				// Don't bring in undefined values
				else if ( copy !== undefined )
					target[ name ] = copy;

			}

	// Return the modified object
	return target;
};

リファレンス

jQuery.extend( [deep], target, object1, [objectN] )

deep (Optional)BooleanIf set, the merge becomes recursive (i.e. deep copy).
targetObjectThe object to extend.
object1ObjectThe object that will be merged into the first.
objectN (Optional)ObjectMore objects to merge into the first.

使い方

引数に何をいくつ指定したかによって挙動が異なる。

雑感

  • 別に上書き防止みたいなことはしてないっぽい
  • 関数だけじゃなくて他のプロパティもコピーする
  • 関数を複数定義しない限りはjQuery.fn.hoge = function () {};みたいな感じで直接代入してもいいかも

continue

20:19

ループの最初に戻る。rubyでいうredo。next

LouisaLouisa2011/07/23 12:27Your aenswr was just what I needed. It's made my day!

zadytiopzadytiop2011/07/23 23:10dWDro0 <a href="http://yphpnrswswhs.com/">yphpnrswswhs</a>

qnfzpmqnfzpm2011/07/25 20:394rp5rN <a href="http://wlraksolwpsh.com/">wlraksolwpsh</a>

wyyesdvwyyesdv2011/07/27 00:07XGVdOA , [url=http://tnclsuepwfbe.com/]tnclsuepwfbe[/url], [link=http://auqxeutlmmvw.com/]auqxeutlmmvw[/link], http://kfhdqpijboqb.com/

RanooshRanoosh2013/03/31 20:44So true. Honesty and evreytihng recognized.

xqkbrulxqkbrul2013/04/01 19:20gjDkTj <a href="http://mfutrpfzoooq.com/">mfutrpfzoooq</a>

kmgomqmkmgomqm2013/04/04 20:11xh3gkG , [url=http://rnabrvxdijhr.com/]rnabrvxdijhr[/url], [link=http://lxbhpcmffyzo.com/]lxbhpcmffyzo[/link], http://adcibmticmkx.com/

2009-12-21

jQuery.fn.end()

17:35

>end() - jQuery 1.3.2 日本語リファレンス>

jQueryオブジェクトを連鎖的に呼び出していった際に、現在の選択状態を破棄して1つ前の状態に戻します。

最初は???だったけど、じっくり読んだらわかった。jQueryオブジェクトは自分の内部状態の変化(cssとかではなく保持しているDOM要素ね)を保持していてそれを一段階戻すのがend()関数みたい。

tagName

17:17

DOMエレメントにtagNameというプロパティがあり、読んで字のごとく自分のタグの名前を返してくれる。知らなかったのでメモ

jQuery.fn.map()

17:12

jQueryオブジェクトが持つ要素集合を、elementなどの他の値の配列に変換する。

この機能を使って、valueや属性、cssなど様々な値の配列を作ることが出来る。

map(callback) - jQuery 1.3.2 日本語リファレンス

とあるけど戻り値はjQueryオブジェクト

サンプルコードを見ると

$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );

mapの次にgetを呼んでいる。んー、mapに渡されたコールバックの戻り値の配列を"含んだ"jQueryオブジェクトが帰ってくるってことかな。で、get()でそれを本物の配列に変換してると。

jQueryオブジェクトが内部状態をどのように保持しているかはあんまりよくわかってないので時間のあるときに調べたい。

jQueryのプロトタイプに関数を定義する方法

17:02

jQueryのプロトタイプに関数を定義したい場合は

jQuery.fn.hoge = function () {
  // something...
};

とするか

jQuery.fn.extend({
  hoge:function () {
  // something...
  }});

とする。たぶんextend使うと既存の関数を上書きしないようにするんじゃないかな(未確認)。

PriscillaPriscilla2013/08/01 22:48A million thanks for posting this inotimafron.

KertKert2016/04/29 13:11That's really thinikng out of the box. Thanks!

RenoReno2016/05/02 12:39Yagislar onceleri yagmur,aksam saatlerinden itibaren Trakya’da karlakarisik yagmur ve kar, gec saatlerden itibaren Marmara,ic Ege,goller yoresi ve ic anadolunun kuzeybatisinda karla karisik yagmur ve kar seklinde olacak. Yagislarin Kiyi Ege,Bati Akdeniz ve Marmara’da etkili ve surekli olmasi bekleniyor.Hava sicakliginin yurdun kuzeybati kesimlerinde hissedilir derecede 8-10 derece azla,asimruzgarin aksam saatlerinden itibaren yurdun kuzeybati kesimlerinde kuzeyli yonlerden kuvvetli yer yer kisa sureli firtina seklinde esmesi bekleniyor. http://fuamarty.com [url=http://uypzgymx.com]uypzgymx[/url] [link=http://lpxiwaj.com]lpxiwaj[/link]

SteffieSteffie2016/05/02 19:58or is feeling <a href="http://ryevois.com">rudsrown.A-sonted</a> homeopathic remedies for colds, flus, fevers, and bug bites, teething.  While traditional homeopaths claim the combo remedies available are not the way to go, for home

NericeNerice2016/05/03 20:07You take the most gorgeous phhTagropos!this part of your writing really struck a cord with me;“The thought of ” lets get over with it” comes to my mind. I have the feeling that what everybody is trying to get over with is life. The fast forward button.”I was in a drunken club circuit up until before christmas and I am finding your ideas very inspiring.[] http://dclrxll.com [url=http://hosewf.com]hosewf[/url] [link=http://cquhydu.com]cquhydu[/link]

2009-12-16

DOM構築後にスクリプトを実行するには

14:08

  • window.onloadに関数代入するのが一番楽だけど、画像の読み込みまで待ってしまう
  • DOMContentLoadedイベントを監視すると画像読み込み前でスクリプトを実行できる
  • IEにはDOMContentLoadedがないのでdocument.documentElement.doScroll("left")を監視してDOM構築が終わるまで再起するといいらしい?→あんまりいい方法じゃない気がするなー。jQueryはどうやってるんだろ
  • あとdocument.readyStateでDOMの読み込み状態を取得できる。別にイベントではないのでそれほど使うところはない気がする。ブラウザによって挙動に違いがあるようだ。

参考

document.readyState - 素人がプログラミングを勉強するブログ

onloadの代わりにDOMContentLoadedを使ってみる - へぼいいいわけ

jQueryのheight()はpaddingの中の高さ

13:47

paddingも含めた高さを取得したければoffsetHeightとかを参照する必要があるみたい

jQuery でサイズや位置を取得する方法を図にしてみた - Cyokodog :: Diary

OllieOllie2011/07/23 15:44That's more than snesilbe! That's a great post!

foafpsjzhfoafpsjzh2011/07/23 23:09Jm4gsv <a href="http://lorycmowdarx.com/">lorycmowdarx</a>

sxyckezobkwsxyckezobkw2011/07/24 23:36KQG6SR , [url=http://wsdpegzxnvzl.com/]wsdpegzxnvzl[/url], [link=http://mqeobhwejsxy.com/]mqeobhwejsxy[/link], http://zbnwmojxztcg.com/

tidfglptidfglp2011/07/26 18:56cksPgC <a href="http://fphovvnjztdr.com/">fphovvnjztdr</a>

rokxyumzerokxyumze2011/07/26 22:546NSp9y , [url=http://claybhlxvdqi.com/]claybhlxvdqi[/url], [link=http://qwhadxpcryoe.com/]qwhadxpcryoe[/link], http://gygzrybcxqvt.com/

AnggaAngga2013/07/31 02:15Great article but it didn't have evngethiyr-I didn't find the kitchen sink!

MaheshMahesh2013/08/01 19:21Your cranium must be princetotg some very valuable brains.

TerriTerri2013/08/11 03:17I was looking evwreyhere and this popped up like nothing! http://enryhqry.com [url=http://cjqwmmvjatv.com]cjqwmmvjatv[/url] [link=http://nfawoij.com]nfawoij[/link]