jQueryで新しい要素を作成する方法
jQueryで新しい要素を作成する方法を紹介します。 ここでは新しい要素を作成方法と、新しく作った要素にコンテンツを加える方法、そしてウェブページに追加するまでの手順を解説します。 このエントリーはビギナーの方向けの内容です。 １．新しい要素を作る jQueryで新しい要素を作る場合、たとえばp要素を作るには、次のように作りたいタグを直接記述します。 var paragraph = $('<p>'); 次のように記述してもOKです。 var paragraph = $('<p></p>'); 空要素で記述してもOKです。 var paragraph = $('<p />'); jQuery1.3以前では要素を必ず「/」で閉じていなければいけなかったため、一番最初の書き方はNGでしたが、1.4以降では閉じなくても大丈夫になりました。 ２．新しく作った要素にコンテンツを追加する 新しく作った要
jQueryオブジェクトをHTML文字列に変換したり戻したりする方法 | PisukeCode - Web開発まとめ
jQueryオブジェクト ⇒ HTML文字列 HTML文字列 ⇒ jQueryオブジェクト このように互いに変換したい場合、いくつかのjQuery関数を組み合わせて使えば簡単に変換可能です。 ということでここではその変換テクニックについて詳解していきます。 jQueryオブジェクトをHTML文字列に変換する方法 まず初めはjQueryオブジェクトを文字列としてのHTMLに変換する方法 その変換は次のような手順で可能です。 変換したい要素を入れるダミーの要素を作る 要素をclone関数でコピーしてダミー要素に挿入 html関数でダミー要素内部のHTML取得 clone関数というのはあるjQueryオブジェクトのディープコピーを取得できる関数です。 それでこの関数と要素内部のhtmlを取得できるhtml関数をうまく組み合わせれば変換できます。 では具体的な例を使って説明しましょう。 例えば次が
jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
ツリービューをリストから作成できるjQueryプラグイン、”jsTree”
2016年9月19日2020年5月9日Java Script jsTreeはリスト li 要素をツリービュー形式で表示させるためのjQueryプラグインです。 htmlでliを記述するばかりでなく、jsonデータを読み込んでツリーを動的に作成することもできます。 普通にツリー表示させてアイコンを変更する程度なら簡単にできるので、メモがてらやり方を書いておきます。 ハマった時のポイントうまくいかない時は ' シングルクオーテーション と " ダブルクオーテーションを確認して下さい。プロパティは json と同じく “ ダブルクオーテーションでくくらないとだめ。必然的に波カッコは ' シングルクオーテーションでくくることになります。
Ajax（jQuery）での通信中にローディング画像を表示する - Qiita
やりたいこと Ajaxでサーバーと通信する際、くるくるのローディング画像を表示したい。 概要 beforeSend を使用する。これを使うことでajaxのリクエスト前に処理を実行させることができます。 removeClass, addClassを用いてローディング画像の表示、非表示を実行します。 画像はこちらから拝借いたしました。https://www.benricho.org/loading_images/transparent01.html php側は受け取った値をそのまま出力するだけのものとします。 ローディング画像を表示するために、sleep()で1秒ほど遅延させています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Ajax Test</title> <script src="http
jQuery samples - Ajax時にローディングを表示
jQuery samples - Ajax時にローディングを表示 本エントリーは「to-R JavaScript Advent Calendar 2015」17日目のエントリー、今回のjQuery samplesは、Ajax時にローディングを表示する方法についての解説です。 単純に Ajax時にローディングを表示する方法から僅かに遅延させる方法、共通設定にする方法まで解説していきます。 CSS3でローディングを設定 まずは以下の様なHTML/CSSでローディングを作成しておきましょう。 <button id="ajax">ajax</button> <ul id="list"></ul> <div class="loading"> <div class="loading_icon"></div> </div> .is-hide{ display:none; } .loading{ posi
jQuery AJAX通信でリクエストヘッダに動的に任意のコードを付与 - Oboe吹きプログラマの黙示録
jQuery AJAX通信でHTTPリクエストヘッダに任意のコードを付与するには、 headers{ }, を付ければ良いのだが、 折角なので、Wicket でページ表示のタイミング＝Page コンストラクタ実行で付与する値を決めて 送るようにする。 ページが読込む JavaScript は、以下のように用意（途中省略） var custom_id; var c_type; var setCustom = function(a, b){ custom_id = a; c_type = b; }; // 省略 $.ajax({ type: 'POST', timeout: 10000, url: "/xxxx", headers: { "CUSTOM_ID" : custom_id, "C_TYPE" : c_type }, data: { "kind":"add", "xscaleLast
jQueryのajaxについてまとめてみた - ハッカーを目指す白Tのブログ
ユーザーにとって、ストレスレスで操作性の高いWEBアプリケーションを作るのにajaxは欠かせない技術である。今日は、jQueryのajaxについてまとめてみた。 1. そもそもajaxとは？ 2. jQueryのajaxメソッドのオプションでできること一覧 3. jQueryのajax通信後の処理 4. jQueryのDeffered 1. そもそもajaxとは？ajaxとは、WEBブラウザに実装されているJavaScriptのHTTP通信機能使って、Webページのリロードを伴わずにサーバーとデータのやりとりを行う処理である。ajaxは、asynchronous JavaScript + XMLの略である。asynchronousは「非同期」という意味であるが、ajaxは、非同期・同期両方の処理方式に対応していて、字面とは違い特徴は画面遷移を伴わない通信手段であるということに限定される。ユ
jsTreeとは? - jsTree ドキュメント 日本語訳
jsTree は インタラクティブなツリービューを使えるようにするjquery 用プラグインです。 これは完全に無料であり、オープンソースであり、MIT ライセンスで配布されています。 jsTree は拡張、テーマ付け、設定が簡単にでき、HTML と JSON データソースと AJAX の読み込みをサポートしています。 コンテンツボックスもしくはボーダーボックスのいずれかのボックスモデルにおいても、jsTree の機能は正しいAMDモジュールとして読み込むことができ、レスポンシブデザインに対応した携帯用のテーマを内蔵しており、簡単にカスタマイズができます。 jsTreeはjQueryのイベントシステムを使用するため、ツリー上で発生する様々なイベントにコールバックを紐付けることが慣れ親しんだ方法で簡単にできます。 注目すべき機能をほんの一部紹介します: ドラッグ & ドロップをサポート キー
jQueryでトースト通知できるライブラリ toastr.js を使ってみた | PisukeCode - Web開発まとめ
つい最近 「何か通知するのにトースト的なものを表示したい」 という場面があったので便利そうなライブラリがないか探していたらいいのを見つけました。 それが toastr.js というトースト通知用のjQueryライブラリ 使ってみたらかなり便利だったので、この使い方をまとめてみようと思います。 toastr.jsでトースト表示する手順 この toastr.js が便利なのは４種類のトースト表示（ info 、 success 、 warning 、 error ）に対応していて、オプションとかも色々指定できるところですね。 その基本的な導入と表示手順は次の通りです。 １．jQuery と toastr.js の読み込み まずheadタグ内などで次のようにjQueryを読み込み
[jsTree]jsonで定義した内容をツリー表示する（ajax） – 偏差値40プログラマー
jsTree（ https://www.jstree.com/ ）はエクスプローラ風のツリー表示を行うことができるJavascriptライブラリです。 ここでは、jsonファイルに定義した内容をツリー表示するサンプルを掲載しています。また、ノードクリック時に定義した内容を取得する方法もあわせて掲載しています。 jsonファイルから読み込んでツリー表示 以下がそのサンプルになります。詳細はサンプル内のコメントを参照ください。 しっかし、難しいな～～～。とっかかりなんて全くわからなかったYO! HTML <!-- ツリーを表示する器を定義 --> <div id="jstree"></div> json（doraemon.json） { "text" : "のび太のパパ", "state" : { "opened" : true }, "a_attr" : { "test_data" : "の
要素にフォーカスが当たった／外れた時の処理を実装するには？（focus、blur、focusin、focusout）
focus／blurもしくはfocusin／focusoutを使って、テキストボックスにフォーカスを当てた時／外した時に処理を実施する方法を説明。またそれらの挙動の違いを解説する。 ← 前回 連載 INDEX 次回 → 別稿「TIPS：イベントに応じて処理を実行するには？」の表でも触れたように、jQueryではさまざまな＜イベント名＞メソッドが標準で用意されています。そのうち、ほとんどが直感的に理解できるものばかりですが、focus／blurとfocusin／focusoutの違いは一見して分かりにくいものです。 本稿では、具体的なサンプルの中で、両者の違いを詳らかにします。 focus／blurとfocusin／focusoutイベントの基本 まずは、これらイベントを利用した具体的なサンプルを見てみます。以下は、テキストボックスにフォーカスを当てた時、フォーカスを外した時、それぞれのタイ
datetimepicker上でマウスのスクロールを無効にする
datetimepicker上でマウスのスクロールを無効にする 2017.11.21 ページをスクロールしようとして、 カレンダー上にマウスポインターが来たときに、 月がめくられてしまう現象を回避する $('#hoge') .datetimepicker({ scrollMonth : false ,scrollInput : false }) ;
.filter() | jQuery 1.9 日本語リファレンス | js STUDIO
サンプル 例えば、次のような処理を実行するとインデックス番号が偶数のLI要素の背景が赤くなります。 $('li').filter(':even').css('background-color', 'red'); 関数を使用した例です。下記のようなコードがあった場合、 <ul> <li><strong>リスト</strong> 項目1 - 1つのSTRONG要素</li> <li><strong>リスト</strong> 項目 <strong>2</strong> - 2つの <span>STRONG要素</span></li> <li>リスト 項目 3</li> <li>リスト 項目 4</li> <li>リスト 項目 5</li> <li>リスト 項目 6</li> </ul> 次の処理を実行すると、リスト項目1のは池のみが赤くなります。 $('li').filter(function(
ENTEREAL
// 上記インプット要素に対し // 下のJSを実行するだけ <input type="text" class="form-control" id="Date"> // $('#Date').datepicker(); オプション設定 上記のサンプルはオプションを一切設定せず、デフォルトのままです。 デフォルトのオプション設定では、ほとんどが英語表記になっていますので、日本人ユーザのために日本語表記に変える部分を中心に記載します。 詳細は、(英語ですが)本家ページをご参照ください。 http://api.jqueryui.com/datepicker/ ここでの設定値 $('#Date').datepicker({ dateFormat: 'yy/mm/dd (DD)', yearSuffix: '年', showMonthAfterYear: true, monthNames: ['1月
jQuery UIのdatepickerに初期値を入れる方法 - メグリ株式会社
先日社内で使用しているいにしえ業務システムにカレンダー入力機能を追加しようと思い、 jQuery UIのdatepickerを使ったのですが、はまったことがありました。それは・・。 inputタグのvalueが無視され初期値がセットされない です。 <input type="text" class="input-large datepicker" id="date01" value = "2015-01-23"> みたいな書き方をすると、valueで指定した日付が初期値として表示されません。 この場合、datepickerの説明書をよく読むと実は書いてあるのですが、 $("#date01").datepicker("option", "dateFormat", 'yy-mm-dd' ); $("#date01").datepicker("setDate", "2015-12-23"); の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - CodeSeven/toastr: Simple javascript toast notifications
GitHub - xdan/datetimepicker: jQuery Plugin Date and Time Picker
- しゅつまいめかわあ333
jQueryでdatepickerの初期値がうまく設定できません。