Most efficient way to use selectors in jQuery? - javascript

is it more efficient to use $('.active') or $('div.active') ? I have always avoided including "div" because it's extra text in the javascript file I don't want the user to have to download.

Older versions of IE will benefit from the inclusion of div because they don't support getElementsByClassName().
Because of that, every element on the page needs to be selected with:
document.getElementsByTagName('*');
...and manually tested to see if it has the active class.
If you include div, then it is able to narrow it down a bit, since it can do:
document.getElementsByTagName('div');
...then test only those elements.
When I say older versions, I mean IE6 and IE7 since IE8+ supports querySelectorAll.
EDIT:
Browser suppport:
getElementsByClassName: http://www.quirksmode.org/dom/w3c_core.html#t11
querySelectorAll: http://www.quirksmode.org/dom/w3c_core.html#t13

It depends. If you mean performance.
I prepared special test for everyone on JSPerf: jquery class selector test.
On my browser and computer (FF 3.6.13 and Core 2 Duo 1.6) div.active is a bit slower. But found it variable - it seems GC has something doing here.
And after few more tests it seems that div.active:
Speed is variable on FF, sometimes GC turns on 'div.active' test, but generally difference is very small.
Unnoticable difference on Chrome and Safari
Faster on IE9

I like to include the tag name if it helps self-document the code. If I can use
$("nav.primary")
instead of
// this is the primary nav
$(".primary")
I tend to do it.

I guess the best way to get some speed on large pages is to use find instead.
$( your-container ).find("div.active")
Since you always? know where you should look, you can create your own scope. So that the browser only need to search within that area of code.
By the way, you don't need to care about size of the css, EVER :)
Use css minifing tools to minimize the css when the site is in production mode. You can also set your web server to automatically gzip your css files before sending the to the user. And if you don't change your css filename on every pageload, the browser cache up to whole css file.

CSS selectors in jQuery used to be optimized similar to how you would do it for browsers, see: http://css-tricks.com/efficiently-rendering-css/
Specifying a generic tag anywhere, even with an ID or class would be dramatically slower than just specifying the ID or class alone. See:
http://www.no-margin-for-errors.com/demos/how-to-optimize-jquery-selectors/
The above uses jQuery 1.3. Since jQuery 1.4 and the introduction of the Sizzling selector engine, this is less important from what I understand. See:
http://hungred.com/useful-information/jquery-optimization-tips-and-tricks/
For myself, I decided in CSS to use whatever reads the easiest, and I am more specific there since that is only parsed once. In jQuery, however, I have been more careful since those selectors could run thousands of times over the life of a page.

Related

How to properly assign style.backgroundClip = "text"?

I am having trouble with one line of code. I have been searching the web for hours now and had to resort to stack overflow. When I run this code, it does nothing. Here is the code:
e.style.backgroundClip = "text";
When I researched this, I found that the "text" is not officially existing, however if I use this in the css with background-clip it works. If you have any idea why this is not working, please help. I am using a device running iOS 8 if that helps.
I AM USING A PROGRAM CALLED "EXPRESSO HTML"
Setting text as the value for background-clip property is not a recognised value in the specification:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip#Values
You could force the element to take the inline styling like so:
el.setAttribute("style", "-webkit-background-clip:text");
Notice it also takes the -webkit- vendor prefix. I think only Chrome supports it, I may be wrong.
Fiddle: http://jsfiddle.net/crwk2mac/
Since this variation of background-clip is not well supported, it would not be advisable to use it without decent and well tested fallbacks. This would be best done in CSS and could give you a real headache trying to implement entirely in javascript.

Remove duplicate </li> tag

I have a page, generated by a server that has bad LI elements, with two closing li tags
<li>Whatever</li></li>
All jQuery operations work fine in Firefox, but not in IE (7 and 8). I want to remove the duplicate </li> before I start my functions, how do I do it?
Not possible to fix via the client, unless you have a browser that defies logical sense. jQuery controls the DOM, not the raw HTML, and as a result, it can't edit the scrubbed broken tag. Just fix your server-side script.
If you really want a hacky, terrible, awful JS solution, you can AJAX request the page itself after that page is loaded, remove the AJAX call from the page (to avoid an infinite loop), remove the broken elements and then load that HTML in a new window. PLEASE never do that.
If possible you should of course fix the code that generates the page.
If that's not possible, you have a rough road ahead. You can't fix the markup, because it's parsed before you can do anything about it, so you have to fix whatever the browser generated from the broken markup.
Each browser will have a different way of handling the incorrect code, so you have to test every possible browser that you can get your hands on, including every current version of Internet Explorer (7, 8, 9, 10 and possibly 6). That is a pain in the ass, as you can only have one version of IE installed at a time. Luckily you can use the developer tools in newer versions to simulate older versions, however it's still not a 100% accurate emulation.
Some browsers may ignore the extra ending tags, and some amy add extra list elements. You have to write code that handles whatever each browser generated from the markup, and fix the elements.

Make Internet Explorer recognize "advanced" CSS selectors

Do any JavaScript libraries exist that somehow make Internet Explorer (no particular version) recognize advanced CSS selectors, such as input[type="text"]?
I hate adding extra classes to HTML objects just to accommodate IE.
I can't believe this wasn't suggested:
http://selectivizr.com/
selectivizr is a JavaScript utility
that emulates CSS3 pseudo-classes and
attribute selectors in Internet
Explorer 6-8. Simply include the
script in your pages and selectivizr
will do the rest.
Selectivizr works automatically so you
don't need any JavaScript knowledge to
use it — you won't even have to modify
your style sheets. Just start writing
CSS3 selectors and they will work in
IE.
You also need to include a standard JavaScript library of your choice, which you're likely already doing.
IE7.js (and IE8.js and IE9.js): http://code.google.com/p/ie7-js/ do their best to bring prior versions of IE up to support for what the script names (e.g. IE8.js tries to make IE6/7 act like IE8). This includes, among other things, many attributes of CSS2/3, though you'll have to check to see exactly what is supported in which version.
if you just want to use the selectors in JS, http://sizzlejs.com/ supports all CSS2/3 selectors and is used as the base for many JS libraries.
so you want a javascript that changes the browsers css support?
i'm pretty sure that's impossible.
your best bet is going to be putting whatever styles you want into a class, and in your document ready, do an .addClass

JS Test for :target support

I'm writing some code that involves CSS tabs, but IE doesn't support the :target css3 attribute. I have a work around by checking the hash value in an interval (ew), but I want to only have that code run when :target is not supported. I would do the regular IE check, except early versions of Firefox do not support it, nor does early Safari or Opera. Does anyone know how to test for :target support?
You can test for CSS support by adding a rule like #someid:target { visibility:hidden; color:#abcdef; } and then setting the target to #someid, reading if the color is #abcdef, and then reseting the hash.
This will, however, generate entries in the browser history: 1 for when you navigate to the id, and 1 for when you reset it to whatever it was before. It may also create a flicker in your tabs, so that may not be ideal - but I don't know what you can get away with.
Ideally, tabs should ideally read and write the hash for bookmarkability. But I don't think that :target is the ideal solution to creating tabs. I know it looks appealing to begin with (did to me). Given the poor support of the selector, how badly it scales with nested or multiple tabs, and how volatile it becomes with other markup (someone adds a #skip-to link on the page), it is less headache to implement with good old clicks.

If I have a CSS solution for all browsers except IE then what should be chosen for IE? CSS expression vs JavaScript vs jQuery with plugin?

If I have a CSS solution for all browsers except IE then what should be chosen for IE?
CSS expression in IE conditional comments
or
JavaScript in IE conditional comments
or
jQuery + plugin in IE conditional comments
Which will be less slow in rendering speed?
CSS expressions only work in Internet Explorer only, so you'll have to use Javascript in some form, for complex styles. Firefox, Safari and Chrome recognise a lot of CSS3 so if you're trying to do something like rounded corners or multiple backgrounds you could use that and look for an expression equivalent for IE.
However, I would recommend using jQuery. It's built to be cross-browser, and your code will likely end up simpler than using combinations of expressions/browser-specific styles.
jQuery plugin, if I'm already using jQuery.
I don't think I ever used CSS expression, not even as a hack.
As for a non-jQuery JavaScript library - I'd have to learn it from scratch, it might re-implement some of jQuery's features (so doesn't benefit from jQuery's engine, cross browser, etc), and it may not be written in the convenient style of jQuery, like chaining and liberal null checks.
You should avoid CSS expressions.
As for JavaScript vs. jQuery, that depends. If I can do it in just a few lines of JS without cross-browser issues, and I'm not already using jQuery for other stuff, there's no reason to load the entire jQuery library. Anything much more complicated than a few document.getElementById or alert calls, though, and I'm likely to want jQuery available, and at that point I might as well be using jQuery plugins
Do not use CSS expressions.
The reason:
CSS expressions can be evaluated many hundreds of times per second. Especially considering that IE is not the fastest horse in the race, don't do that to the poor old browser.
The average IE CSS expression is evaluated over one thousand times in the time the person views the page.
What's more, it is just Javascript - it doesn't work if JS is off, creates the same garbage global variables, et al. So the gain is nill, the loss is high.
Do not include JQuery just for this.
But if it (or Mootools etc.) is included, use them by all means.
Creating your function without JQ is simple and straightforward.
Just have it run on page load and resize (http://www.devarticles.com/c/a/JavaScript/OnReset-OnResize-and-Other-JavaScript-Events/1/) and that should do the trick.
Use IE conditional comments and you are even valid.
<!--[if IE]>
<script>
var dumbIE = function (){
//your stuff
}
onload=onresize=dumbIE;
</script>
<![endif]-->
Although I strongly disrecommend using CSS expressions (is there really no "normal" CSS hack for the particular problem? doublecheck it, twice, if necessary ask question here), I would go ahead with it. This removes the risk that the your application breaks in case that the user has JS disabled. JS is at its best when used unobtrisively and in your case it is clearly not the solution.
Updated to new focus: If you've got it looking good in everything but IE (an all too common situation...) then you need some method of writing code that only IE sees/executes. You can do this with browser sniffing in JavaScript, conditional comments in CSS and HTML. IE CSS bugs (anyone else have some good links?)
(Old answer:)
CSS expressions: Internet Explorer only shortcut.
JavaScript: Have to code every stinking thing yourself. Works "cross browser", but you still need to test in all the browsers to make sure it's doing what you want.
jQuery: cross browser, easy, simple. :D
Wait for Microsoft to improve IE.. haha.
Ignore IE -> Encourage your web-visitors/users yo download/use a different browser (IMHO, firefox is a really, really good choice, if not the best)
There are ways of making IE 'compatible' with modern, css-stylized websites (such as the well-known comment <!--[if lte IE 6]>...<[endif]--> and so on.. but anyway, it's up to you.

Categories

Resources