7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座
HOME>jQuery>7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。（っていうかそんな偉そうなこと言える程修めてない
jqueryの基礎
よく使うようになった JavaScript ライブラリの jQuery を簡単に紹介。 jQueryの使い方 まず jQueryをダウンロードして利用する html でロードするようにします。そして、CSSクラスやCSS ID に対して動作させたい内容（アクション）を関数で定義します。どのように jQuery が動作するか簡単な図を以下に示します。 この例では、"ボタン"リンクがクリックされたら、隠れている"panel"をスライド表示されるものです。 実際の動作例： ↓ボタン $()関数 jQuery のもっとも基本となる操作は $() 関数を利用することです。この関数で操作したい対象を選び、様々な操作を行うことができます。$()の指定方法は、CSSとXPathどちらでも利用できます。 指定場所（セレクタ） 概要 例
即完成！jQueryスクロールでページトップへ戻るボタンをたった7分で作る
WEB制作はスピードが命！作るなら簡単ですぐ作れるほうが良いに決まってますよね。 私はこのjQueryスクロールを約7分で実装する事ができました。jQueryの知識はほとんどいりませんでした。 難しくありません7分後にはゆっくりとページトップへ戻るボタンが完成します。 では、早速実装していきましょう。 jQueryスクロールのサンプルはこちら まずはjQueryのライブラリ追加 HTMLの<head>内にjQueryのライブラリを追加します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 次はHTMLファイルにトップに戻るボタンを追加 肝心の「トップに戻る」ボタンを追加しましょう。 トップ リンク先は「#wrap」
イベントに応じて処理を実行するには？（イベントメソッド）
イベントリスナーの引数に渡されているeはイベントオブジェクトと呼ばれ、マウスの座標情報、押されたキーの種類など、イベントに関わるさまざまな情報を管理するためのものです。イベントリスナーの中で利用しない場合には、省略しても構いません。具体的な用法については、別稿「イベントが発生した時のマウス情報を取得するには？」などで解説します。 「イベント名」の部分で利用できるイベントには、以下のようなものがあります。
jQuery入門講座 使い方-イベントハンドラのon
索引 ├ 使い方 目次 └ バグノート(1) 1章：jQuery入門 ├ jQueryのメリット ├ readyイベント ├ オブジェクトについて ├ メソッドについて ├ 情報の取得 ├ イベント(1) ├ イベント(2) └ 初歩なサンプル 2章：jQuery基礎 ├ thisについて(1) ├ thisについて(2) ├ jQueryとDOM要素 ├ 簡単な演出 ├ thisから辿る ├ 汎用的なアニメ(1) ├ 汎用的なアニメ(2) ├ アニメの停止 ├ アニメを管理する仕組み └ 汎用的なアニメ(3) 3章：jQuery発展 ├ イベントフロー(1) ├ イベントフロー(2) ├ イベントフロー(3) ├ 画像のプリロード ├ jQueryの高速化 └ メソッドチェーン 番外編：研究 ├ イベントを外す ├ cssアニメとの連携(1) ├ cssアニメとの連携(2) ├ cssア
jQueryでiframe内のページから親ページを操作する方法｜BLACKFLAG
少し前に「jQueryでiframeの親ページからインラインフレーム内の子ページを操作する方法」と題して、 iframeの親ページから子ページを操作する方法を紹介しましたが、 その逆の、iframeの子ページから親ページを操作をする方法について 簡単なサンプルを交えて紹介してみます。 親ページ側では特にjQueryファイル自体を読み込む必要は無く、 iframe内に表示するページ側で、jQueryファイルと共に 下記の様なスクリプトを書くことで操作することが可能になります。 ◆SCRIPT $(function(){ $('p',parent.document).css({color:'#ff0000'}); }); この記述方法（参考例）の場合だと、iframe内のページからの操作で 親ページの＜p＞タグのテキスト色を「赤」に変更します。 スクリプトを実行させる該当要素の後に「,pare
リンク先のiframe内での頭出し（ページ内リンク）をjQueryで実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
地味な離島ライターの内藤です。またも地味でニッチな話題を離島からお送りします。 ページ内の頭出しやページTOPに戻るページ内リンクは便利ですよね。今回は、リンク先のページ内に埋め込まれたiframeの中での頭出しについて書きたいと思います。 というのも、後述するようなレガシーサイト対応をしている方から相談を受けたのがきっかけです。新しい技術で、どんなレガシーサイトも使い勝手をよくしようではありませんかっ。 言葉だとわかりづらいので、下のデモページで動作をご確認ください（ページ左上のリンクをクリックしてみてください）。 https://www.web-naito.net/demo/iframe/ ※現在はサービスを終了しています。 ご覧のように、リンク先のiframeのところまでページ内リンクし、その後iframeの中がスクロールして頭出しをします。 とはいえ、最近はあまり使われなくなってい
iframeの中から親ページをスムーズスクロール - OKWAVE
親ページには高さ3000ピクセルのiframeを作って、そこに読み込んでいる子ページ最下部にトップに戻るボタンを配置していますが、スクロールがうまく動作しません。 タイトルどおり、iframeの中から親ページをスムーズスクロールしたいと考えています。 ヘッダに <script> $(function() { var topBtn = $('#toTop'); topBtn.click(function () { parent.$('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> 親ページには高さ3000ピクセルのiframeを作って、そこに読み込んでいる子ページ最下部に <div id="gotoTop"><a href="#top_page"><img src="_image/btn_
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jqueryで同じようなイベント処理のまとめ方 - Qiita
【jQuery】初心者が陥りやすいjQueryの罠3つ
jquery iframe ページトップ - 楽天ウェブ検索