11.07.2015 Views

PHP MySQL - Stilson.net

PHP MySQL - Stilson.net

PHP MySQL - Stilson.net

SHOW MORE
SHOW LESS
  • No tags were found...

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

www.it-ebooks.infoCHAPTER 22 • CREATING AJAX-ENHANCED FEATURES WITH JQUERY AND <strong>PHP</strong>$('li').each(function() {alert(this.html());});Modifying Page ElementsjQuery can modify page elements just as easily as it can retrieve them. For instance, to change the booktitle, just pass a value to the retrieved element’s html() method:$("#title").html("The Awesomest Book Title Ever");You’re not limited to changing an element’s content. For instance, let’s create a mouseover eventhandler which will add a class named highlight to each list item as the user mouses over:$("li").mouseover(function(event){this.addClass("highlight");});With this event handler in place, every time the user mouses over a list item, the list item willpresumably be highlighted in some way thanks to some stylistic changes made a corresponding CSSclass named .highlight. Of course, you’ll probably want to remove the highlighting once the usermouses off the element, and so you’ll also need to create a second event handler that uses theremoveClass() method to disassociate the highlight class from the li element.As a final example, suppose you wanted to display a previously hidden page element when the userclicks on a specified element, such as the author’s name. Modify the HTML snippet so that the authorname looks like this:W. Jason GilmoreThe ID #author_name might be defined within the stylesheet like this, providing the user with a cluethat while the name is not necessarily a hyperlink, clicking on it is likely to set some task into motion:#author_name {text-decoration: dotted;}Next, add the following snippet below the list items:About the AuthorJason is founder of WJGilmore.com. His interests include solar cooking, ghost chili peppers,and losing at chess.Finally, add the following event handler, which will toggle the #author_bio DIV between a visibleand hidden state each time the user clicks the author name:443

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!