1stwebdesigner |
| jQuery for Complete Beginners: Part 2 Posted: 26 Mar 2010 02:00 PM PDT
Essentially, if we have already selected an element, how can be traverse the page to find its parent element? We could just use another selector, but there are much better ways to do it. For example, take this HTML code: <div> <h2>A header with <a href="http://www.1stwebdesigner.com">a link</a> inside. <p>A paragraph in the div</p> </div> And then using jQuery we had already selected the h2 element: $('h2'). How would we then select the div? We might just do a different selector: $('div'). While this works fine in this case, imagine a much more complex site. Having rogue and vague selectors like that are not going to help. It would also mean giving other elements unnecessary ‘hooks’, such as an ID, just for the purpose of our JavaScript. In reality, jQuery makes it much easier: $('h2').parent(); //this would select the div. This is the cusp of this lesson – to learn how we can be ’sneaky’ with our code to allow us to do less actual selecting and learn to work with what we already have. Say now, instead of selecting the h2’s parent, we want to find its children, which in our case is the link. We could go back to CSS: $('h2 a'); But in reality, for reasons not worth divulging into at this moment, that takes a lot of work on jQuery’s part. What if, instead, jQuery provided a method to do the same thing? Well, it does! ('h2').children(); //selects the link element But what if the h2 element had more than one child element? jQuery actually allows us to pass in a selector to the children() function to be more specific: $('h2').children('a'); //selects all children of the h2 that are anchor elements. In our next example, let’s have a quick unordered list: <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> Of course to select all the list items is as simple as: $('li'); Or you could use our new function: $('ul').children(); Generally which one you use depends on the situation on your page. For example, if I had two lists, one ordered (
) and one unordered ( If we want to interact with a specific item in that list, we can use another jQuery function, eq(): $('li').eq(2); //selects list item 3 Please note that it selects the 3rd item. This is because in most languages, the index is zero based. This means it starts from 0. So in our list, we have 5 items, the first of which you could call the ‘0th item’. If you struggle to remember this, just remember that you need to subtract one from the number you would usually use. Don’t worry, a few hours of coding and it will sink in. Before we go any further it’s important for you to realise that one of the key principles of jQuery is its ‘chainability’. This means that functions can be run one after the other, or chained: $('ul').children('li').eq(3).animate({...}); The above code takes the following steps: Whilst the children() function only finds the immediate descendants of the selected item, jQuery provides a way to delve deeper. Going back to our HTML code we used much earlier: <div> <h2>A header with <a href="http://www.1stwebdesigner.com">a link</a> inside.</h2> <p>A paragraph in the div</p> </div> If I had the following selector: $('div'); And now want to select the anchor element within the h2, you might think, correctly, to do this: $('div').children('h2').children('a); Generally, as a rule of thumb, when you use the same function twice in a row, there is a better way to do it. And of course, there is, using jQuery’s find() method. Using this, the above line of code becomes: $('div').find('a'); The find function does not stop after the first descendants of the div element. It keeps going. It finds the immediate children, then the children of those children, and so on. Basically, find() searches all elements within the selected element, no matter how many levels down they are. Next we have four basic functions to look at that allow us to select an element’s siblings. These are elements on the same level as the one currently selected. In our above HTML, the h2 & p elements would be siblings. Take a look at the following functions: $('h2').next(); //selects the next sibling (the paragraph) $('h2').nextAll(); //selects all the siblings after it. $('p').prev(); //selects the previous sibling (the h2) $('p').prevAll(); //selects the previous siblings As you can see all of them are pretty simple, and handy if you need to jump along to the next element. The final function we are going to look at is the siblings() function. Lets have a new block of HTML code to work with: <p>A paragraph</p> <h2>A heading</p> <img src="somepic.jpg" alt="A picture"> <h1>A bigger heading</h1> From the first paragraph, we could use nextAll() to select all its siblings (as it’s the very first sibling): $('p').nextAll(); But if we were at the h2 element, how could we select all its siblings? Easy: $('h2').siblings(); The siblings() function can also take a selector as an argument: $('h2').siblings('p') //selects just the siblings that are paragraphs Just before I end, as a quick side note, last lesson, we spoke about including your jQuery at the very bottom of the page, before the final </body> tag. However, you can include it in the header, or anywhere else in fact, if you add this line first: $(document).ready(function() {...}); What that does is makes sure the code you write runs after all the page content is loaded – otherwise you could be manipulating elements that have yet to load. ALl you do is wrap your jQuery in the above function: $(document).ready(function() { //all your jQuery code goes here like normal }); That only applies if you add your code anywhere except before the closing </body> tag. The End I hope you’ve enjoyed our brief foray into the world of jQuery selectors. In the next lesson we will get some cool stuff going and look at sliding elements in and out. We will also look at events and responding to, for example, an element being clicked. As always if you have any questions please feel free to leave a comment and I’ll answer them next time. |
| Excellent Shopping Cart Designs: Showcase and Best Practices Posted: 26 Mar 2010 03:08 AM PDT
 E-commerce week is sponsored by SSLmatic which sells SSL certificates for much cheaper prices (RapidSSL, Geotrust, Verisign) and offers great support. Check their site to get the cheap SSL certificates.Best Practices for Shopping Cart Optimization:
You can also get some ideas from just observing what other shopping sites are doing. Here are 35 shopping cart examples for some of the top retailers. 1. Cafepress
2. American Eagle
3. Famous Footwear
4. Gap
5. Nike Store
6. BlueNile
7. Zappos
8. Bestbuy
9. Crutchfield
10. Dell
11. Gamestop
12. Build-a-Bear
13. TigerDirect
14. Polo
15. Palm
16. NFL Shop.com
17. Petco
18. Petsmart
19. Omaha Steaks
20. Cooking.com
21. Moosejaw.com
22. Green Mountain Coffee
23. Zazzle
24. Bass Pro Shops
25. GNC
26. Williams-Sonoma
27. Fathead
28. Target
29. Sears
30. Crate and Barrel
31. Bose
32. Sony
33. Lowes
34. Barnes and Noble
35. Coach
E-commerce week is sponsored by SSLmatic which sells SSL certificates for much cheaper prices (RapidSSL, Geotrust, Verisign) and offers great support. Besides standard SSL certificates, wildcard and EV certificates are offered with discounts too. Check their site to get the cheap SSL certificates. |
Shopping cart optimization has always been a challenge for online retailers. To the end-user, it seems like a simple step to purchasing, however there are many factors that go into having a nicely designed shopping cart. If you are struggling to get users to convert during your checkout process, use some of these tips to help keep customers in the sales process.
| You are subscribed to email updates from Graphic and Web Design Blog To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
Comments (0)
Post a Comment