Embed Size (px)
Citation preview
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 /><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 the innerHTML of 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 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"></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 the coordinates of the cursor?
<html><head><script type="text/javascript">
function show_coords(event) {x=event.clientXy=event.clientYalert("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
What is jQuery?
یک کتابخانه از توابعJavaScriptخصوصیات
انتخاب و دستکاریHTML دستکاریCSS متحرک سازیJavaScriptپیمایش و اصالحHTML DOM AJAX
<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>
Example 1: A Closer Look
view page
How jQuery Works
jQuery عناصر HTML را انتخاب می کند و روی آنها عمل انجام می دهد.
$(selector).action() مشخص کننده ی $عالمت jQuery.است از(selector ) برای پیدا کردن عناصرHTML
استفاده می شود. سپس یکaction )( روی عناصر انتخاب شده
انجام می شود.
jQuery Selectors
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
jQuery Events
Manipulating CSS
For a full jQuery CSS reference, please see jQuery CSS Methods ReferenceFor more on the css function, see http://api.jquery.com/css/
Example 4, 5
22
<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
23
<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
24
<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
jQuery Effects
Example 8
26
<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
27
<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
29
<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
