jQueryTutorial

Doctype htmlhtmlhead script srchttp

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: order of the children of Node n var kids = n.childNodes; // Get the list of children var numkids = kids.length; // Figure out how many children there are for(var i = numkids- 1; i >= 0; i- - ) { // Loop backward through the children var c = n.removeChild(kids[i]); // Remove a child n.appendChild(c); // Put it back at its new position } } http://www-scf.usc.edu/~csci571/Special/domexamples/ex6.html Copyright Ellis Horowitz 2013 19 Example 7: $.children(), $.remove(), $.append(); JavaScript w/ jQuery var onReady = function() { $(".reverse").on("click", function() { var kids = $("body").children(); for(var i = kids.length - 1; i >= 0; i- - ) { var c = $(kids[i]).remove(); $("body").append(c); } onReady(); }); } $(onReady); http://www-scf.usc.edu/~csci571/Special/domexamples/ex5.html Copyright Ellis Horowitz 2013 20 jQuery & AJAX •  jQuery has a series of funcJons which provide a common interface for AJAX, no maTer what browser you are using. •  Most of the upper level AJAX funcJons have a common layout: –  $.func(url[,params][,callback]), [ ] opJonal •  url: string represenJng server target •  params: names and values to send to server •  callback: funcJon executed on successful communicaJon. Copyright Ellis Horowitz 2013 21 jQuery AJAX load method •  The load() method loads data from a server and puts the returned data into the selected element. •  $(selector).load(URL,data,callback); •  The required URL parameter specifies the URL you wish to load. •  The opJonal data parameter specifies a set of querystring key/value pairs to send along with the request. •  The opJonal callback parameter is the name of a funcJon to be executed ater the load() method is completed. Copyright Ellis Horowitz 2013 22 AJAX Example 1 <!DOCTYPE html><html><head> <script src="http:// ajax.googleapis.com/ajax/libs/jquery/ 1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").load("demo_test.txt #p1"); }); }); </script>...
View Full Document

This note was uploaded on 01/29/2014 for the course CSCI 571 taught by Professor Papa during the Spring '07 term at USC.

Ask a homework question - tutors are online