jQueryでaリンクにイベントを設定するモダンな書き方を教えてください リンクにクリックイベントを設定するとき 最初 <a href="#" onClick="jump(1);">ページ１<…
jQueryでaリンクにイベントを設定するモダンな書き方を教えてください リンクにクリックイベントを設定するとき 最初 <a href="#" onClick="jump(1);">ページ１</a> <a href="#" onClick="jump(2);">ページ２</a> function jump(page) { location.href = 'http://hoge' + page; } としてましたが、なんとなくjQueryでロード時にイベントを設定する方が良いのかなと思って、以下のように直しました $(function(){ $("#one").click(function(){ location.href = 'http://hoge' + 1; }); $("#two").click(function(){ location.href = 'http://hoge' +
jQuery：jQueryを使用して<div>要素の表示・非表示 | raining
jQueryを使用して<div>要素をクリックした場合、別の<div>要素の表示・非表示を行いました。 また、jQueryを使用せずにjavascriptでも行った場合の方法を記載します。 jQuery日本語リファレンスを参考にしました。 ■ jQueryメモ toggle() 各要素のうち、表示状態にあるものを非表示にし、非表示状態にあるものは表示状態にします。 ■ 使用例（jQuery） [javascript] <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ // 「id="jQueryBox"」を非表示 $("#jQue
jqueryでtoggleを使ってクリックするたびに画像を切り替える : 森のコーディング
3月9 jqueryでtoggleを使ってクリックするたびに画像を切り替える カテゴリ:jQueryjavascript Tweet ボタンを押すと、ボックスが開閉して、 しかもボタンの画像が変わるっていうのを作りたくて、jqueryで以下のように作りました。 js $(".hogehoge").toggle( function() { $(this).attr('src', 'images/bbb.png'); $(".hogehoge2").css("display","block"); }, function() { $(this).attr('src', 'images/aaa.png'); $(".hogehoge2").css("display","none"); }); html <img src="images/aaa.png" class="hogehoge"><di
jQueryで見栄えのいいグラフが描ける「jqPlot」 (1/3)
証券会社のサイトの株式相場グラフ、ショッピングサイトの価格変動グラフなど、Webサイト上に変動するデータをもとに、動的にグラフを表示したいことがあります。従来は、Flashを使うことが多かったですが、最近はAjax/JavaScript人気もあって、「JavaScriptでグラフも作成したい」というニーズも強くなっています。 以前、本誌では、HTML5のCanvasを使った図形のサンプルとして、グラフの描画方法を紹介しましたが（関連記事）、今回はグラフ描画に特化した専用ライブラリ「jqPlot」を使って、もっと簡単に見栄えのいいグラフを作成する手順を紹介します。 グラフに特化したjQueryプラグイン「jqPlot」 「jqPlot」はクリス・レオネロ氏が開発しているJavaScriptライブラリで、jQueryのプラグインとして動作します。HTML5のCanvasを応用してグラフを描く仕
(function($) {})(jQuery);って何？って思ったからいろいろ試してみた記録 - お勉強orz日和
どうでもいい話なのですが、inputタグのautocomplete属性について先日はじめてちゃんと知った気がしました（今更 それと日記見返すと、昔の方が雑記的だなぁと思った。。 うーん、そう考えるとローカルのもったいないメモは多そうだ。 今度書き出せたらいいなぁ。。 で本題ですが、先日jQueryを使っているプラグインのコードを見てて「(function($) {})(jQuery);」ってどういう意味？て思ったので、調べたりとかしてました。 謎って思ったのはおおまかに３つ。 何故全体を括弧で囲む必要があるのか。 function($)の「$」って何？ ２個目の括弧の中の「jQuery」って何？ これ、ほぼ「(function($) {})(jQuery);」の全てが謎っていってるようなものですねw http://q.hatena.ne.jp/1226297257 上記のURL先を参考にな
コールバックのイベントハンドリングを容易にする jQuery JSONP プラグイン - AJAX - Postal Search Ajax API with jQuery - Postal Search APIs & Solutions
JSON for jQuery This adds a json() method to the $ function. The first argument is the URL to the JSON resource, with the text {callback} wherever the JSON callback method should be provided. In a JSONP URL, you would use jsonp={callback}; in a Yahoo! JSON URL you would use format=json&callback={callback}. JSON for jQuery というプラグインを jQuery ライクな jQuery JSONP プラグインに書き換えてみました。 ダウンロード jquery.jsonp.js (
とほほのjQuery入門 - とほほのWWW入門
$("#result").load("test.php #section2"); data にはフォームデータを指定します。引数を文字列で渡した場合は GET メソッド、オブジェクト形式で渡した場合は POST メソッドで HTTP通信を行います。 $("#result").load("test.php", "t1=AAA&t2=BBB&t3=CCC"); // GET method $("#result").load("test.php", { t1:"AAA", t2:"BBB", t3:"CCC" }); // POST method complete には、Ajax通信完了時のコールバック関数を指定します。data には取得した文字列、textStatus には success, error などの状態文字列、xhr には XMLHttpRequest オブジェクトが渡されます。x
jQueryでClassみたいな感じ - tohokuaikiのチラシの裏
こっちのスライドからしばらく拝借 http://www.slideshare.net/SlexAxton/how-to-manage-large-jquery-apps --------- 引用開始 ----------- このスライドを作った理由は、もうこういうjQueryでサイト作って後でぐちゃぐちゃになるっていうのを繰り返すのはうんざりだから。 そして、メンテナンスするのも大変ですよね。 こんなのだったら良くないですか？ 変更したDOMがアプリケーションを壊すことは無い コードの一部分を再利用できる ファイルはタスクごとに分割されているけど、ページの上の部分で何百もロードをする必要がない コードを見たときに何をしているかが把握できる 独断と偏見により次の4つのことに注視してみる インターフェイス Mixin DOMからObjectへの相互変換 依存性管理 インターフェイス JavaS
もぐめぽろぐ [Javascript]IE6でのlocation.href動作について
最近jqueryをいじり始めました。 その関係でちょっとJavascriptを勉強しています。 今回はそんな中IEでlocation.hrefの動作が動かなかったので、備忘録に残しときます。 ソース自体はこんなかんじ↓ <script type="text/javascript"> <!-- function fnCheckGo(gosite){ var sc = startform.startcheck.checked; if (sc){ document.body.style.behavior="url(#default#homepage)"; document.body.setHomePage("URL"); } location.href = gosite; } //--> </script> <a onClick="fnCheckGo('URL')" href="javascri
jQuery isの利用方法 – 条件式を満たす場合に要素を操作 – Change the elements if the condition is satisfied | Stronghold Archive
jQuery isの利用方法 – 条件式を満たす場合に要素を操作 – Change the elements if the condition is satisfied どうもこんにちは。toshikuraです。今日のtipsは【jQuery isの利用方法 – 条件式を満たす場合に要素を操作】です。今回のtipsはjQueryを触る上で重要な部分かと思いますので、復習がてらメモしておきたいと思います。 jQuery is 条件を満たした場合にtrueを返します。if文やeachを使う際にはお世話になるかと思います。 HTML例 <ul id="ex"> <li class="one">class="one"</li> <li class="two">class="one two"</li> <li class="three">class="three"</li> <li class="o
最近よく使っているコードセットのようなもの 第9回 パーソナルブログの作り方-Re:Creator’s Kansai （リクリ）
2025年8月最新版 レンタルサーバーおすすめ比較完全ガイド！ 当ページのリンクには広告が含まれています。
jQueryのプラグインをつくってみよう - tumblr
僕はiPhoneとかiPadとかmacみたいな流行りものを使用すると蕁麻疹が全身に出てさらに左腕が疼きだすという特異体質(別名：天邪鬼)のため、これまであまりjQueryは使ったことがなかったです。特異体質によるものもあったのですが、僕みたいなグズがjQueryのような便利なものに手を出したら、面倒なコードを書くにもjQuery頼りになって自分でコードを書く努力を怠る習慣が身についてしまうのでは、という懸念があったためです。最近になってようやく、本当に多少ではありますが独力である程度の処理は書けるし読めるようにもなったので、効率化のためにもjQueryをもっと使っていこうという気になったわけであります。 で、そうなるとやはりjQueryが提供する便利関数では全然足りなくて自分でプラグインを書きたくなるわけです。ちょうどjQueryの公式サイトにjQueryプラグインの作り方指南な記事(ht
jQueryプラグインの作り方 ~ 重要な3つのポイント ~ - nigoblog
jQueryプラグインの作成方法について書いていきます。 jQueryのプラグインを一言でいうと 「jQueryクラスのメソッド」 ということで、jQueryを一つのクラスと考えそのメソッドを作るということが 「jQueryプラグインを作成する」 ということです。 つまり javascriptのオブジェクト指向がわかる javascriptのメソッド作成方法がわかる jQueryを一つのクラスとして捉える 上記3つのポイントを抑えるだけで、jQueryのプラグインは簡単に作ることができます。 では早速1番目のポイントから書いていきます。 javascriptのオブジェクト指向がわかる javascriptのオブジェクト指向は少し特殊です。 PHPやJava、rubyなどの場合は class クラス名 { ~ } などのように書きます。 一方javascriptの場合は var クラス名 =
デブサミ2012で大規模JS開発について発表してきました - yo_waka's blog
「Developers Summit 2012 - 10年後も世界で通じるエンジニアであるために」で発表してきました。 デブサミ2012 kintoneの表と裏 - 表編 View more presentations from yo_waka イマドキのJSの話とかではなくて、UIをJSで作る際の設計ノウハウみたいな話にしたので、つまらなかったら申し訳ないなと思ってたのだけど、終わったあとも何人か質問しにきてくれた方がいたのでホッとしました。 10年後も・・というテーマとして、激しく進化するJSの最新動向に左右されず使えるネタを選んだつもりではあります。 普段からJSでもパフォーマンス意識して設計してる方には当たり前のことばかりだったかも。 jQueryは甘えってのは書いてみたかっただけですすいません。。 けど、適材適所というかSinatraで100画面近くあるようなWebアプリは作らな
jQueryを使うときに気をつけるべき8のポイント : tech.kayac.com - KAYAC engineers' blog
DAHONのBoardwalkを修理しようとしておもいっきり壊してしまいました。agoです。 普段はjQueryをメインで使用しているのですが、使っていていくつか注意すべき点があったのでまとめてみました。 （一部jQueryではなく、DOMの仕様上の制限も含まれています） 1 $().filterにstring以外のものを渡すとエラー 1.4系では修正されていました $().findや$().notは大丈夫ですが、$().filterの場合引数にjQuery objectや配列、html elementなどを渡すとエラーになります。 （たとえばjQuery objectを渡した場合、Firefoxでは「TypeError: t.substring is not a function」というエラーが発生します） 確認する ちなみに、$().findや$().notはstring以外も渡せるた
[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")
JavaScriptライブラリ jQueryでHTMLを書き換える
このドキュメントの内容は、以下の通りです。 JavaScriptライブラリ jQuery jQueryのダウンロード jQueryを読み込む jQuery サンプルコード 参考 JavaScriptライブラリ jQuery http://jquery.com/ jQueryのダウンロード jQueryを入手するには、下記ページからダウンロードすることができます。 http://docs.jquery.com/Downloading_jQuery minifyされ縮小されたJavaScript版も用意されてます。 jQueryを読み込む ダウンロードしたjQueryを読み込みます。 <script type="text/javascript" src="jquery.js"></script> **jQueryでHTMLを書き換える: idの中の文字列を変更する、下記のようなコードが doc
jQueryでTableタグをスクレイピングして値を取り出す方法 - 小さい頃はエラ呼吸
はじめに 以前、JavaScriptでtableタグをスクレイピングして値を取り出す方法 というエントリを書きました。 先日、コメント欄でjQueryで書きなおすとどうなりますか？と聞かれたので、jQueryで書いてみました。 jQuery最高の教科書posted with amazlet at 14.01.23株式会社シフトブレイン SBクリエイティブ 売り上げランキング: 17,130 Amazon.co.jpで詳細を見る jQueryでTableタグをスクレイピングしてみる テーブルタグをもつHTMLを作成します。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>tableタグのサンプル</title> <style type="tex
jQuery – テキストを取得・変更する『 text() 』 | 1：n – DETELU Blog
要素内にあるテキストを取得・変更する場合は「text()」を使います。 取得する場合は「text()」、変更する場合は「text(“変更後の文字列”)」を指定します。 //id=#msg内のテキストを取得します。 $("#msg").text(); //id=#msg内のテキストを「文字を変更しました。」に変更します。 $("#msg").text("文字を変更しました。"); サンプル１ jQuery – text サンプル１ <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> <title>jQuery - text サンプル１</title> <script type="text/javascript" src="../jquery-1.2.6.min.js"></scri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery, checkboxやradioがチェックされているかを調べる
