Beautiful Element Creation with jQuery — Article — The Nerdary
By Kenny Meyers January, 18th 2011 jQuery's new(ish) element creation syntax drops 'bows. For those of you who don't know — which I'm banking on quite a bit — jQuery lets you create elements and then attach an object of parameters to it. It will then use those parameters to create the element and its attributes. In previous versions of jQuery you would write this: Now, volume-wise it appears that
JavaScriptのDOM Core基礎 - 三等兵
Coreの簡易リファレンス。Coreは要素を参照したり、相対位置から周りのノードを参照したり、要素を生成するといった部分。主に利用するであろうプロパティやメソッドはカバーしているつもりですけど、これも入れとけってのあったら教えてください。 このあたりは地味で使いづらくその上理解しにくいという残念な部分。ふと忘れたときに使う個人的なものですが、慢性jQuery拒絶症候群な人よかったらどうぞ。それにしても暑い。ガリガリ君おいしいね。 DOMとは。 Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。端的に言えば、Web ページをスクリプトやプログラミング言語とつなぐような機構です。 https://developer.mozilla.org/ja/
jQueryでテキストノードのみを取得 - メモ用紙
obj に含まれるテキストノードをすべて取得したいときはこう書く。 obj.find("*").andSelf().contents().not("[nodeType=1]") find("*") で子孫の要素ノードを取得 andSelf() で obj 自体も含める contents() はテキストノードを含むすべての子要素を取得 not("[nodeType=1]") で要素ノードを取り除く
Array に Hash を被せる(AOH) - latest log
配列を返す関数は、素の配列を返すよりも、first や last などの付加情報も一緒に返すといいんじゃないかな。 というお話です。 たとえば FakeArray → Array NodeList や arguments は FakeArray(Array Like Object) と呼ばれる擬似配列です。 FakeArray には join() や push() などの便利なメソッドがないため、FakeArray を一旦 Array に変換する(↓)toArray のような関数が、どうしても必要になります。 # Array.prototype.slice.apply(fakeArray) を使うケースは説明しないよ 素の Arrayを返す toArray 関数 function toArray(fakeArray) { // @param Array/FakeArray: // @ret
第9回 実践DOMスクリプティング#2：DOMとHTML | gihyo.jp
こんにちは、太田です。前回はHTMLとテキスト操作を解説しました。今回は、さらにHTMLの操作の実例を中心に解説していきます。 JavaScriptとエスケープ まず、エスケープについて確認しておきましょう。外部から入力されたデータを画面上に表示する際はクロスサイトスクリプティングに注意する必要があることはもはや常識と言ってよいと思います。サーバーサイドのウェブ開発用フレームワークでは、ほとんどの場合HTMLのエスケープ用のメソッドが用意されていて、HTMLのエスケープは適切に行えるはずです。しかし、注意しなければいけないのは、HTMLのエスケープはJavaScriptにそのまま当てはめることはできないという点です。当たり前の話ですが、HTMLとJavaScriptではエスケープすべき文字が異なります。また、IEの6、7ではCSSにJavaScriptを埋めこむことができるのでCSSにも注
第8回 実践DOMスクリプティング#1：HTMLとテキストの操作 | gihyo.jp
こんにちは、太田です。前々回、前回でDOMの基礎を簡単に解説しました。今回からは、DOMを使った実用的なスクリプトを解説していきます。特に今回はHTMLの操作、テキストの操作にフォーカスを当てていくつかのサンプルコードを解説していきます。 HTML操作の基本 JavaScriptによってHTMLを書き出したり、一部を書き換えたり、削除したりといった方法は実は様々な方法が用意されています。目的に合わせて適切な方法を選ばないと非効率だったり、最悪クロスサイトスクリプティングなどの問題を抱えてしまう危険もあります。 document.writeと同期読み込み JavaScriptでHTMLを書き出すというと、最初に学ぶのはこのdocument.writeかもしれません。いわゆるprint文のようにシンプルなAPIなので、入門書の最初のサンプルなどで扱われることも多いようです。しかし、docume
HTML Parsing and Screen Scraping With the Simple HTML DOM Library | Envato Tuts+
If you need to parse HTML, regular expressions aren't the way to go. In this tutorial, you'll learn how to use an open-source, easily learned parser to read, modify, and spit back out HTML from external sources. Using Envato Tuts+ as an example, you'll learn how to get a list of all the articles published on the site and display them. 1. Preparation The first thing to do is to install Composer, wh
第6回 JavaScriptとHTMLとDOMの基本#1 | gihyo.jp
こんにちは、太田です。前々回、前回とJavaScriptの基礎的な部分を解説しました。今回はJavaScriptからみたHTMLを中心に、DOMについても少しずつ解説しています。 JavaScriptとHTML FirefoxのアドオンやサーバーサイドJavaScriptなどの例外をのぞいて、多くのJavaScriptはHTML上で実行されるので、HTMLは土台となる重要な要素です。そこでHTMLの基礎的な部分からHTMLとJavaScriptの関係を解説します。 DOCTYPEとレンダリングモード HTMLといえば最初に書くのはDOCTYPEです。現在使われているDOCTYPEはHTML4.01、XHTML1.0、XHTML1.1といくつかの種類があり、さらにその中でTransitionalやStrictなどの違いや、XHTMLではXML宣言の有無（本来は必須ですが）などバリエーションが
event.offsetX と offsetY の互換性について - latest log
IE9正式版ではなく IE9pp(IE9 Platform Preview) の現状について記載しています。 event.offsetX/Y や event.layerX/Y から相対座標を取得できますが、DOM Lv0 のため仕様が無く、互換性もありません。今日はそれらの非互換性について調べてみました。 event.offsetX/Y は、IE, Opera, WebKit で定義されており、event.layerX/Y は、Gecko と WebKit で定義されています(WebKitのlayerX/YはGeckoと別物です)。 event.offsetX/Y は、現在標準化にむけて策定中です http://www.w3.org/TR/cssom-view/#extensions-to-the-mouseevent-interface 策定中の仕様では event.offsetX/Y
【コラム】攻略! ツール・ド・プログラミング (17) 「qooxdoo」でDOMを直接操作する | エンタープライズ | マイコミジャーナル
qooxdooの低レベルAPI qooxdooの最大の特徴は、DOMやHTML、CSSなどを使わずに、用意されたAPIを用いたJavaScriptコードだけでWebアプリケーションが作成できることである。しかし、ときにはすべてをJavaScriptで書くことが少々煩わしいケースもある。そんなときのために、qooxdooではDOMやHTML要素を直接操作するための低レベルAPIが用意されている。 図1はqooxdooのアーキテクチャを表した図である(qooxdooの公式サイトより引用）。前回、前々回の例ではGUIツールキットを利用したWebアプリの作り方を紹介したが、qooxdooではそれだけでなくHTML要素の操作やイベント処理などを行うためのLow-Level層のAPI、そしてBOM(Browser Object Model)やDOM、XMLを操作するためのBrowser Abstrac
Latest > Flakes of Ideas > JavaScriptでDOMを使う――オブジェクト指向入門の入門 - outsider reflex
2003/9/3 2003/9/4 2003/9/5 2003/9/6 はじめに オブジェクトとプロパティ 連想配列 オブジェクトと連想配列 「クラス」というテンプレート オブジェクトとメソッド 特定の型専用の関数 「メソッド」というプロパティ クラスとメソッド 「オブジェクト指向」の簡単なまとめ DOMとオブジェクト指向 「DOM」とは何か？ インターフェースとクラス DOM操作の実例 簡単な処理の例 もっと複雑な処理の例 おわりに Cが分かる人には疑りぶかいあなたのためのオブジェクト指向再入門というページがお勧めです。僕の稚拙な説明よりずっと分かりやすいです。 Home Back to Flakes Prev. Next はじめに JavaScriptでDOMを使う。DOMはHTMLやXMLをスクリプトやプログラムで操作するのにとても便利な技術ですが、簡単なスクリプトくらい書けるからD
結構前から収集していた海外エントリから面白いcustom eventの使い方を紹介 - monjudoh’s diary
jQueryでは非DOMオブジェクトにもeventをbind/triggerできる Binding Events To Non-DOM Objects With jQuery この例だとwindow.location.hrefが変化しているかどうかTimerで監視し続け、 変化したタイミングで$( window.location ).trigger('change',data);で変更前後の情報を通知している。 なので、$( window.location ).bind('change',function(ev,data){});で通知を受け取る事ができる。 hashで状態を管理しているAjaxアプリで有効そうなテクニック。 select boxでcustom eventを活用 http://trulyevil.com/2009/05/07/custom-events-in-jquery/
live な NodeList の作り方 - IT戦記
live な NodeList 概要 NodeList の IDL interface NodeList { Node item(in unsigned long index); readonly attribute unsigned long length; }; Interface NodeList - Document Object Model Core 「live な」NodeList とは DOM の変更が動的に反映される NodeList のこと 現状の leve な NodeList のユースケース getElementsByTagName getElementsByTagNameNS getElementsByName getElementsByClassName childNodes children, all, tags (IE legacy) 重要な事 現状の liv
『DOM Scripting 標準ガイドブック』を読んだ - blog.8-p.info
まえに人におすすめされて少しだけ借りて読んだ DOM Scripting: Web Design with JavaScript and the Document Object Model という本があって、それの日本語訳の『DOM Scripting 標準ガイドブック』が売っていたので買って読んだ。初版が2007年6月なので、最近出た本じゃないです。 文法まわりは微妙 2章の JavaScript の文法に対する記述はあんまりうなづけないところがある。変数名が snake_case なのは趣味の問題だけどたぶん lowerCamelCase のほうが多数派。 配列を var beatles = Array("ジョン", "ポール", "ジョージ", "リンゴ"); とするほうが [] より「良い」(p.33) とも思えないし、連想配列がほしいときに {} じゃなくて var lennon
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
blog.wonder-boys.net is Expired or Suspended.