Download presentation
Presentation is loading. Please wait.
1
Other Java Related Technologies
2
HTML DOM
3
HTML DOM HTML DOM مجموعه ای استاندارد از اشیاء را برای HTML تعریف می کند و یک راه استاندارد برای دسترسی و دستکاری سندهای HTML است. DOM به تمام عناصر HTML به همراه متن داخل آنها و خاصیت های آنها دسترسی دارد. می توان محتوی را حذف کرد یا تغییر داد و عناصر جدیدی به سند اضافه کرد. می توان از DOM به همراه هر زبان برنامه نویسی مثل Java، JavaScript و VBScript استفاده کرد.
4
اشیاء HTML DOM Anchor object Document object Event object
Form and Form Input object Frame, Frameset, and IFrame objects Image object Location object Navigator object Option and Select objects Screen object Table, TableHeader, TableRow, TableData objects Window object
5
Document Object: Write text to the output
<html> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html>
6
Document Object: Use getElementById()
<html> <head> <script type="text/javascript"> function getElement() { var x=document.getElementById("myHeader") alert("I am a " + x.tagName + " element") } </script> </head> <body> <h1 id="myHeader" onclick="getElement()” >Click to see what element I am!</h1> </body> </html> view page
7
Document Object: Use getElementsByName()
<html> <head> <script type="text/javascript"> function getElements() { var x=document.getElementsByName("myInput") alert(x.length + " elements!") } </script> </head> <body> <input name="myInput" type="text" size="20"><br /> <br /> <input type="button" onclick="getElements()" value="How many elements named 'myInput'?"> </body> </html> view page
8
Document Object: Return the innerHTML of the first anchor in a document
<body> <a name="first">First anchor</a><br /> <a name="second">Second anchor</a><br /> <a name="third">Third anchor</a><br /> <br /> InnerHTML of the first anchor in this document: <script type="text/javascript"> document.write(document.anchors[0].innerHTML) </script> </body> </html> view page
9
Document Object: Access an item in a collection
<html> <body> <form id="Form1" name="Form1"> Your name: <input type="text"> </form> <form id="Form2" name="Form2"> Your car: <input type="text"> <p>To access an item in a collection you can either use the number or the name of the item:</p> <script type="text/javascript"> document.write("<p>The first form's name is: " + document.forms[0].name + "</p>") document.write("<p>The first form's name is: " + document.getElementById("Form1").name + "</p>") </script> </body> </html> view page
10
Event Object: What are the coordinates of the cursor?
<html> <head> <script type="text/javascript"> function show_coords(event) { x=event.clientX y=event.clientY alert("X coords: " + x + ", Y coords: " + y) } </script> </head> <body onmousedown="show_coords(event)"> <p>Click in the document. An alert box will alert the x and y coordinates of the cursor.</p> </body> </html> view page
11
Event Object: What is the unicode of the key pressed?
<html> <head> <script type="text/javascript"> function whichButton(event) { alert(event.keyCode) } </script> </head> <body onkeyup="whichButton(event)"> <p><b>Note:</b> Make sure the right frame has focus when trying this example!</p> <p>Press a key on your keyboard. An alert box will alert the unicode of the key pressed.</p> </body> </html> view page
12
Event Object: Which event type occurred?
<html> <head> <script type="text/javascript"> function whichType(event) { alert(event.type) } </script> </head> <body onmousedown="whichType(event)"> <p> Click on the document. An alert box will alert which type of event occurred. </p> </body> </html> view page
13
JQuery
14
What is jQuery? یک کتابخانه از توابع JavaScript خصوصیات
انتخاب و دستکاری HTML دستکاری CSS متحرک سازی JavaScript پیمایش و اصلاحHTML DOM AJAX
15
Example 1: A Closer Look <html>
<head> <title>Fun with jQuery</title> </head> <body> <h2>Hello, jQuery!</h2> <button id='btnOuch'>Say Ouch</button> <script src="jquery.js"></script> <script> $("#btnOuch").click(function(){ alert("Ouch! That hurt."); }); </script> </body> </html> view page
16
How jQuery Works jQuery عناصر HTML را انتخاب می کند و روی آنها عمل انجام می دهد. $(selector).action() علامت $ مشخص کننده ی jQuery است. از (selector) برای پیدا کردن عناصر HTML استفاده می شود. سپس یکaction() روی عناصر انتخاب شده انجام می شود.
17
jQuery Selectors Syntax Description $(this) Current HTML element
All <p> elements $("p.intro") All <p> elements with class="intro" $(".intro") All elements with class="intro" $("#intro") The first element with id="intro" $("ul li:first") The first <li> element of each <ul> $("[href$='.jpg']") All elements with an href attribute that ends with ".jpg" $("div#intro .head") All elements with class="head" inside a <div> element with id="intro"
18
Example 2 <html> <head> <title>Fun with jQuery</title> <script src="jquery.js"></script> </head> <body> <h2>Hello, jQuery!</h2> <script> $("h2").click(function(){ $(this).hide("slow"); }); </script> <p>hello world</p> <h2>Second header</h2> </body> </html> view page
19
Example 3 <html> <head>
<title>Fun with jQuery</title> <script src="jquery.js"></script> <style type="text/css“> p.blue {color:blue} </style> </head> <body> <h2>Hello, jQuery!</h2> <button id='btnHideBlue'>Hide Blue</button> <script> $("#btnHideBlue").click(function(){ $("p.blue").hide("slow"); }); </script> <p class="blue">First blue paragraph</p> <p>A simple paragraph</p> <p class="blue">Second blue paragraph</p> </body> </html> view page
20
jQuery Events Event Method Description $(selector).click(function)
Invokes a function when the selected elements are clicked $(selector).dblclick(function) Invokes a function when the selected elements are double-clicked $(selector).focus(function) Invokes a function when the selected elements receive the focus $(selector).mouseover(function) Invokes a function when the mouse is over the selected elements $(selector).keypress(function) Invokes a function when a key is pressed inside the selected elements
21
Manipulating CSS CSS Properties Description
$(selector).css(propertyName) Get the style property value of the first selected element $(selector).css(propertyName,value) Set the value of one style property for selected elements $(selector).css({properties}) Set multiple style properties for selected elements $(selector).addClass(class) Apply style class to the selected elements For a full jQuery CSS reference, please see jQuery CSS Methods Reference For more on the css function, see
22
Example 4, 5 <html> <head><title>Fun with jQuery</title> <script src="jquery.js"></script> <style type="text/css"> .blue {color:blue} .red {color:red} </style> </head> <body> <h2>Hello, jQuery!</h2> <button id='btnColor'>change color</button> <script> $("#btnColor").click(function(){ $("#lemon").addClass("blue"); }); </script> <p id='lemon' >Lemon drops biscuit chocolate ...</p> $("# lemon ").mouseover (function(){ $("#lemon").append(" Cookie! "); </body> </html> view page
23
Example 6 <html> <head><title>Fun with jQuery</title> <script src="jquery.js"></script> <style type="text/css"> .blue {color:blue} .red {color:red} </style> </head> <body> <h2>Hello, jQuery!</h2> <button id= btnColorCheck '>check color</button> <script> $("#btnColorCheck").click(function(){alert($("#lemon").css("color"));}); </script> <p id='lemon' class= ' red ' >Lemon drops biscuit chocolate ...</p> </body> </html> view page
24
Example 7 <html> <head><title>Fun with jQuery</title> <script src="jquery.js"></script> <style type="text/css"> .blue {color:blue} .red {color:red} </style> </head> <body> <h2>Hello, jQuery!</h2> <p id='lemon' class= ' red ' >Lemon drops biscuit chocolate ...</p> <script> $("p").dblclick(function(){ $(this).css("background-color", "yellow"); }); </script> </body> </html> view page
25
jQuery Effects Function Description $(selector).hide()
Hide selected elements $(selector).show() Show selected elements $(selector).toggle() Toggle (between hide and show) selected elements $(selector).slideDown() Slide-down (show) selected elements $(selector).slideUp() Slide-up (hide) selected elements $(selector).slideToggle() Toggle slide-up and slide-down of selected elements $(selector).fadeIn() Fade in selected elements $(selector).fadeOut() Fade out selected elements $(selector).fadeTo() Fade out selected elements to a given opacity $(selector).fadeToggle() Toggle between fade in and fade out
26
Example 8 <html> <head><title>Fun with jQuery</title> <script src="jquery.js"></script> <style type="text/css"> .blue {color:blue} .red {color:red} </style> </head> <body> <h2>Hello, jQuery!</h2> <button id= ‘btnToggle ‘>Toggle</button> <script> $("#btnToggle").click(function(){ $("#lemon").slideToggle("slow"); }); </script> <p id='lemon' class= ' red ' >Lemon drops biscuit chocolate ...</p> </body> </html> view page
27
Example 9 <html> <head><title>Fun with jQuery</title> <script src="jquery.js"></script> <style type="text/css"> .blue {color:blue} .red {color:red} </style> </head> <body> <h2>Hello, jQuery!</h2> <button id= ' btnFade‘>Fade</button> <script> $("#btnFade").click(function(){ $("#lemon").fadeTo("slow", 0.5); }); </script> <p id='lemon' class= ' red ' >Lemon drops biscuit chocolate ...</p> </body> </html> view page
28
Manipulating HTML Function Description $(selector).html(content)
Changes the (inner) HTML of selected elements $(selector).append(content) Appends content to the (inner) HTML of selected elements $(selector).after(content) Adds HTML after selected elements For a full jQuery HTML reference, please see jQuery HTML Methods Reference
29
Example 10 <html> <head><title>Fun with jQuery</title> <script src="jquery.js"></script> <style type="text/css"> .blue {color:blue} .red {color:red} </style> </head> <body> <h2>Hello, jQuery!</h2> <button id= ‘btnReplace ' >Replace</button> <script> $("#btnReplace").click(function(){ $("#lemon").html("Lollipop soufflé ice ream tootsie roll donut..."); }); </script> <p id='lemon' class= ' red ' >Lemon drops biscuit chocolate ...</p> </body> </html> view page
Similar presentations
