The method $(this).hide() runs inside the click method and it hides the currently clicked element. We are calling $(this).hide() inside this $("h2").click(function(), the $("h2").click(function() method runs when we click an h2 element because we have passed h2 in the jQuery selector $(“h2”). In the following example, we are hiding the selected h2 element. JQuery hide() method hides the selected html element. You can show and hide html elements using show() and hide() methods respectively. Enabling/disabling of stylesheets would only be necessary in the most extreme cases, but if things are hiding to slowly for you, you might want to give it a try.In this guide, you will learn show and hide effects in jQuery. hide() might become too slow in IE, and you might need to bump up to. When you start having to manipulate large jQuery collections. css('display', 'none')Īlso note that for the majority of use cases, all of these methods are plenty fast to use. To recap, here is a list of methods to change the display of elements in order from fastest to slowest: This method also requires the most work on your part, because you have to define the class and give the class to all of the elements on the page you want to show/hide at the same time, but if you are dealing with extremely large sets, this might just be worth it. css(‘display’, ‘’) to remove the inline style. To make this method work again, simply do a. css(), this method will stop working on those elements because they set the css style inline, which has higher precedence than other css. Of course, there is still the time the browser takes to reflow and repaint the page, but you've virtually eliminated all the javascript processing time. The only javascript you are doing is changing an attribute. The total javascript processing time was 0-1ms across all browsers. $('#special_hide').attr('disabled', 'false') Īnd they are now all hidden. $('#special_hide').attr('disabled, 'true') Īnd BAM, you just displayed all of your elements with a class of “special_hide”. It's far too slow to create the stylesheet programmatically, but if it's already there then it is trivial to give it an ID and use its disabled attribute. So finally, forgoing an attempt to do this in a programmatic way, I ended up just writing a style tag with a class in the head of the document. Then I tried creating the stylesheet node and class using JavaScript, but there were different APIs and it ended up being too slow to justify. First, I tried to see if I could append a style tag with the css class as a string using jQuery, but got inconsistent results across browsers. There are, of course, cross browser issues when manipulating stylesheets, since jQuery doesn't abstract them away for you. Let me just tell you that way is fraught with peril. But, if I could manipulate the stylesheet, I could avoid the entire overhead. IE 7.0 - 0ms / 0ms // The usual caveat about inaccuracy of IE clocks applies.įor fun, I thought, "What if instead of manipulating every DOM node and changing things, we just futz with the stylesheet?" Could there be speed improvements there? I mean, the methods benchmarked above are plenty fast for everyday use, but what if I had 10,000 nodes on a page I wanted to show and hide? It would be slow just selecting them all. That is the main slowness you can avoid since you know you won't be setting the display inline. As a library, jQuery can't assume that the display element wasn't set inline, so it has to manually keep track of it. css(), and it will revert to whatever value it has in the css or by default. What is true for 1.4.2 is not necessarily true for other versions of the library. I used jQuery 1.4.2 for the testing, but keep in mind that the algorithms behind the method calls can change dramatically from version to version. The HTML I tested against was a page of 100 div tags with a class and some content, I cached the selector $('div') to use with each method to exclude the time needed to find all the div elements on the page from the test. Not having occasion to ask him why, I benchmarked the various ways to hide DOM elements and looked into the jQuery source to find out what is going on. show() were slower than changing the css directly. The "High Performance JQuery" presentation especially caught my attention when the speaker, Robert Duffy, said that. Any conference where you get to talk to some of the most influential people in jQuery is a win in my book. In addition to some incredible talks, I had the opportunity to speak with Rey Bango, Johnathon Sharp, and, of course, John Resig. I just got back from the jQuery conference in San Francisco.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |