JAVA SCRIPT ANIMATIONS JAVA SCRIPT ANIMATIONS You can
- Slides: 76
JAVA SCRIPT ANIMATIONS
JAVA SCRIPT ANIMATIONS • You can use Java. Script to create a complex animation having, but not limited to, the following elements − – – Fade Effect Roll-in or Roll-out Page-in or Page-out Object movements • Java. Script can be used to move a number of DOM elements (<img />, <div> or any other HTML element) around the page according to some sort of pattern determined by a logical equation or function.
JAVA SCRIPT ANIMATIONS • Java. Script provides the following functions to be frequently used in animation programs. – set. Timeout( function, duration) − This function calls function after duration milliseconds from now. – set. Interval(function, duration) − This function calls function after every duration milliseconds. – clear. Timeout(set. Timeout_variable) − This function calls clears any timer set by the set. Timeout() functions. • Java. Script can also set a number of attributes of a DOM object including its position on the screen. You can set top and left attribute of an object to position it anywhere on the screen. Here is its syntax. – // Set distance from left edge of the screen. • object. style. left = distance in pixels or points; Or – // Set distance from top edge of the screen. • object. style. top = distance in pixels or points;
JAVA SCRIPT ANIMATIONS • Manual Animation – So let's implement one simple animation using DOM object properties and Java. Script functions as follows. The following list contains different DOM methods. • We are using the Java. Script function get. Element. By. Id() to get a DOM object and then assigning it to a global variable img. Obj. • We have defined an initialization function init() to initialize img. Obj where we have set its position and left attributes. • We are calling initialization function at the time of window load. • Finally, we are calling move. Right() function to increase the left distance by 10 pixels. You could also set it to a negative value to move it to the left side. – Example:
JAVA SCRIPT ANIMATIONS <html> <head> <title>Java. Script Animation</title> <script type="text/javascript"> var img. Obj = null; function init() { img. Obj = document. get. Element. By. Id('my. Image'); img. Obj. style. position= 'relative'; img. Obj. style. left = '0 px'; } function move. Right() { img. Obj. style. left = parse. Int(img. Obj. style. left) + 10 + 'px'; } window. onload =init; </script> </head> <body> <form> <img id="my. Image" src="/images/html. gif" /> <p>Click button below to move image to right</p> <input type="button" value="Click Me" onclick="move. Right(); " /> </form> </body> </html>
JAVA SCRIPT ANIMATIONS • Automated Animation – In the above example, we saw how an image moves to right with every click. We can automate this process by using the Java. Script function set. Timeout() as follows − – Here we have added more methods. So let's see what is new here − • The move. Right() function is calling set. Timeout() function to set the position of img. Obj. • We have added a new function stop() to clear the timer set by set. Timeout() function and to set the object at its initial position.
JAVA SCRIPT ANIMATIONS <html> <head> <title>Java. Script Animation</title> <script type="text/javascript"> var img. Obj = null; var animate ; function init() { img. Obj = document. get. Element. By. Id('my. Image'); img. Obj. style. position= 'relative'; img. Obj. style. left = '0 px'; } function move. Right() { img. Obj. style. left = parse. Int(img. Obj. style. left) + 10 + 'px'; animate = set. Timeout(move. Right, 20); // call move. Right in 20 msec } function stop() { clear. Timeout(animate); img. Obj. style. left = '0 px'; } window. onload =init; </script> </head> <body> <form> <img id="my. Image" src="/images/html. gif" /> <p>Click the buttons below to handle animation</p> <input type="button" value="Start" onclick="move. Right(); " /> <input type="button" value="Stop" onclick="stop(); " /> </form> </body> </html>
JAVA SCRIPT ANIMATIONS • The Java. Script animation is implemented as gradual changing of DOM element styles or canvas objects. • The whole process is split into pieces, and each piece is called by timer. Because the timer interval is very small, the animation looks continuous. • The Pseudo Code is: var id = set. Interval(function() { /* show the current frame */ if (/* finished */) clear. Interval(id) }, 10) • The delay between frames is 10 ms here, which means 100 frames per second. • In most Java. Script frameworks it is 10 -15 ms by default. – Less delay makes the animation look smoother, but only if browser is fast enough to animate every step in time. – If the animation requires many calculations, CPU may get 100% load, and things become sluggish. • In this case the delay can be increased. • For example, 40 ms gives 25 frames per second, close to the cinema standard which is 24.
DOM • DOM Document Object Model (W 3 C standard) • The Document Object Model (DOM) is a programming API for HTML and XML documents. – It defines the logical structure of documents and the way a document is accessed and manipulated. • With the Document Object Model, programmers can create and build documents, navigate their structure, and add, modify, or delete elements and content. • As a W 3 C specification, one important objective for the Document Object Model is to provide a standard programming interface that can be used in a wide variety of environments and applications. • The Document Object Model can be used with any programming language. • The object model itself closely resembles the structure of the documents it models. • For instance, consider this table, taken from an HTML document:
DOM <TABLE> <ROWS> <TR> <TD>SHADY Grove</TD> <TD>AEOLIAN</TD> </TR> <TD>OVER the River, Charlie</TD> <TD>DORIAN</TD> </TR> </ROWS> </TABLE>
DOM • The Document Object Model represents this table in the figure beside. Note: "The W 3 C Document Object Model (DOM) is a platform and languageneutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. "
DOM • However, the Document Object Model does not specify that documents be implemented as – a tree or a grove , nor does it specify how the relationships among objects be implemented in any way. • In other words, the object model specifies – the logical model for the programming interface, and this logical model may be implemented in any way that a particular implementation finds convenient.
HTML DOM • With the HTML DOM, Java. Script can access and change all the elements of an HTML document. • The HTML DOM (Document Object Model) • When a web page is loaded, the browser creates a Document Object Model of the page. • The HTML DOM model is constructed as a tree of Objects as shown in figure beside.
HTML DOM • With the object model, Java. Script gets all the power it needs to create dynamic HTML: Java. Script can change all the HTML elements in the page Java. Script can change all the HTML attributes in the page Java. Script can change all the CSS styles in the page Java. Script can remove existing HTML elements and attributes – Java. Script can add new HTML elements and attributes – Java. Script can react to all existing HTML events in the page – Java. Script can create new HTML events in the page – –
Java script – HTML DOM Methods • HTML DOM methods are actions you can perform (on HTML Elements). • HTML DOM properties are values (of HTML Elements) that you can set or change. • The HTML DOM can be accessed with Java. Script (and with other programming languages). • In the DOM, all HTML elements are defined as objects. • The programming interface is the properties and methods of each object. – A property is a value that you can get or set (like changing the content of an HTML element). – A method is an action you can do (like add or deleting an HTML element).
Java script – HTML DOM Methods • The following example changes the content (the inner. HTML) of the <p> element with id="demo": <html> <body> <h 1>My First Page</h 1> <p id="demo"></p> <script> document. get. Element. By. Id("demo"). inner. HTML = "Hello World!"; </script> </body> </html> • • • In the example above, get. Element. By. Id is a method, while inner. HTML is a property. The most common way to access an HTML element is to use the id of the element. The easiest way to get the content of an element is by using the inner. HTML property.
JAVA SCRIPT OBJECTS
JAVASCRIPT - OBJECTS • In Java. Script, almost "everything" is an object. – – – – – Booleans can be objects (if defined with the new keyword) Numbers can be objects (if defined with the new keyword) Strings can be objects (if defined with the new keyword) Dates are always objects Maths are always objects Regular expressions are always objects Arrays are always objects Functions are always objects Objects are always objects All Java. Script values, except primitives, are objects. • Java. Script Primitives: – A primitive value is a value that has no properties or methods. – A primitive data type is data that has a primitive value.
JAVASCRIPT - OBJECTS • Java. Script defines 5 types of primitive data types: – – – • • string number Boolean null undefined Primitive values are immutable (they are hardcoded and therefore cannot be changed). Example: – if x = 3. 14, you can change the value of x. But you cannot change the value of 3. 14. Value Type Comment "Hello" string "Hello" is always "Hello" 3. 14 number 3. 14 is always 3. 14 true Boolean true is always true false Boolean false is always false null (object) null is always null undefined is always undefined
JAVASCRIPT - OBJECTS • Objects are Variables Containing Variables – Java. Script variables can contain single values: • Example: var person = "John Doe"; – Objects are variables too. But objects can contain many values. – The values are written as name : value pairs (name and value separated by a colon). • Example: var person = {first. Name: "John", last. Name: "Doe", age: 50, eye. Color: "blue"}; – A Java. Script object is a collection of named values.
JAVASCRIPT - OBJECTS • Creating a Java. Script Object: – With Java. Script, you can define and create your own objects. – There are different ways to create new objects: • Define and create a single object, using an object literal. • Define and create a single object, with the keyword new. • Define an object constructor, and then create objects of the constructed type.
JAVASCRIPT - OBJECTS • Using an Object Literal This is the easiest way to create a Java. Script Object. Using an object literal, you both define and create an object in one statement. An object literal is a list of name: value pairs (like age: 50) inside curly braces {}. The following example creates a new Java. Script object with four properties: Example var person = {first. Name: "John", last. Name: "Doe", age: 50, eye. Color: "blue"}; – Spaces and line breaks are not important. An object definition can span multiple lines: – Example var person = { first. Name: "John", last. Name: "Doe", age: 50, eye. Color: "blue" }; – – –
JAVASCRIPT - OBJECTS • Using the Java. Script with Keyword new: – The following example also creates a new Java. Script object with four properties: – Example var person = new Object(); person. first. Name = "John"; person. last. Name = "Doe"; person. age = 50; person. eye. Color = "blue"; • Using an Object Constructor: – The examples above are limited in many situations. They only create a single object. – Sometimes we like to have an "object type" that can be used to create many objects of one type. – The standard way to create an "object type" is to use an object constructor function is as follows:
JAVASCRIPT - OBJECTS • Example – function person(first, last, age, eye) { this. first. Name = first; this. last. Name = last; this. age = age; this. eye. Color = eye; } var my. Father = new person("John", "Doe", 50, "blue"); var my. Mother = new person("Sally", "Rally", 48, "green"); • The above function (person) is an object constructor. • Once you have an object constructor, you can create new objects of the same type: • var my. Father = new person("John", "Doe", 50, "blue"); var my. Mother = new person("Sally", "Rally", 48, "green");
JAVASCRIPT - OBJECTS • The this Keyword – In Java. Script, the thing called this, is the object that "owns" the Java. Script code. – The value of this, when used in a function, is the object that "owns" the function. – The value of this, when used in an object, is the object itself. – The this keyword in an object constructor does not have a value. It is only a substitute for the new object. – The value of this will become the new object when the constructor is used to create an object. Note: - this is not a variable. It is a keyword. You cannot change the value of this.
JAVASCRIPT - OBJECTS • Built-in Java. Script Constructors – Java. Script has built-in constructors for native objects: • Syntax: – var x 1 = new Object(); // A new Object object var x 2 = new String(); // A new String object var x 3 = new Number(); // A new Number object var x 4 = new Boolean(); // A new Boolean object var x 5 = new Array(); // A new Array object var x 6 = new Reg. Exp(); // A new Reg. Exp object var x 7 = new Function(); // A new Function object var x 8 = new Date(); // A new Date object – The Math() object is not in the list. Math is a global object. The new keyword cannot be used on Math.
JAVASCRIPT - OBJECTS • Example var x 1 = {}; // new object var x 2 = ""; // new primitive string var x 3 = 0; // new primitive number var x 4 = false; // new primitive boolean var x 5 = []; // new array object var x 6 = /()/ // new regexp object var x 7 = function(){}; // new function object • Java. Script Objects are Mutable Objects are mutable: They are addressed by reference, not by value. If person is an object, the following statement will not create a copy of person: var x = person; // This will not create a copy of person. The object x is not a copy of person. It is person. Both x and person are the same object. – Any changes to x will also change person, because x and person are the same object. – – • Note: Java. Script variables are not mutable. Only Java. Script objects.
JAVASCRIPT - OBJECTS • Java. Script Object Properties: – The named values, in Java. Script objects, are called properties. – Properties are the most important part of any Java. Script object. – Java. Script Properties: • Properties are the values associated with a Java. Script object. • A Java. Script object is a collection of unordered properties. • Properties can usually be changed, added, and deleted, but some are read only.
JAVASCRIPT - OBJECTS • Accessing Java. Script Properties – The syntax for accessing the property of an object is: object. Name. property // person. age or object. Name["property"] // person["age"] or object. Name[expression] // x = "age"; person[x] • The expression must evaluate to a property name. • Adding New Properties – You can add new properties to an existing object by simply giving it a value. – Assume that the person object already exists - you can then give it new properties: • Example person. nationality = "English"; • You cannot use reserved words for property (or method) names. Java. Script naming rules apply.
JAVASCRIPT - OBJECTS • Deleting Properties – The delete keyword deletes a property from an object: – Example • var person = {first. Name: "John", last. Name: "Doe", age: 50, eye. Color: "blue"}; delete person. age; // or delete person["age"]; – The delete keyword deletes both the value of the property and the property itself. – After deletion, the property cannot be used before it is added back again. – The delete operator is designed to be used on object properties. It has no effect on variables or functions. – The delete operator should not be used on predefined Java. Script object properties. It can crash your application.
JAVASCRIPT - OBJECTS • Java. Script Methods – Java. Script methods are the actions that can be performed on objects. – A Java. Script method is a property containing a function definition. – Methods are functions stored as object properties. Property Value Property first. Name John first. Name last. Name Doe last. Name age 50 age eye. Color blue eye. Color full. Name function() {return this. first. Name + " " + this. last. Name; } full. Name
JAVASCRIPT - OBJECTS • Accessing Object Methods – You create an object method with the following syntax: method. Name : function() { code lines } – You access an object method with the following syntax: object. Name. method. Name() – You will typically describe full. Name() as a method of the person object, and full. Name as a property. – The full. Name property will execute (as a function) when it is invoked with (). – This example accesses the full. Name() method of a person object: – Example name = person. full. Name();
JAVASCRIPT - OBJECTS • Accessing Object Methods – If you access the full. Name property, without (), it will return the function definition: – Example – name = person. full. Name; • Using Built-In Methods – This example uses the to. Upper. Case() method of the String object, to convert a text to uppercase: var message = "Hello world!"; var x = message. to. Upper. Case(); – The value of x, after execution of the code above will be: HELLO WORLD!
JAVASCRIPT - OBJECTS • Adding New Methods – Adding methods to an object is done inside the constructor function: – Example function person(first. Name, last. Name, age, eye. Color) { this. first. Name = first. Name; this. last. Name = last. Name; this. age = age; this. eye. Color = eye. Color; this. change. Name = function (name) { this. last. Name = name; }; } – The change. Name() function assigns the value of name to the person's last. Name property. – Example: my. Mother. change. Name("Doe"); • Java. Script knows which person you are talking about by "substituting" this with my. Mother.
WORKING WITH BROWSER AND DOCUMENT OBJECTS
Java. Script HTML DOM Document • The HTML DOM document object is the owner of all other objects in your web page. • The document object represents your web page. • If you want to access any element in an HTML page, you always start with accessing the document object. • Below are some examples of how you can use the document object to access and manipulate HTML. – – – Finding HTML Elements Changing HTML Elements Adding and Deleting Elements Adding Events Handlers Finding HTML Objects
FINDING HTML ELEMENTS & CHANGING HTML ELEMENTS
ADDING & DELETING ELEMENTS & ADDING EVENTS HANDLERS
Finding HTML Objects • The first HTML DOM Level 1 (1998), defined 11 HTML objects, object collections, and properties. These are still valid in HTML 5. • Later, in HTML DOM Level 3, more objects, collections, and properties were added.
Finding HTML Objects Property Description DOM document. anchors Returns all <a> elements that have a name attribute 1 document. applets Returns all <applet> elements (Deprecated in HTML 5) 1 document. base. URI Returns the absolute base URI of the document 3 document. body Returns the <body> element 1 document. cookie Returns the document's cookie 1 document. doctype Returns the document's doctype 3 document. Element Returns the <html> element 3 document. Mode Returns the mode used by the browser 3 document. URI Returns the URI of the document 3 document. domain Returns the domain name of the document server 1 document. dom. Config Obsolete. Returns the DOM configuration 3 document. embeds Returns all <embed> elements 3 document. forms Returns all <form> elements 1
Finding HTML Objects Property Description DOM document. head Returns the <head> element 3 document. images Returns all <img> elements 1 document. implementation Returns the DOM implementation 3 document. input. Encoding Returns the document's encoding (character set) 3 document. last. Modified Returns the date and time the document was updated 3 document. links Returns all <area> and <a> elements that have a href attribute 1 document. ready. State Returns the (loading) status of the document 3 document. referrer Returns the URI of the referrer (the linking document) 1 document. scripts Returns all <script> elements 3 document. strict. Error. Checking Returns if error checking is enforced 3 document. title Returns the <title> element 1 document. URL Returns the complete URL of the document 1
Java. Script HTML DOM Elements • Finding HTML Elements – Different ways to find HTML Elements: • • • Finding HTML elements by id Finding HTML elements by tag name Finding HTML elements by class name Finding HTML elements by CSS selectors Finding HTML elements by HTML object collections • Example: – variablename = document. get. Element. By. Id(“id");
Java. Script HTML DOM Elements – variablename = document. get. Elements. By. Tag. Name(“tagname"); <script> var x = document. get. Elements. By. Tag. Name("p"); document. get. Element. By. Id("demo"). inner. HTML = 'The first paragraph (index 0) is: ' + x[0]. inner. HTML; </script> – variablename = document. get. Elements. By. Class. Name(“classname"); <script> var x = document. get. Elements. By. Class. Name("intro"); document. get. Element. By. Id("demo"). inner. HTML = 'The first paragraph (index 0) with class="intro": ' + x[0]. inner. HTML; </script> – variablename = document. query. Selector. All(“elementname. class"); <script> var x = document. query. Selector. All("p. intro"); document. get. Element. By. Id("demo"). inner. HTML = 'The first paragraph (index 0) with class="intro": ' + x[0]. inner. HTML; </script>
Java. Script HTML DOM Elements <html> <body> <form id="frm 1" action="/action_page. php"> First name: <input type="text" name="fname" value="Donald"> Last name: <input type="text" name="lname" value="Duck"> <input type="submit" value="Submit"> </form> <p>Click "Try it" to display the value of each element in the form. </p> <button onclick="my. Function()">Try it</button> <p id="demo"></p> <script> function my. Function() { var x = document. forms["frm 1"]; var text = "“; var i; for (i = 0; i < x. length ; i++) { text += x. elements[i]. value + " "; } document. get. Element. By. Id("demo"). inner. HTML = text; } </script> </body> </html>
Java. Script HTML DOM Elements • Similarly the following HTML objects (and object collections) are also accessible: – – – – – document. anchors document. body document. Element document. embeds document. forms document. head document. images document. links document. scripts document. title
Java. Script HTML DOM - Changing HTML • Changing the HTML Output Stream – Java. Script can create dynamic HTML content. – In Java. Script, document. write() can be used to write directly to the HTML output stream: document. write(Date()); • Changing HTML Content – Syntax: document. get. Element. By. Id(id). inner. HTML = new HTML – Example: document. get. Element. By. Id("p 1"). inner. HTML = "New text!“;
Java. Script HTML DOM - Changing HTML • Changing the Value of an Attribute: – To change the value of an HTML attribute. – Syntax: document. get. Element. By. Id(id). attribute = new value – Example: <img id="my. Image" src="smiley. gif"> <script> document. get. Element. By. Id("my. Image"). src = "landscape. jpg"; </script>
Java. Script HTML DOM - Changing CSS • The HTML DOM allows Java. Script to change the style of HTML elements. • Changing HTML Style: – To change the style of an HTML element, use this syntax: document. get. Element. By. Id(id). style. property = new style – Example: 1) document. get. Element. By. Id("p 2"). style. color = "blue"; 2) <button type="button" onclick="document. get. Element. By. Id('id 1'). style. color = 'red'"> Click Me!</button>
Java. Script HTML DOM Animation • Create HTML animations using Java. Script. • To demonstrate how to create HTML animations with Java. Script, we will use a simple web page: <html> <body> <h 1>My First Java. Script Animation</h 1> <div id="animate">My animation will go here</div> </body> </html>
Java. Script HTML DOM Animation • Create an Animation Container – All animations should be relative to a container element. <div id ="container"> <div id ="animate">My animation will go here</div> • Style the Elements • The container element should be created with style = "position: relative“ or “position: absolute”.
Java. Script HTML DOM Animation • Example: <style> #container { width: 400 px; height: 400 px; position: relative; background: yellow; } #animate { width: 50 px; height: 50 px; position: absolute; background: red; } </style> <body> <h 1>My First Java. Script Animation</h 1> <div id="container"> <div id="animate"></div> </body>
Java. Script HTML DOM Animation • Animation Code: – Java. Script animations are done by programming gradual changes in an element's style. – The changes are called by a timer. When the timer interval is small, the animation looks continuous. – The basic code is: var id = set. Interval(frame, 5); function frame() { if (/* test for finished */) { clear. Interval(id); } else { /* code to change the element style */ } }
Java. Script HTML DOM Animation • Create the Animation Using Java. Script: Example: <html> <style> #container { width: 400 px; height: 400 px; position: relative; background: yellow; } #animate { width: 50 px; height: 50 px; position: absolute; background-color: red; } </style> <body> <p> <button onclick="my. Move()">Click Me</button> </p> <div id ="container"> <div id ="animate"></div> <script> function my. Move() { var elem = document. get. Element. By. Id("animate"); var pos = 0; var id = set. Interval(frame, 5); function frame() { if (pos == 350) { clear. Interval(id); } else { pos++; elem. style. top = pos + 'px‘; elem. style. left = pos + 'px‘; } } } </script> </body> </html>
JQUERY JQuery - Introduction, JQuery Selectors, Events, Methods to access HTML elements and attributes.
JQuery – Introduction • j. Query is a fast, small, and feature-rich Java. Script library. – It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. • Before you start studying j. Query, you should have a basic knowledge of: – HTML – CSS – Java. Script
What is j. Query? • j. Query is a lightweight, "write less, do more", Java. Script library. • The purpose of j. Query is to make it much easier to use Java. Script on your website. • j. Query takes a lot of common tasks that require many lines of Java. Script code to accomplish, and wraps them into methods that you can call with a single line of code. • j. Query also simplifies a lot of the complicated things from Java. Script, like AJAX calls and DOM manipulation. • The j. Query library contains the following features: – – – HTML/DOM manipulation CSS manipulation HTML event methods Effects and animations AJAX Utilities
Why j. Query? • There are lots of other Java. Script frameworks out there, but j. Query seems to be the most popular, and also the most extendable. • Many of the biggest companies on the Web use j. Query, such as: – – Google Microsoft IBM Netflix • One of the reason why j. Query? – The j. Query team knows all about cross-browser issues, and they have written this knowledge into the j. Query library. – j. Query will run exactly the same in all major browsers, including Internet Explorer 6!
j. Query Adding j. Query to Your Web Pages – There are several ways to start using j. Query on your web site. You can: • Download the j. Query library from j. Query. com • Include j. Query from a CDN (Content Delivery Network), like Google Downloading j. Query • There are two versions of j. Query 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) • The j. Query library is a single Java. Script file, and you reference it with the HTML <script> tag (notice that the <script> tag should be inside the <head> section): <head> <script src="jquery-3. 1. 1. min. js"></script> </head> • Note: Place the downloaded file in the same directory as the pages where you wish to use it.
j. Query • With j. Query you select (query) HTML elements and perform "actions" on them. • Syntax: – The j. Query syntax is tailor-made for selecting HTML elements and performing some action on the element(s). – Basic syntax is: $(selector). action() • A $ sign to define/access j. Query • A (selector) to "query (or find)" HTML elements • A j. Query action() to be performed on the element(s)
j. Query • Examples: – – • • • $(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". Note: j. Query uses CSS syntax to select elements. The Document Ready Event You might have noticed that all j. Query methods in our examples, are inside a document ready event: $(document). ready(function(){ // j. Query methods go here… }); • • This is to prevent any j. Query 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 Java. Script code before the body of your document, in the head section.
j. Query • The j. Query team has also created an even shorter method for the document ready event: $(function(){ // j. Query methods go here… });
j. Query Selectors • j. Query selectors are one of the most important parts of the j. Query library. • j. Query selectors allow you to select and manipulate HTML element(s). • j. Query selectors are used to "find" (or select) HTML elements based on their name, 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 selectors in j. Query start with the dollar sign and parentheses: $().
j. Query Selectors • The element Selector – The j. Query element selector selects elements based on the element name. – You can select all <p> elements on a page like this: • Example $("p") – When a user clicks on a button, all <p> elements will be hidden: • Example $(document). ready(function(){ $("button"). click(function(){ $("p"). hide(); });
j. Query Selectors • The #id Selector – The j. Query #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 HTML element: • Example $("#test") – When a user clicks on a button, the element with id="test" will be hidden: • Example $(document). ready(function(){ $("button"). click(function(){ $("#test"). hide(); });
j. Query Selectors • The. class Selector – The j. Query 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") • Example – When a user clicks on a button, the elements with class="test" will be hidden: • Example $(document). ready(function(){ $("button"). click(function(){ $(". test"). hide(); });
Some More Examples of j. Query Selectors Syntax Description $("*") Selects all elements $(this) Selects the current HTML element $("p. intro") Selects all <p> elements with class="intro"
j. Query • Functions In a Separate File – If your website contains a lot of pages, and you want your j. Query functions to be easy to maintain, you can put your j. Query functions in a separate. js file. • Example: <head> <script src="my_jquery_functions. js"></script> </head>
j. Query Events • j. Query is custom-made to respond to events in an HTML page. What are Events? – All the different visitor's actions that a web page can respond to are called events. – An event represents the precise moment when something happens. • Examples: – moving a mouse over an element, selecting a radio button, clicking on an element • The term "fires/fired" is often used with events. Example: "The keypress event is fired, the moment you press a key". • Here are some common DOM events: Mouse Events Keyboard Events Form Events Document/Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload
j. Query Events • j. Query Syntax For Event – In j. Query, most DOM events have an equivalent j. Query method. – To assign a click event to all paragraphs on a page, you can do this: $("p"). click(); • The next step is to define what should happen when the event fires. You must pass a function to the event: $("p"). click(function(){ // action goes here!! });
j. Query Events • Commonly Used j. Query Event Methods – $(document). ready() – The $(document). ready() method allows us to execute a function when the document is fully loaded. – dblclick() – The dblclick() method attaches an event handler function to an HTML element. – mouseenter() – The mouseenter() method attaches an event handler function to an HTML element. – mouseleave() – The mouseleave() method attaches an event handler function to an HTML element. – mousedown() – The mousedown() method attaches an event handler function to an HTML element. – mouseup() – The mouseup() method attaches an event handler function to an HTML element. – hover() – The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods. – focus() – The focus() method attaches an event handler function to an HTML form field. – blur() – The blur() method attaches an event handler function to an HTML form field. – The on() method attaches one or more event handlers for the selected elements. – click() • The click() method attaches an event handler function to an HTML element. • The function is executed when the user clicks on the HTML element.
j. Query Events • Example • $("p"). on("click", function(){ $(this). hide(); }); • The following example says: When a click event fires on a <p> element; hide the current <p> element: • Example $("p"). click(function(){ $(this). hide(); });
j. Query Events • Attach multiple event handlers to a <p> element: • Example $("p"). on({ mouseenter: function(){ $(this). css("background-color", "lightgray"); }, mouseleave: function(){ $(this). css("background-color", "lightblue"); }, click: function(){ $(this). css("background-color", "yellow"); } });
Methods to access HTML elements and attributes • The following table lists all the methods used to manipulate the HTML and CSS. Method add. Class() after() append. To() attr() before() clone() css() detach() empty() has. Class() height() Description Adds one or more class names to selected elements Inserts content after selected elements Inserts content at the end of selected elements Inserts HTML elements at the end of selected elements Sets or returns attributes/values of selected elements Inserts content before selected elements Makes a copy of selected elements Sets or returns one or more style properties for selected elements Removes selected elements (keeps data and events) Removes all child nodes and content from selected elements Checks if any of the selected elements have a specified class name Sets or returns the height of selected elements
Method html() inner. Height() inner. Width() insert. After() insert. Before() offset. Parent() outer. Height() outer. Width() position() prepend. To() Description Sets or returns the content of selected elements Returns the height of an element (includes padding, but not border) Returns the width of an element (includes padding, but not border) Inserts HTML elements after selected elements Inserts HTML elements before selected elements Sets or returns the offset coordinates for selected elements (relative to the document) Returns the first positioned parent element Returns the height of an element (includes padding and border) Returns the width of an element (includes padding and border) Returns the position (relative to the parent element) of an element Inserts content at the beginning of selected elements Inserts HTML elements at the beginning of selected elements
Method prop() remove. Attr() remove. Class() remove. Prop() replace. All() replace. With() scroll. Left() scroll. Top() text() toggle. Class() unwrap() val() width() wrap. All() wrap. Inner() Description Sets or returns properties/values of selected elements Removes the selected elements (including data and events) Removes one or more attributes from selected elements Removes one or more classes from selected elements Removes a property set by the prop() method Replaces selected elements with new HTML elements Replaces selected elements with new content Sets or returns the horizontal scrollbar position of selected elements Sets or returns the vertical scrollbar position of selected elements Sets or returns the text content of selected elements Toggles between adding/removing one or more classes from selected elements Removes the parent element of the selected elements Sets or returns the value attribute of the selected elements (for form elements) Sets or returns the width of selected elements Wraps HTML element(s) around each selected element Wraps HTML element(s) around all selected elements Wraps HTML element(s) around the content of each selected element
If you think you can you can poem
If you can imagine it you can achieve it
If you don't measure it you can't manage it
If you can't measure it you can't control it
Can't manage what you don't measure
Vermögensstruktur kennzahl
Manfaat animasi dalam multimedia
Impulse-style scroll animations
Pcr animations
Make gif with google photos
Loffe animations
Impact motion tween
You can tell harris about it just ____(easily) as i can
You can tell harris about it just ____(easily) as i can
You can tell harris about it just ____(easily) as i can
Nothing is impossible if you believe
You can't turn right
So you think you can argue
You can always substantially change how intelligent you are
Standardasation
So you think you can argue
Go straight ahead and turn left
You can be just the one you wanna be
I can hear you quite well. you not shout
So you think you can argue
Check if you can remember what tim tells you
Script de java
What is java scripts
Java script wikipedia
"java script"
"java script"
"java script"
Java script course
Java script
"java script"
Khan academy java script
Java script examples
Inside which html
Java script email
Java script ide
"java script"
"java script"
Java script classes
You say you love rain
Eat meals that are nutritious agree or disagree
Tell me what you eat and i shall tell you what you are
I will follow you follow you wherever you may go
If you give a mouse a cookie script
O romeo romeo
Oh romeo my romeo
Can can body percussion
The arrangement of elements of curriculum is known as
He can speak
Look at the pictures and complete with can or can't
Were going on a bear hunt we're gonna catch a big one
Talk en futuro
Any fool can write code that a computer can understand
Metaphor in sonnet 18
Modal verbs inability
Import java.util.scanner;
Import java.util.*
Import java swing
Import.java.util.scanner
Import java.io.*
Java gcd
Java import java.util.*
Import java.io.*
Import java.util
Java import java.io.*
Perbedaan awt dan swing
Import java.awt.event
Java interpreter
What is rmi and ejb in java
Whats a theme in a book
Gran can you rap poem pdf
What happen to light when it hits an object
What can be seen in the picture
