How To Use jQuery In Angular

BY admin
|

Sometimes we have to use it

Bhargav Bachina

Follow

Mar 2, 2020 – 3 min read

Photo by Greg Rakozy on Unsplash

Angular is javascript framework that helps we build enterprise-javascript-jvc…レベルのフロントエンド・アプリケーションを、簡単かつ意見交換しやすい方法で提供します。 一方、jQueryは小さいながらも機能豊富な強力なjavascriptライブラリで、少ないjavascriptコードでHTML DOMを操作するのに役立ちます。 ここで、なぜ Angular で jQuery を使用しなければならないのか、また、その必要性は何なのかという疑問があると思います。

Angular アプリケーションの構築中に、何かを成し遂げるために jQuery のようなライブラリが絶対に必要な状況に出くわすことがあります。 私が思いつく例の 1 つは、Angular アプリから外部 Web サイトにフォームを送信することです。

Angular で構築した Web サイトで、何かを購入する状況を想像してみてください。 この Web サイトで入力されたすべての詳細情報を使用して注文を完了するために、別の Web サイトに移動するリンクがあります。 jQueryを使わずにこれを実装する方法もありますが、私はjQueryを使うかもしれない仮想シナリオを作成しているだけです。 この投稿では、Angular で jQuery を使用する方法を見ていきます。

  • jQueryとは
  • サンプル プロジェクト
  • jQuery With Angular
  • 概要
  • まとめ

jquery はシンプルで小さくても機能豊富な javascript ライブラリで、少ない javascript で HTML DOM を処理できるように支援するものです。 ここでは、jQuery の公式 Web サイトを紹介します。

jQuery をまだ使用していない人のために、jQuery をより理解するための簡単なプロジェクトを 1 つ行ってみましょう。 ここでは、姓と名を入力する簡単なフォームを作成します。 送信ボタンをクリックすると、名前がフォームの下部に表示されるようにします。

Example jQuery Project

上記のコードはこちらです。 全体のロジックはscriptタグの中に入れています。 jQueryでは、idやCSSセレクタなどを元に、DOM要素の問い合わせや設定を行うことができる。 たとえば、ファーストネームを$("#fname").valで問い合わせ、$("#fn").val(firstName).

jQuery.html

で設定することができる。