Advanced j. Query, for those that dare. Authored by James Padolsey. Reviewed by . Any of the above. For any reuse or distribution, you must make clear to others. The best way to do this is with a. Introduction. Blah blah blah, introduction.. This short book has been written to demonstrate, discuss and divulge the stengths of j. Query and its companions, the DOM and of course, Java. Script itself. Be wary, for this isn't your normal book - - it isn't so much a stream of pretty prose as it is a meandering torrent of examples, explanations, abstract discussion and whimsical tangents. My name is James Padolsey, and I hope this book can teach you some valuable things, and at the very least, plant seeds of curiousity that will later drive you to discover new things. You should note that this publication assumes j. Query version 1. 4 (1. However, much of the material will still be relevant for other versions. Contents. What you already know. You should already be an intermediate level j. Super-simple templating function that is fast, caches quickly, and is easy to use. The number of web applications being created and used has grown rapidly since the new millenium. And importantly, so has the sheer complexity of them -- specially on the front end. No more static pages, no sir! You have a ton of sections each interacting with each other and the server and yes, it's. Hello All - This is a follow-up to the previous templating discussion (the thread was getting a bit unwieldy and I wanted to address some of the concerns. All Forums Recent Posts Log In. JQuery at dusk Authored by James Padolsey Reviewed by . SOFIA is the Salmon Open Framework for Internet Applications. Conceptually, SOFIA is similar to other J2EE MVC open source frameworks, like Apache Struts. But SOFIA sets a new standard for Java development by delivering so much more in a framework. Query developer. Intermediate j. Query developer: A developer whose comfortable with j. Query and knows its API quite well. This person has authored one or two simple j. Query plugins and uses j. Query quite often to create and enhance rich user experiences. If you don't understand something along the way, and my explanations aren't sufficiently clear, then I'm sure you'll find relevant documentation elsewhere. May I suggest: api. Java. Script issues you should seak refuge at the Mozilla Developer Center. Before continuing, I suggest you go and get a cup of coffee, tea, or an apple! And maybe some popcorn, oh and a warm blanket and cup of hot chocolate.. I'm tired.. Goodnight! Okay, what does j. Query() really do? Everything to do with j. Query resides under an object that you can access via the . This object happens to be a function, and in Java. Script, functions are (specialised) objects. Query is, of course, a function, but it's good to understand that it is also an object. Confused? The j. Query function is sometimes referred to as the j. Query . So, really I shouldn't be calling it a . Maybe I should call it a . It has properties, and it has methods that are inherited from j. Query's prototype (j. Query. fn. init. prototype, or j. Query. fn for short). We could construct a j. Query- like instance ourselves. Fakej. QObject = . Their most common usage is to mark the beginning and end of a block statement - - that is, a collection of statements - - also known as a compound statement. You see this all the time, for example, if(foo). Another common usage of the curly braces is to create an object literal - - this is what we're doing above, within 'my. Fakej. QObject' - - an object literal is denoted by an opening curly brace, some key- value pairs and then a closing curly brace. We've only given it one method, but it is usable. Fakej. QObject. css('color', 'red'). You'll notice that this object has a length property and some numerical properties - - it's the same deal with j. Query instances. Given these qualities we consider it an . Let's try it: console. Query(document) ); As discussed, there are some regular properties and a bunch of inherited methods. Just to re- affirm: When you call j. Query() you're creating a unique instance of j. Query that can be referenced and accessed like any other object in Java. Script. var foo = j. Query('#foo'). foo. Class('bar'); alert(foo. Both terms are useful depending on the context. Be aware that they are technically the same thing (i. Some accessor methods return a j. Query instance too, but it's not the same one - - it's a new one. Calling . parent() gives you a new j. Query instance; it does not modify the current instance. A mutator method (a. An accessor method (a. Any method that gets something for you, whether it be an attribute, a CSS property value, a data value, a specific state, or even a bunch of DOM nodes is an accessor method. Here are some accessor methods (I've added some typical arguments too): parent()has. Class('foo')attr('id')data('foo')is('div. All the methods that change something on the instance, whether it be an element's html(), a new event handler, or removing a class from a bunch of elements is a mutator method. Some of j. Query's mutator methods: add. Class('foo')remove. Class('foo')attr('id', 'foo')data('foo', 1. For example, with one argument, the attr method is an accessor, and with two it's a mutator. There's the DOM, and then there's j. Query. A j. Query instance allows you to call any of j. Query's methods on a collection of elements (as discussed, each element in a j. Query instance is indexed numerically, 0, 1, 2 etc.). Query's methods do their deeds by utilising the native DOM API in browsers. When you have a single DOM node, you can use the native DOM API, and call DOM methods and set DOM properties, but you cannot use j. Query methods on regular DOM elements. As mentioned, j. Query . The following returns a j. Query instance. j. Query('body'). And this returns a DOM element. Query('body'). Since the j. Query instance walks and talks like an array, we can call any array method with the j. Query instance set as the context. You can call a function with any specified context. The context you decide on can be accessed via the this keyword within the function. Here's a quick example. Java. Script arrays have a sort method, which can be used in the following ways. Regular numerical sort. To make the elements appear in their sorted order we simply need to re- insert them into the DOM (that's what the append. To is about). The details are not important. The point is, j. Query instances are array- like objects, and this quality is very useful. It allows you to set the html that resides within an element. Setting an element's inner. HTML will initiate the browser's HTML parser, which will form a DOM structure. Filling an element's inner. HTML is quick - - very quick! And it's even quicker if that element is outside of the document. When you pass a string of HTML to j. Query's html() method it will simply set each element's inner. HTML property to that string. I hate to admit it, because it's quite ugly, but inner. HTML is the best approach if performance is important to you (it should be). Shouldn't you be progressively enhancing what's already there? If you're not sure what I mean by . It's a very important concept in the world of Java. Script development. Some would have you believe that it's not really that important - - don't listen to them. The second point is often overlooked. Many people tend to take the following approach. No expensive (and pointless) DOM selection has been made. And, even though #foo is a speedy selector, it still isn't good practice to go selecting stuff that you should have references to already. Just to be clear, most of the time you shouldn't need to use a selector to retreieve items that you've added to the DOM. The fact that you added them means that you should have references already. Templates. I mentioned the usage of templates. This is becoming increasingly popular. It doesn't have to be complicated - - if you just want to store a static piece of HTML, you can do so by simply hiding it in an element. Firstly, the template itself isn't really content, so it shouldn't be embedded in the HTML. The template might be used to contain real content added via Java. Script but that won't be seen by less- capable browsers, people using screen- readers, and search engines. We want to make our templates unobtrusive, so that individuals with less- capable internet- surfing software (and those that are surfing without JS enabled) don't waste bandwidth by downloading templates they're not going to be able to use. Also, if you embed any < img/> elements (or other elements with src attributes) to this hidden div, it will generate a real server request - - even if you leave the src blank, some browsers make a request! Also, that fact that your template is in the document means that the browser has to take time to parse it, which is a huge waste considering that you're not even going to use the produced nodes - - it's likely that you'll just retreive the template as HTML and then re- inject it. There are some other options. You could, for example, store the template in a separate file and request it via XHR (a. Ajax) when required. It'll be left alone, and you can do what you want with it. Still though, this approach is quite obtrusive. Templating is quite simple really. All you're doing is taking a string of HTML and replacing certain tokens with real content, such as in our example earlier. Check out the following possibilities: DOM Element creation - quick or elegant? We've established that inner. HTML is lightning fast, but unless you use templates, it's ugly. HTML itself is not ugly, in fact it's a pretty decent markup language (who knew?); but HTML in Java. Script really sucks and it can be hard to maintain. Have a look. var html = '< li> Foo\'s < a href=. Fun! Using a template would be a good idea in this situation. For smaller element- creation endeavors, j. Query gives you a succinct and elegant syntax. Create a < div> element with an id of . The following property names are mapped over to their respective j. Query methods in the same fashion: blurchangeclickcssdatadblclickerrorfocusfocusinfocusoutheighthtmlkeydownkeypresskeyuploadmousedownmousentermouseleavemousemovemouseoutmouseovermouseupoffsetresizescrollselectsubmittextunloadvalwidth. You can access (and change) the methods that are mapped to via j. Query. attr. Fn. Among other things, this means that you can safely bind event handlers during element creation, and they will be added using j. Query's robust event mechanism. Any properties that you specify that are not in the above list will be added as regular attributes (e. There are a few cases where I would absolutely recommend avoidingj. Query('< elem> < /elem> ') type element creation, and that's when you need to create a bunch of similar elements from a single source, such as an array. DON'T DO THIS */var list.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
December 2016
Categories |