超便利！jQueryでJSONデータを解析し、HTMLに表示する／後編
超便利！jQueryでJSONデータを解析し、HTMLに表示する／後編 jQuery2013年7月31日 前の記事でご紹介したJSONについて、以下の3パターンの実装例を元に解説していきます。 js中に記述されたJSONデータからHTMLに表示 外部ファイルのJSONデータからHTMLに表示 JSONPで外部ファイルのJSONデータからHTMLに表示 1.js中に記述されたJSONデータからHTMLに表示 まずJSON+jsの全体図をつかめるよう、活用する場面はあまりありませんが、jsの中にJSONデータを記述した例を紹介します。 実際のサンプル HTML <table cellpadding="0" cellspacing="0" border="0" class="tbl"> <col width="15%" /> <col width="15%" /> <col width="70%
jQueryを使ったAjaxに関するサンプル集
jQuery API を使って作った、Ajaxに関するちょっと便利なサンプル集。 Ajax とは、「Asynchronous JavaScript + XML」の略で、ウェブページの内容の一部を、ダイナミックHTML（DHTML）で、動的に、非同期通信結果に書き換える技術。ウェブページをリロード（再読み込み）しないで、XMLなどの別ファイルと通信するという特徴がスマートだ。 jQuery を使うと、Ajax も簡単に実装できる。 jQuery.ajax(settings)で、html形式のデータを読み込み表示 jQuery の jQuery . ajax( settings ) メソッドを使った Ajax リクエストで、html形式のデータを読み込み、表示する方法。 jQuery.ajax(settings)で、JavaScriptファイルを読み込み、実行 jQuery の jQuery
Node.jsのScraperでお手軽スクレイピング！ - Qiita
Qiita初投稿です。初めまして、yosuke_furukawaと申します。 Node.jsでスクレイピングというとjsdomなんかが有名ですよね。 以下のやり方が参考になると思います。 node.jsとjQueryでスクレイピングするウェブアプリの作り方 | さくらたんどっとびーず でも実際に外部サイトをスクレイピングしようとすると、requestモジュール使うかsuperagentモジュール使うかしなきゃいけなくて若干面倒です。これがScraperを使えばもう少し簡潔に記述できます。 Scraperの強力さを試すために東京Node学園祭で出た問題を紹介します。 Node.jsを使って、リクルートテクノロージズ社のサイトをスクレイピングしてください。 "recruit"もしくは"リクルート"の文字が何文字あるかワード件数を求めよ。 ただし、aタグのものは除去してカウントすること。 これ、
node.jsとjQueryでスクレイピングするウェブアプリの作り方
やっぱ jQuery 便利ですよ(*´・ω・)(・ω・｀*)ﾈｰ セレクタ使って jQuery でダカダカやってると、DOM とか正規表現でネチネチやるのがバカらしくなっちゃいます。 と日頃から思ってたりしてまして、サーバサイド JavaScript がメインストリームになって、jQuery でウェブアプリをコーディングできれば超ラクできるかもと期待しています。 で、先日サーバサイドJavaScriptとjQueryでスクレイピングという記事をうpったところ、やっぱ Rhino じゃなくて node.js がえーんよ(´･ω･｀)というコメントを頂きましたので、node.js と jQuery でサーバサイド JavaScript スクレイピングしてみることにしました。 今回は node.js ですので、単にスクレイピングする（コマンドラインから実行する）スクリプトだけじゃなくて、スクレイ
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
[JS]多彩なアニメーションが実装できる2.3KBの超軽量スクリプト -jsMorph
Tutorial demos さまざまな基本となるアニメーションのユニット集。 [ad#ad-2] jsMorphの実装 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="js/jsMorph_min.js" type="text/javascript"></script> JavaScript jsMorphの基本書式です。 var myMorph = jsMorph( Object obj, // HTML element, Array of elements or elementCollection that are rendered Object prop, // css properties of end position [Object params], // parameters that influence the motion (dur
CSSで無限回転のスライドショーを制作する方法 | エンタープライズ | マイコミジャーナル
A Web Design Community curated by Chris Coyier. 写真データがひたすら右から左に流れているサイトに遭遇することがある。それは何らかのイベントで撮影したであろう写真データを流すものであったり、製品の写真を写すものであったりさまざまだが、煩雑なUIでなければなかなかクールな見た目になる。 この効果はJavaScriptを利用しなくともCSSを使うだけで実現可能だという説明がCSS-Tricksにおいて「Infinite All-CSS Scrolling Slideshow」として掲載された。シンプルなCSS3で構築されており興味深い。ここでのアイディアは、流しておきたい画像を横長の1つの画像として用意しておき、それをkeyframeでアニメーションさせるというものだ。 たとえば次のような横長の画像を「summer.jpg」として用意したとする。
独自デザインのラジオボタン・チェックボックスを超簡単実装できるjQueryプラグイン:phpspot開発日誌
Screw Default Buttons! | Custom Radio Buttons and CheckBoxes 独自デザインのラジオボタン・チェックボックスを超簡単実装できるjQueryプラグイン。 ONかOFFの状態の２枚の画像を用意してjQuery関数で初期化するだけで簡単に独自デザインのものが作れます。 実装コード例。超簡単ですね。 追加のCSSでよりスタイルを独自に変えることも可能です 関連エントリ 独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」 Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」 独自デザインselectボックス実装時に使えそうなjQueryプラグイン「EasySelectBox」 CSS3で独自デザインの綺麗なボーダーを実装する例
JavaScriptでテキストを効果付きでローテション表示「jLetter - jQuery text rotator plugin」
twitter facebook hatena google pocket ローテション表示させるバナー画像を作るのはちょっと面倒・・・ そんなあなたには、jQuery text rotator plugin - jLetterが良いかもしれません。 テキストに動きをつけてローテションさせられ、ちょっとインパクトを与えられそうです。 sponsors 使用方法 jQuery text rotator plugin - jLetterからファイルをダウンロード。 <link type="text/css" href="jletter.css" rel="stylesheet" /> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jqu
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」:phpspot開発日誌
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
[jQuery] amazonみたいに画像をスライドさせる - [jQuery] amazonみたいに画像をスライドさせる
Mr.Outsider<head> <link href="lib/css/amazon_scroller.css" rel="stylesheet" type="text/css"></link> <script type="text/javascript" src="lib/jquery/jquery-1.4.2.js"></script> <script type="text/javascript" src="lib/jquery/amazon_scroller.js"></script> </head> <body> <script> $(function() { $("#amazon_scroller1").amazon_scroller({ scroller_title_show: 'none', scroller_time_interval: '1000', //画像の切り替
非同期通信：Ajaxリクエスト｜jQuery APIリファレンス｜Ajax｜PHP & JavaScript Room
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説HTTPリクエストを使用してリモートページを読み込みます。 簡単にjQueryのAjaxを実装できますが、ハイレベルな抽象概念に比べ、エラー時のコールバック関数のような機能性はありません。 $.ajax()は、生成したXMLHTTPRequestを返します。 直接操作するのには使いませんが、リクエストを手動で中断する場合に使用します。 $.ajax()はオブジェクトのキーと値のペアを引数としてとり、リクエストの初期化に使用されます。 オプションのdataTypeを指定した場合は、サーバーがリクエストで正しいMIMEタイプを送信することを確認してください。 詳細は、AjaxリクエストのためのdataTypeの指定を参照してください。 すべてのリモートP
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
