cloneした要素を繰り返し使い回すようなコード書こうとして、なぜか .append() しても 1個しかでない。2回以上使い回せない!という状況になり、改めて使い方を確認してみたのでそれをメモしておきます。 要素を変数に入れて .appendTo()まずは基本から。 .clone() せずに 要素を変数にいれて .appendTo()してみます。 利用したHTML <div id="demo#" class="demoBlock"> <p class="btn-alert"><button>alert</button></p> <p class="btn-clone"><button>clone</button></p> <div class="clone-block"></div> </div>
一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます(スマホで開くか、PCの場合はUAをスマホに偽装する必要があります) https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか? どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削
こんにちは、ライターのマサトです! 今回は、jQueryを使う上で基本となる「セレクタ」を使ってHTML要素の「id」を取得したり変更する方法などについて解説いたします! そこで、この記事では… 「id」とは? jQueryで「id」を取得しよう! 「id」を変更&追加するには? 「removeAttr()」で「id」を削除する 「id」のセレクタ指定方法! 「id」を複数指定するには? 「id」とは? それでは、最初に基本的な知識から身につけておきましょう! まず今回のテーマである「id」ですが、これはHTML要素の属性に付与された「id名」のことを指しています。次のサンプル例を見てください! <div id="wrap"> <h1 id="title">タイトル</h1> <p id="text">サンプルテキスト</p> </div> この例では、それぞれのHTML要素にid属性が付
初心者だった頃、誰しも一度くらいはこんな感じのコードを書いたことがあるのではないでしょうか? $('#js-button').on('click', function () { $(this).text('click'); }); $('#js-button').on('mouseenter', function () { $(this).text('mouseenter'); }); このコードのどこが問題かというと、$('#js-button')を2回、$(this)を2回書いてしまったところです。 全く同じ処理を4回も行うのは明らかに非効率ですよね。 だから、以下のように、一旦戻り値のjQueryインスタンスオブジェクトを変数にキャッシュしておいて、あとからその変数を参照するようにしたほうが処理が1回で済むので、パフォーマンスが良いです。 var $button = $('#js-b
jQueryは、長らくWeb開発の現場に君臨し、その発展を助けてきたJavaScriptフレームワークです。今回は、最近巷で囁かれている、「jQuery不要論」について考えてみたいと思います。 jQueryとは 古来、JavaScriptの実装がブラウザによって異なり、全てのブラウザ(特にIE)に対応しようとすると、その労力は計り知れないものでした。 そのブラウザ間の差異を吸収する選択肢のひとつがjQueryで、登場以来多くのプロジェクトで採用されることとなります。 また、コーディングが短く、簡潔になることも特徴のひとつで、生産性の向上に大きく寄与してきました。 // native javascript document.getElementById("element"); // jQuery $("#element"); しかし、時代が進むにつれ、JavaScriptの標準仕様も広く浸透
jQueryでvideoやaudioを再生したい時はオブジェクト取得方法に注意が必要 2017/2/10 2019/9/5 JavaScript, プログラミング HTML5タグになって新しく登場したvideoタグ、audioタグ、canvasタグ。特にvideoタグは使用する機会も多くあり、HTML1つで動画を再生できることのありたがみを感じています。 そんなvideoタグやaudioタグをjQueryで再生したい時に注意しておきたいことについて紹介いたします! audioタグを例にとって説明!audioタグに埋め込みした音声ファイルをJavaScriptから再生 audioタグを例にとって説明してみます! jQueryの基本は「命令をしたい場所」を決めて、命令を実行するという流れです。 まずはjQueryでaudioタグを取得し、その後取得した要素(音声)を鳴らすための、play()と
jQueryの要素の表示・非表示を判定する方法を紹介します。 1.基本 jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。 show()は指定した要素を表示します。 $('#foo').show(); hide()は指定した要素を非表示にします。 $('#foo').hide(); が、表示・非表示を判定する方法として、isShow()やisHide()、isVisible()などは提供されていません。 2.css('display')で判定する show()はdisplayプロパティ「block」、hide()はdisplayプロパティを「none」にするので、これを判定に利用します。 if ($('#foo').css('display') == 'block') { // 表示されている場合の処理 } else { // 非表示
jQuery の hasClass で正規表現マッチを使いたい。 正規表現でマッチするクラスを探したい $("div").hasClass( /area/ ) とかやりたいわけです。 jQueryのプラグイン、、ではなく関数の上書き hasClass のコードを上書きする。 $(document).ready(function(){ $.fn.hasClass = function (e) { var t = " " + e + " ", n = 0, r = this.length; for (; r > n; n++) { if (1 === this [n].nodeType && (" " + this [n].className + " ").replace(/\W/, " ").indexOf(t) >= 0) { return!0; } else if ( (e instan
$(".elems").click(function(){ var arg = $(this).prop("id"); $(".elems").each(function(){ //処理 // この中で argを読んでもundifinedになる }); }); var callbackMethod = function (id) { return function(index, element){ var tmp_id = $(this).prop("id"); if(tmp_id == id ){ $(this).addClass("abc"); }else{ $(this).removeClass("abc"); } }; }; $(".elems").click(function(){ var arg = $(this).prop("id"); $(".elems").each(ca
checkboxやradioのチェック状態を調べる際にはattrではなくpropを使うのが良い。 attrでも取れないこともないですが、propで取得する方が処理が早いです。 特にIEの場合、inputに対するdisabledの処理がものすごく重く、attrでdisabledやcheckedの処理を沢山していると、無駄に最悪な感じで負荷がかかります。 attrとpropの取得の違い またこの2つは、同じ値を取得してるようで異なる値を取得するので注意。 例えば //チェックした値を取得するよー $(":checkbox").click(function() { alert($(this).prop('checked')); alert($(this).attr('checked')); }); の場合、 チェック時 prop true attr checked 非チェック時 prop fal
任意の要素に対してJavaScriptのプロパティを設定/取得する方法を解説。また、要素の属性を設定/取得できるattrメソッドと機能を比較する。 ← 前回 連載 INDEX 次回 → propメソッドは、要素のプロパティを取得/設定します。attrメソッドと似ていますが、 1属性値とJavaScriptのプロパティとで値が異なるもの、 もしくは、 2そもそも(属性名に対応しない)JavaScriptのプロパティにしかない情報 を取得する際に利用します。 具体的には、 1はselected/checked/disabled/multipleなどの属性のこと、 2はtagName/nodeName/nodeTypeのようなJavaScriptプロパティのことです。 以下は、prop/attrメソッドを利用して、さまざまな属性/プロパティにアクセスする例です。
iOS6 のマップって不便って騒がれたけど、それほどでもないよね?…って思ってましたが、最近お店探しで使って全然見つからなかったので、さすがにこれは…と思いMapion インストールしました。使いやすいですね… 今日は、だらしない明らかに非効率なjQueryなコードを書くとやんわりと指摘してくれるPhpStorm/WebStormの機能「Inspection: jQuery usage efficiency 」を紹介します。(バージョン5.0以降) New JavaScript inspections and intentions | WebStorm & PhpStorm Blog 非効率なjQueryのコード っていったいどんなコードなのか。具体的には以下のようなコードです。 $("p").addClass('hover'); $("p").toggle(); 実際にはこんなコードを書
クラス操作いろいろ スタイルを変えたいとかそういった理由でクラスを追加したり削除したりといじりたくなる機会がある。 参考:jQuery日本語リファレンス クラスの追加 addClass(class)
テーブル(table)要素をjavascriptで動的に生成、操作するとき、colspan、rowspanをセットするときは、属性名をcolSpan、rowSpanで指定する。全部小文字で大丈夫な場合もあるが、現時点では素直にcolSpan、rowSpanと、Sを大文字で書くのがよさそう。 以下の説明で、変数 td や ID #xxxx は適当なTD要素とする。 基本は col”S”pan と大文字にする //直に td.colSpan = "3" //DOM関数で td.setAttribute("colSpan", "3") //jQueryで $("#xxxx").attr("colSpan","3") 今風の書き方 + 最近のブラウザ(Firefox、IE8、Chromeなど)の組み合わせなら、小文字でも大丈夫だった 古いブラウザ(IE7など)はダメ。 //DOM関数で td.se
← 前回 連載 INDEX 次回 → 既存要素の複製を作成するには、cloneメソッドを利用します。「ページ内の特定の要素をコピーして、他の箇所に挿入したい」という場合などに利用します。 例えば以下は、テーブルの行をクリックすると、これを複製して、テーブルの最終行に追加する例です。
https://www.itdashboard.go.jp/PublicApi/getData.json?dataset=BasicInformation&year=2014&field=organization&option=count グラフ作成手順 環境準備 jQueryとGoogle Chartsを利用するための<script>タグを記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> パッケージ読み込みとコールバック グラフ作成に必要なパッケージを
Stay organized with collections Save and categorize content based on your preferences. The Google Hosted Libraries is a stable, reliable, high-speed, globally available content distribution network for the most popular, open-source JavaScript libraries. Google works directly with the key stakeholders for each library effort and accepts the latest versions as they are released. Libraries To load a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く