jQueryのhtml()で追加・取得・書き換えの方法まとめ！ | 侍エンジニアブログ
こんにちは、ライターのマサトです！ 今回は、jQueryでHTML要素を取得したり追加・書き換えを行える「html()」メソッドについて学習をしていきましょう！ この記事では、 「html()」とは？ 文字を出力する HTML要素を取得する HTML要素を書き換える HTML要素を追加する 関数による書き換えについて 「html()」と類似メソッドの違い 「html()」とは？ それでは、まず最初に「html()」メソッドの基本的な知識から学習を進めていきましょう！ 「html()」を使うと、任意のHTML要素を取得したり意図的に要素を追加・書き換えをすることが出来ます。 例えば、次のようなp要素が1つあるとします。 <p>こんにちは！</p> 「html()」を使えば、このp要素にあるテキスト文字を取得したりp要素をa要素に変えてしまうことも可能です！ また、1つだけのp要素を3つに増や
【jQuery】外部ファイルの読み込みと操作 - MAXIMUM.PROの日記
今回は、外部ファイルの読み込みと操作、GETメソッドを使ったファイルの扱い方を中心に紹介していきます。APIを使ったWebアプリケーションをつくる際に必要になってくるJSON形式について覚えましょう！！ 以下のファイルを用意してください。 sample.html <h2>load</h2> <p>外部ファイルのテキストデータをそのままタグに置き換える</p> <!-- javascript:void(0)：リンク表示、アクションは起こさない --> <div><a id="load" href="javascript:void(0)">読み込み</a></div> <div id="txtLoad">データ</div> <br /> <p>外部ファイルのHTMLデータをそのままタグに置き換える</p> <a id="load2" href="javascript:void(0)">読み込み
【jQuery入門】find()で子要素を取得する手法まとめ！ | 侍エンジニアブログ
こんにちは、ライターのマサトです！ 今回は、jQueryで深い階層下にある子要素を効率よく取得できる「find()」メソッドについて学習しましょう！ この記事では、 「find()」とは？ find()の使い方 each()による複数要素の取得 戻り値「length」とは？ find()の検索技 「find()」と「children()」の違いとは？ などの基本的な内容から、応用的な使い方に関しても解説していきます。この記事で、「find()」メソッドをしっかり学習して自分のスキルアップを目指しましょう！ 「find()」とは？ それでは、まず最初に「find()」メソッドについて基本的な知識を学習していきましょう！ 「find()」は、対象となる要素から下にある階層をすべて辿って目的の「子要素」を取得することができるメソッドです。この子要素は「子孫要素」とも呼ばれたりしますが、分かりやす
jQueryを使ったJavaScriptファイルの動的読み込み - JavaScriptテックラボ - [SMART]
JavaScriptを動的に読み込みたいケースなどがありますが、jQueryのgetScript()メソッドで簡単に実現できます。 $.getScript("./script.js"); これで外部JSファイルを動的に読み込めます。IF文などを使って、スマートフォンのときだけ特定スクリプトを読み込む、などに便利です。 読み込んだ後に処理を行いたい場合は、getScriptの第2引数にコールバック関数を設定できます。 $.getScript("./script.js", function(){ ... });
![jQueryを使ったJavaScriptファイルの動的読み込み - JavaScriptテックラボ - [SMART]](https://cdn-ak-scissors.b.st-hatena.com/image/square/efeb6493234f33406d242c048873a805fca99c63/height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart%2Fogpimage.png)
jQuery.ajax()のまとめ
jQuery.ajax()について逆引きリファレンスっぽくまとめてみました。 まとめた理由は、ネットで「jQuery.ajax」や「jQuery.ajax サンプル」などで調べても、いい感じの内容がなかなかヒットしないことと、よくヒットするサイトの情報が古かったりする（1.4で止まっているとか）ためです。 ということで、2012年10月現在2014年10月現在の「jQuery.ajax()」などをざっと調べて作ってみました。 初心者向けの内容です。すべてのオプションは網羅できていません。とりあえずサンプルコードがほしい方は１５項をご覧ください。 若番から必要と思われるものを順番に並べているつもりですが、後半は適当です。また、各項のサンプルはなんとなく積み上げていく感じにしています。 調べている間にも3つくらい新しい発見（といっても古い情報ですが…）があり、jQueryが日々進化していること
【jQuery】緊急案件：Google Feed API が廃止になっているので代替案を紹介します。 - ONZE
昨日、2015年12月2日未明より Google Feed API が403エラーを返すようになり、特にニュースサイトを中心とした各方面で混乱が発生しています。けっこう大変な事態のようですね。 未だ公式サイトでもアナウンスが無く、廃止になったのか否かもわからない状況です。 弊社のクライアント様でも『外部サイトのRSSフィードを読込→表示』しているサイトがいくつかありますが、もともと Google Feed API は使用せず、すべてPHPベースでプログラムを組んでいるので被害は皆無。 しかし困っている方々が大勢いらっしゃるようなので、ここで Google Feed API の代替となるテクニックを紹介していきます。 解決策はいたってシンプル。単にjQueryを利用してRSSの情報を取得して、任意のテンプレートに整形して出力させるだけ。 つまり基本的には Google Feed API のと
複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」:phpspot開発日誌
Demo ? jQuery Feeds 複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」 クロスドメインのRSSもサポートしていて、サーバサイドスクリプトは一切不要。 複数のRSSを時系列にサクッとまとめて表示したい場合に便利そうです 次のようにJSONでURLを定義してあげればまとめて表示してくれるみたい 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 おしゃれで軽量なシェアボタンを実装できるjQueryプラグイン Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 フラットデザインがクールなカレンダー実装jQueryプラグイン「kalendar」 ダイナミックなタイル状レイアウトを実現できるjQueryプラグ
プラグインを使わずに、かんたん実装できるjQueryマウスオーバーアニメーションのまとめ | ニトなび
ここのところ少しブログをリニューアルしたのですが、過去に導入してほとんど活躍していないjQueryマウスオーバーアニメーションを外しました。しかし、なんかせっかく実装したものを外しただけでは無意味なので、今後再導入するときの為に、スクリプトを書きとめておく事にしました。 マウスオーバーアニメーションの種類 オンマウスで画像を切り替えるアニメーション フェイドさせながらテキスト色を変化させるアニメーション フェイドさせながら背景色を変化させるアニメーション テキスト（画像）を横にピコッとずらすアニメーション 画像をボワ～と大きく変化させるアニメーション 画像を右から左へスライドさせ入れ替えるアニメーション 画像をクルッと縦に回転させるアニメーション ※jQuery導入方法の基本は過去にこちらの記事に書きましたのでご参考下さい。 オンマウスで画像を切り替えるアニメーション DEMO ⇓ 1.
jQuery ウィンドウ全画面や特定要素サイズに合わせて背景画像を設置する素晴らしいプラグイン【BACKSTRETCH】 | Stronghold Archive
どうもこんばんは。Toshikuraです。今回のTipsは【jQuery ウィンドウ全画面や特定要素サイズに合わせて背景画像を設置する素晴らしいプラグイン【BACKSTRETCH】】です。フルスクリーン（背景全画面）に画像を配置するプラグインは数々ございますが多機能で設定が面倒だったり、若干動きが不安定だったり、重かったりと選択に悩みます…。単純に特定要素の背景全画面に画像を配置するだけのプラグインでしたらこの【BACKSTRETCH】が軽量かつ簡易と一番のオススメです。 BACKSTRETCH ダウンロードページ ウィンドウ全画面への実装 実装方法は至ってシンプルです。まずはウィンドウの背景全画面に画像を配置します。 読み込み <script src="js/jquery-1.X.X.min.js"></script> <script src="js/jquery.backstretch
別ドメインの外部URLからidやclassなど特定の箇所を抜き出しサイトに表示する方法
同じドメイン内であればjqueryのloadやajaxでいけますが、他サイト（別ドメイン）になるとできません。 そこでjqueryのjquery.xdomainajax.jsを使って外部URLのhtmlを取得する方法のTIPSです。 ファイル全部を読むこともできるし、idやclass名で一部分や特定の箇所だけ切り取って表示することも可能。 ※一部のhttpsサイトでは取得できませんでした。（原因不明） jquery.xdomainajax.jsをダウンロード 以下よりjquery.xdomainajax.jsをダウンロードします。 jquery.fn/cross-domain-ajax at master ? padolsey/jquery.fn ? GitHub ダウンロードするのはjquery.xdomainajax.jsだけでOKです。 このファイルがないと別ドメインでのファイルを取
iframeの高さを自動調整するjQueryプラグイン jquery-iframe-auto-height
iframe（インラインフレーム）は、外部のURL（HTMLファイル、PHP）や他のドキュメントを、画面中にインラインで表示することができる便利なタグです。 しかし、読み込ませる内容によっては、iframeの中でページ移動をした際に、スクロールバーが出てしまったり、最初に設定したiframeの高さに満たないコンテンツが表示された場合、画面の下の方に空白ができてしまい、機能性はともかく見た目の美しさが損なわれます。 そこで登場するのが今回ご紹介するjQueryのプラグイン、「jquery-iframe-auto-height」です。iframeに読み込まれるコンテンツの高さを自動取得して、iframeの高さを変更してくれるというものです。 このプラグインの優れているところは、iframeのタグを既述するHTMLにだけ、このプラグインを読み込ませればOKという手軽さです。読み込ませる先の階層の
iframeの高さを内容に応じて自動設定（調節）してくれるjQueryプラグイン｜Blog｜Skyward Design
iframeの高さを内容に応じて自動設定（調節）してくれるjQueryプラグイン Posted by Hideki at 2011年7月 1日 21:22 タグ： JavaScript Facebookでシェア 古いプログラムで動作しているコンテンツをリニューアル後のサイトにも取り入れる必要が発生し、ひとまずiframeを利用することにしました。その際、iframeの高さをiframeの内容の高さに応じて自動で設定（調節）する方法がないか考えていたところ、jQueryプラグインを見つけました。 jQuery iframe auto height plugin(github) いくつかのサイトで同様の機能を持つスクリプトが公開されていましたが、iframeを記述する文書とiframeで読み込まれる文書の両方にJavaScriptを記述する必要があり、少々大変そうです。しかし、このjQuer
Miyakawaブログ » iframe の高さを自動調整する方法
最近、WordPress サイトカスタマイズが続いたのでその備忘録の続きです。 後、数回続く予定です。 でも、今回は特に WordPress というわけではありません。 WordPress 上のあるページで、iframe を使ってページを表示することになりました。 普通に iframe を使うと Internet Explorer 系では「フレームの高さ」を自動で拾ってくれませんでした。 Chrome も Safari も Firefox も 「height=”100%”」でいけるのに・・・・ 当たり前と言えば当たり前でしょうが、普段コード書かない人なのでちょっとがんばって調べてみました。 結果から言えばやり方を見つけて、実現できました。 jQuery を使って次のように行います。 iframe の高さ（height）を自動で設定する簡単な方法 まず次のサイトにアクセスして必要なファ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.skyld.org/2009/06/jquery-ready.php
jquery.xdomainajax.jsの文字化け対策版 - Ino Diary