jQueryでURLとパラメータを取得する方法:location

jQueryで現在表示中のページのURLとそのパラメータを取得する方法を説明します。 if文を使うことで、URLやそのパラメータによって表示を切り替えることができるので頻繁に見る処理です。

locationを使用した方法

jQueryでも、JavaScriptでデフォルトで用意されているLocationオブジェクトを利用できます。 Locationオブジェクトでは、「location.プロパティ」のようにプロパティ(パラメータなど)を指定することで、簡単にURLとその情報を取得できます。

JavaScriptにおけるlocationのサンプル

たとえば以下のURLが表示中だとします。 「http://www.example.com:8080/page.html?page=2#pagetop」 URLやドメイン、パラメータを取得する例は以下のようになります。 URLを取得する URLの全体を取得します。

ドメイン名を取得する

ポートを取得する

プロトコルを取得する

パスを取得する

パラメータを取得する

#〜を取得する

jQueryを使ってURLを取得する

また、jQueryのattr()メソッドを使うことで、URLを取得することもできます。 例えば、パラメータを取得するサンプルは以下のようになります。 jQuery

URLによってif文で切り替える

LocationとjQueryを使うと、簡単にページの内容を変えることができます。 例えば、URLに#closeとついていた場合、ある要素を非表示にするサンプルは以下のようになります。

このように、簡単に表示を切り替えることができます。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて