もうjQueryには頼らない！素のJavaScriptでDOMを操作するための基礎知識
DOM操作が必要なとき、真っ先にjQueryを使うことを考えます。しかし、素のJavaScriptのDOM APIだけでも、実はかなりのことができるのです。また、IE10以下のサポートが終了したため、今後は素のJavaScriptによるDOM操作を心配なく使えます。 記事では、素のJavaScriptで一般的なDOM操作をする方法について説明します。具体的には以下のとおりです。 DOMの取得と変更 クラスと属性の変更 イベントのリッスン アニメーション 記事の最後に、どのようなプロジェクトにも使える独自の超軽量DOMライブラリーの作り方を説明します。記事の最後までに、素のJavaScriptによるDOM操作は決して高度な技術ではないこと、多くのjQueryメソッドとまったく同じ機能が実はネイティブAPIにもあることが理解できるはずです。 それでは始めます。 DOM操作：DOMの取得 この記
jQueryはもっと効率よく書ける！ 押さえておきたいトラバースメソッドのすべて
多彩なセレクターはjQueryの特徴の1つですが、DOMトラバースメソッドを使って絞り込む方法を身につければ、もっと効率よくコードが書けます。 DOMトラバースとは、Webページの要素を1つまたは複数選択し、選んだ要素と関係する別の要素へ移動できる技術です。最初に選択した要素に新たな要素を加えたり取り除いたりもできます。 本記事ではjQueryで使えるDOMトラバースメソッドを説明していくとともに、ページのある要素との関係を基に別の要素を簡単に選択するさまざまな方法を解説します。 要素の絞り込み はじめに、選択肢を具体的に絞り込んでいく方法を説明します。たくさんの条件、たとえば、ほかの要素との関連性や特定のクラスに属するか否かで要素を絞り込めます。たいていは当初より絞り込んだ要素を選択できるはずです。 絞り込みに使うフィルターメソッドはこちらです。 eq：選択された要素の中から指定した位置
Web開発者の私が「jQueryダイエット」に取り組む理由
2017年に入って1カ月が過ぎ、新たな目標にチャンレジしている人も多いでしょう。SitePointのJavaScript担当エディターのJamesは、「jQueryダイエット」に取り組むことを決めたようです。 2016年はJavaScript界にとってクレイジーな1年でした。ES6対応やプログレッシブウェブアプリの増加が見られました。また、Yarnがnpmの競合として登場し「JavaScript疲れ」が問題になりました。見逃した人や、思い出にふけりたい人のために、おさらいをします。Craig Bucklerは2016年の出来事を『JavaScriptの2016年：フロントエンド開発者が押さえるべき重大トピック』で紹介しています。とてもよく書かれています。 2017年について考えるとき、次の2つの問いが頭に浮かびます。昨年のようにまたクレイジーな1年になるのか、そして、365日、毎日キャッチ
「うざっ！」と言われないモーダル・ポップアップをjQueryで実装しよう
資料請求や会員獲得など、コンバージョンのために欠かせない、モーダル・ポップアップ。でも、ページを開いたとたんにいきなり表示されたり、1日に何度も表示されたら不快ですよね。そこでjQueryを使ってちょっとひと工夫。 本記事では、Webページで一定の間隔をおいてモーダルウィンドウを開く方法を説明します。ニュースレターのサインアップやFacebook上で「いいね！」を取得するときなど、特定のCTA（Call To Action）を強調して表示する場合に役立ちます。一部のサイトは広告を表示するときにもこの手法を使っています。 ただし、こうしたウィンドウの開き方が本当に必要かどうか少し自問してから作業を続けてください。閲覧中になにもクリックしていないのにウィンドウが開くと、たいていの訪問者は即座に閉じ、邪魔されたことにうんざりします。サイトのイメージを損なう可能性もありますが、訪問者の意識をコンテ
HTMLのテーブルをJSONで動的に更新できる「Tabulator」がスゴい！
テーブル（表組み）をかっこよく、使いやすく表示するJavaScriptライブラリーはたくさんありますが、決定版になりそうなのが「Tabulator」です。JSONデータを簡単に読み込めるので、更新が必要なサイトやアプリにおすすめ。 標準HTMLのテーブル（table）は、複数の基本的なデータをレイアウトするのにとても便利ですが、テーブルにもっとほかの使い道がないでしょうか。外部APIからデータを取得したり、テーブルをソートあるいは編集可能にしたりする必要があるなら、もう少し気の利いたものが必要です。 思い当たることがあるなら、Tabulatorはおすすめのライブラリーです。Tabulatorは複雑なインタラクティブなテーブルの構築を簡単にするために設計された軽量なjQuery UIプラグインです。数行のJavaScriptで、ほぼすべてのデータソースをきれいにフォーマットされたインタラクテ
知ってた？ jQueryのready()メソッドはもう書かなくていいらしい
jQueryのコードといえば、$(document).ready(function() {}で書くのがお決まり。でもそのコードの書き方はもう古いかもしれません。 jQueryでreadyメソッドはDOMが完全にロードされたタイミングでコードを実行するように実装されていました。このメソッドはすべてのDOM要素が利用可能になった時点で所定の関数を実行するので、要素へ確実にアクセスしたり操作したりできます。 jQuery 3.0がリリースされるまでは、次のように無名関数で使うのが一般的でした。 $(document).ready(function() { // Handler for .ready() called. }); jQuery 3.0での「ready()」メソッドの変更 jQuery 3.0のリリースまでは、readyメソッドを呼び出す方法はいくつかありました。 document要素
そのコード、本当にjQueryが必要ですか？ネイティブ関数の代替Tips集 | ゆっくりと…
sitepoint から「本当にjQueryが必要ですか？」とタイトルのついた3本の記事を紹介します。 Do You Really Need jQuery? Native JavaScript Equivalents of jQuery Methods: the DOM and Forms Native JavaScript Equivalents of jQuery Methods: Events, Ajax and Utilities 言うまでもなく著者の Craig Buckler さん の趣旨は、「jQueryを使うのは止めよう」ではありません。ネイティブ関数で代替えできるのは、古い IE のサポートが必要なく、ごく簡単なケースに限られます。その代わりに得るものは「速さ」です。そこで、どの程度「速い」のかを所々 jsperf の結果で補ってみたいと思います。 また JavaScri
CVRアップにこれが効く！フォーム検証jQueryプラグイン10本をサンプルで徹底比較
エラーメッセージや、入力サポートメッセージの表示は、ユーザーにメリットがあるだけではなく、フォームでの離脱を防ぎます。jQueryで簡単に実装、カスタマイズできるプラグインを中心にサンプルコード付きでまとめました。 HTML5では新しいform属性が導入され、ブラウザーがフォームのバリデーションを直接実行できるようになりました。基本的なフォームバリデーションは、この記事に書かれているようなプラグインを使わなくても、CSS3とJavaScriptで実現できます。とはいえ、HTML5を使ったフォームバリデーションには次のような制限があります。 エラーメッセージについてはブラウザーに任されており、自分で設定できるのは入力フィールドのタイトルのみ。 エラーメッセージのスタイルはカスタマイズできない。 入力フィールドのパターンは自分で作成しなければならない。 次の10個のjQueryフォームバリデー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
