javascript - What is the "mobile-pagecontainer" selector

Question

jQuery Mobile has various events and methods. The pagecontainer events and methods are used to handle most of the page events from v1.4. I do not understand the use of the :mobile-pagecontainer selector.

The API documentation only uses $('.selector') which is straightforward and simple to understand though, I do not know which object it is referring to. Am I supposed to use it on a $('div[data-role="page"]') or on $('body'). And what does the other selector, :mobile-pagecontainer, signify?

API: jQuery 1.4.0 API

Edit: Also, I found many examples on stackoverflow and other websites using $(document) what is the relation to all these?

Edit 2: I created a tiny fiddle which exhibits the pagecontainerbeforeshow event using all the 3 selectors $('body'), $(':mobile-pagecontainer') and $(document)Fiddle - PageContainer Events. My heart felt gratitude and thanks to @Omar

Answer 1

$(":mobile-pagecontainer") is a selector, it refers to the parent element of jQM pages, both internal pages and external ones.

By default, :mobile-pagecontainer is body. It also can be referred to as $.mobile.pageContainer (mind capital "C" in pageContainer).

.pagecontainer() is a function that is used to change and load pages, as well as retrieve active page.

In short, $(":mobile-pagecontainer") = $.mobile.pageContainer = $("body") (default).

The value of :mobile-pagecontainer can be overridden on mobileinit, in case you want to wrap pages in a different element than body.

$(document).on("mobileinit", function () {
  $.mobile.pageContainer = $("#foo");
});

• To change pages (assuming foo is the container):

  $("#foo").pagecontainer("change", "#pageID or URL");
  

• To load an external page:

  $("#foo").pagecontainer("load", "URL");
  

• To retrieve active page:

  $("#foo").pagecontainer("getActivePage");