hide - Understanding jQuery

Recommendations

Info

There is a solution to this problem. And the solution is, again, to explicitly specify body as part of the selector. Let’s take a look at the proper way of using the :not selector: A single space character. $(“body :not(p)”).hide(); Notice I added body followed by a space. Now, this will produce a correct result. But why? Referring to our earlier discussion about selectors in the book we learned that only the last element in the hierarchy specified using the space character will be selected. But we can’t simply add a space character without a preceding HTML element. So we explicitly specify the body tag too (by default jQuery sees lack of any preceding element as if the asterisk was used). In this example the body tag itself is not selected, only the :not(p) elements. This means that when I added the body tag and the space that followed, it is the space that is explicitly telling the selector: do not select body … only select what is after the space character. This small but important modification to the selector solved the problem. The selector will now do exactly what is being asked. When working with :not selector it is important to make explicit definitions like this and specify exactly what you are looking to select, rather than making a quick guess and hope it works. Using the :not Selector with the Asterisk We know that the star selector, also known as the asterisk selector (*) is used to select everything in the DOM structure. This means the doctype, html, head, title, body, etc. In other words, everything, even tags outside the body tag. They are all part of the DOM. $(“* :not(p)”).hide(); Only last element in the hierarchy will be selected. Here we will face exactly the same problem as we did in the previous example where we used the body tag. However, this time we are selecting the entire DOM with the asterisk. Again, the selector in the example above will not work as intended. We are indeed selecting everything and then hiding it but only then asking not to hide paragraphs. In the previous example our solution was to simply explicitly state that we want to hide everything except the paragraphis within the body tag. That solved the problem and made the selector behave correctly. But the asterisk selector is different because it is the default selector. 105
he asterisk selector (*) is the default behavior of any CSS selector whether it is specified or not. In other words, an identical solution could look something like this: $(“* body :not(p)”).hide(); Again, being explicit in telling jQuery exactly what we want to select fixed the problem. You can see the true hierarchy forming. First the asterisk, then body, then everything else. So, even though only :not(p) is the true defining point of what is being selected, you can see how using the understanding of the DOM hierarchy itself also plays a big role in selecting elements. If you find that your selector isn’t working for some reason, check its hierarchy integrity. The best bet is to always be as specific as possible. Looks like we’ve come around a full circle. We started this lesson with saying that the selectors $(“* :not(p)”) and $(“:not(p)”) do not produce a result that at first they seem they should. We then learned that in order to solve the problem we should explicitly indicate the context whether it was the asterisk selector, the body tag, or both. It should be easy to see now that $(“* :not(p)”) and $(“:not(p)”) are one and the same thing exactly. There is absolutely no difference between the two selectors and the second one assumes the asterisk by default anyway. A Quick Note About Explicit Default CSS Definitions While doing research about the inner workings of CSS selectors in the context of jQuery I noticed something rather interesting. Even a selector such as $(“* :not(p)”).hide(); that we just discussed above would not work quite the same under certain conditions. What are these conditions? First we must understand that the asterisk is not the same as body. The asterisk assumes absolutely everything. Even the tag. And that’s the key to understanding why some CSS selector may seem like they do not work in some instances. Remember that the tag itself can contain CSS styles. If it does, it will certainly affect the tag as well. To fix this problem we should stick to one simple rule. If you ever wish to use the asterisk selector, you must always specify the default CSS style for everything using the asterisk command within the default style.css file. As in: * { background: white; } Doing this will reset the global style for every single tag on the page. If you don’t do this you will find that the asterisk selector may not behave as intended. So the two core principles working with * and body selectors are to always provide a default CSS style and be explicit with your CSS selectors. 106
Page 1 and 2:
“ Second Revision. July 2012 Unde
Page 3 and 4:
Prototype, JavaScript Objects and J
Page 5 and 6:
Thought transcends matter. When we
Page 7 and 8:
Preface The purpose of this book is
Page 9 and 10:
A Lesson in Creativity The web deve
Page 11 and 12:
I love jQuery because it allows me
Page 13 and 14:
Improving Page Load Performance The
Page 15 and 16:
Determining the Placement of Intern
Page 17 and 18:
JavaScript 1. The only language peo
Page 19 and 20:
What is JavaScript? Web designers u
Page 21 and 22:
As you can see, variables can be as
Page 23 and 24:
The example above will first execut
Page 25 and 26:
Only variables and events should be
Page 27 and 28:
Notice that variables a and b are c
Page 29 and 30:
What Exactly is a JavaScript Variab
Page 31 and 32:
A variable allocates enough data st
Page 33 and 34:
Do you want to really understand pr
Page 35 and 36:
What is a Variable? Variables can b
Page 37 and 38:
In order to understand bitwise logi
Page 39 and 40:
At first this might seem confusing.
Page 41 and 42:
Let’s display the variable “a
Page 43 and 44:
What’s important is the return va
Page 45 and 46:
Inserting Form Values into MySQL Da
Page 47 and 48:
I like code that you can “read”
Page 49 and 50:
An object is created from a class.
Page 51 and 52:
Dynamic Prototype-based Objects in
Page 53 and 54:
Without knowing anything at all abo
Page 55 and 56:
More About JSON JSON is a data inte
Page 57 and 58:
In some programming languages the t
Page 59 and 60: JavaScript from scratch. If you are
Page 61 and 62: property access operator - the . (d
Page 63 and 64: Why does jQuery do exactly the same
Page 65 and 66: Learning jQuery The greatest thing
Page 67 and 68: If this sounds like you, then you w
Page 69 and 70: Web App Initialization To initializ
Page 71 and 72: In JavaScript, we can define variab
Page 73 and 74: As mentioned above, to an experienc
Page 75 and 76: Including jQuery In Your Source Cod
Page 77 and 78: Including jQuery as an External CDN
Page 79 and 80: Including jQuery UI In the Starting
Page 81 and 82: What Kind of Elements Can You Selec
Page 83: To traverse the DOM and make sure t
Page 86 and 87: Here is a basic inline CSS example
Page 88 and 89: Because the DIV element has ID of
Page 90 and 91: After selecting all of these input
Page 92 and 93: Figure 1 Mentality of a beginner jQ
Page 94 and 95: Whose Children Are These? If we are
Page 96 and 97: Next, let’s explore the possibili
Page 98 and 99: jQuery Events Because jQuery is so
Page 100 and 101: Of course, the effects of binding a
Page 102 and 103: Using toggle() Events Toggling betw
Page 104 and 105: Speed Up Your jQuery Code jQuery is
Page 106 and 107: Let’s now look at the jQuery way
Page 108 and 109: Practical jQuery Lessons Instead of
Page 112 and 113: jQuery provides a secondary way of
Page 114 and 115: Lesson 3: Callback Functions All jQ
Page 116 and 117: For example, the following statemen
Page 118 and 119: As you may know an object can conta
Page 120 and 121: Notice that when we do it this way,
Page 122 and 123: Alternatively, we can create the pa
Page 124 and 125: if (“light”.match(/darkness/) =
Page 126 and 127: jQuery and Regular Expressions In p
Page 128 and 129: This is probably as simple as it ge
Page 130 and 131: The following example will demonstr
Page 132 and 133: Making Good CSS Buttons This tutori
Page 134 and 135: Sometimes it makes sense to make th
Page 136 and 137: 1. Specify javascript: return false
Page 138 and 139: Our goal is to match the button wit
Page 140 and 141: So far, we have briefly discussed t
Page 142: Note from the Author Looks like you
show all

hide - Understanding jQuery

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?