セレクタで子要素を指定 >(大なり)でつなげる $(‘div > p’) 親要素の直下にある子要素を取得し、孫要素などは取得できません。 スペースを空ける $(‘div p’) 親要素内にある子要素や孫要素を取得できます。便利なのでよく使います。 サンプル
セレクタで子要素を指定 >(大なり)でつなげる $(‘div > p’) 親要素の直下にある子要素を取得し、孫要素などは取得できません。 スペースを空ける $(‘div p’) 親要素内にある子要素や孫要素を取得できます。便利なのでよく使います。 サンプル
cheerio-httpcli - Node.js用WEBスクレイピングモジュール Node.jsでWEBページのスクレイピングを行う際に必要となる文字コードの変換と、cheerioによってパースしたHTMLをjQueryのように操作できるHTTPクライアントモジュールです。 特徴 取得先WEBページの文字コードを自動で判定してHTMLをUTF-8に変換 UTF-8に変換したHTMLをjQueryのように操作可能 フォームの送信やリンクのクリックをエミュレート フォーム送信時のファイルアップロード対応 Node.jsお馴染みのコールバック形式と最近の流行であるプロミス形式どちらにも対応 同期リクエスト対応 $('a')要素のリンク先をファイルとしてダウンロード可能 $('img')要素画像をファイルとしてダウンロード可能(LazyLoad対応) $('a,img,script,link')
現在、jQueryを使用している人、そしてjQueryを取り去ろうとしている人がいると思います。jQueryの使用に対する一つの考え方を紹介します。 Why I'm still using jQuery in 2019 by Martin Tournoij 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は元サイト様のライセンスの元、翻訳しています。 2019年になってもまだjQueryを使用しているのはなぜですか Hacker News での議論 多くの人が「普通のJavaScriptを使えば、jQueryは必要ない」と主張しています。私は多くを必要としないので、jQueryを必要としませんが、確かに便利です。 You might not need jQueryのようなページでは、jQueryを捨てるのは簡単だというアイデアを売り込もうとしていますが、逆にこのページの最初の例
「jQueryでやっていたことを、サーバーサイド側を何も変えずにフロントエンド側をVuejsにしておくれよ」JavaScriptVue.js どうしてもレンダリングはサーバーサイドがやっているものを変えたくない。でもフロントは変えろ。そんな要望ありますよね? え?ありませんって?あったんですよ。 コンテンツの中身は可変なのでSSレンダリングしたいけど、APIを作ってFE側から取ってくるほどの内容でもない。その上で、レンダリングするHTMLにはVueのためのバインディングや条件式が書けない。そんな場合を想定します。 例えばアコーディオン 閉 開 こんなイメージのものを作って行こうと思います。 まずはサーバーサイドにレンダリングしてもらうHTMLです。 コード html <div id="accordion--wrapper"> <div id="accordion--component" c
補足事項 シンプルなアプリケーションであればバインドする際に指定するイベント名は"click"などの 標準的なDOMイベント名を指定しても良いですが、jQueryプラグインの作成、または アプリケーションが大規模で複雑なものである場合、ネームスペースを積極的に使用すべきです。 例えばネームスペースに".myPlugin"と指定してバインドさせておけば、バインドを削除する際にも このネームスペースを使用することで、他のコードからバインドされた処理を誤って削除することを 避ける事ができます。 特定のイベントハンドラを削除するには、selector引数を指定します。 セレクタ文字列はイベントハンドラをバインドさせたものに、正確に一致する必要があります。 委任されていないイベントを除いて、委任された全てのイベントのみを削除するには、特殊な値 "**"を使用します。 イベントハンドラは、引数に関数名
この記事では、HTML内に要素を追加するjQueryのappendメソッドについて解説していきます。 Webページを作成していると、特定のイベント発生時に要素を追加したい場合が多くあります。例えばクリック時にテーブルの列を追加したり、ユーザの選択によってリストの選択肢を増やす場合などですね。 appendメソッドが使いこなせると、そのような追加処理をスマートに書けるようになります。 1.append()の基本的な使い方append()メソッドは、指定した要素内の最後に引数のコンテンツを追加するメソッドです。 コンテンツにはテキストの他、HTML要素やJQueryオブジェクトが指定できます。 append()の基本的な書き方は以下の通りです。 $(‘対象の要素’).append(‘コンテンツ’)サンプルとして、以下のような画面ソースがあると仮定します。 <div> <ul> <li>HTML
TOP > てきとうにこらむ > ゲーム作りとプログラミング日記 > jQueryでテーブルをappendで動的に追加していく Ajaxとかで動的にテーブルを操作したい ちょっと迷ったのでメモ。jQueryで動的に追加してみる。 参考書 jQueryクックブック のレシピ1.10あたり。 コード $("table").append( $("<tr></tr>") .append($("<td></td>").text("テキスト")) .append($("<td></td>").text("テキスト")) ); 1行目はタイトルという場合 thタグが先頭行に入っている時には、"tr:gt(0)"を使うと便利。 // 削除 $("table tr:gt(0)").remove(); // 数える $("table tr:gt(0)").size(); サンプル 増やす・消す用にとりあえずH
JavaScriptを動的に読み込みたいケースなどがありますが、jQueryのgetScript()メソッドで簡単に実現できます。 $.getScript("./script.js"); これで外部JSファイルを動的に読み込めます。IF文などを使って、スマートフォンのときだけ特定スクリプトを読み込む、などに便利です。 読み込んだ後に処理を行いたい場合は、getScriptの第2引数にコールバック関数を設定できます。 $.getScript("./script.js", function(){ ... });
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core:コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors:セレクタ └ 目次 基礎 ├ *(すべて) ├ element(html要素) ├ #id名(ID属性) ├ .class名(clas属性) ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >(子要素) ├ +(直近の後要素) └ ~(後要素) 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
文字列の先頭と末尾から、空白を除去します。 渡された文字列から、正規表現で空白と見做されるものを除去します。 そのため、改行コードや全角のブランクであっても、空白として処理されます。 サンプル サンプル1 $("button").click(function () { var str = " \n lots of spaces before and after "; alert("'" + str + "'"); str = jQuery.trim(str); alert("'" + str + "' - no longer"); });
ぐぐってもなにも情報が出てこないことなんですが、常識なのかなぁ ものすごくハマりました。 以下のhtmlをコピペして表示してみてください。 <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ alert("<".charCodeAt(0)); alert($("div#test").text().charCodeAt(0)); }); </script> </head> <body> <div id="test"><</div> </body> </html> やっていることは一回目のアラートは<の一文字目の文字コードを、二回目のアラートはdiv#testのテキストを取得して一文字目の文
I have unescaped data from users. So is it safe to use like this: var data = '<test>a&f"#</test>'; // example data from ajax response if (typeof(data) === 'string') $('body').text(data); Can I use like this or there is some problems like encoding or some specific symbols that I should be careful and add more strict validation?
.each( function(index, Element) ) 1.0追加 戻り値:jQuery マッチした各要素に対して、指定した関数を実行します。 引数 説明 次のような箇条書きリストがあった場合、 <ul> <li>foo</li> <li>bar</li> </ul> 下記の処理を実行すると、 $('li').each(function(index) { alert(index + ': ' + $(this).text()); }); 次のように各要素のテキストをアラート表示します。 0: foo 1: bar ループ処理中にfalseを戻り値として返すと、ループ処理を中断することが出来ます。 デモ DIV要素をクリックすると、繰り返し処理によって各DIV要素のstyleを変更します。 <!DOCTYPE html> <html> <head> <style> div { c
jQueryで要素の表示・非表示を切り替える方法についてです。 要素の非表示 ( hide ) hideメソッドを使うと要素を隠すことができます。引数には非表示にする際の時間と、コールバック関数を指定できます。 <body> <button>click</button> <p>表示されてるメッセージ</p> </body> $(function() { $('button').click(function(){ $('p').hide(); }); }); .hide()はcss('display', 'none')と同じ意味です。 $(function() { $('button').click(function(){ $('p').css('display', 'none'); }); }); .hide() | jQuery 1.9 日本語リファレンス | js STUDIO サンプ
p { margin: 4px; font-size:16px; font-weight:bolder; } .blue { color:blue; } .under { text-decoration:underline; } .highlight { background:yellow; } <p class="blue under">Hello</p> <p class="blue under highlight">and</p> <p class="blue under">then</p> <p class="blue under">Goodbye</p> $("p:even").removeClass("blue");
$(this).toggleClass("highlight", count++ % 3 == 0);
attr使ったら動きが変だった attrじゃないかと思って作ったら、何か変。 attr('checked','')ではなく、removeAttr('checked')を使えばおk どうやらprop使えばいいらしい。 でもpropのが楽に書ける 詳しくはCSSは分かるけどjQueryは苦手……という人が .attr()と .prop()に親しんでくれるといいなーと思って書きました。|Ginpen.comで。 チェックされているかどうかという判定には .prop()を使う必要があります。 HTMLに書いた属性の値を扱いたいときは .attr()を、いかにもJavaScript的な事をする時は .prop() デモ こんな感じで使えばおkだと思う。 <div class="allCheck"> <input type="checkbox" id="allCheck01"><label for="
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く