脱jQueryの道 初級編
Posted: 2019.02.12 / Category: javascript いつもはjQueryを使用していますが、素のJavaScriptでクリックイベントやクラスの切り替えを行ってみます。 要素取得する セレクタで指定したid・classの要素を取得してみましょう。 これがないと始まりませんね。 要素を一つだけ取得する 以前は、idがgetElementByIdで、classはgetElementsByClassNameを使用していましたが、最近はquerySelectorが主流です。 CSSのセレクタのように要素名を指定するか、.でclass、#でidを取得できます。 JavaScript // 要素名で取得 document.querySelector('div'); // classを取得 document.querySelector('.example'); // id
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 tagEditor Plugin
example tags, sortable, autocomplete, edit in place, tab/cursor navigation, duplicate check, callbacks, copy-paste, placeholder, public methods, custom delimiter, graceful degradation Overview and Features Released under the MIT License. Source on Github (changelog). Compatible with jQuery 1.7.0+ in Firefox, Safari, Chrome, Opera, Internet Explorer 8+. IE7 technically works, but no care has gone i
jQuery の on() と off() を理解する - tacamy--blog
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
jQuery：重複しているリストを削除した上で、アルファベット順に並び替えるには？ - 以下のようなHTMLがあるとします。<ulid="... - Yahoo!知恵袋
jQuery：重複しているリストを削除した上で、アルファベット順に並び替えるには？ 以下のようなHTMLがあるとします。 <ul id="HotelNameListUp"> <li><a href="linkB">Hotel B</a></li> <li><a href="linkA">Hotel A</a></li> <li><a href="linkD">Hotel D</a></li> <li><a href="linkB">Hotel B</a></li> <li><a href="linkC">Hotel C</a></li> <li><a href="linkD">Hotel D</a></li> </ul> このHTMLから重複しているリストを削除し、さらにアルファベット順に並べなおし、以下のように並び替えたいのです。 <ul id="HotelNameListUp"> <l
Add Clear - jQuery Plugin - Demo
Search When you type something in this box, the clear button will appear. Github Project Page | @skorecky
任意のエレメントに、サイズに応じてclassの追加/削除をするスクリプト・Responsive elements
任意のエレメントに、画面サイズに合わせて特定のclassの追加/削除を行うスクリプト・Responsive elementsのご紹介です。特定の画面サイズになるとclassが付与されるので、そのclassを使ってCSSを書きます。 前も似たようなものがあった気がしますけど・・こちらも軽量で良さそうです。classを与える事で、RWDの対応もしやすくなりそうです。尚、スクリプトはjQuery依存です。 特定のサイズで指定した要素にclassを追加してくれます。シンプルで良さそうですね。 セッティングは要素ごとにカスタムデータ属性を利用します。 <div class="foo" data-respond="start: 100px; end: 900px; interval: 50px;">これで、画面サイズにあわせてclassが付与されます。 詳細は以下よりどうぞ。 Responsive e
[JS]軽快なアニメーションでグリッドに配置したパネルをパズドラのように移動したり、追加・削除できるスクリプト -Gridly
デモのアニメーション Gridlyの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script> <script src="javascript/jquery.gridly.js" type="text/javascript"></script> <link href="stylesheets/jquery.gridly.css" rel="stylesheet" type="text/css" /> Step 2: HTML 各パネルはdiv要素で実装し、それらをラッパーで包みます。 <div class=
HTML5 × CSS3 × jQueryを真面目に勉強 – #15 Evernote風タグ登録コンポーネントを作ってみた | DevelopersIO
ちょっとした備忘録といったメモには Evernote を使っています。一時期に比べると使用頻度は少し落ちましたが、それでも使っています。地味なところですが、Evernote のタグ登録 UI が結構好きなのが理由の一つでもあります。 Web メールにおいては基本的に受信がメインで送信といっても殆どが返信で済んでしまっていますが、 Gmail を使っています。Gmail は非常に早いサイクルで機能や UI が刷新されまくっていますが、いつの頃から送信先、Cc、Bcc 入力のUIがまるでタグのような見た目とインタラクションになりました。この両者の UI はとても良く似ており、単純なカンマ区切りの文字列よりも視認性が高くて個人的に気に入っている UI の一つです。 そんな訳で、このタグ登録のUIコンポーネントを作ってみました。前回、jQuery UI Widget の作り方について学んだわけです
フォームの<input type="file" />の値をjQueryでリセット（クリア）する方法
フォームの<input type="file" />の値をjQueryでリセット（クリア）する方法を紹介します。 １．問題点 フォームの値をリセット（クリア）する場合、通常はtype属性が「reset」のボタンですべてクリアできます。<input type="file" />の値も同様にリセットされます。 HTML <form id="bar" action="foo.cgi"> <input type="file" /> <input type="reset" value="リセット" /> </form> サンプル1 JavaScript（jQuery）でリセットしたい場合、次のように記述すればいいように思われます。 HTML <form id="bar" action="foo.cgi"> <input type="file" id="file" /> <input type="bu
CSSファイルやJavaScriptファイルを読み込むときの末尾にあるクエリー文字列は何のためにあるか
あちこちのウェブサイトのHTMLソースを見ると、CSSファイルやJSファイルを読み込むlink要素やscript要素のファイル名の末尾に「?xxx=123」のような、いわゆるクエリーがついているのを頻繁にみかけます。 例えばWordPressでjqueryを読み込んだときなど、 <script src="http://user-domian/wp-includes/js/jquery/jquery.js?ver=1.6.1"></script> と、jQueryのバージョン番号を示すクエリー文字列がついています。CSSファイルやJavaScriptファイルはCGIではないので、このクエリーを解釈して使っている訳ではありません。 知っている人は「な～んだ」って感じだと思いますが、この「?ver=1.6.1」の役割について紹介します。 １．キャッシュを制御する ページ読み込みと同時に読み込まれ
閉じられるタブUIを実装できるjQueryサンプル「Magic Tabs」:phpspot開発日誌
JQuery Magic Tabs Plugin | jQuery Plugins 閉じられるタブUIを実装できるjQueryサンプル「Magic Tabs」。 次のように、横に長くなってもスクロールできつつ、閉じるボタンもついて、インタフェースもなかなかクールなタブUIが実現できます。 ありそうであまり無かったかもしれないプラグインですね。もちろん「タブの追加」みたいなのもできます。 実装コードはこちらに掲載されています。デモもあります ページの構成によっては使うことでより利便性の高いインタフェースを提供できそうですね 次のようなコードで比較的容易に実装が可能です。 関連エントリ 折り畳み可能なシンプルツリーメニュー実装jQueryプラグイン「Simple Tree Menu」 シャレオツなカウントダウンタイマーが実装できるjQueryプラグイン「The Final Countdown」
テーブルにソート、内容編集、行の削除等の機能を加えるjQueryプラグイン・TableGear
なかなか多機能なライブラリだったので 備忘録。テーブルにソート、コンテンツの 編集や、Ajaxによる行の削除が可能な jQueryプラグイン・TableGearです。この 手のプラグインはいくつかありますが、 中でもかなり高機能な気がします。 jQueryだけでなくmootoolsも用意されてるみたいです。テーブル内でソートが可能で、セル内は編集できます。もちろん、編集後のソートもOK。行そのものを消す事も可能ですよ。 セル内は編集可能で、普段はこのように通常と変らないインターフェースを維持できます。マウスでクリックするとプルダウンや入力エリアが出現。 編集してもソート機能は維持 ソート機能が付いていますが、セル内に変更を加えても、変更後の内容でソートしてくれます。 行の削除も 行ごと削除する事も出来ます。 デモはPHPとMySQLを使って設計してるようですが、他のシステム上でも動作すると
[JS]フォームの項目をユーザーが追加・削除できるようにするスクリプト -SheepIt!
複数の電話番号や住所などを入力できる、フォームの項目をユーザーが追加・削除できるようにするjQueryのプラグインを紹介します。 SheepIt! - Form Cloning Jquery Plugin デモページ [ad#ad-2] SheepIt!の特徴 フォームのアイテムを追加したり、削除することができます。 フォームのアイテムの数をコントロールできます。 フォームのコードは通常のHTMLで実装します。 フォームのアイテムにデータをロードすることができます。 コールバック機能を備えています。 SheepIt!の実装 前述のデモのHTMLは、下記のようになります。 HTML フォームの箇所は通常のHTMLです。 <!-- sheepIt Form --> <div id="sheepItForm"> <!-- Form template--> <div id="sheepItForm
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リッチなテーブルを実装する為のjQueryプラグイン・Open JS Grid