脱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
配列の要素挿入、置き換えもsplice()で。Vue.jsでも大丈夫。（配列とかおれおれAdvent Calendar2018 – 07日目） | Ginpen.com
const arr = [11, 22, 33]; const index = 1; const value = 99; arr.splice(index, 0, value); console.log(arr); // => [ 11, 99, 22, 33 ] const arr = [11, 22, 33]; const index = 1; const value = 99; arr.splice(index, 1, value); console.log(arr); // =>[ 11, 99, 33 ] 第2引数を 0 にするとただ挿入するだけ、 1 だと置き換えます。 仕様 Array.prototype.splice() – JavaScript | MDN array.splice(start[, deleteCount[, item1[, item2[, ...]]]]
WordPressのテキストエディタを便利にする「クイックタグ」とは？（カスタマイズ方法有） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。ディレクターのエリカです。 WordPressで記事を書くとき、あなたはビジュアルエディタを使いますか？ それともテキストエディタでしょうか？ 私はテキストエディタ派なのですが、タグを素早く簡単に挿入できる「クイックタグ」というものを使いながら記事を書いています。 今回はその「クイックタグ」についてと、そのカスタマイズ方法を紹介します。 クイックタグについて クイックタグとは、テキストエディタを利用するときに、入力エリアの上部にあるボタンをクリックすると、そのボタンに応じたタグが挿入されるという機能です。クイックタグを効果的に使うことで、テキストエディタでの記事作成をすばやく、また記事の投稿者が違う場合でも同じような記事構造にすることができます。 クイックタグに標準で設定されている主なタグ 標準で用意されているタグは、主に次のようなものがあります。 b 【挿入されるタグ】 <s
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')
任意のエレメントに、サイズに応じて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=
Movable Typeのアイテム編集画面に削除ボタンを表示する「DeleteAssetButtonプラグイン」
Movable Typeのアイテム編集画面に削除ボタンを表示する「DeleteAssetButtonプラグイン」を公開します。 １．基本 Movable Typeのアイテム編集画面には「削除」ボタンがありません。よって、アイテムを削除したい場合は、一覧画面から削除する必要があります。 アイテム編集画面でアイテムの削除要否を確認したい場合など、ちょっと不便かもしれません。 ２．機能 タイトルの通り、Movable Typeのアイテム編集画面に削除ボタンを表示します。 削除ボタンをクリックすると、確認ダイアログを表示します。 プラグインの動作はMT5.14で確認しています。 ３．プラグインのダウンロード・インストール 下記のリンクをクリックして、プラグインアーカイブをダウンロードします。 DeleteAssetButton_0_01.zip 価格：\3,000-（税別）/1インストールMT プ
[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
[AS3] 連結リストとVectorによるエレメントの追加と削除
投稿者：野中 文雄 | 投稿日：2010.10.12 | [AS 3][ActionScript][Tips][野中ゼミ] 「連結リスト」(linked list)はObjectとArrayクラスの中間のような仕組みで、エレメントには順序があるもののインデックス番号をもちません。その処理の速さを、Vectorクラスと比べてみます。 連結リストの各エレメントは、その前後のエレメントの参照をもちます。そのため、順序はあってもインデックス番号がないのです。連結リストの仕組みについて詳しくは、「連結リスト(linked list)」をお読みください。 ここでは、エレメントを最後に加える操作と先頭からエレメントを除く操作について、連結リストとVectorクラスを比べてみます。Vectorクラスのメソッドでは、push()とshift()です。テスト用のスクリプトをwonderflに掲げました。エレメ
![[AS3] 連結リストとVectorによるエレメントの追加と削除](https://cdn-ak-scissors.b.st-hatena.com/image/square/a092edc21fa668dd8fd9d4117d5f1ea7812f16d6/height=288;version=1;width=512/http%3A%2F%2Ff-site.org%2Fogp_2013.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
属性の操作はsetAttribute()とかremoveAttribute()とか、あとattributesで。（DOMおれおれAdvent Calendar 2015 – 07日目） | Ginpen.com