いろんなセレクタ指定方法＋α
ずいぶん以前にセレクタについて書いたのですが、今回はセレクタの種類を抜粋して、記述例と説明書きにまとめてました。「セレクタとは？」という方は、まず下記記事を読んでみて下さい。 jQueryを使ってみよう。(基本編 セレクタ１) ＋αというのはトラバース(走査)系のメソッドです。「この要素を抜き出したい！」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。 「こういう書き方をすると、こういう要素が選択される」という例で説明を添えていますが、数が多いので説明書きは、ほんとうに添えた程度です。説明だけではわかりにくいと思うので動作サンプルを用意しました。動作サンプルを眺めながら、ちらっと説明書きをチェックしてもらえれば「なるほど！」となるはず。。。ご利用ください。 jQuery セレ
AjaxでAccess-Control-Allow-Originのエラーを回避する方法
var XHR = new XMLHttpRequest(); query = "http://www.muratayusuke.com/"; XHR.open("GET",query,true); XHR.onreadystatechange = function(){ if (XHR.readyState == 4 && XHR.status == 200){ alert("hoge"); } }; XHR.send(null); 上記のコードなんかよく見るXMLHttpRequestのコードだと思いますが、最近のChromeでこいつがエラーを吐くようになりました。そう、 "XMLHttpRequest cannot load http://www.muratayusuke.com/. Origin http://muratest is not allowed by A
シンプルにAjaxファイルアップロードできるjQueryプラグイン - テクメモ
Ajaxライクに非同期でファイルをアップロードできるjQueryプラグインつくりました。 同様のプラグインやライブラリはいくつかありますが、Flashを使用しないシンプルな実装で jQueryのスタイルを踏襲しているものがなかった（要は好みじゃなかった）ので再実装しました。 デモ ダウンロード サンプル ファイルの選択と同時にそのファイルをアップロードする場合は下記のようになります。 $('input[type=file]').change(function() { $(this).upload('/action/to/upload', function(res) { // アップロード完了時の処理 }, 'json'); }); upload(url, [data], [callback], [type]) url: アップロード先のURL data: 追加で送信するパラメータ call
angularJS と jQuery に関する誤解を解く - nazokingのブログ
最近 angularJS に対する期待の低下が著しくてつらい。 なんだかんだで SPA から jQuery に戻った話 - ボクココ Angularの問題では はてなブックマーク - mizchi のブックマーク - 2015年5月18日 みんな使いどころを間違ってるんや。１年半くらい使ってて不満もあるけど自分のよく使う範囲では angularJS 最強だと思う。 angularJS が向いてるのは Single Page Application ではない angularJS が向いてるのは ◎ フォームのような細かい部品を多用 ＆ DOMツリーとデータスコープがほぼ一致していてユーザの入力をサーバに送ったりする webアプリ。管理画面、マイページ、業務アプリなど △ Single Page Application ← 簡単に作れるけどページ間の連携が必要ないならサーバ側で分けてしまった方
jQueryで要素を削除する方法のまとめ
jQueryで要素を削除する方法をまとめました。 １．自要素と配下の要素を削除する 自要素と配下の要素を削除するにはremove()を利用します。 次のサンプルでは自要素としてdivを指定し、その配下のp要素含めて削除します（赤色部分が削除対象）。 サンプル <head> <style> div { border: 1px solid #000; } </style> <script src="//code.jquery.com/jquery-1.11.1.js"></script> <script> $(function(){ $('button').click(function() { $('div').remove(); }); }); </script> </head> <body> <div> <p>abc</p> </div> <div> <p>123</p> </div> <
jQuery 1.9 で削除された、クリックイベントを交互に繰り返す「.toggle()」のみを使いたい
jQuery 1.9 で削除された、クリックイベントを交互に繰り返す「.toggle()」のみを使いたい この記事は jQuery Advent Calendar 2014 の ９日目の内容です。 何を書こうか悩んだのですが、軽めに。 jQueryのバージョン1.9より前にあった event の toggle、地味に時折あると、簡易的にイベントを繰り返し実行したいような時に便利だったりします。 .toggle() | jQuery API Documentation .show() と .hide() を繰り返す方の .toggle() ではないことに注意。 このイベントの `.toggle()` だけをプラグイン的に使えるように抜き出してみよと思います。 イベントの .toggle() のみを抜き出す。過去のコードを参考に、該当部分を抜き出してみました。 .toggle() だとアニメー
【jQuery】プラグインを使わずに、簡単にサイドからスライドして現れるメニューを実装する(ほぼCSS) | UNORTHODOX WORKBOOK | Blog
UNORTHODOX WORKBOOK BLOG TOP›Web Design›【jQuery】プラグインを使わずに、簡単にサイドからスライドして現れるメニューを実装する(ほぼCSS) 最近はモーダルっぽい感じでメニューをページ全体に表示するパターンが増えてる気がするし、もう随分色々な方法やプラグインがあって、かなり今さらなネタですけど、クリックでサイドからスライドして現れるメニューの新たな知見を得たので書き残しておきたいと思います。 「新たな知見」といっても、誰でも考えつくようなことで、そんなに大したことではなく、「あぁ、なるほど」とちょっと思った程度のことですが。。。 クリックでサイドから現れるメニューとは 何て言う名前なのか良く分からないので、デモを。デモページ右上の三つの四角いボタンをクリックすると、にょきっと横からスライドして現れるやつがそうです。 jQueryを利用していますが
jQuery 1.9 に更新する際に注意すべき変更点の自分なりのまとめ | 私的なjQuery他
jQuery Core 1.9 Upgrade Guide | jQuery の「Changes of Note in jQuery 1.9」を読んで、 自分なりにまとめました。 誤訳して間違ったことをまとめてたり、 最新の情報でないかもしれないので 読まれる際はご注意下さい。 （※ページをそのまま訳したわけではないと、思います） jQuery 1.9 では API の削除や 挙動の変更を行っています。 この記事は、前のバージョンから更新した時、 既存のコードに影響がでそうな変更を 並べたものになります。 変更点を全部網羅しているわけではありません。 箇条書きにすると以下のような感じ： 削除された機能 .toggle(function, function) の用法 jQuery.browser() .live()と.die() jQuery.sub() document 以外の要素での A
jQueryのセレクタ解説 - jQuery入門 - [SMART]
jQueryには任意の範囲、要素を指定するためのセレクタと呼ばれる機能が用意されています。 たとえば、BODY要素内にあるすべての画像にアクセスしたい場合は下記のようにセレクタを指定します。 $("img") 例えば、IMG要素のボーダーを3ピクセルの赤に設定するには次のようにします。 $("img").css("border","3px solid red"); セレクタで対象を指定し、cssというメソッドでボーダー属性の値を設定しています。 セレクタは要素名以外にも、ID名やCLASS名を指定することができます。 たとえば、BODY要素内にあるすべての画像にアクセスしたい場合は下記のようにセレクタを指定します。 $("img.photo") IMG要素で、かつID名が photo01 の要素を指定するには、次のようにシャープの後にID名を指定します。 $("img#photo01")
![jQueryのセレクタ解説 - jQuery入門 - [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でdocument.getElementByIdと等価を取る : mwSoft blog
jQueryで「$("#id")」と書くと、返ってくるのはjQueryのObjectで、getElementByIdで返ってくるような生のElementオブジェクトは取れない。 生のElementを取ろうと思った場合は「$("#id")[0]」と書くか「$("#id").get(0)」と書けば良いらしい。 参考サイト http://groups.google.com/group/jquery-en/browse_thread/thread/fa48e5649bb64216?pli=1 prototype.jsはJavascriptの中身いじって機能を増やしてる風なので、「$("id")」をするとElementそのものが帰ってくるけど、jQueryの場合は操作する為の皮を被せてる風なので（お行儀はいいよね、こっちの方が）、こうなるらしい。 ちなみにget(0)を使った場合も[0]を使った場合
【jQuery】セレクトボックスの選択要素を抽出 - Qiita
##選択された単数要素を取り出す 基本はselectタグの属性を指定してval()で値を取得すればよいが、表示文字列を取得したいときはoption:selectedを指定する必要がある。 <select name='alphabet'> <option value='ABC'>えーびーしー</option> <option value='DEF'>でーいーえふ</option> <option value='GHI'>じーえいちあい</option> <option value='JKL'>じぇーけーえる</option> </select> $('[name=alphabet]').change(function() { // 選択されているvalue属性値を取り出す var val = $('[name=alphabet]').val(); console.log(val); // 出
jQuery の each() の continue / break は・・・ : 地潜の日記
2009年03月14日 18:41 カテゴリプログラム・スクリプト jQuery の each() の continue / break は・・・ No Comments No Trackbacks 忘れそうなので覚書〜 JavaScript で配列なんかをイテレーション処理する時は、for を使うのが一般的。 ● JavaScript の書き方 for (var i=0, numArity=arrHOGE.length; i<numArity; i++) { (なんか処理); } jQuery を使ったときは、イテレーションのために each を利用できる。 ● jQuery の書き方 $(arrHOGE).each( function(i) { (なんか処理); } ); 便利だねー。 ■ continue / break のやり方 さて、for でグルグル回している処理を 「その時だ
CSSのword-break で、はみ出さないように自動改行
長ーいURLとかを所定のブロックとかに収めたいけど、改行されずに困るじゃないですか。 あれの対策です。 Firefox2以下を切り捨てるならば、cssで .word-break{ word-break:break-all; word-wrap:break-word; display: inline-block; } で、大体の場合クリアできそう。 word-break:break-all で表示範囲に合わせて改行されるのですが、word-break:break-allがないとsafariがテーブルのセル内で折り返してくれないし、display: inline-block;がないとFirefox3系がテーブルのセル内で折り返してくれない。 これで大体の場合OKと思うけど、詳しく検証してないので。 あと、 overflow:hidden; text-overflow:clip; とかではみ出し
jQuery.ajax(options) - jQuery 日本語リファレンス
HTTP通信でページを読み込みます。 この関数はjQueryにおけるAJAX通信の基本部分で、実際には$.getや$.postといった関数を使った方が、容易に実装できます。 但し、これらの抽象化された関数は実装の容易さと引き換えに、エラー時のコールバックなどの複雑な機能を失っています。そのような処理を実装したい場合は、やはり基幹であるこの関数を用いる必要があります。 $.ajax関数は、戻り値として XMLHttpRequestオブジェクトを返します。殆どの場合、このオブジェクトを直接操作することは無いと思われますが、例えば投げてしまったリクエストを中断する場合など、必要であれば利用して下さい。 この関数は引数をひとつだけとりますが、実際にはハッシュで、キーと値の組み合わせにより多くのオプションを受け取ります。 以下にその一覧を載せますので、参考にして下さい。 async / boolea
jQuery：Ajaxを使用してPOST送信でデータ取得 | raining
jQueryで画面をリロードせずにデータベース等のデータを取得してページに出力したい場合があります。 Ajaxを使用すればリロードせずにphpファイルを呼び出すことが可能です。 クリックしたり、スクロールしたりするとデータを追加していくようなページなど、 色々な場面で使用できそうです。 下記にjQueryのAjaxを使用してphpファイルを呼び出してPOST送信を行い、 データベースからデータを取得した時の方法をメモします。 ■ Ajaxを使用してPOST送信 ※知り合いから指摘を受けました。 POSTデータのチェックやSQLインジェクション対策は必ずしてください。 htmlファイルとphpファイルを用意します。 【JS】 ※index.html 下記は「#btn」をクリックした時にAjaxを使用してます。 <script type="text/javascript" src="http:
jQuery リファレンス：jQuery.each
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core：コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors：セレクタ └ 目次 基礎 ├ *（すべて） ├ element（html要素） ├ #id名（ID属性） ├ .class名（clas属性） ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >（子要素） ├ +（直近の後要素） └ ~（後要素） 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
JavaScriptのデバッグ時に、変数やオブジェクトの中身を確認する - 犬メモ！スーパー
javascriptJavaScriptで作成したプログラムをデバッグしている時に、ある時点での変数やオブジェクトの中身がなんなのかを確認したい事がよくあると思います。現在、主要ブラウザにはデバッガが搭載されているので、ブレークポイント等で動きを止めつつ、変数を覗いて確認することは出来ます。しかし、逐次変化する変数をいちいちブレークポイントで停止させながら追っていくのは非常に面倒くさいです。ましてや、いちいちalert()で出すなど以ての外です…。（僕は毎回これでやってて大嫌いになりました）そこで今回はデバッガのコンソールに出力させる方法を紹介します。■console.log()を使う引数に渡した値をデバッガのコンソールに出力させることが出来ます。カンマ区切りで複数指定することも可能です。例：1から１０までインクリメントしている変数iを確認したい場合javascriptfor(var i=
公開バグ票：Rails3+HerokuでJavaScriptの挙動がdevelopment環境と異なる問題 - IDEA and Players
技術者らしく、たまには技術ネタでブログを書こうw というわけで、最近弊社サービスの開発中で実際に踏んだバグがなかなか面白かったので、分析と解決までの経緯を振り返りも兼ねてこちらにもまとめておきます。 バグの解析って、苦しいけどけっこう好きなんですよね。いろいろと仮説を立てて推理したりする過程がゲームみたいで楽しいというか。 まあ、ネタ的に技術者にしかわかってもらえないでしょうが、知ったことじゃありません、はい。 というわけでいってみよー。 事象：お問い合わせフォームが消える！？ 弊社サービスのコラボ(http://www.collabo.in/)のWebページを見るとわかりますが、画面の右側にお問い合わせフォームの見出しタブが常に表示されていて、クリックされるとにゅにゅーっと伸びる仕組みになっています。 ω・`）チラ ←なんか、これに似ている気がする。 ところがあるとき、このお問い合わせフ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
http://www.confrage.com/ajax/jquery/val.html