ramone
Uploaded by
29 SLIDES
321 VUES
290LIKES

Other Java Related Technologies

DESCRIPTION

Explore HTML DOM to manipulate web documents effectively. Learn how to access, modify, and add elements using DOM with JavaScript, Java, or VBScript.

1 / 29

Télécharger la présentation

Other Java Related Technologies

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 totheoutput <html> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html>

  6. Document Object: UsegetElementById() <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: UsegetElementsByName() <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 /> <input name="myInput" type="text" size="20"><br /> <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 theinnerHTMLof the first anchor in a document <html> <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 anitem in acollection <html> <body> <form id="Form1" name="Form1"> Your name: <input type="text"> </form> <form id="Form2" name="Form2"> Your car: <input type="text"> </form> <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 thecoordinates 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 thecursor.</p> </body> </html> view page

  11. Event Object: What is theunicodeof 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 keypressed.</p> </body> </html> view page

  12. Event Object: Which eventtypeoccurred? <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

  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

  21. Manipulating CSS For a full jQuery CSS reference, please see jQuery CSS Methods Reference For more on the css function, see http://api.jquery.com/css/

  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> <script> $("# lemon ").mouseover (function(){ $("#lemon").append(" Cookie! "); }); </script> </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

  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 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

More Related