Copyright © tutorialspoint.com

jQuery - Utilities

previous next


Advertisements

jQuery provides a set of miscellaneous methods which can be used for various reasons explained in this tutorial:

There are two important methods provided by latest version of jQuery to detect the browser and its associated features.

Getting Browser Version:

The jQuery.browser method contains flags for the useragent, read from navigator.userAgent.

Following example would show how to get browser name and its version:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

    jQuery.each(jQuery.browser, function(i, val) {
      $("<div>" + i + " : <span>" + val + "</span>")
                .appendTo(document.body);
    });

   });

   </script>
   <style>
   p { color:green; font-weight:bolder; margin:3px 0 0 10px; }
   div { color:blue; margin-left:20px; font-size:14px; }
   span { color:red; }
  </style>
</head>
<body>

  <p>Browser info:</p>

</body>
</html>

For my PC it would display following result:

Browser info:

version : 7.0
safari : false
opera : false
msie : true
mozilla : false

To understand it in better way you can Try it yourself.

Getting Browser Properties:

The jQuery.support method contains a collection of properties that represent the presence of different browser features or bugs.

You can test the following properties using jQuery.support :

PropertyDescription
boxModelIs equal to true if the page and browser are rendering according to the W3C CSS Box Model. This is currently false in IE 6 and 7 when they are in Quirks Mode.
cssFloatIs equal to true if style.cssFloat is used to access the current CSS float value. This is currently false in IE, it uses styleFloat instead
hrefNormalizedIs equal to true if the browser leaves intact the results from getAttribute. This is currently false in IE, the URLs are normalized.
htmlSerializeIs equal to true if the browser properly serializes link elements when innerHTML is used. This is currently false in IE.
leadingWhitespaceIs equal to true if the browser preserves leading whitespace when innerHTML is used. This is currently false in IE 6-8.
noCloneEventIs equal to true if the browser does not clone event handlers when elements are cloned. This is currently false in IE.
objectAllIs equal to true if doing getElementsByTagName("*") on an object element returns all descendant elements. This is currently false in IE 7 and IE 8.
opacityIs equal to true if a browser can properly interpret the opacity style property. This is currently false in IE, it uses alpha filters instead.
scriptEvalIs equal to true if using appendChild/createTextNode to inject inline scripts executes them. This is currently false in IE, it uses .text to insert executable scripts.
styleIs equal to true if getAttribute("style") is able to return the inline style specified by an element. This is currently false in IE - it uses cssText instead.
tbodyIs equal to true if the browser allows table elements without tbody elements. This is currently false in IE, which automatically inserts tbody if it is not present in a string assigned to innerHTML.

Following example would show how to get box model property of a document:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

    $("p").html("This document uses the W3C box model: <span>" +
                jQuery.support.boxModel + "</span>");

   });

   </script>
   <style>
   p { color:blue; margin:20px; }
   span { color:red; }
  </style>
</head>
<body>

  <p></p>

</body>
</html>

For my PC it would display following result:

This frame uses the W3C box model: true

To understand it in better way you can Try it yourself.


previous next

Copyright © tutorialspoint.com