طراحی وب مقدماتی

1. طراحی وب مقدماتی JS & jQuery

2. JS output <script>document.write("<p>My First JavaScript</p>");</script> <script> alert(“Hi…");</script>

3. JS variables var x=5;var y=6;var z=x+y; var pi=3.14;var person="John Doe";var answer='Yes I am!';

4. JS arrays • varmycars = new Array();mycars[0] = "Saab";mycars[1] = "Volvo";mycars[2] = "BMW"; • varmyCars=new Array("Saab","Volvo","BMW"); • varmyCars=["Saab","Volvo","BMW"];

5. jQuery selectors • The element Selector • The #id Selector • The .class Selector • $("*") • $(this) • $("tr:even") • $("tr:odd") • $("[value]")

6. jQuery events

7. jQuery effects • jQuery Hide/Show • jQuery Fade • jQuery Slide • jQuery Animate • jQuery stop() $("#hide").click(function(){  $("p").hide();});

8. jQuery fade • fadeIn() • fadeOut() • fadeToggle() • fadeTo() $("button").click(function(){  $("#div1").fadeIn();  $("#div2").fadeIn("slow");  $("#div3").fadeIn(3000);});

9. jQuery slide • slideDown() • slideUp() • slideToggle() $("#flip").click(function(){  $("#panel").slideToggle();});

10. jQuery animate $("button").click(function(){var div=$("div");div.animate({height:'300px',opacity:'0.4'},"slow");div.animate({width:'300px',opacity:'0.8'},"slow");div.animate({height:'100px',opacity:'0.4'},"slow");div.animate({width:'100px',opacity:'0.8'},"slow");}); 

11. jQuery HTML • jQuery Get • jQuery Set • jQuery Add • jQuery Remove • jQuery CSS Classes • jQuerycss()

12. jQuery Get • text() - Sets or returns the text content of selected elements • html() - Sets or returns the content of selected elements (including HTML markup) • val() - Sets or returns the value of form fields

13. jQuery Set • text() - Sets or returns the text content of selected elements • html() - Sets or returns the content of selected elements (including HTML markup) • val() - Sets or returns the value of form fields

14. jQuery add • append() - Inserts content at the end of the selected elements • prepend() - Inserts content at the beginning of the selected elements • after() - Inserts content after the selected elements • before() - Inserts content before the selected elements

15. jQuery remove • remove() - Removes the selected element (and its child elements) • empty() - Removes the child elements from the selected element

16. jQuerycss class • addClass() - Adds one or more classes to the selected elements • removeClass() - Removes one or more classes from the selected elements • toggleClass() - Toggles between adding/removing classes from the selected elements • css() - Sets or returns the style attribute

17. jQuerycss • $("p").css("background-color"); • $("p").css("background-color","yellow");

18. jQueryajax $.ajax({ type: "POST", url: "some.php", data: { name: "John", location: "Boston" } }).done(function( msg ) { alert( "Data Saved: " + msg ); });

19. jQuery post • $.post("test.php", { name: "John", time: "2pm" }) .done(function(data) { alert("Data Loaded: " + data); });

20. jQuery get • $.get("test.php", { name: "John", time: "2pm" } ); • $.get("test.php", function(data) { alert("Data Loaded: " + data); });

21. گروه مهندسی فناوری اطلاعات وب آرا www.WebAraGroup.ir