jQuery and Browser Compatibility

Yikes! I've been a developer for many years and have always tried to emphasize code that is compatible with as many systems as possible.

Recent, I purchased the book jQuery in Action and started reading it. I am very disturbed by the fact that the included source code doesn't appear to work c开发者_Python百科orrectly on either of the browsers on my current computer.

Specifically, I downloaded the book's source code and selected the "jQuery Selectors Lab" for Chapter 2. But it doesn't look how it does in the book.

On Google Chrome, both the DOM Sample and DOM Sample Code panes are completely empty. On IE7, things appear much closer to how they appear in the book. But the source code in the DOM Sample Code pane is all on one line (which extends to the right, off the page). Note that the screenshots in the book are of a browser running on the Mac.

I'm curious what sort of cross-browser compatibility users more experienced with jQuery are finding, and what this revelation means for developers who like to be as compatible as possible and are planning to use jQuery.

jQuery is actively supported in all these browsers:

• Firefox 2.0+
• Internet Explorer 6+
• Safari 3+
• Opera 10.6+
• Chrome 8+

There are known problems with outdated browsers as per the list below:

• Mozilla Firefox 1.0.x
• Internet Explorer 1.0-5.x
• Safari 1.0-2.0.1
• Opera 1.0-9.x
• Konqueror

jQuery generally works with Konqueror and Firefox 1.0.x, but there may be some unexpected bugs since we do not test them as regularly.

If you are using any of the outdated browsers, then this could be your problem, otherwise, you should post your code here on stackoverflow to get help. It may not be the browser causing the problem, but it could be the way code is written or executed.

I think part of your problem is that you're accessing something from the file system that is meant to be loaded from a web server. For example, I see this error in Chome on your chapter 2 example:

XMLHttpRequest cannot load file://...chapter2/dom.sample.html.
Origin null is not allowed by Access-Control-Allow-Origin.

Things seem to be behaving reasonably well in Chrome other than that sort of thing.

I usually target IE[789], Chrome, Firefox, Safari, and Opera and I haven't seen many browser issues that are specific to jQuery or jQuery-UI. The problems are mostly CSS issues and certain JavaScript problems (in IE for both) that aren't jQuery problems.

Version 3 of jQuery is maintained for the following desktop browsers :

• Chrome: (Current - 1) and Current
• Edge: (Current - 1) and Current
• Firefox: (Current - 1) and Current
• Internet Explorer: 9+
• Safari: (Current - 1) and Current
• Opera: Current

It is also maintained for the following mobile browsers :

• Stock browser on Android 4.0+
• Safari on iOS 7+

Source : https://jquery.com/browser-support/

I wouldn't be overly worried about the cross-browser compatibility of jQuery so much as I would the quality of the code in the case of this book. I haven't personally looked at this book so I can't make a personal judgement; however, I am the lead developer for a web application that currently has around 15,000 users and we have been confidently using jQuery for a couple of years now with no issues. We have to support customers on a number of platforms using all of the major browsers that are on the market. When jQuery code is written properly and tested for all environments, it can absolutely work properly regardless of what browser you are using.

Code samples appear to use outdated jQuery v1.4. Download latest version and check known issues for more details about cross-browser compatibility.

I don't know why but if I copy whole example directory to the tomcat/webapps, it works fine. But if I open page (lab.selectors.html) directly from the browser, it doesn't display dom sample section. The error message from the firefox console was like this:

[16:56:36.335] junk after document element @ file:///C:/JavaScript/jqia2/chapter2/dom.sample.html:2