Tag Archives: jquery

[C#]WebBrowerコントロールで、jQueryを使用して任意のJavaScriptを実行する

2012年10月8日 (カテゴリ: C#:, )

.Net Frameworkで用意されているWebBrowerコントロールを使用して、JavaScriptを実行できるプログラムを作成しました。実行するJavaScriptは素のままだと使い辛いので、jQueryを自動ロードしています。 例えば、Yahooのトップページに対して下記のコードを実行させると… $(’input#srchtxt’).val( "hello world" ); $(’input#srchbtn’).click(); 指定されたキーワードで検索を行ってくれます。 行っている事…


続きを読む

Amazonマーケットプレースの出品情報を抽出する(GreaseMonkey使用)

2012年9月24日 (カテゴリ: JavaScript:, , )

Amazonには、マーケットプレース(通称マケプレ)という中古の商品を購入出来るシステムがあります。マーケットプレースを使用すると欲しい商品を安価で手に入れることが出来るので、非常にお得です。 ですが、マーケットプレースの出品者一覧ページが非常に見づらく不便です。 出品者情報は、価格が安い順に1ページ当たり15件の情報が表示されるのですが、例えばある商品の出品一覧ページを見てみると、こんなに長くなっています。 個人的には、古本なんてそこそこの品質のものが安く手に入ればよいだけなので、この情報量は親切を通り越して却って分かり辛くなっています。 というわけで、今回はマケプレの出品者一覧を加工して見…


続きを読む

[jQuery]タグのnodeTypeで比較可能な値とその意味の一覧

2012年9月23日 (カテゴリ: JavaScript:)

jQueryを使うと以下の様な感じで、タグのnodetypeを取得/比較することがあります。 textNodes = $(‘div.main’).contents() .filter(function(){return this.nodeType === 3}); NodeTypeとして指定できる値とその意味の一覧です。 NodeType一覧 ELEMENT_NODE == 1 HTMLタグ   ATTRIBUTE_NODE == 2 HTMLタグの属性   TEXT_NODE == 3 タグ内の普通のテキスト CDATA_SECTION_NODE == 4 CDATA &…


続きを読む

zenbackのスクリプトを解析してみた(3/3)

2012年2月11日 (カテゴリ: JavaScript:, , )

zenback解析シリーズ連載: zenbackのスクリプトを解析してみた(1/3) zenbackのスクリプトを解析してみた(2/3) zenbackのスクリプトを解析してみた(3/3) 前回の続きです。 cssとhtmlには特に見るべき所が無さそうなので、javascriptだけチェックしていきます。 zb_jq("div.zenback-twitterbtn > a:first").click(function() { this.disabled = true; var title = (document…


続きを読む

zenbackのスクリプトを解析してみた(2/3)

2012年2月11日 (カテゴリ: JavaScript:, , )

zenback解析シリーズ連載: zenbackのスクリプトを解析してみた(1/3) zenbackのスクリプトを解析してみた(2/3) zenbackのスクリプトを解析してみた(3/3) 前回、以下のURLでzenbackのブログパーツ本体を取得しているところまで解析しました。 http://widget.zenback.jp/?callback=jsonp1328934279143&base_uri=http%3A%2F%2Fnanoappli.com%2Fblog& rand=276590972233&nsid=101368938457261269%3A%3A10…


続きを読む

zenbackのスクリプトを解析してみた(1/3)

2012年2月10日 (カテゴリ: JavaScript:, , )

zenback解析シリーズ連載: zenbackのスクリプトを解析してみた(1/3) zenbackのスクリプトを解析してみた(2/3) zenbackのスクリプトを解析してみた(3/3) ブログパーツを作成してみたいのですが、手始めに勉強としてzenbackの動作原理を解析してみました。 まず、入り口です。 サイトにて提示されているスクリプトは以下の通りです。xxxの部分にはサイトに応じた値が入ります。 (実際は1行ですが見辛いので適当に改行してます。) <!– X:S ZenBackWidget –> <script type="text/javascrip…


続きを読む

http://www.google.com/jsapiを使用してjQueryをロードするときの注意点

2012年2月10日 (カテゴリ: JavaScript:)

http://www.google.com/jsapiを使用した、jQueryのロード 以下の記述で、googleがホスティングしているjQueryを利用することが出来る。 <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load("jquery", "1.4"); …


続きを読む

[jQuery]一度発行したajaxリクエストを途中で中断する方法

2012年2月7日 (カテゴリ: JavaScript:)

jQueryでサーバからデータを取得する際、ajaxで問合せを行うと非同期処理となる為、ユーザビリティが向上します。 ですが、データの問い合わせによっては、サーバ側で非常に時間が掛かる場合もあります。 この際に一旦行った問い合わせをキャンセルする場合は、どうしたらよいでしょうか? 一旦行ったリクエストをキャンセルする場合は、$.ajax()で取得したオブジェクトに対して、abort()をコールするとリクエストのキャンセルが可能です。 サンプル: var req;   // 検索を行う $( "btnSearch" ).click( func…


続きを読む

[jQuery]formのselect要素を操作する方法まとめ

2012年2月6日 (カテゴリ: JavaScript:)

jQueryを使用して、formのselect要素を操作する方法のまとめです。 例は、以下のselect要素があった場合で記述しています。 <select id="selTest" size="6" multiple> <option value="key1">value1</option> <option value="key2">value2</option> <option value="key3">value3&lt…


続きを読む

[jQuery]セレクタで指定したノードの存在チェックを行う関数

2012年2月5日 (カテゴリ: JavaScript:)

jQueryでは指定したノードが存在するかを存在するチェック関数が有りません。 幸い、jQueryではjQuery.fnにメソッドを追加することで、期待するような処理を行うことが出来ます。 jQuery.fn.exists = function(){return this.length>0;} 呼び出し側は、以下のような感じになります。 if ($(selector).exists()) { // ノードが存在したときの処理を行う } …もちろん、こんな関数を使用しなくても…


続きを読む

[jQuery]新しいノードを追加するときに、タグの属性も同時に指定する方法

2012年2月3日 (カテゴリ: JavaScript:)

jQueryでは、$( “<a />” )という表記で新しいDOMノードを作ることが出来ます。 上記の例では、アンカータグを生成します。 この際、第二引数にハッシュを指定することで、属性(attribute)も同時に指定可能です。 例: var newLink = $( "<a />", { href: "http://www.yahoo.co.jp/", title: "yahoo", }); newLink.text( "yahooホー…


続きを読む

[jQuery]指定したノードが存在するときのみ処理を行う

2012年2月3日 (カテゴリ: JavaScript:)

jQueryでは、$( “#btnShow” )といった形式で、特定のDOMノードを指定可能です。 このとき指定したノードが存在するときのみ処理を行う方法です。 プログラム <input id="btnShow" type="button" value="表示" /> <div id="someDiv"/>message area</div>   <script> $( function() { $&…


続きを読む

[jQuery] jQueryのプロパティ「$.expr」を使用して、独自のセレクタを実装する

2012年2月3日 (カテゴリ: JavaScript:)

jQueryでは、:first、:lastや:animatedなどのセレクタでDOMのノードを指定することが出来ます。 では、jQueryに標準で用意されていないセレクタが欲しくなった場合はどうすればよいでしょうか? このような場合は、$.expr[‘:’]に対して、関数を定義することでセレクタを追加することが可能です。 下記の例では、幅が100pxを超える要素のみを抽出するセレクタ”over100pixels”を定義しています。 <script> $.extend($.expr[’:’], { ov…


続きを読む

[JavaScript]Shift+Enterでformをsubmitさせる方法

2012年2月3日 (カテゴリ: 未分類:)

$(’#form’).keydown(function(e) { if( e.keyCode === 13 && e.shiftKey ) { // When "Shift + Enter" // code } else { e.preventDefault(); } }); “// code”の部分でsubmit処理を行います。 また、preventDefault()は、行われたイベントのキャン…


続きを読む

[jQuery]iframeを動的に追加して,googlemapを表示させる

2012年2月2日 (カテゴリ: JavaScript:)

htmlの中でjQueryを使用して動的にiframeをappendするサンプルです。 例では、入力された住所を元にgooglemapを表示しています。 ソース: <input type="text" id="txtAddress" value="東京都千代田区丸の内一丁目" size="30" /> <input type="button" id="btnTest" value="iframe追加"/> <div style…


続きを読む

jQueryを使用してtableへ行の追加削除を行う

2012年1月16日 (カテゴリ: 未分類:)

HTMLをjavascriptから動的に操作する場合、jQueryを使用すると便利です。 本記事では、HTMLの中でも特にtableタグに対して、行の追加・削除を行うためのサンプルを説明します。 単純な追加・削除に加えて、アニメーション処理をつけた場合のサンプルも有ります。 また、本記事の最後に、各処理の動作を確認できるボタンを用意しています。 行の追加 最終行にデータを追加する 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <script type="text/javascript" src=…


続きを読む