今さら聞けないjQuery実行パターンまとめ :: 5509
なんとなく使っているだろう.ready()メソッドについて詳細に見てみましょう。 .ready()メソッド .ready()メソッドという呼び方がパッとしない人もいると思います。こういうのです↓ $(function(){ // .ready()が呼び出されたときに実行されるハンドラ }); jQueryを実行する際のおまじないみたいなものですね。これの中にjQueryコードを書いていくとページロード時（Documentの読み込みが完了時）に実行してくれます。 何気なく使ってる人も多いと思いますが、実際のところこれは何？ということで、少し掘り下げてみましょう。 .ready()を使う際の形式 jQuery APIによれば、以下の3つが.ready()として同じように使えるようです。 $(document).ready(handler) $().ready(handler) (推奨されていな
jQueryを使ったタブメニューの実装サンプルまとめ
**追記** この記事とは直接関係ありませんが、自作のタブプラグインを貼っておきます。 rin316/jquery.tab: jQuery tab plugin. **追記終わり** 仕事でjQueryを使ったタブメニューを作ったので忘れないようにメモ。 それぞれの挙動も比較しやすいように並べてみました。 今日が勉強初投稿の日！ 写真:新川通りで撮った桜。 まずはファイルの用意 下記リンクからダウンロード。 ・jQuery本体…Past Releases内→最新バージョンのMinified ・Download Builder | jQuery UI (このサイトで使っているui.tabs.zip) head内にリンクを張る ダウンロードしたファイルに対して、head内にリンクを張ります。 <head> <!-- jQuery --> <script type="text/javascrip
[JS]高性能で設置も簡単、ブラウザ枠いっぱいに背景画像を配置するスクリプト -bgStretcher
デモページ：Super Slider スライドのスーパー版で、斜め方向のスライドで画像を切り替えます。 bgStretcherの主な特徴 セットアップはシンプル 全てのモダンブラウザをサポート 画像は一枚だけでなく、複数枚にも対応 対応ブラウザ Internet Explorer 6, 7, 8, 9 Firefox 2, 3, 4 Opera 9+ Safari Chrome bgStretcherの使い方 Step 1: ファイルのダウンロード サイトの「Download」よりファイル一式をダウンロードします。 一式には必要なファイル全て（jqeury.jsも）が含まれています。 Step 2: 外部ファイル 外部ファイルを下記のように<head>～</head>に記述します。 <script type="text/javascript" src="../jquery-1.5.2.mi
String.prototype.indexOf() - JavaScript | MDN
const paragraph = "I think Ruth's dog is cuter than your dog!"; const searchTerm = "dog"; const indexOfFirst = paragraph.indexOf(searchTerm); console.log(`The index of the first "${searchTerm}" is ${indexOfFirst}`); // 予想される結果: "The index of the first "dog" is 15" console.log( `The index of the second "${searchTerm}" is ${paragraph.indexOf( searchTerm, indexOfFirst + 1, )}`, ); // 予想される結果: "The in
第22回 JavaScriptによるUIの実装：ドラッグ | gihyo.jp
こんにちは。前回に引き続き、JavaScriptでUIを実装する方法を紹介していきます。 要素のドラッグ ウェブアプリでよく使われるインタフェースのひとつ、ドラッグを実装してみます。ドラッグを使用するケースは幾つかありますが、今回は投稿用フォームをドラッグで移動できるようにするという使い方を想定してみます。 投稿フォームで入力する際、そのページのコンテンツを見ながら入力したいということはよくあります。フォームを好きな位置に移動できればそれが実現できます。 ドラッグの基本HTML <div class="js-drag" id="js-drag-1"> <form class="js-drag-form" onsubmit="return false;"> <textarea></textarea> <input class="submit" type="submit" value="送信"
第2回 jQueryの基本（お題編） | gihyo.jp
はじめに 第2回の今回からは本格的にjsdo.it -Share JavaScript,HTML5 and CSS-（以下、jsdo.it）を使ってJavaScriptを勉強していきたいと思います。毎回お題編と回答編に分けてやる予定で、お題編では基礎知識を解説してそれに関連した課題を出し、それをjsdo.itでつくってもらい、回答編で解説するというかたちで連載を進めていきます。 今回はjQueryの基本のお題編ということで、jQueryの基礎を解説したあと最後にお題がありますのでそちらを次回までにやっておくとより理解が深まるはずです。 jQueryってなに？ そもそもjQueryとはなんでしょう。まったく知らないという人もいれば名前くらいは聞いたことがある、いつもJavaScriptを書くときは使っている、さまざまだと思います。今回は初回なので念のためjQueryとな何なのかというところ
JavaScript HTMLテンプレートエンジン SNBinder 公開
先日予告したSNBinderのオープンソース化、GitHubに簡単なREADME付きでアップロードしたのでご覧いただきたい。 https://github.com/snakajima/SNBinder SNBinderは、ひと言で言えば「ブラウザー上でView(テンプレート)とData（JSON）を結合して HTML を生成するテンプレートエンジン」である。 ９０年の半ばから急速に広まったインターネット。サーバー側でダイナミックに生成したHTMLページをブラウザーで閲覧するだけ、というシンプルでエレガントなアーキテクチャゆえの成功だ。しかし、ブラウザーの高機能化に伴い、JavaScriptを駆使して使いやすさを向上しようという試みが色々なウェブサイトで行われている。GMail、Google Docs、Facebookなどは良い例だ。 その方向性を究極にまで突き詰めると、サーバー側は（MVC
サーバー側コーディング不要のGoogle App Engine開発環境「jsonengine」
はじめに 本稿では、JavaやPythonによるサーバー側コーディングを一切必要とせずにGoogle App Engineによる開発を実現するツール「jsonengine」について紹介します。 対象読者 Google App Engineに興味はあるが経験のない方。JavaScriptやActionScriptによるクライアント開発、またはiPhoneやAndroidによるスマートフォン開発の経験のある方。JavaやPythonの開発経験は不要です。 必要な環境 最低動作環境は次のとおりです。 Java SE 5 jsonengineって何？ 「jsonengine」は、JavaやPythonによるサーバー側コーディングを一切必要とせずにGoogle App Engineによる開発を実現するオープンソースのツールです。このツールは、昨年開催された「Mashup Awards 6」において「
クッキーの読み書き
if (!navigator.cookieEnabled) { document.write("ブラウザの設定にてクッキーの受け入れを有効にしてください。"); } クッキーが利用可能であれば navigator.cookieEnabled は真 (true) になりますので、真偽値をチェックして使用可能かどうかを判別することができます。なお、window は省略することができます。 <script type="text/javascript"> <!-- var name = "testcookie"; // クッキーの名前 var value = 1; // クッキーの値 var period = 7; // 有効期限日数 // 発行したクッキーの取得（読み込み） if (document.cookie) { var cookies = document.cookie.split(";
SeleniumでJavaScriptを使う方法いろいろ（変数・関数などの利用） | colori
Selenium(Selenium Core, Selenium IDE, Selenium RC など)でテストケースを書く場合、かゆいところに手を届かせたい時に是非とも利用したいのがJavaScriptです。 しかし、まだまだその情報が気軽に手に入らないのが残念なところ。 「ないなら書いてしまえ！」ということでSeleniumでJavaScriptを利用したい場合に使える方法をまとめてみることにしました。 逆引き辞典にしたいのかリファレンスにしたいのかわけがわからんカテゴライズになっていますが、少しづつ増やしていくので気長にお待ちください。 使用バージョンはSelenium 1.0です。 目次 JavaScript基本編 Selenium空間とページ空間の違いによるJavaScriptの使い分け JavaScriptによるDOM指定でエレメント(要素)を特定する 各種コマンドの入力欄に
JavaScriptファイルに引数を渡す
前回のエントリで触れたscript要素のsrc属性に指定したJavaScriptファイルに引数を渡す方法。ネタ元はscript.aculo.usで、script.aculo.usでは読み込むライブラリを指定するために使っている模様。引数が指定できるというのは夢が拡がる(った)。 asamashi.jsでは以下のようなコードで引数に指定したASINコードを取得している。 $A(document.getElementsByTagName("script")).findAll(function(s) { return (s.src && s.src.match(/asamashi\.js(\#.*)?$/)) }).each(function(s) { asin = s.src.replace(/http:\/\/hail2u\.net\/pub\/test\/056_asamashi\.js\
JavaScript でゼロパディングするときは slice を使う - p4lifeのメモ
以前のメモ（ JavaScript の substr には気をつけた方が良い - p4lifeのメモ）では，substr メソッドを使って Firefox，IE 両方に対応するゼロパディングを実装した．ただ，冗長になってしまって綺麗なコードではなかった． // substr を使うと length を入れるのが面倒 var d = new Date(2007, 6, 10); var m = "0" + (d.getMonth() + 1); var a = "0" + d.getDate(); var s = d.getFullYear() + m.substr(m.length - 2) + a.substr(a.length - 2); // s == "20070710" → 期待通り しばらくして，コメント欄で slice メソッドを使えば良いということを教えてもらったので，さっ
Date - JavaScript | MDN
JavaScript の Date オブジェクトは、単一の瞬間の時刻をプラットフォームに依存しない形式で表します。 Date オブジェクトは協定世界時 (UTC) の1970年1月1日からの経過ミリ秒数を表現する Number 含んでいます。 解説 ECMAScript Epoch とタイムスタンプ JavaScript の日時は、基本的に協定世界時 (UTC) の1970年1月1日深夜0時からの経過ミリ秒数で指定されます。この日付と時刻は、コンピューターに記録される日付と時刻の値の主な基準値である UNIX Epoch と同じです。 注: Date オブジェクトの中心となる時間値は UTC ですが、日付と時刻、またはその一部を取得する基本的なメソッドは、すべて地方時 (ホストシステムなど) のタイムゾーンとオフセットで動作することを覚えておくことが重要です。 Date の最大値は、確実な
JavaScript - MDC
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 View in English �^� ��Always switch to English JavaScript (JS) は軽量でインタープリター型（あるいは実行時コンパイルされる）第一級関数を備えたプログラミング言語です。ウェブページでよく使用されるスクリプト言語として知られ、多くのブラウザー以外の環境、例えば Node.js や Apache CouchDB や Adobe Acrobat などでも使用されています。 JavaScript はプロトタイプベースで、ガベージコレクションのある、動的な言語であり、命令型、関数型、オブジェクト指向など、複数のパラダイムに対応しています。 JavaScript の動的な機能には、ランタイムオブジェ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://cssglobe.com/post/6023/simple-way-to-random-display-or-rotate-content-using
HOAX.COM: unravelling the truth from fiction, past to present...
Lazy Loader - Load HTML and Images on Window Scroll | jQuery Plugins
jQuery LazyLoad images in a hidden div
Loading...
Loading...