290 likes | 310 Vues
Other Java Related Technologies. HTML DOM. HTML DOM. HTML DOM مجموعه ای استاندارد از اشیاء را برای HTML تعریف می کند و یک راه استاندارد برای دسترسی و دستکاری سندهای HTML است. DOM به تمام عناصر HTML به همراه متن داخل آنها و خاصیت های آنها دسترسی دارد.
E N D
HTML DOM • HTML DOM مجموعه ای استاندارد از اشیاء را برای HTML تعریف می کند و یک راه استاندارد برای دسترسی و دستکاری سندهای HTML است. • DOM به تمام عناصر HTML به همراه متن داخل آنها و خاصیت های آنها دسترسی دارد. • می توان محتوی را حذف کرد یا تغییر داد و عناصر جدیدی به سند اضافه کرد. • می توان از DOM به همراه هر زبان برنامه نویسی مثل Java، JavaScript و VBScript استفاده کرد.
اشیاء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
Document Object: Write text totheoutput <html> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html>
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
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
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
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
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
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
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
What is jQuery? • یک کتابخانه از توابع JavaScript • خصوصیات • انتخاب و دستکاری HTML • دستکاری CSS • متحرک سازی JavaScript • پیمایش و اصلاحHTML DOM • AJAX
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
How jQuery Works • jQuery عناصر HTML را انتخاب می کند و روی آنها عمل انجام می دهد. • $(selector).action() • علامت $ مشخص کننده ی jQuery است. • از (selector) برای پیدا کردن عناصر HTML استفاده می شود. • سپس یکaction() روی عناصر انتخاب شده انجام می شود.
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
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
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/
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
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
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
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
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
Manipulating HTML For a full jQuery HTML reference, please see jQuery HTML Methods Reference
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