The purpose of jquery is to make it much easier to use JavaScript on your website.
|
|
|
- Hilda Moody
- 8 years ago
- Views:
Transcription
1 jquery Introduction (Source:w3schools.com) The purpose of jquery is to make it much easier to use JavaScript on your website. What is jquery? jquery is a lightweight, "write less, do more", JavaScript library. The purpose of jquery is to make it much easier to use JavaScript on your website. jquery takes a lot of common tasks that requires many lines of JavaScript code to accomplish, and wraps it into methods that you can call with a single line of code. jquery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation. The jquery library contains the following features: HTML/DOM manipulation CSS manipulation HTML event methods Effects and animations AJAX Utilities Tip: In addition, jquery has plugins for almost any task out there. Why jquery? There are a lots of other JavaScript frameworks out there, but jquery seems to be the most popular, and also the most extendable. Many of the biggest companies on the Web use jquery, like: Google Microsoft IBM Netflix W3schools.com JQuery Notes pg 1 of40
2 Will jquery work in all browsers? The jquery team knows all about cross-browser issues, and they have written this knowledge into the jquery library. jquery will run exactly the same in all major browsers, including Internet Explorer 6! jquery Install Adding jquery to Your Web Pages To use jquery, you need to download the jquery library (explained below), and include it on the pages you wish to use it. The jquery library is a single JavaScript file, and you reference to it using the HTML <script> tag: <head> <script src="jquery.js"></script> </head> Notice that the <script> tag should be inside the page's <head> section. Do you wonder why we do not have type="text/javascript" inside the <script> tag? This is not required in HTML5. JavaScript is the default scripting language in HTML5 and in all modern browsers! Downloading jquery There are two versions of jquery available for downloading: Production version - this is for your live website because it has been minified and compressed Development version - this is for testing and development (uncompressed and readable code) Both versions can be downloaded from jquery.com. W3schools.com JQuery Notes pg 2 of40
3 Tip: Place the downloaded file in the same directory as the pages where you wish to use it. Alternatives to Downloading If you don't want to download and host jquery yourself, you can include it from a CDN (Content Delivery Network). Both Google and Microsoft host jquery. To use jquery from Google, use one of the following: Google CDN: <head> <script src=" </script> </head> Try it yourself» Get the latest available version with Google CDN: If you look at the Google URL above - the version of jquery is specified in the URL (1.8.0). If you would like to use the latest version of jquery, you can either remove a number from the end of the version string (for example 1.8), then Google will return the latest version available in the 1.8 series (1.8.0, 1.8.1, etc.), or you can take it up to the whole number (1), and Google will return the latest version available in the 1 series (from to 1.9.9). One big advantage of using the hosted jquery from Google or Microsoft: Many users already have downloaded jquery from Google or Microsoft when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time. W3schools.com JQuery Notes pg 3 of40
4 jquery Syntax With jquery you select (query) HTML elements and perform "actions" on them. jquery Syntax The jquery syntax is tailor made for selecting HTML elements and perform some action on the element(s). Basic syntax is: $(selector).action() A $ sign to define/access jquery A (selector) to "query (or find)" HTML elements A jquery action() to be performed on the element(s) s: $(this).hide() - hides the current element. $("p").hide() - hides all <p> elements. $(".test").hide() - hides all elements with class="test". $("#test").hide() - hides the element with id="test". Are you familiar with CSS selectors? jquery uses CSS syntax to select elements. You will learn more about the selector syntax in the next chapter of this tutorial. The Document Ready Event You might have noticed that all jquery methods in our examples, are inside a document ready event: $(document).ready(function(){ // jquery methods go here... W3schools.com JQuery Notes pg 4 of40
5 This is to prevent any jquery code from running before the document is finished loading (is ready). It is good practice to wait for the document to be fully loaded and ready, before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section. Here are some examples of actions that can fail if methods are run before the document is fully loaded: Trying to hide an element that is not created yet Trying to get the size of an image that is not loaded yet Tip: The jquery team has also created an even shorter method for the document ready event: $(function(){ // jquery methods go here... Use the syntax you prefer. We think that the document ready event is easier to understand when reading the code. jquery Selectors jquery selectors are one of the most important parts of the jquery library. jquery Selectors jquery selectors allow you to select and manipulate HTML element(s). With jquery selectors you can find elements based on their id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors. All type of selectors in jquery, start with the dollar sign and parentheses: $(). W3schools.com JQuery Notes pg 5 of40
6 The element Selector The jquery element selector selects elements based on their tag names. You can select all <p> elements on a page like this: $("p") When a user clicks on a button, all <p> elements will be hidden: $(document).ready(function(){ $("p").hide(); The #id Selector The jquery #id selector uses the id attribute of an HTML tag to find the specific element. An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element. To find an element with a specific id, write a hash character, followed by the id of the element: $("#test") When a user clicks on a button, the element with id="test" will be hidden: $(document).ready(function(){ $("#test").hide(); W3schools.com JQuery Notes pg 6 of40
7 The.class Selector The jquery class selector finds elements with a specific class. To find elements with a specific class, write a period character, followed by the name of the class: $(".test") When a user clicks on a button, the elements with class="test" will be hidden: $(document).ready(function(){ $(".test").hide(); More s of jquery Selectors Syntax Description $("*") Selects all elements $(this) $("p.intro") $("p:first") $("ul li:first") $("ul li:first-child") $("[href]") $("a[target='_blank']") $("a[target!='_blank']") $(":button") $("tr:even") $("tr:odd") Selects the current HTML element Selects all <p> elements with class="intro" Selects the first <p> element Selects the first <li> element of the first <ul> Selects the first <li> element of every <ul> Selects all elements with an href attribute Selects all <a> elements with a target attribute value equal to "_blank" Selects all <a> elements with a target attribute value NOT equal to "_blank" Selects all <button> elements and <input> elements of type="button" Selects all even <tr> elements Selects all odd <tr> elements W3schools.com JQuery Notes pg 7 of40
![intro") $("p:first") $("ul li:first") $("ul li:first-child") $("[href]") $("a[target='_blank']") $("a[target!](/docs-images/48/18384720/images/page_7.jpg "='_blank']\") $(\":button\") $(\"tr:even\") $(\"tr:odd\") Selects the current HTML element Selects all <p> elements with class=\"intro\" Selects the first <p> element Selects the first <li> element of the")
8 jquery Event Methods jquery is tailor-made to handle HTML/DOM events. jquery Event Methods Event handlers are methods that are called when "something happens" in HTML. The term "triggered (or "fired") by an event" is often used. It is common to put jquery code into event handler methods in the <head> section. In the example below, a function is called when the click event for the button is triggered: <!DOCTYPE html> <html> <head> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("p").hide(); </script> </head> <body> <h2>this is a heading</h2> <p>this is a paragraph.</p> <p>this is another paragraph.</p> <button>click me</button> </body> </html> W3schools.com JQuery Notes pg 8 of40
9 Functions In a Separate File If your website contains a lot of pages, and you want your jquery functions to be easy to maintain, you can put your jquery functions in a separate.js file. When we demonstrate jquery in this tutorial, the functions are added directly into the <head> section. However, sometimes it is preferable to place them in a separate file, like this (use the src attribute to refer to the.js file): <head> <script src="jquery.js"></script> <script src="my_jquery_functions.js"></script> </head> Some jquery Event Methods Here are some examples of event methods in jquery: Event Method $(document).ready(function) $(selector).click(function) $(selector).dblclick(function) $(selector).focus(function) Description Specifies a function to execute when the DOM is fully loaded Binds/Triggers the click event Binds/Triggers the double click event Binds/Triggers the focus event $(selector).mouseover(function) Binds/Triggers the mouseover event jquery Effects - Hide and Show Hide, Show, Toggle, Slide, Fade, and Animate. WOW! Click to show/hide pane W3schools.com JQuery Notes pg 9 of40
10 jquery hide() and show() With jquery, you can hide and show HTML elements with the hide() and show() methods: $("#hide").click(function(){ $("p").hide(); $("#show").click(function(){ $("p").show(); Syntax: $(selector).hide(speed,callback); $(selector).show(speed,callback); The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds. The optional callback parameter is the name of a function to be executed after hide (or show) completes. The following example demonstrates the speed parameter with hide(): $("p").hide(1000); jquery toggle() With jquery, you can toggle between the hide() and show() methods with the toggle() method. W3schools.com JQuery Notes pg 10 of40
11 Shown elements are hidden and hidden elements are shown: $("p").toggle(); Syntax: $(selector).toggle(speed,callback); The optional speed parameter can take the following values: "slow", "fast", or milliseconds. The optional callback parameter is the name of a function to be executed after the toggle() method completes. jquery Effects - Fading With jquery you can fade elements in and out of visibility. Click to fade in/out panel jquery Fading Methods With jquery you can fade an element in and out of visibility. jquery has the following fade methods: fadein() fadeout() fadetoggle() fadeto() jquery fadein() Method W3schools.com JQuery Notes pg 11 of40
12 The jquery fadein() method is used to fade in a hidden element. Syntax: $(selector).fadein(speed,callback); The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. The optional callback parameter is the name of a function to be executed after the fading completes. The following example demonstrates the fadein() method with different parameters: $("#div1").fadein(); $("#div2").fadein("slow"); $("#div3").fadein(3000); jquery fadeout() Method The jquery fadeout() method is used to fade out a visible element. Syntax: $(selector).fadeout(speed,callback); The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. The optional callback parameter is the name of a function to be executed after the fading completes. The following example demonstrates the fadeout() method with different parameters: $("#div1").fadeout(); W3schools.com JQuery Notes pg 12 of40
13 $("#div2").fadeout("slow"); $("#div3").fadeout(3000); jquery fadetoggle() Method The jquery fadetoggle() method toggles between the fadein() and fadeout() methods. If the elements are faded out, fadetoggle() will fade them in. If the elements are faded in, fadetoggle() will fade them out. Syntax: $(selector).fadetoggle(speed,callback); The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. The optional callback parameter is the name of a function to be executed after the fading completes. The following example demonstrates the fadetoggle() method with different parameters: $("#div1").fadetoggle(); $("#div2").fadetoggle("slow"); $("#div3").fadetoggle(3000); jquery fadeto() Method The jquery fadeto() method allows fading to a given opacity (value between 0 and 1). Syntax: $(selector).fadeto(speed,opacity,callback); W3schools.com JQuery Notes pg 13 of40
14 The required speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. The required opacity parameter in the fadeto() method specifies fading to a given opacity (value between 0 and 1). The optional callback parameter is the name of a function to be executed after the function completes. The following example demonstrates the fadeto() method with different parameters: $("#div1").fadeto("slow",0.15); $("#div2").fadeto("slow",0.4); $("#div3").fadeto("slow",0.7); jquery Effects - Sliding The jquery slide methods slides elements up and down. Click to slide down/up the panel jquery Sliding Methods With jquery you can create a sliding effect on elements. jquery has the following slide methods: slidedown() slideup() slidetoggle() jquery slidedown() Method W3schools.com JQuery Notes pg 14 of40
15 The jquery slidedown() method is used to slide down an element. Syntax: $(selector).slidedown(speed,callback); The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. The optional callback parameter is the name of a function to be executed after the sliding completes. The following example demonstrates the slidedown() method: $("#flip").click(function(){ $("#panel").slidedown(); jquery slideup() Method The jquery slideup() method is used to slide up an element. Syntax: $(selector).slideup(speed,callback); The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. The optional callback parameter is the name of a function to be executed after the sliding completes. The following example demonstrates the slideup() method: $("#flip").click(function(){ $("#panel").slideup(); W3schools.com JQuery Notes pg 15 of40
16 jquery slidetoggle() Method The jquery slidetoggle() method toggles between the slidedown() and slideup() methods. If the elements are slide down, slidetoggle() will slide them up. If the elements are slide up, slidetoggle() will slide them down. $(selector).slidetoggle(speed,callback); The optional speed parameter can take the following values: "slow", "fast", milliseconds. The optional callback parameter is the name of a function to be executed after the sliding completes. The following example demonstrates the slidetoggle() method: $("#flip").click(function(){ $("#panel").slidetoggle(); jquery Effects Reference For a complete overview of all jquery effects, please go to our jquery Effect Reference. jquery Effects - Animation The jquery animate() method lets you create custom animations. jquery Animations - The animate() Method The jquery animate() method is used to create custom animations. Syntax: W3schools.com JQuery Notes pg 16 of40
17 $(selector).animate({params},speed,callback); The required params parameter defines the CSS properties to be animated. The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. The optional callback parameter is the name of a function to be executed after the animation completes. The following example demonstrates a simple use of the animate() method; it moves a <div> element to the left, until it has reached a left property of 250px: $("div").animate({left:'250px' By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute! jquery animate() - Manipulate Multiple Properties Notice that multiple properties can be animated at the same time: $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' Is it possible to manipulate ALL CSS properties with the animate() method? W3schools.com JQuery Notes pg 17 of40
18 Yes, almost! However, there is one important thing to remember: all property names must be camel-cased when used with the animate() method: You will need to write paddingleft instead of padding-left, marginright instead of margin-right, and so on. Also, color animation is not included in the core jquery library. If you want to animate color, you need to download the Color Animations plugin from jquery.com. jquery animate() - Using Relative Values It is also possible to define relative values (the value is then relative to the element's current value). This is done by putting += or -= in front of the value: $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' jquery animate() - Using Pre-defined Values You can even specify a property's animation value as "show", "hide", or "toggle": $("div").animate({ height:'toggle' W3schools.com JQuery Notes pg 18 of40
19 jquery animate() - Uses Queue Functionality By default, jquery comes with queue functionality for animations. This means that if you write multiple animate() calls after each other, jquery creates an "internal" queue with these method calls. Then it runs the animate calls ONE by ONE. So, if you want to perform different animations after each other, we take advantage of the queue functionality: 1 var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); The example below first moves the <div> element to the right, and then increases the font size of the text: 2 var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontsize:'3em'},"slow"); jquery Stop Animations The jquery stop() method is used to stop animations or effects before it is finished. Click to slide down/up the panel W3schools.com JQuery Notes pg 19 of40
20 jquery stop() Method The jquery stop() method is used to stop an animation or effect before it is finished. The stop() method works for all jquery effect functions, including sliding, fading and custom animations. Syntax: $(selector).stop(stopall,gotoend); The optional stopall parameter specifies whether also the animation queue should be cleared or not. Default is false, which means that only the active animation will be stopped, allowing any queued animations to be performed afterwards. The optional gotoend parameter specifies whether or not to complete the current animation immediately. Default is false. So, by default, the stop() method kills the current animation being performed on the selected element. The following example demonstrates the stop() method, with no parameters: $("#stop").click(function(){ $("#panel").stop(); jquery Callback Functions A callback function is executed after the current effect is 100% finished. jquery Callback Functions JavaScript statements are executed line by line. However, with effects, the next line of code can be run even though the effect is not finished. This can create errors. W3schools.com JQuery Notes pg 20 of40
21 To prevent this, you can create a callback function. A callback function is executed after the current effect is finished. Typical syntax: $(selector).hide(speed,callback); s The example below has a callback parameter that is a function that will be executed after the hide effect is completed: with Callback $("p").hide("slow",function(){ alert("the paragraph is now hidden"); The example below has no callback parameter, and the alert box will be displayed before the hide effect is completed: without Callback $("p").hide(1000); alert("the paragraph is now hidden"); jquery - Chaining With jquery, you can chain together actions/methods. Chaining allows us to run multiple jquery methods (on the same element) within a single statement. jquery Method Chaining Until now we have been writing jquery statements one at a time (one after the other). W3schools.com JQuery Notes pg 21 of40
22 However, there is a technique called chaining, that allows us to run multiple jquery commands, one after the other, on the same element(s). Tip: This way, browsers do not have to find the same element(s) more than once. To chain an action, you simply append the action to the previous action. The following example chains together the css(), slideup(), and slidedown() methods. The "p1" element first changes to red, then it slides up, and then it slides down: $("#p1").css("color","red").slideup(2000).slidedown(2000); We could also have added more method calls if needed. Tip: When chaining, the line of code could become quite long. However, jquery is not very strict on the syntax; you can format it like you want, including line breaks and indentations. This also works just fine: $("#p1").css("color","red").slideup(2000).slidedown(2000); jquery - Get Content and Attributes jquery contains powerful methods for changing and manipulating HTML elements and attributes. jquery DOM Manipulation One very important part of jquery, is the possibility to manipulate the DOM. jquery comes with a bunch of DOM related methods, that makes it easy to access and manipulate elements and attributes. W3schools.com JQuery Notes pg 22 of40
23 DOM = Document Object Model The DOM defines a standard for accessing HTML and XML documents: "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." Get Content - text(), html(), and val() Three simple, but useful, jquery methods for DOM manipulation is: text() - Sets or returns the text content of selected elements html() - Sets or returns the content of selected elements (including HTML markup) val() - Sets or returns the value of form fields The following example demonstrates how to get content with the jquery text() and html() methods: $("#btn1").click(function(){ alert("text: " + $("#test").text()); $("#btn2").click(function(){ alert("html: " + $("#test").html()); The following example demonstrates how to get the value of an input field with the jquery val() method: $("#btn1").click(function(){ alert("value: " + $("#test").val()); Get Attributes - attr() W3schools.com JQuery Notes pg 23 of40
24 The jquery attr() method is used to get attribute values. The following example demonstrates how to get the value of the href attribute in a link: alert($("#w3s").attr("href")); jquery - Set Content and Attributes Set Content - text(), html(), and val() We will use the same three methods from the previous page to set content: text() - Sets or returns the text content of selected elements html() - Sets or returns the content of selected elements (including HTML markup) val() - Sets or returns the value of form fields The following example demonstrates how to set content with the jquery text(), html(), and val() methods: $("#btn1").click(function(){ $("#test1").text("hello world!"); $("#btn2").click(function(){ $("#test2").html("<b>hello world!</b>"); $("#btn3").click(function(){ $("#test3").val("dolly Duck"); A Callback Function for text(), html(), and val() W3schools.com JQuery Notes pg 24 of40
25 All of the three jquery methods above: text(), html(), and val(), also come with a callback function. The callback function has two parameters: the index of the current element in the list of elements selected and the original (old) value. You then return the string you wish to use as the new value from the function. The following example demonstrates text() and html() with a callback function: $("#btn1").click(function(){ $("#test1").text(function(i,origtext){ return "Old text: " + origtext + " New text: Hello world! (index: " + i + ")"; $("#btn2").click(function(){ $("#test2").html(function(i,origtext){ return "Old html: " + origtext + " New html: Hello <b>world!</b> (index: " + i + ")"; Set Attributes - attr() The jquery attr() method is also used to set/change attribute values. The following example demonstrates how to change (set) the value of the href attribute in a link: $("#w3s").attr("href"," The attr() method also allows you to set multiple attributes at the same time. The following example demonstrates how to set both the href and title attributes at the same time: W3schools.com JQuery Notes pg 25 of40
26 $("#w3s").attr({ "href" : " "title" : "W3Schools jquery Tutorial" A Callback Function for attr() The jquery method attr(), also come with a callback function. The callback function has two parameters: the index of the current element in the list of elements selected and the original (old) attribute value. You then return the string you wish to use as the new attribute value from the function. The following example demonstrates attr() with a callback function: $("#w3s").attr("href", function(i,origvalue){ return origvalue + "/jquery"; jquery - Add Elements With jquery, it is easy to add new elements/content. Add New HTML content We will look at four jquery methods that is used to add new content: append() - Inserts content at the end of the selected elements W3schools.com JQuery Notes pg 26 of40
27 prepend() - Inserts content at the beginning of the selected elements after() - Inserts content after the selected elements before() - Inserts content before the selected elements jquery append() Method The jquery append() method inserts content AT THE END of the selected HTML elements. $("p").append("some appended text."); jquery prepend() Method The jquery prepend() method inserts content AT THE BEGINNING of the selected HTML elements. $("p").prepend("some prepended text."); Add Several New Elements With append() and prepend() In both examples above, we have only inserted some text/html at the beginning/end of the selected HTML elements. However, both the append() and prepend() methods can take an infinite number of new elements as parameters. The new elements can be generated with text/html (like we have done in the examples above), with jquery, or with JavaScript code and DOM elements. In the following example, we create several new elements. The elements are created with text/html, jquery, and JavaScript/DOM. Then we append the new elements to the text with the append() method (this would have worked for prepend() too) : W3schools.com JQuery Notes pg 27 of40
28 function appendtext() { var txt1="<p>text.</p>"; // Create element with HTML var txt2=$("<p></p>").text("text."); // Create with jquery var txt3=document.createelement("p"); // Create with DOM txt3.innerhtml="text."; $("p").append(txt1,txt2,txt3); // Append the new elements } jquery after() and before() Methods The jquery after() method inserts content AFTER the selected HTML elements. The jquery before() method inserts content BEFORE the selected HTML elements. $("img").after("some text after"); $("img").before("some text before"); Add Several New Elements With after() and before() Also, both the after() and before() methods can take an infinite number of new elements as parameters. The new elements can be generated with text/html (like we have done in the example above), with jquery, or with JavaScript code and DOM elements. In the following example, we create several new elements. The elements are created with text/html, jquery, and JavaScript/DOM. Then we insert the new elements to the text with the after() method (this would have worked for before() too) : function aftertext() { var txt1="<b>i </b>"; // Create element with HTML var txt2=$("<i></i>").text("love "); // Create with jquery var txt3=document.createelement("big"); // Create with DOM txt3.innerhtml="jquery!"; W3schools.com JQuery Notes pg 28 of40
29 $("img").after(txt1,txt2,txt3); } // Insert new elements after img jquery - Remove Elements With jquery, it is easy to remove existing HTML elements. Remove Elements/Content To remove elements and content, there are mainly two jquery methods: remove() - Removes the selected element (and its child elements) empty() - Removes the child elements from the selected element jquery remove() Method The jquery remove() method removes the selected element(s) and its child elements. $("#div1").remove(); jquery empty() Method The jquery empty() method removes the child elements of the selected element(s). $("#div1").empty(); Filter the Elements to be Removed The jquery remove() method also accepts one parameter, which allows you to filter the elements to be removed. W3schools.com JQuery Notes pg 29 of40
30 The parameter can be any of the jquery selector syntaxes. The following example removes all <p> elements with class="italic": $("p").remove(".italic"); jquery - Get and Set CSS Classes With jquery, it is easy to manipulate the CSS of elements. jquery Manipulating CSS jquery has several methods for CSS manipulation. We will look at the following methods: addclass() - Adds one or more classes to the selected elements removeclass() - Removes one or more classes from the selected elements toggleclass() - Toggles between adding/removing classes from the selected elements css() - Sets or returns the style attribute Stylesheet The following stylesheet will be used for all the examples on this page:.important { font-weight:bold; font-size:xx-large; }.blue { color:blue; } W3schools.com JQuery Notes pg 30 of40
31 jquery addclass() Method The following example shows how to add class attributes to different elements. Of course you can select multiple elements, when adding classes: $("h1,h2,p").addclass("blue"); $("div").addclass("important"); You can also specify multiple classes within the addclass() method: $("#div1").addclass("important blue"); jquery removeclass() Method The following example shows how to remove a specific class attribute from different elements: $("h1,h2,p").removeclass("blue"); jquery toggleclass() Method W3schools.com JQuery Notes pg 31 of40
32 The following example will show how to use the jquery toggleclass() method. This method toggles between adding/removing classes from the selected elements: $("h1,h2,p").toggleclass("blue"); jquery css() Method The jquery css() method will be explained in the next chapter. jquery - css() Method jquery css() Method The css() method sets or returns one or more style properties for the selected elements. Return a CSS Property To return the value of a specified CSS property, use the following syntax: css("propertyname"); The following example will return the background-color value of the FIRST matched element: $("p").css("background-color"); W3schools.com JQuery Notes pg 32 of40
33 Set a CSS Property To set a specified CSS property, use the following syntax: css("propertyname","value"); The following example will set the background-color value for ALL matched elements: $("p").css("background-color","yellow"); Set Multiple CSS Properties To set multiple CSS properties, use the following syntax: css({"propertyname":"value","propertyname":"value",... The following example will set a background-color and a font-size for ALL matched elements: $("p").css({"background-color":"yellow","font-size":"200%" jquery - AJAX Introduction AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page. What is AJAX? AJAX = Asynchronous JavaScript and XML. W3schools.com JQuery Notes pg 33 of40
34 In short; AJAX is about loading data in the background and display it on the webpage, without reloading the whole page. s of applications using AJAX: Gmail, Google Maps, Youtube, and Facebook tabs. You can learn more about AJAX in our AJAX tutorial. What About jquery and AJAX? jquery provides several methods for AJAX functionality. With the jquery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post - And you can load the external data directly into the selected HTML elements of your web page! Without jquery, AJAX coding can be a bit tricky! Writing regular AJAX code can be a bit tricky, because different browsers have different syntax for AJAX implementation. This means that you will have to write extra code to test for different browsers. However, the jquery team has taken care of this for us, so that we can write AJAX functionality with only one single line of code. jquery AJAX Methods In the next chapters we will look at the most important jquery AJAX methods. jquery - AJAX load() Method jquery load() Method The jquery load() method is a simple, but powerful AJAX method. The load() method loads data from a server and puts the returned data into the selected element. Syntax: W3schools.com JQuery Notes pg 34 of40
35 $(selector).load(url,data,callback); The required URL parameter specifies the URL you wish to load. The optional data parameter specifies a set of querystring key/value pairs to send along with the request. The optional callback parameter is the name of a function to be executed after the load() method is completed. Here is the content of our example file: "demo_test.txt": <h2>jquery and AJAX is FUN!!!</h2> <p id="p1">this is some text in a paragraph.</p> The following example loads the content of the file "demo_test.txt" into a specific <div> element: $("#div1").load("demo_test.txt"); It is also possible to add a jquery selector to the URL parameter. The following example loads the content of the element with id="p1", inside the file "demo_test.txt", into a specific <div> element: $("#div1").load("demo_test.txt #p1"); The optional callback parameter specifies a callback function to run when the load() method is completed. The callback function can have different parameters: responsetxt - contains the resulting content if the call succeed statustxt - contains the status of the call xhr - contains the XMLHttpRequest object The following example displays an alert box after the load method() completes. If the load() method has succeed, it displays "External content loaded successfully!", and if it fails it displays an error message: W3schools.com JQuery Notes pg 35 of40
36 $("#div1").load("demo_test.txt",function(responsetxt,statustxt,xhr){ if(statustxt=="success") alert("external content loaded successfully!"); if(statustxt=="error") alert("error: "+xhr.status+": "+xhr.statustext); jquery - AJAX get() and post() Methods The jquery get() and post() methods is used to request data from the server with an HTTP GET or POST request. HTTP Request: GET vs. POST Two commonly used methods for a request-response between a client and server are: GET and POST. GET - Requests data from a specified resource POST - Submits data to be processed to a specified resource GET is basically used for just getting (retrieving) some data from the server. Note: The GET method may return cached data. POST can also be used to get some data from the server. However, the POST method NEVER caches data, and is often used to send data along with the request. To learn more about GET and POST, and the differences between the two methods, please read our HTTP Methods GET vs POST chapter. jquery $.get() Method The $.get() method requests data from the server with an HTTP GET request. Syntax: W3schools.com JQuery Notes pg 36 of40
37 $.get(url,callback); The required URL parameter specifies the URL you wish to request. The optional callback parameter is the name of a function to be executed if the request succeeds. The following example uses the $.get() method to retrieve data from a file on the server: $.get("demo_test.asp",function(data,status){ alert("data: " + data + "\nstatus: " + status); The first parameter of $.get() is the URL we wish to request ("demo_test.asp"). The second parameter is a callback function. The first callback parameter holds the content of the page requested, and the second callback parameter holds the status of the request. Tip: Here is how the ASP file looks like ("demo_test.asp"): <% response.write("this is some text from an external ASP file.") %> jquery $.post() Method The $.post() method requests data from the server using an HTTP POST request. Syntax: $.post(url,data,callback); The required URL parameter specifies the URL you wish to request. The optional data parameter specifies some data to send along with the request. The optional callback parameter is the name of a function to be executed if the request succeeds. W3schools.com JQuery Notes pg 37 of40
38 The following example uses the $.post() method to send some data along with the request: $.post("demo_test_post.asp", { name:"donald Duck", city:"duckburg" }, function(data,status){ alert("data: " + data + "\nstatus: " + status); The first parameter of $.post() is the URL we wish to request ("demo_test_post.asp"). Then we pass in some data to send along with the request (name and city). The ASP script in "demo_test_post.asp" reads the parameters, process them, and return a result. The third parameter is a callback function. The first callback parameter holds the content of the page requested, and the second callback parameter holds the status of the request. Tip: Here is how the ASP file looks like ("demo_test_post.asp"): <% dim fname,city fname=request.form("name") city=request.form("city") Response.Write("Dear " & fname & ". ") Response.Write("Hope you live well in " & city & ".") %> jquery - The noconflict() Method What if you wish to use other frameworks on your pages, while still using jquery? W3schools.com JQuery Notes pg 38 of40
39 jquery and Other JavaScript Frameworks As you already know; jquery uses the $ sign as a shortcut for jquery. What if other JavaScript frameworks also use the $ sign as a shortcut? Some other popular JavaScript frameworks are: MooTools, Backbone, Sammy, Cappuccino, Knockout, JavaScript MVC, Google Web Toolkit, Google Closure, Ember, Batman, and Ext JS. Some of the other frameworks also use the $ character as a shortcut (just like jquery), and then you suddenly have two different frameworks using the same shortcut, which might result in that your scripts stop working. The jquery team have already thought about this, and implemented the noconflict() method. The jquery noconflict() Method The noconflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it. You can of course still use jquery, simply by writing the full name instead of the shortcut: $.noconflict(); jquery(document).ready(function(){ jquery("button").click(function(){ jquery("p").text("jquery is still working!"); You can also create your own shortcut very easily. The noconflict() method returns a reference to jquery, that you can save in a variable, for later use. Here is an example: var jq = $.noconflict(); jq(document).ready(function(){ jq("button").click(function(){ W3schools.com JQuery Notes pg 39 of40
40 jq("p").text("jquery is still working!"); If you have a block of jquery code which uses the $ shortcut and you do not want to change it all, you can pass the $ sign in as a parameter to the ready method. This allows you to access jquery using $, inside this function - outside of it, you will have to use "jquery": $.noconflict(); jquery(document).ready(function($){ $("p").text("jquery is still working!"); W3schools.com JQuery Notes pg 40 of40
jquery Tutorial for Beginners: Nothing But the Goods
jquery Tutorial for Beginners: Nothing But the Goods Not too long ago I wrote an article for Six Revisions called Getting Started with jquery that covered some important things (concept-wise) that beginning
Example. Represent this as XML
Example INF 221 program class INF 133 quiz Assignment Represent this as XML JSON There is not an absolutely correct answer to how to interpret this tree in the respective languages. There are multiple
Peers Technologies Pvt. Ltd. Web Application Development
Page 1 Peers Technologies Pvt. Ltd. Course Brochure Web Application Development Overview To make you ready to develop a web site / web application using the latest client side web technologies and web
MASTERTAG DEVELOPER GUIDE
MASTERTAG DEVELOPER GUIDE TABLE OF CONTENTS 1 Introduction... 4 1.1 What is the zanox MasterTag?... 4 1.2 What is the zanox page type?... 4 2 Create a MasterTag application in the zanox Application Store...
Short notes on webpage programming languages
Short notes on webpage programming languages What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of
Part I: Introduction to jquery
Computer Science & Engineering 120 Learning Code Manipulating Data II jquery Part I: Introduction jquery Chrispher M. Bourke cbourke@cse.unl.edu Overview Introduction jquery Using jquery jquery is a JavaScript
Web Development 1 A4 Project Description Web Architecture
Web Development 1 Introduction to A4, Architecture, Core Technologies A4 Project Description 2 Web Architecture 3 Web Service Web Service Web Service Browser Javascript Database Javascript Other Stuff:
CMSC434 TUTORIAL #3 HTML CSS JavaScript Jquery Ajax + Google AppEngine Mobile WebApp HTML5
CMSC434 TUTORIAL #3 HTML CSS JavaScript Jquery Ajax + Google AppEngine Mobile WebApp HTML5 JQuery Recap JQuery source code is an external JavaScript file
Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University
Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages
JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK
Programming for Digital Media EE1707 JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK 1 References and Sources 1. DOM Scripting, Web Design with JavaScript
Intro to jquery. Web Systems 02/17/2012
Intro to jquery Web Systems 02/17/2012 What is jquery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event handling, animations, and
Performance Testing for Ajax Applications
Radview Software How to Performance Testing for Ajax Applications Rich internet applications are growing rapidly and AJAX technologies serve as the building blocks for such applications. These new technologies
A send-a-friend application with ASP Smart Mailer
A send-a-friend application with ASP Smart Mailer Every site likes more visitors. One of the ways that big sites do this is using a simple form that allows people to send their friends a quick email about
Mobile Web Applications. Gary Dubuque IT Research Architect Department of Revenue
Mobile Web Applications Gary Dubuque IT Research Architect Department of Revenue Summary Times are approximate 10:15am 10:25am 10:35am 10:45am Evolution of Web Applications How they got replaced by native
Slide.Show Quick Start Guide
Slide.Show Quick Start Guide Vertigo Software December 2007 Contents Introduction... 1 Your first slideshow with Slide.Show... 1 Step 1: Embed the control... 2 Step 2: Configure the control... 3 Step 3:
Website Login Integration
SSO Widget Website Login Integration October 2015 Table of Contents Introduction... 3 Getting Started... 5 Creating your Login Form... 5 Full code for the example (including CSS and JavaScript):... 7 2
JQUERY - EFFECTS. Showing and Hiding elements. Syntax. Example
http://www.tutorialspoint.com/jquery/jquery-effects.htm JQUERY - EFFECTS Copyright tutorialspoint.com jquery provides a trivially simple interface for doing various kind of amazing effects. jquery methods
Making Web Application using Tizen Web UI Framework. Koeun Choi
Making Web Application using Tizen Web UI Framework Koeun Choi Contents Overview Web Applications using Web UI Framework Tizen Web UI Framework Web UI Framework Launching Flow Web Winsets Making Web Application
Client-side Web Engineering From HTML to AJAX
Client-side Web Engineering From HTML to AJAX SWE 642, Spring 2008 Nick Duan 1 What is Client-side Engineering? The concepts, tools and techniques for creating standard web browser and browser extensions
How to Code With MooTools
Advanced Web Programming Jaume Aragonés Ferrero Department of Software and Computing Systems A compact JavaScript framework MOOTOOLS Index What is MooTools? Where to find? How to download? Hello World
Overview. In the beginning. Issues with Client Side Scripting What is JavaScript? Syntax and the Document Object Model Moving forward with JavaScript
Overview In the beginning Static vs. Dynamic Content Issues with Client Side Scripting What is JavaScript? Syntax and the Document Object Model Moving forward with JavaScript AJAX Libraries and Frameworks
Single Page Web App Generator (SPWAG)
Single Page Web App Generator (SPWAG) Members Lauren Zou (ljz2112) Aftab Khan (ajk2194) Richard Chiou (rc2758) Yunhe (John) Wang (yw2439) Aditya Majumdar (am3713) Motivation In 2012, HTML5 and CSS3 took
HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout
CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout Fall 2011, Version 1.0 Table of Contents Introduction...3 Downloading
Web Development Recipes
Extracted from: Web Development Recipes This PDF file contains pages extracted from Web Development Recipes, published by the Pragmatic Bookshelf. For more information or to purchase a paperback or PDF
BT CONTENT SHOWCASE. JOOMLA EXTENSION User guide Version 2.1. Copyright 2013 Bowthemes Inc. support@bowthemes.com
BT CONTENT SHOWCASE JOOMLA EXTENSION User guide Version 2.1 Copyright 2013 Bowthemes Inc. support@bowthemes.com 1 Table of Contents Introduction...2 Installing and Upgrading...4 System Requirement...4
Advanced Drupal Features and Techniques
Advanced Drupal Features and Techniques Mount Holyoke College Office of Communications and Marketing 04/2/15 This MHC Drupal Manual contains proprietary information. It is the express property of Mount
Web Building Blocks. Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.
Web Building Blocks Core Concepts for HTML & CSS Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.edu @joegilbert Why Learn the Building Blocks? The idea
Visualizing an OrientDB Graph Database with KeyLines
Visualizing an OrientDB Graph Database with KeyLines Visualizing an OrientDB Graph Database with KeyLines 1! Introduction 2! What is a graph database? 2! What is OrientDB? 2! Why visualize OrientDB? 3!
PLAYER DEVELOPER GUIDE
PLAYER DEVELOPER GUIDE CONTENTS CREATING AND BRANDING A PLAYER IN BACKLOT 5 Player Platform and Browser Support 5 How Player Works 6 Setting up Players Using the Backlot API 6 Creating a Player Using the
Tutorial: Building a Dojo Application using IBM Rational Application Developer Loan Payment Calculator
Tutorial: Building a Dojo Application using IBM Rational Application Developer Loan Payment Calculator Written by: Chris Jaun (cmjaun@us.ibm.com) Sudha Piddaparti (sudhap@us.ibm.com) Objective In this
Visualizing a Neo4j Graph Database with KeyLines
Visualizing a Neo4j Graph Database with KeyLines Introduction 2! What is a graph database? 2! What is Neo4j? 2! Why visualize Neo4j? 3! Visualization Architecture 4! Benefits of the KeyLines/Neo4j architecture
Citrix StoreFront. Customizing the Receiver for Web User Interface. 2012 Citrix. All rights reserved.
Citrix StoreFront Customizing the Receiver for Web User Interface 2012 Citrix. All rights reserved. Customizing the Receiver for Web User Interface Introduction Receiver for Web provides a simple mechanism
ICT 6012: Web Programming
ICT 6012: Web Programming Covers HTML, PHP Programming and JavaScript Covers in 13 lectures a lecture plan is supplied. Please note that there are some extra classes and some cancelled classes Mid-Term
Setup The package simply needs to be installed and configured for the desired CDN s distribution server.
NTT DATA Sitecore CDN Connector Overview The CDN Connector for Sitecore allows developers to route all media requests (dynamic and static) through a proxy CDN. It is designed to be plug-n-play requiring
AJAX The Future of Web Development?
AJAX The Future of Web Development? Anders Moberg (dit02amg), David Mörtsell (dit01dml) and David Södermark (dv02sdd). Assignment 2 in New Media D, Department of Computing Science, Umeå University. 2006-04-28
Fortis Theme. User Guide. v1.0.0. Magento theme by Infortis. Copyright 2012 Infortis
Fortis Theme v1.0.0 Magento theme by Infortis User Guide Copyright 2012 Infortis 1 Table of Contents 1. Introduction...3 2. Installation...4 3. Basic Configuration...5 3.1 Enable Fortis Theme...5 3.2 Enable
Advantage of Jquery: T his file is downloaded from
What is JQuery JQuery is lightweight, client side JavaScript library file that supports all browsers. JQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling,
FETAC Certificate in Multimedia Production. IBaT College Swords. FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3
IBaT College Swords FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3 Lecturer: Cara Martin M.Sc. Lecturer contact details: cmartin@ibat.ie IBaT 2009 Page 1 Cascading Style Sheets
CIS 467/602-01: Data Visualization
CIS 467/602-01: Data Visualization HTML, CSS, SVG, (& JavaScript) Dr. David Koop Assignment 1 Posted on the course web site Due Friday, Feb. 13 Get started soon! Submission information will be posted Useful
Your First Web Page. It all starts with an idea. Create an Azure Web App
Your First Web Page It all starts with an idea Every web page begins with an idea to communicate with an audience. For now, you will start with just a text file that will tell people a little about you,
So we're set? Have your text-editor ready. Be sure you use NotePad, NOT Word or even WordPad. Great, let's get going.
Web Design 1A First Website Intro to Basic HTML So we're set? Have your text-editor ready. Be sure you use NotePad, NOT Word or even WordPad. Great, let's get going. Ok, let's just go through the steps
WEB DEVELOPMENT COURSE (PHP/ MYSQL)
WEB DEVELOPMENT COURSE (PHP/ MYSQL) COURSE COVERS: HTML 5 CSS 3 JAVASCRIPT JQUERY BOOTSTRAP 3 PHP 5.5 MYSQL SYLLABUS HTML5 Introduction to HTML Introduction to Internet HTML Basics HTML Elements HTML Attributes
Web Design and Databases WD: Class 7: HTML and CSS Part 3
Web Design and Databases WD: Class 7: HTML and CSS Part 3 Dr Helen Hastie Dept of Computer Science Heriot-Watt University Some contributions from Head First HTML with CSS and XHTML, O Reilly Recap! HTML
BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D
BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D 1 LEARNING OUTCOMES Describe the anatomy of a web page Format the body of a web page with block-level elements
CSC309 Winter 2016 Lecture 3. Larry Zhang
CSC309 Winter 2016 Lecture 3 Larry Zhang 1 Why Javascript Javascript is for dynamically manipulate the front-end of your web page. Add/remove/change the content/attributes of an HTML element Change the
Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards?
Question 1. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? (b) Briefly identify the primary purpose of the flowing inside the body section of an HTML document: (i) HTML
Interactive Data Visualization for the Web Scott Murray
Interactive Data Visualization for the Web Scott Murray Technology Foundations Web technologies HTML CSS SVG Javascript HTML (Hypertext Markup Language) Used to mark up the content of a web page by adding
Xtreeme Search Engine Studio Help. 2007 Xtreeme
Xtreeme Search Engine Studio Help 2007 Xtreeme I Search Engine Studio Help Table of Contents Part I Introduction 2 Part II Requirements 4 Part III Features 7 Part IV Quick Start Tutorials 9 1 Steps to
Outline of CSS: Cascading Style Sheets
Outline of CSS: Cascading Style Sheets nigelbuckner 2014 This is an introduction to CSS showing how styles are written, types of style sheets, CSS selectors, the cascade, grouping styles and how styles
Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication
Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication Using JQuery to Make a Photo Slideshow This exercise was modified from the slideshow
ICE: HTML, CSS, and Validation
ICE: HTML, CSS, and Validation Formatting a Recipe NAME: Overview Today you will be given an existing HTML page that already has significant content, in this case, a recipe. Your tasks are to: mark it
Yandex.Widgets Quick start
17.09.2013 .. Version 2 Document build date: 17.09.2013. This volume is a part of Yandex technical documentation. Yandex helpdesk site: http://help.yandex.ru 2008 2013 Yandex LLC. All rights reserved.
WHITEPAPER. Skinning Guide. Let s chat. 800.9.Velaro www.velaro.com info@velaro.com. 2012 by Velaro
WHITEPAPER Skinning Guide Let s chat. 2012 by Velaro 800.9.Velaro www.velaro.com info@velaro.com INTRODUCTION Throughout the course of a chat conversation, there are a number of different web pages that
AJAX and JSON Lessons Learned. Jim Riecken, Senior Software Engineer, Blackboard Inc.
AJAX and JSON Lessons Learned Jim Riecken, Senior Software Engineer, Blackboard Inc. About Me Jim Riecken Senior Software Engineer At Blackboard for 4 years. Work out of the Vancouver office. Working a
Chapter 2 HTML Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D
Chapter 2 HTML Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 First Web Page an opening tag... page info goes here a closing tag Head & Body Sections Head Section
Cisco Adaptive Security Appliance (ASA) Web VPN Portal Customization: Solution Brief
Guide Cisco Adaptive Security Appliance (ASA) Web VPN Portal Customization: Solution Brief Author: Ashur Kanoon August 2012 For further information, questions and comments please contact ccbu-pricing@cisco.com
ITNP43: HTML Lecture 4
ITNP43: HTML Lecture 4 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and content of a document Style
Dashboard Skin Tutorial. For ETS2 HTML5 Mobile Dashboard v3.0.2
Dashboard Skin Tutorial For ETS2 HTML5 Mobile Dashboard v3.0.2 Dashboard engine overview Dashboard menu Skin file structure config.json Available telemetry properties dashboard.html dashboard.css Telemetry
SAHARA DIGITAL8 RESPONSIVE MAGENTO THEME
SAHARA DIGITAL8 RESPONSIVE MAGENTO THEME This document is organized as follows: Chater I. Install ma_sahara_digital8 template Chapter II. Features and elements of the template Chapter III. List of extensions
JW Player for Flash and HTML5
JW Player for Flash and HTML5 Release 5.3 Embedding Guide December 20, 2010 CONTENTS 1 Embedding the player 1 1.1 Upload.................................................. 1 1.2 SWFObject................................................
How to code, test, and validate a web page
Chapter 2 How to code, test, and validate a web page Slide 1 Objectives Applied 1. Use a text editor like Aptana Studio 3 to create and edit HTML and CSS files. 2. Test an HTML document that s stored on
Interspire Website Publisher Developer Documentation. Template Customization Guide
Interspire Website Publisher Developer Documentation Template Customization Guide Table of Contents Introduction... 1 Template Directory Structure... 2 The Style Guide File... 4 Blocks... 4 What are blocks?...
Sitecore Dashboard User Guide
Sitecore Dashboard User Guide Contents Overview... 2 Installation... 2 Getting Started... 3 Sample Widgets... 3 Logged In... 3 Job Viewer... 3 Workflow State... 3 Publish Queue Viewer... 4 Quick Links...
Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence
Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.
Microsoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,
How To Test Your Web Site On Wapt On A Pc Or Mac Or Mac (Or Mac) On A Mac Or Ipad Or Ipa (Or Ipa) On Pc Or Ipam (Or Pc Or Pc) On An Ip
Load testing with WAPT: Quick Start Guide This document describes step by step how to create a simple typical test for a web application, execute it and interpret the results. A brief insight is provided
HTML Forms and CONTROLS
HTML Forms and CONTROLS Web forms also called Fill-out Forms, let a user return information to a web server for some action. The processing of incoming data is handled by a script or program written in
Instructions for Embedding a Kudos Display within Your Website
Instructions for Embedding a Kudos Display within Your Website You may use either of two technologies for this embedment. A. You may directly insert the underlying PHP code; or B. You may insert some JavaScript
Debugging JavaScript and CSS Using Firebug. Harman Goei CSCI 571 1/27/13
Debugging JavaScript and CSS Using Firebug Harman Goei CSCI 571 1/27/13 Notice for Copying JavaScript Code from these Slides When copying any JavaScript code from these slides, the console might return
JavaScript: Introduction to Scripting. 2008 Pearson Education, Inc. All rights reserved.
1 6 JavaScript: Introduction to Scripting 2 Comment is free, but facts are sacred. C. P. Scott The creditor hath a better memory than the debtor. James Howell When faced with a decision, I always ask,
Pay with Amazon Integration Guide
2 2 Contents... 4 Introduction to Pay with Amazon... 5 Before you start - Important Information... 5 Important Advanced Payment APIs prerequisites... 5 How does Pay with Amazon work?...6 Key concepts in
Outline. 1.! Development Platforms for Multimedia Programming!
Outline 1.! Development Platforms for Multimedia Programming! 1.1.! Classification of Development Platforms! 1.2.! A Quick Tour of Various Development Platforms! 2.! Multimedia Programming with Python
Introduction to Web Design Curriculum Sample
Introduction to Web Design Curriculum Sample Thank you for evaluating our curriculum pack for your school! We have assembled what we believe to be the finest collection of materials anywhere to teach basic
Project 2: Web Security Pitfalls
EECS 388 September 19, 2014 Intro to Computer Security Project 2: Web Security Pitfalls Project 2: Web Security Pitfalls This project is due on Thursday, October 9 at 6 p.m. and counts for 8% of your course
jquery Programming Cookbook jquery Programming Cookbook
jquery Programming Cookbook i jquery Programming Cookbook jquery Programming Cookbook ii Contents 1 Add/Remove Class Example 1 1.1 Basic Document Setup................................................ 1
Tutorial JavaScript: Switching panels using a radio button
Tutorial JavaScript: Switching panels using a radio button www.nintex.com support@nintex.com Contents About this tutorial... 3 Upload the JavaScript File... 4 Using JavaScript to hide or show a control
English. Asema.com Portlets Programmers' Manual
English Asema.com Portlets Programmers' Manual Asema.com Portlets : Programmers' Manual Asema Electronics Ltd Copyright 2011-2013 No part of this publication may be reproduced, published, stored in an
Specify the location of an HTML control stored in the application repository. See Using the XPath search method, page 2.
Testing Dynamic Web Applications How To You can use XML Path Language (XPath) queries and URL format rules to test web sites or applications that contain dynamic content that changes on a regular basis.
MAGENTO THEME SHOE STORE
MAGENTO THEME SHOE STORE Developer: BSEtec Email: support@bsetec.com Website: www.bsetec.com Facebook Profile: License: GPLv3 or later License URL: http://www.gnu.org/licenses/gpl-3.0-standalone.html 1
Load testing with. WAPT Cloud. Quick Start Guide
Load testing with WAPT Cloud Quick Start Guide This document describes step by step how to create a simple typical test for a web application, execute it and interpret the results. 2007-2015 SoftLogica
Step by step guides. Deploying your first web app to your FREE Azure Subscription with Visual Studio 2015
Step by step guides Deploying your first web app to your FREE Azure Subscription with Visual Studio 2015 Websites are a mainstay of online activities whether you want a personal site for yourself or a
Front-End Performance Testing and Optimization
Front-End Performance Testing and Optimization Abstract Today, web user turnaround starts from more than 3 seconds of response time. This demands performance optimization on all application levels. Client
jfingerprint Datasheet
jfingerprint Datasheet jfingerprint An introduction to jfingerprint, the browser fingerprinting and identification solution. W o l f S o f t w a r e L i m i t e d Contents 1 Background... 3 2 How does
Magento 1.4 Theming Cookbook
P U B L I S H I N G community experience distilled Magento 1.4 Theming Cookbook Jose Argudo Blanco Chapter No. 5 "Going Further Making Our Theme Shine" In this package, you will find: A Biography of the
LAB MANUAL CS-322364(22): Web Technology
RUNGTA COLLEGE OF ENGINEERING & TECHNOLOGY (Approved by AICTE, New Delhi & Affiliated to CSVTU, Bhilai) Kohka Kurud Road Bhilai [C.G.] LAB MANUAL CS-322364(22): Web Technology Department of COMPUTER SCIENCE
WP Popup Magic User Guide
WP Popup Magic User Guide Plugin version 2.6+ Prepared by Scott Bernadot WP Popup Magic User Guide Page 1 Introduction Thank you so much for your purchase! We're excited to present you with the most magical
How to Manage Your Eservice Center Knowledge Base
Populating and Maintaining your eservice Center Knowledge Base Table of Contents Populating and Maintaining the eservice Center Knowledge Base...2 Key Terms...2 Setting up the Knowledge Base...3 Consider
Spectrum Technology Platform
Spectrum Technology Platform Version 8.0.0 SP2 RIA Getting Started Guide Information in this document is subject to change without notice and does not represent a commitment on the part of the vendor or
Creating a Resume Webpage with
Creating a Resume Webpage with 6 Cascading Style Sheet Code In this chapter, we will learn the following to World Class CAD standards: Using a Storyboard to Create a Resume Webpage Starting a HTML Resume
Novell Identity Manager
AUTHORIZED DOCUMENTATION Manual Task Service Driver Implementation Guide Novell Identity Manager 4.0.1 April 15, 2011 www.novell.com Legal Notices Novell, Inc. makes no representations or warranties with
Getting started with jquery. Gill Cleeren @gillcleeren
Getting started with jquery Gill Cleeren @gillcleeren Hi, I m Gill! Gill Cleeren MVP and Regional Director.NET Architect @ Ordina Trainer & speaker @gillcleeren gill@snowball.be I m a Pluralsight author!
Creating HTML authored webpages using a text editor
GRC 175 Assignment 1 Creating HTML authored webpages using a text editor Tasks: 1. Acquire web host space with ad free provider 2. Create an index webpage (index.html) 3. Create a class management webpage
Embedding a Data View dynamic report into an existing web-page
Embedding a Data View dynamic report into an existing web-page Author: GeoWise User Support Released: 23/11/2011 Version: 6.4.4 Embedding a Data View dynamic report into an existing web-page Table of Contents
WP Popup Magic User Guide
WP Popup Magic User Guide Introduction Thank you so much for your purchase! We're excited to present you with the most magical popup solution for WordPress! If you have any questions, please email us at
Web Design Revision. AQA AS-Level Computing COMP2. 39 minutes. 39 marks. Page 1 of 17
Web Design Revision AQA AS-Level Computing COMP2 204 39 minutes 39 marks Page of 7 Q. (a) (i) What does HTML stand for?... () (ii) What does CSS stand for?... () (b) Figure shows a web page that has been
Improving Magento Front-End Performance
Improving Magento Front-End Performance If your Magento website consistently loads in less than two seconds, congratulations! You already have a high-performing site. But if your site is like the vast
Website Builder Documentation
Website Builder Documentation Main Dashboard page In the main dashboard page you can see and manager all of your projects. Filter Bar In the filter bar at the top you can filter and search your projects
Professional & Workgroup Editions
Professional & Workgroup Editions Add a popup window for scheduling appointments on your own web page using HTML Date: August 2, 2011 Page 1 Overview This document describes how to insert a popup window
Designing HTML Emails for Use in the Advanced Editor
Designing HTML Emails for Use in the Advanced Editor For years, we at Swiftpage have heard a recurring request from our customers: wouldn t it be great if you could create an HTML document, import it into
Introduction to XHTML. 2010, Robert K. Moniot 1
Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document