[JS][jQuery] 要素の存在を確認する6通りのコードと実行速度 | きほんのき
JavaScriptまたはjQueryを使い、html要素が存在するかどうか調べる方法はいくつかあります。 jQueryを使ったやり方については、こちらで5つの方法が紹介されています。以下は三項演算子で短く書きなおしたものです。 ( $("selector")[0] )? "有" : "無"; ( $("selector").length > 0 )? "有" : "無"; ( $("selector").get(0) )? "有" : "無"; ( $("selector").size() )? "有" : "無"; ( $("selector").is() )? "有" : "無"; これに加え、IDが設定されている要素の有無を調べるのなら、jQueryを使わずJavaScriptのみで以下のように書くのも良いでしょう。 ( document.getElementById("id")
jQueryでアニメーション処理（「.animate()」）完了後に別の処理を実行させる方法｜BLACKFLAG
jQueryでアニメーションを実行させる「.animate()」。 一つのfunctionの中で複数実行させることも可能だったりするのですが、 アニメーション実行後、実行したアニメーション処理が完了した時点で別の処理を実行させたい、 という場合がたまにあったりするのですが、その記述方法をつい忘れてしまうことがあるので、 ここにメモ書きがてら紹介してみます。 jQueryでアニメーション処理完了後に別の処理を実行 $(function(){ $(セレクタ).stop().animate({アニメーション処理},1000,function(){ ～ここに処理を記載～ }); }); 例えば、画像にマウスオーバーした際に、 画像をアニメーション拡大させ、 拡大処理完了後に影を付ける（CSS3で）場合は。 $(function(){ $('img').hover(function(){ $(thi
pjaxできれいなURL＋非同期画面遷移！ | ヘッドウォータースのブログ TechNote
こんにちは。荒井です。 Facebookもtwitterもgoogleも画面遷移のときには、非同期で次のページを読み込むような作りになってますね！ これは、ajaxで次のページを読み込むのと同時に「History API」というHTML5の機能を使って、URLを更新することで実現してます。 毎回全部読み直さないから通常の画面遷移よりも早いし、URLが変わるから履歴に残るし、良いことばっかり！！SEO的にも「#!」を使ったやつより良いよっていうのを何かで読みました！！！ これからWebサービスを作るなら、導入したいですね！！！ これpjaxを使えば簡単に導入できるんです！！！よし！！！ PJAX!! pjaxとは、GithubのChris Wanstrathって人が作ってるjqueryプラグインです。 上で説明した、History APIとajaxを使った非同期の画面遷移を簡単に導入すること
iPhone/Android/PC 対応。jQuery で書くタッチイベント
こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
jQueryのanimateで自由にアニメーションできるようになろう
jQueryのanimateで自由にアニメーションできるようになろう jQueryにはアニメーションをするための機能がいろいろとありますが、ここでは「animate」メソッドの扱い方をご紹介いたします。 投稿日2011年12月27日 更新日2011年12月27日 動かす前の準備 jQueryの前に動かす要素をhtml&cssで作成しておきましょう。 html <div id="box"></div> css #box { width: 100px; height: 100px; background: #3399FF; } jQueryコードを書くときの基本的な形は次のようになります。 javascript <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.m
jQueryのおまじないを理解する | Glob
ready()メソッド jQuery は、ready() メソッドを実装しています。ready()メソッドは、DOMのドキュメントオブジェクトにバインドされる、カスタムイベントハンドラで、関数を唯一の引数としてとります。 この関数にはDOMがトラバースや操作を実行できるようになったときに実行されるJavaScriptのコードが含まれます。 window.onload イベントに換えて利用できるもので、必要に応じて何度でも利用できます。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> </head> <body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <s
(function($) {})(jQuery);って何？って思ったからいろいろ試してみた記録 - お勉強orz日和
どうでもいい話なのですが、inputタグのautocomplete属性について先日はじめてちゃんと知った気がしました（今更 それと日記見返すと、昔の方が雑記的だなぁと思った。。 うーん、そう考えるとローカルのもったいないメモは多そうだ。 今度書き出せたらいいなぁ。。 で本題ですが、先日jQueryを使っているプラグインのコードを見てて「(function($) {})(jQuery);」ってどういう意味？て思ったので、調べたりとかしてました。 謎って思ったのはおおまかに３つ。 何故全体を括弧で囲む必要があるのか。 function($)の「$」って何？ ２個目の括弧の中の「jQuery」って何？ これ、ほぼ「(function($) {})(jQuery);」の全てが謎っていってるようなものですねw http://q.hatena.ne.jp/1226297257 上記のURL先を参考にな
ブロック要素の高さを行毎にあわせるjQueryプラグインを習作する - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 既知の類似プラグインは多数あるこの課題ですが、ちょっと習作してみました。 横並びにレイアウトされたブロック要素の高さを揃えるライブラリです。 なにをしたいのか 例えば、フロートなどで横並びにした要素があって、それぞれの高さを揃えたい時があります。 こんな感じに。この処理をしてくれるライブラリを書いてみます。 書いてみた物 jQuery.lineUp 使い方 例えばこんな要素があるとして <div class="items"> <!-- 異なるコンテンツ量のブロック達 --> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> <div class="item"
『jQuery』で横並びになったブロック要素の高さを揃える方法。 | takLog
ブロック要素をfloatで横並びにした時に高さが合わなくなって、見栄えが悪くなってしまうことってありますよね。 原因は要素内にあるテキストの文字数によって要素の高さが変わってしまうからなんですけど、さて、こんな時どうします？ 一応、スタイルシートでdivのheightを指定するやり方が単純なんですけど、テキスト部分が動的に出力されているとしたら？文字数が多かった場合にはみ出してしまいます。 というわけで一番文字数が多くて高さの高い要素に、全体の高さを揃えてやる方法を紹介します。 jQueryで高さを揃える方法 指定した要素を一つづつ検証して、高さの最大を取得した後、指定した要素の高さを一番高い要素に揃える処理。 function even_height(elm){ var h = 0; elm.each(function(){ if(h<$(this).height()){ h = $(
jQueryでブロックレベルの高さを揃える
jQueryでブロックレベルの高さを揃える jQuery2011年1月12日 ブロックレベルの高さを揃えるJavascriptは多く紹介されていますが、jQueryで容易に実現することが可能です。 以下の3通りの条件で高さを揃えたサンプルを作成してみました。 クラスを付与した要素の中にあるdiv全ての高さを揃える クラスを付与した要素同士の高さのみ揃える カンマで区切った要素同士の高さを揃える 実際のサンプル HTML <div class="hoge-01"> <div>カラム1カラムカラムカラムカラムカラムカラムカラムカラムカラムカラムカラムカラムカラム</div> <div>カラム2カラム2カラム2カラム2カラム2カラム2</div> <div>カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3</div> </d
jQueryを高速に動作させるためのポイント５つ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近東京にこなれてきたどうも僕です。何がこなれてきたって？電子マネーさ！東京ならSuica、Edy、Waon、なんでもタッチで買えちゃうんだぜ！コンビニで清算するとき、「支払いはEdyで」と一言、そして、読み取り機にソフトタッチ。支払いのシャリーンという音とともに僕の白い歯がキラーンとかがやくのさっ！ そんな東京にこなれてきた僕が、今日はjQueryを使う上で気をつけておきたいポイントを何点か紹介しようと思うよ！ jQueryって便利だけど、もとはJavaScriptで、インタプリタ言語で、コンパイル時に最適化なんてされないから、書き方一つで意外とパフォーマンスに差が出てくるんだよね！開発時は高スペックのPCで見てるから気づかないかもしれないけど、あなたのサイト、低スペックマシンとかモバイル端末でみたら、もっさもさかもよ！ っというわけで、jQueryを使う上で気をつけたいポイントを挙げて
表示のエフェクト(3/4):初心者のためのjQueryプログラミング入門 - libro
show/hide以外にも、視覚効果の機能は用意されています。それは「スライド効果」と「フェード効果」です。 スライド効果は、エレメントを上にするすると引き上げて消したり、上からするすると引き出してきて表示したりするものです。これには、以下の３つのメソッドがあります。 slideDown――引き出して画面に表示する。 slideUp――引き上げて画面から消す。 slideToggle――slideDown/slideUpを交互に繰り返す。 フェード効果は、透過度を変えていくエフェクトです。次第に透明になって消えて行ったり、次第に現れてきたりするものです。これも３つのメソッドがあります。 fadeIn――次第に現れてくる。 fadeOut――次第に消えていく。 fadeTo――指定の透過度で表示される。 この中で、やや性格が異なるのは「fadeTo」でしょう。その他は基本的に「エレメントの表
jQuery入門道場
Kindle版の購入（￥450円） 本書のメニュー 「jQuery入門道場」と「よく分かる jQuery Deferred」の2冊をAmazon Kindleの電子書籍として販売しております。本サイトでは「jQuery入門道場」の5章までの内容をカット無しでWEB版で公開しております。 始めに jQueryとは？ セレクター 属性、CSS操作 HTML、テキスト、フォーム値の取得＆設定 横断（Traversing） jQueryオブジェクト操作 イベント処理 AJAX エフェクト・アニメーション プロパティ .data() ユーティリィ（関数） プラグイン その他 その他、目次など詳しくは、jQuery入門道場紹介ページをご覧ください。 電子書籍の形式と購入先 Amazon Kindle版では、PDFのような固定レイアウトではなく、リフロー型になります。リフロー型とは、見る端末により表示さ
jQuery入門道場 ～ jQueryの使い方～ 【エフェクト・アニメーション（Effects）】
jQueryの基本的な使い方を学べるサイトです。エフェクトとは、アニメーションの効果のことを指します。何かの状態が変化した時に、いきなり表示が変わるのは、ユーザーにとっては何が起きたのか分かりにくいものです。一定のアニメーションを付けることで、ユーザーに変化が起きている事を伝えられます。適切な箇所で、適切なアニメーションを使っていきましょう。 .show()、.hide() .toggle() .show()、.hide() .show()、.hide()は、お互い反対のメソッドのため、一緒に見て行きましょう。 .show()は、選択している要素を表示する場合、.hide()は、選択しているを非表示にする場合に使用します。 .show() .hide() 引数無しでこれらを呼び出した場合、瞬間的に選択されている要素を表示・非表示にします。 サンプルを見てみましょう。 .hide()は、C
ウィンドウ、モーダル｜jQuery plugin｜Ajax｜PHP & JavaScript Room
Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3〔CSS3を使用した角丸レイアウトのダイアログボックス〕 jGrowl〔Mac OS XのGrowl風にメッセージ表示〕 jQDialog plugin for jQuery〔軽量のダイアログプラグイン〕 jqModal〔通知ウィンドウ、ダイアログ、モーダルウィンドウを表示〕 jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements) 〔アラート、確認ダイアログ、入力プロンプトの作成〕 jQuery BlockUI Plugin〔ページや要素のブロック、モーダルダイアログ表示〕 jQuery Tools〔HTMLをオーバーレイ〕 LeaveNotice jQuery Plugin〔リンク先遷移時に通知
【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript ｜ KLUTCHE
最近ではページ内でリンクを飛ばす際には当然の仕様となっているスムーススクロールを簡単なタグで実現します。 どうだい？スムースだろ？ デモページ 個人的にこの動きが大好きです。 1時間くらいならずっとスクロールを見ていられます。 鬱の時なら半日はいけます！ HTML <a href="#bottom">下へスムース！</a> なにも工夫しなくて良いです。 ただ＃をつけてアンカーポイントへリンクを貼るだけです。 jQuery依存のスクリプトなので、head内でjQueryを呼び出しましょう。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> その後に以下のスクリプトを書きます。 <script type="text/java
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryで設定されたクリックイベントなどを定義している場所を調べる方法 - Qiita
Loading...
jQuery超初心者にありがちな6つの間違い - あじゃぱー
http://blog.techboon.info/archives/278