jQuery で innerHTML の書き換え／取得／追記／削除を行う方法
<div> タグの内容を編集したい！ <span> タグの内容を編集したい！ そんな時 JavaScript では innerHTML のプロパティを利用します。指定した要素の中身を取得、書き換え、そして削除が行えます。これを jQuery で実装する場合 .html() を利用します。しかし innerHTML の処理を全て .html() に置き換えるのはおすすめできません。 用途に応じていくつかの関数を使い分けることで、処理内容が分かりやすいプログラムになります。では具体的な処理パターンを例に挙げて、innerHTML を jQuery で実装するサンプルを紹介しましょう。 サンプルプログラムでは、id:hogehoge を持つ div 要素に対して処理する例で説明していきます。それぞれ処理用ボタンのクリックイベントを起点に、プログラムが走るようにコーディングします。 <div id
jqueryでhtmlの書き換えを行う方法
jqueryでhtmlを書き換える方法はいろいろとあります。 テキストを書き換える方法 $("セレクター").text("書き換え"); 例えば、フリーランスをデザイナーに書き換える <p class="text">フリーランス</p> jqueryのタグは $("p.text").text("デザイナー"); すると <p class="text">デザイナー</p> になります。 htmlタグごと書き換える方法 $("セレクター").html("書き換え"); 例えば、pタグのフリーランスをh3タグのデザイナーに変更します。 <p class="text">フリーランス</p> jqueryのタグは $("p.text").html("<h3>デザイナー</h3>"); すると <h3>デザイナー</h3> にかわります。 htmlの追加 指定した要素内部の先頭に追加する方法 $("セ
はてな記法ワープロ
*はてな記法JavaScript はてな記法ワープロは JavaScript ならではの利点を生かしたダイナミックなワープロです。 試しに色々入力してみてください。即座に出力画面が反映されます((Windows 版 IE6 および Firefox 1.0 でのみ確認しています))。 はてな記法の変換は <a href="http://search.cpan.org/dist/Text-Hatena/">Text::Hatena</a> を JavaScript に移植した "text-hatena.js" を活用しています。 **変更履歴 |*2005/12/1|ソース機能追加 (HTMLソースを表示できます)| |*2005/11/21|はてな記法ワープロ完成| |*2005/11/13|text-hatena.js 移植開始|
ブラウザでAjaxっぽいプレゼンテーション | Garage -dabun-
2006-09-05T18:12+0900 ブラウザでAjaxっぽいプレゼンテーション Permalink : http://garage.mods.jp/blog/firefox/001160.php Category : firefox 0 comment 0 trackback 以前パワポ以外のプレゼンツールとしてS5（A Simple Standards-Based Slide Show System）を紹介しました。 で、こないだ講師（というほどでもない）をしたときにプレゼンで早速使ってきました。 いやいや、ホントこれ便利だわ。 S5だけのシンプルな機能もいいけど、ちょっとエフェクトかけてみたくなったのでLightbox JSをプラスしました。 S5は基本はHTMLなので、HTMLが苦手な人ならとっつきにくいプレゼンツールでしょうけど、私もともとHTMLはテキストエディタ派な
CSS と JavaScript でタブ切り替え
CSS と JavaScript でタブ切り替えを実現しています。 なるべく CSS や JS の記述量を最小にするように努力しました。 もっとシンプルにできそうなアイディアがございましたらご教示下さい。 「無償・無保証・著作権放棄」 ですので、 このページのソースを適当にいじって自由に使って下さい。 全てのタブの中味は 1 つの HTML ファイル (このファイル) に書いてあります。 見出しのクリックにより、表示の ON/OFF を切り替えるだけ、という仕組みです。 タブの見出しをクリックするたびにサーバーを読みに行くのが 欝陶しく思えるときに、うってつけかと。 そう言えば、某サイトでは、クリックどころか、 タブの見出しにマウスカーソルを合わせるだけで、 フォーカスされていることを表す見出しの画像 (背景色が異なるだけ) を いちいち Web サーバーへ取りに
かんたんすぎ かっこよすぎ Yahoo pipes « ku
yahooがyahooには似合わないくらいにかっこいいサービスを出した。その名も Pipes: Rewire the web とすごいサブタイトルがついています。rewriteはいい過ぎだけど。(よくみたらrewriteじゃなくてrewireだった) Pipes is a hosted service that lets you remix feeds and create new data mashups in a visual programming environment. と書いてあって、要するにフィードを混ぜたりするツール。UNIXのようにXMLデータをパイプをつないで処理したりできると便利だよね、というのは IBM dW : XML : XMLの論考: マイクロフォーマットのパイプストリーム - Japan にも書かれていた話。IBM dW の話は一般的なXMLの話で、行を単
価格.com webサービス
ほたるさんが、yoyaQ APIを活用したサイト「東京ホテル検索」を開発されましたので、ご紹介させて頂きます。 【リンク】 http://hotel.zzkt.com/ 【サービス内容】 東京を中心としたシティホテルをホテル名から探すことができます。
はじめに - Yahoo!デベロッパーネットワーク
Yahoo!デベロッパーネットワークへようこそ。ここでは、提供APIを使って開発を始めるために必要な手続きをご紹介します。 アプリケーションの開発手順 Yahoo! JAPAN IDを取得 Yahoo! JAPAN IDをお持ちでない場合は、こちらから取得してください。 アプリケーションを登録 次に、アプリケーションを登録し、Client IDを発行してください。Client IDは、Web API利用者、またその使用状況を把握し、スパム行為などの妨害行為を防ぐために使用されます。 ドキュメントを読む Yahoo!デベロッパーネットワーク内には、提供しているWeb APIに関連するドキュメントが用意されています。アプリケーション作成の際にぜひ活用してください。 アプリケーションを作成する Web APIを使用してアプリケーションを作成してみましょう。 アプリケーションを公開する Yahoo
Google Web Toolkit - Google Code
GWT is used by many products at Google, including Google AdWords and Google Wallet. It's open source, completely free, and used by thousands of enthusiastic developers around the world. GWT is the official open source project for GWT releases 2.5 and onwards. This site houses links to the documentation, source code repository, issues list and information related to GWT roadmap and release. It is i
Webアプリに使えるAjaxライブラリ8選！ ― ＠IT
Ajaxライブラリの全体像を把握しよう Ajaxライブラリ（*注1）はすでに数多くのものが出回っていますが、多過ぎて全体像がつかめていないのではないでしょうか。今回は代表的なAjaxライブラリの一部を挙げ、それぞれを比較しながらAjaxライブラリの全体像を把握していきたいと思います。 どうして、Webアプリ開発にAjaxライブラリが必要なのか どのようなプログラミング言語でもライブラリが存在するように、Ajaxにおいてもライブラリが存在します。 初めにAjaxライブラリの必要性について見ていきたいと思いますが、ここではAjax開発ならではのライブラリの必要性を2点取り上げます（ほかの言語のライブラリと共通する必要性はあらためて取り上げません）。 クロスブラウザ対応 Ajaxの利点として、さまざまな環境における一般的なWebブラウザ上で実行できることが挙げられます。しかしWebブラウザの実装
DropBoks - Simple online file storage.オンラインストレージサービス
Get ready to witness the next big revolution in technology – 5G. As we dive headfirst into this new era of connectivity, the implications for our daily lives and industries are nothing short of revolutionary. From lightning-fast speeds to seamless connectivity, 5G is reshaping our world as we know it. In this blog post, we’ll explore how this game-changing technology is set to transform everything
Startforce | スタートフォース いつでも、どこでも、あなたのデスクトップ。
StartForce（スタートフォース）は、かつてスタートフォース株式会社により開発、販売されていた、ウェブブラウザ上で動作するデスクトップ環境システムです。 2006年の発売当時、このようなシステムは大変画期的でした。昨今では様々な場面で使われるようになった「クラウド」という言葉とともに、注目を集めることとなったのです。 InternetExplorerなどのウェブブラウザからログインすると、Windowsに近いデスクトップ環境で、オフィススイート、PDFの閲覧、メール、カレンダー、メッセンジャー等のサービスを扱うことができました。 次の項目で、「StartForceでできたこと」をもう少し詳しく見ていきましょう。 StartForceには、ユーザー登録を行うだけで利用できる無料のPersonal版と、企業向け有料プランのEnterprise版が存在しました。 Enterprise版では
【ハウツー】Yahoo! UI LibraryでさくっとAjax! (1) Yahoo! UI Libraryを使ってユーザビリティアップ! (MYCOMジャーナル)
「マルチプラットフォーム」「利用する際に必要なものは、デフォルトでインストールされているWebブラウザとネットワークに接続できる環境のみ」といったような利便性の高さから、見ない日はないと言っても過言ではないほど浸透したWebアプリケーション。今日もいたるところで、さまざまな業務を円滑にすすめるためにWebアプリケーションが利用されている。 Webアプリケーションはハイパーリンクやフォームなど、Webブラウザの基本機能を用いて作成されている。Webブラウザ単体でできることは限られているため、ローカルアプリケーションと比較するとユーザビリティにが低くなりやすい。このため、デベロッパはWebブラウザ上で動作するJavaScriptやFlashをもちいて、そのユーザビリティを高めてきた。 ここではJavaScriptコードを記述するデベロッパの負担を軽減かつユーザビリティを簡単に高めることができる
Ajaxのパーソナライズページ「Pageflakes」 - ネタフル
Benchmark Invests in Pageflakes: Ajax Desktop War Heats Upというエントリーより。 German startup Pageflakes, an Ajax-rich personalized home page (an early profile is here) will announce a Series A round of financing led by Benchmark Capital on Wednesday. TechCrunchで、ドイツ発のAjaxパーソナライズホームページサイト「Pageflakes」が紹介されていました。 「Ajax Desktop War Heats Up」という記事タイトルですが、本当にこうしたサイトは増えていますね。 「Pageflakes」にアクセスすると、検索窓の他、RSSフィードを表
Ajax うきうき Watch 第10回歴史年表と地図を効果的に関連付けるAjax
マウスによるドラッグで、東西南北自由な方向に地図スクロールさせる代わりに、MITが作ったTimelineで過去と未来の時間軸を自由に移動してみよう（編集部） Timeline Live Examples, Religion Timelines Live Examples, Dinosaurs 筆者は地図が好きですが、歴史も好きです。そして、この2つは密接な関係があります。例えば、地図に見える不自然な道路や施設などが、なぜ不自然に見えるのかという理由が歴史に埋もれていることがあります。 一例を挙げれば、JR中央線の東中野から立川まで真っすぐの路線が延びている理由は、現在の沿線を見ても分かりませんが、建設当時の状況を見れば一目瞭然です（その辺りはほとんど農地で、土地の既得権でもめることが少なかった）。逆に、歴史の不思議を読み解くために地図は有効な手段となります。 羽村取水堰から四谷大木戸まで続
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSとjQueryで実装するタブコンテンツ – creamu
食べならべ.com - ならべて選ぶ、新感覚グルメ情報サイト！
サイボウズ株式会社
本： Ajax 実装のための基礎テクニック
Google AJAX Search API (Beta)リリース - BLOGKID