トロイの木馬化された「jQuery」がnpmやGitHubで拡散
海外のセキュリティ企業「Phylum」はトロイの木馬化された「jQuery」がnpmやGitHub、jsDelivr のCDNホストで拡散している事を指摘しました。 「jQuery」を悪用したサプライチェーン攻撃の概要 Phylumは 2024 年 5 月 26 日以来、トロイの木馬化された jQuery のバージョンを悪用する執拗なサプライ チェーン攻撃者を監視しており、最初に npm でこのjQuery を悪用する亜種を発見しました。 そこでは、1 か月にわたって数十のパッケージで侵害されたバージョンが公開されていました。 調査の結果、GitHubや、jsDelivr の CDN ホスト リソースでも、トロイの木馬化された jQuery のインスタンスを発見しました。 なお、今回解説されている内容は正規の「jQuery」へ今回のトロイの木馬が紛れ込んでいるのではなく、 悪意のあるユーザ
本文がグラデーションで消える、続きを読むボタンの作り方
本文がグラデーションで消える、続きを読むボタンの作り方 Publish Date: 2017.10.05 画像のような本文の冒頭は見えているけど、後半はグラデーションで消えているような「続きを読む」ボタンの作り方です。 デモはこちら 実際のコード <p class="text hidden"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla molestias et dolore, nisi repellendus odit repellat labore ratione velit quas amet tenetur, quis assumenda voluptate alias laborum aperiam reprehenderit incidunt. Lorem ipsum dolor sit ame
デジタル庁でjQueryが何をしているのか - laiso
TL;DR: jQueryはDrupalのバーター リニューアルするたびにWeb界隈の一斉レビューを受けることでお馴染のデジタル庁ポータルサイトがいつの間にかまたリニューアルされていて、フロントエンドがNext.jsからDrupalに変わって話題になっていたので1、私も旅券所持者として国政に関心を持ってゆく また、まわりのフロントエンドエンジニアの間でjQuery氏の入庁について「モダンブラウザ全盛の時代に必要か？」と疑念がとなえられていたので、これも追求してゆきたい どのような変更があったのか システム変更の経緯はプロジェクトの関係者であるHal Sekiさんの発言が正確なところだと思う Drupalが話題ですが、元々CMS側は2年前からずっとDrupalだったんです。設立当初はサイトもシンプルだったのでフロントエンド側はNextjsでヘッドレス構成だったのですが、構成が複雑になってきて
jQueryへの別れ：現代的な開発のための必須JavaScriptメソッド - Qiita
はじめに 私は長い間レガシーコードと共に仕事をしてきましたが、jQueryの重要性は依然として頻繁に話題に上がるトピックの一つです。ライブラリ自体は便利なままですが、それは別の時代のニーズを完璧に満たしていました。 現在、私たちは既にES2023について話していますが、過去にjQueryがカバーしていたほとんどの機能は、すでに2015年にリリースされたES6に取り込まれています。 ES6の標準は既に広範にサポートされており、96％のレベルに達しています（出典：caniuse.com）。そのため、特に要素の選択、スタイリング、アニメーション、データの取得などの基本的なタスクについては、ライブラリの使用を見直す良いタイミングかもしれません。 以下のトピックは、いくつかの標準的なjQueryのパターンと、それに相当するバニラJavaScriptでの手法を示す参考資料として役立つと思います。 要素
（基礎編）jQuery使いのエンジニアがReactとNext.jsでWebサイト制作するために最低限押さえておきたいコード
なぜ書いたか 筆者もWebサイト制作をそこそこ長くやってきておりいまは業務でVueを書いたりちょっとReactを書いたりSvelteを書いたりしていますが、2年前くらいまではReactやES6の構文すら書いたことがありませんでした。 WordPressでのサイト制作が多く、機能が少ないサイト制作会社ではjQueryで充分なことも多く、恥ずかしながら業務時間外での学習や外部の情報を追うこともしていなかったため、開発系の技術スタックに慣れるのにかなり時間がかかりました。 まずはよく使うコードを見て解説しながら答えの一つを示し、よく出てくるコードをざっくり理解して書けるようにすることで、実務でReactを取り入れる取っ掛かりになればいいなぁという思いでこの記事を書いています。 続編は多分今月中に書きます。 こちらは基礎編です。 対象者 普段jQueryでWebサイトを制作している 生のJSはあん
なんとなくだらだら。。。 : jquery.validateの使い方
2015年08月28日17:12 カテゴリJavaScriptjqeury jquery.validateの使い方 [HTML] <form name="aaaa" id="aaaa"> <input type="text" id="a_ID" name="a_ID" > <span id="a_ID_err"></span> </form> [script] <script type="text/javascript"> $(document).ready(function() { $("#aaaa").validate({ rules : { a_ID: { required: true } }, messages: { a_ID: { required: "<br/>必須入力項目です。" } }, errorPlacement: function(error, element) {
【jQuery】imgタグのsrcを書き換えて画像を変更する
こんにちは、Ryohei（@ityryohei）です！ imgタグのsrcを書き換えて別の画像を表示する処理はサイトを制作する上でよく使用します。クリックでボタンのアイコンを変更したり、数秒置きに切り替えたり、ウィンドウサイズに応じて出力する画像を変更したり……。 毎回同じ処理ではないですが、imgタグのsrcを書き換えて別の画像にする処理は大変便利ですので、こちらの記事でご紹介したいと思います！ jQueryを読み込む jQueryを利用するために、GoogleのCDNを利用してファイルを読み込みます。 CDNというのはContents Delivery Network(コンテンツ・デリバリー・ネットワーク)の略称で、ネットワークを経由してウェブコンテンツを利用するサービスを指します。ネットワークに接続されている機器であれば利用することができます。 CDNには有料、無料のものがありますが
JQueryでhtmlをincludeする - Qiita
いまさらJQuery。 概要 html内でフッターやヘッダーなどの共通部分のhtmlをincludeするコード。 htmlを記述する際に同じ部分をたくさん書かずに済む。メンテも楽！ (2019/3/13追記) もうちょっと実用的な関数を後日作りました。 コード 共通部分を呼び出したいhtmlファイルの一部。共通部分は<div class="target"></div>の中に展開されます。 <script type="text/javascript" src="includeTemplateHTML.js"> IncludeTemplateHTML("div.target","/Path/Of/templateHTML.html"); </script> <div class="target"></div>
jQueryのclickイベントが動作しない？Ajaxなどで遅延読み込みした要素へのイベント登録方法を確認しよう。 | WEMO
jQueryのclickイベントが動作しない？Ajaxなどで遅延読み込みした要素へのイベント登録方法を確認しよう。 2019 8/13
jQueryでフォームの入力値をチェックする（Validation）プラグイン｜プログラムメモ
● jQuery Validation Plugin http://jqueryvalidation.org ● 日本語での解説 http://kudakurage.hatenadiary.com/entry/20091211/1260521031 ● スクリプトの読み込み http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js ● 用意するHTML <form name="FM"> <input type="text" name="hoge"> <input type="text" name="fuga"> </form> ● バリデーションの定義 $("#FM").validate({ rules: { hoge: { required: true } , 'fuga': { requir
特定位置までスクロールすると要素が追従する処理を実装する
特定位置までスクロールすると、要素が追従してくる処理を実装してみます。 サンプルコード ヘッダーの下に配置したナビゲーションを、スクロール時は上部に追従するようにしてみます。 HTML .navを追従します。 <div id="page"> <header class="header"> ヘッダー </header> <div class="nav-wrapper"> <div class="nav"> ナビゲーション </div> </div> <div class="contents"> <p>メインコンテンツ</p> </div> </div> CSS 追従時は.is-fixedを付与して、position: fixed;が適用されるようにします。 .is-fixedが付与されたときに.navの高さ分ずれてしまうのを防ぐために、.navを.nav-wrapperで括って高さ分の領域を
【WordPress】お問い合わせフォームで郵便番号を入力した時に住所を自動で入力させる方法
予約フォームや資料請求フォームをサイト内に作る場合、住所の入力を求めることがありますよね その時に、郵便番号の入力も求めるのであれば、郵便番号から住所を自動で表示できると入力する側にとっては非常にありがたいです。 今回はWordPressのお問い合わせフォーム作成プラグインContact Form 7に郵便番号入力したら住所を自動で表示できるようにカスタマイズしてみます Contact Form 7で作ったフォームで郵便番号から住所を自動入力！ 今回は資料請求フォームを想定して、Contact Form 7で作ったフォームに郵便番号からの住所自動入力を組み込んでみます Contact Form 7の使い方はコチラ▼ フォームの準備 まずはContact Form 7で以下のようなフォームを作りました <label> お名前 (必須) [text* your-name] </label> <
郵便番号の自動変換「YubinBango.js」で都道府県コードを使う方法
「YubinBango」とは 登録フォームの住所を郵便番号を入力するだけで自動的に住所が登録してくれるJavascriptのライブラリです。 これを使えばユーザーが住所を入力する手間を省くことができる非常にありがたいライブラリです。 https://github.com/yubinbango/yubinbango 通常の使い方 デモ 郵便番号を入れるだけで住所が入力されます 「YubinBango」の利用方法 指定のclass属性を設定するだけ、すぐに動かすことができます ライブラリを読み込む “h-adr”のclass属性をセットしたformやdivで囲む class属性に “p-country-name” をセットした非表示要素を配置する 郵便番号入力フォームのclass属性に “p-postal-code” をセットする 住所入力フォームのclass属性に “p-region”（都道
【jQuery】スライダープラグイン「slick」の使い方を詳しく解説
前回、「超簡単！CDNのjQueryを読み込む方法」というのを書きましたが、Web制作をする上では、様々なjQueryのプラグインも使用する機会が多いと思います。jQuery本体と同様に、プラグインも毎回ダウンロードしてサーバーへアップして、、、というのは面倒です。そこで便利なのが「jsDelivr」というサイトです。プラグイン全て、というわけにはいきませんが、かなりの数のプラグインをホストしていますし、よく使うCDNをコレクションして一括でソースコードをコピーして貼り付けられたり超便利です。ぜひ使ってみましょう。jsDelivr&... 設置するファイル ajax-loader.gif fonts（フォルダ） slick-theme.css slick.css slick.min.js HTML <link href="js/slick-theme.css" rel="styleshee
【jQuery】複数の要素に対して繰り返し処理をする（each・for） - TASK NOTES
HTMLで特定の要素を全て取得して回したい場合はJavaScriptなどで繰り返し処理をしますが、jQueryを使った場合の方法をまとめます。 対象としてはこのようなHTMLの場合です。 <div class="comment">コメント1</div> <div class="comment">コメント2</div> <div class="comment">コメント3</div> ... .each()メソッド jQueryで繰り返しといえばeach()メソッドです。基本的な構文は以下の通り。 $('セレクタ').each(function(index, element){ 〜 }); 第1引数には各要素のインデックス番号が、第2引数には繰り返し処理中の要素が参照されます。2つの引数はどちらも省略可能です。このメソッドを使えば要素数分、繰り返して指定した関数を実行してくれるわけですね。簡
初めてのVue.js（jQuery脳からの移行をメインに） - Qiita
記事概要 jQueryベースでWebブラウザベースのアプリ書いている人がVue.jsに手を出すとしたら、「こんな風にやってみると分かりやすいかも？」と言う話。ES5 前提です。 Vue.jsの特徴として、他のフレームワークとの混在が容易、ってのがある。なのでjQueryとの共存も可能。今回の例では「inputタグなどの入力インターフェースにのみVue.jsを適用し、設定パネルのスライドダウン／アップなどの表示系DOMの操作はjQueryでのコードをそのまま流用」という方針で組んでみた。 「Vue.jsとは何ぞや？」は下記の公式ガイドを参照のこと。 https://jp.vuejs.org/v2/guide/ Vue (発音は / v j u ? / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolith
jQueryで動的に追加した要素はクリックイベントが発火しない？いやそんなことはないぞ - Qiita
知ってるよって？ 知ってる人には当たり前、でも知らない人はかなり躓くんだよ！ 事象 こんなボタンを作るじゃろ <div class="btn-area"> <button type="button" class="add-btn">ボタン1</button> </div> $(".add-btn").on("click", function () { var num = Number($(this).text().replace("ボタン", "")); var html = '<button type="button" class="add-btn">ボタン' + (num + 1) + '</button>'; $(".btn-area").append(html); }); 「ボタン1」をクリックするたび「ボタン2」が増えるね だがしかし！ 「ボタン2」をクリックしても何も起きない！
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Jquery delay disabled
Mobile support incompatible with jQuery Validation · Issue #956 · flatpickr/flatpickr
jQuery Validation Pluginが使いやすくておすすめ - Qiita
