Blog

jQueryで簡単にプログラミング

PROGRAMMING WEB

はじめに

まずjQueryのことから説明しようと思います。jQueryは、WEBサイトにて機能(ページを上部に移動する機能や、ボタンをクリックすることでメニューが開く機能など)をつけたいときに使うプログラミング言語です。実際はjavascriptというプログラミング言語が元になってプログラムを実行しているのですが、jQueryを使うことによってより簡単にコードを書くことが可能になります。

 

jQueryを利用するには

まずjQueryの公式サイトへアクセスします(https://jquery.com/)。サイト内の「Download jQuery」という文字か書いてある黄色いボタンをクリックします。そうすると、ダウンロード出来るサイトへ移動することができます。※サイト内は英語表記になっています。

サイト内にはjQuery1.xjQuery2.xの表記があります。違いについては、1.xよりも2.xの方が高速かつ軽量で安定していますが、2.xについてはInternet Explorerにはバージョン8以下には対応していないデメリットがあります。しかしInternet Explorer自体は、windowsからのサーポートを終了し、扱っている母体数自体減少傾向にあるためあまり考慮する必要はないと感じます。そのため基本的にはjQuery2.xが推奨になると感じます。

またダウンロードするリンクにはcompresseduncompressedの二種類が記載されています。compressedは「圧縮版」のことです。逆にuncompressedは「非圧縮」のことです。圧縮することにより処理のスピードが早くなるメリットがあります。よっぽどjQueryのコードの原文を書き換える必要がなければ圧縮版がオススメです。

次にダウンロードを完了した場合は、使いたいWEBページのファイルに入れてHTML内にリンクさせるとjQueryの機能をくっつけることができます。

 

jQueryの構文

まずjQueryの構文を書く前に記入する項目を紹介したいと思います。

基本的な書き方は

$(function(){

ここにjQueryの実行したい機能を書きます

});

こんな感じで作ることができます。function()の{}内にjQueryの機能を書くことができます。

次にjQueryの基本的な構文を紹介したいと思います。

$(“セレクタ”).メソッド(引数);

セレクタにはHTMLの要素やdivで作ったクラス名が入ります。ここがjQueryのすごいところの一つです。理由はjavascriptで同じようにHTMLの要素に機能を引っ掛けたい場合は、変数を書いた上でgetElementById(要素名);

としなくてはいけないのでとてもめんどくさい工程が入ることになります。(しかもこれだけでは要素名を紐づけただけで何も実行できない)

メソッドはwebページにどういう動作をしたいことを奇襲することができます。記入例にはHTMLと書くと、引数の記入によりその要素のぶんを書き換えることができますし、CSSと書くと引数の記入によりスタイルを変えることができます。

 

まとめ

今回jQueryの導入について記述しましたがまだ自分の勉強中のみです。これから多くのメソッドを使いこなせるようにしてマスターしていきたいと思っています。

広告

←BLOG TOP に戻る

←TOP PAGE に戻る

広告