2016/5/23更新

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

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

locationを使用した方法

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

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

location.href
//結果：http://www.example.com:8080/page.html?page=2#pagetop

1 2	location.href //結果：http://www.example.com:8080/page.html?page=2#pagetop

ドメイン名を取得する

location.host
//結果：www.example.com:8080

1 2	location.host //結果：www.example.com:8080

ポートを取得する

location.port
//結果：8080

1 2	location.port //結果：8080

プロトコルを取得する

location.protocol
//結果：http

1 2	location.protocol //結果：http

パスを取得する

location.pathname
//結果：/page.html

1 2	location.pathname //結果：/page.html

パラメータを取得する

location.search
//結果：?page=2

1 2	location.search //結果：?page=2

#〜を取得する

location.hash
//結果：#pagetop

1 2	location.hash //結果：#pagetop

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

$(location).attr('search');

1	$(location).attr('search');

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

if("#close" == location.hash) {
  $("#target").hide();
}

if("#close" == location.hash) {

$("#target").hide();

}

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

jQuery