hide - Understanding jQuery

Recommendations

Info

After selecting all of these input boxes, we attach the change event to it, and assign it a function. Whatever goes inside the { ... } brackets of that function will execute every time the input field loses focus (when you click out of it, in other words onblur). Note that the nameless function closure inside the change(...) event will actually be assigned to each individual cell in the third column of this table, one by one (the function is assigned for each table cell in the 3rd column). This is what the table td:nth-child(3) input selector does. It goes into each cell of the third column one by one, using each cell as the starting point. We use the jQuery’s parent() function. The parent of the selected input box is the TD cell in which it is located. We now use the prev() function on parent, to go back one TD cell. This is because the previous child of the TD in which the input box is in, is the “status” TD. That’s the one we need to update. This means we are now in the “status” TD cell. Let’s modify the status TD cell with a new message, because the input has been modified for that row’s input box. We use html(‘ch’) function. The default HTML in the status cell is “ok”, and now we change it to “ch” (for: it has been changed!), or also known as “dirty” in the software developer circles. Of course you can get creative and do whatever you want, change the cell’s background color by using css(‘background’,’ red’), or even insert a custom image icon indicating a “changed” state. The point is that by using DOM’s element associations, we were able to traverse the DOM tree backwards and into the element we needed to update. And all without using spiderweb code. I believe that this example illustrated how much more simple your Javascript development can be using jQuery. Try to stick to similar ideas presented here. Traverse fields using their children and parents, instead of directly accessing them by ID. This can be extremely powerful technique and keeps your code clean and easy to edit. 85
More About CSS Selectors Selecting things is at the very core of jQuery programming. Even though the previous chapter has already covered jQuery CSS Selectors there is much more to selecting HTML elements. Selecting Things: A Bird’s Eye View Selecting things doesn’t have to be complicated. However, there are many cases when the HTML is just way complicated. In many instances, people rush to assign many IDs or CLASSes to everything and go from there. The ID and CLASS attributes are not the best tools in this situation. In order to swiftly navigate the DOM tree structure, jQuery presents us with very neat tools. This tutorial will outline some of the most effective selectors to use in many common situations. At first, I started this tutorial with the focus only on input elements such as input, textarea, checkbox, radio button and select/option tags. But eventually as I continued updating it, it evolved into something much more. I still cover input elements at the bottom of his page, but I’d like to also talk about many other ways in which you should be selecting your elements. The best idea is to go through them one by one, and follow these clear diagrams below, that I think really make a good point of what each type of a selector will do. Once you memorize these ways, you will never want to go back to your old ID and CLASS attributes. One of the reasons for this is that each element already has a name - it’s tag name. jQuery allows us to refer to these tags by their name, and in some cases we can refer to them by not even using the name or ID of an element we want to select. How is this possible? Let’s compare the most common mentality of a jQuery enthusiast to one of a more experienced programmer. The main difference here is that when just starting out people tend to assign ID and CLASS attributes to everything. Is this the right way of doing things? Figure 1. explains mentality of the beginner jQuery programmer because everything is assigned an ID (and in many other cases a class, though, this is not shown on the diagram). Why is this a popular mentality of someone who just started out using jQuery? Well, it’s probably because they only learned how to select elements by ID or a Class name and refused to learn other types of selections one can make using advanced selectors and DOM traversal techniques that jQuery has in its arsenal. 86
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 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 110 and 111: There is a solution to this problem
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?