J query
-
Upload
chalermpon-areepong -
Category
Documents
-
view
1.168 -
download
14
Transcript of J query
![Page 1: J query](https://reader035.fdocuments.us/reader035/viewer/2022062418/5558bdf5d8b42a7e298b51e6/html5/thumbnails/1.jpg)
Introduce jQuery
By Bank2u
![Page 2: J query](https://reader035.fdocuments.us/reader035/viewer/2022062418/5558bdf5d8b42a7e298b51e6/html5/thumbnails/2.jpg)
jQuery
• Cross-browser javascript library• Free & Opensource• First released Jan 06 @Barcamp by John Resig• Last stable version 1.4.2
![Page 3: J query](https://reader035.fdocuments.us/reader035/viewer/2022062418/5558bdf5d8b42a7e298b51e6/html5/thumbnails/3.jpg)
Why jQuery ?• Cross-browser compatibility• Fast & Small • Plug-in• Learning curve & Documentation• Intellisense in VS2008-2010• Microsoft [Ajax Lib & MVC]
![Page 4: J query](https://reader035.fdocuments.us/reader035/viewer/2022062418/5558bdf5d8b42a7e298b51e6/html5/thumbnails/4.jpg)
Why jQuery ?
![Page 5: J query](https://reader035.fdocuments.us/reader035/viewer/2022062418/5558bdf5d8b42a7e298b51e6/html5/thumbnails/5.jpg)
Who’s using jQuery
• Microsoft• Google• Mozilla• digg• Wordpress & Drupal• HP - IBM - Intel.• Ruby on Rails
![Page 6: J query](https://reader035.fdocuments.us/reader035/viewer/2022062418/5558bdf5d8b42a7e298b51e6/html5/thumbnails/6.jpg)
Getting Start
• Download jQuery at jquery.com– <script type="text/javascript" src="/js/jQuery. js"></script>
• Microsoft CDN or Google CDN– <script src="http://ajax.microsoft.com/ajax/jquery/jquery-
1.4.2.js" type="text/javascript"></script>– <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
![Page 7: J query](https://reader035.fdocuments.us/reader035/viewer/2022062418/5558bdf5d8b42a7e298b51e6/html5/thumbnails/7.jpg)
Hello world jQuery
• Document ready
$(document).ready(function () { alert("Hello world jQuery");});
// Short cut$(function () { alert("Hello world jQuery");});
![Page 8: J query](https://reader035.fdocuments.us/reader035/viewer/2022062418/5558bdf5d8b42a7e298b51e6/html5/thumbnails/8.jpg)
jQuery Philosophy
Find someone
from HTML(selector)
Do something
to it(method)
![Page 9: J query](https://reader035.fdocuments.us/reader035/viewer/2022062418/5558bdf5d8b42a7e298b51e6/html5/thumbnails/9.jpg)
Find some element
![Page 10: J query](https://reader035.fdocuments.us/reader035/viewer/2022062418/5558bdf5d8b42a7e298b51e6/html5/thumbnails/10.jpg)
Selector
• CSS Style– $(“#myID”) // by id– $(“.myClass”) // by class name– $(“myTag”) // by tag (element name)– $(“#id, .class, tag”) // multiple
![Page 11: J query](https://reader035.fdocuments.us/reader035/viewer/2022062418/5558bdf5d8b42a7e298b51e6/html5/thumbnails/11.jpg)
Selector [Hierarchy]• $("form input") // descendant• $("#main > *") // child• $("#prev ~ div") // sibling
![Page 12: J query](https://reader035.fdocuments.us/reader035/viewer/2022062418/5558bdf5d8b42a7e298b51e6/html5/thumbnails/12.jpg)
Selector [Hierarchy]• $("form input") // descendant
<form> <div> Form is surrounded by the green outline</div> <label> Child:</label> <input name="name" /> <fieldset> <label> Grandchild:</label> <input name="newsletter" /> </fieldset></form>
![Page 13: J query](https://reader035.fdocuments.us/reader035/viewer/2022062418/5558bdf5d8b42a7e298b51e6/html5/thumbnails/13.jpg)
Selector [Attribute]
• $("div[id]"). //has• $("input[name='bank']“) //not has• $("input[name^='news']") //equal• $("input[name$='letter']") //begin with• $("input[name$='letter']") //end with• $("input[name*='man']") //contain• $("input[id][name$='man']")
![Page 14: J query](https://reader035.fdocuments.us/reader035/viewer/2022062418/5558bdf5d8b42a7e298b51e6/html5/thumbnails/14.jpg)
Selector [Form]
• $("div :text")• $("form :radio")• $("#dvMainForm :checkbox")• $(":button")• $("input:disabled")• $("input:checked")
![Page 15: J query](https://reader035.fdocuments.us/reader035/viewer/2022062418/5558bdf5d8b42a7e298b51e6/html5/thumbnails/15.jpg)
Do something with them
![Page 16: J query](https://reader035.fdocuments.us/reader035/viewer/2022062418/5558bdf5d8b42a7e298b51e6/html5/thumbnails/16.jpg)
Attribute• $("em").attr("title")• $("label").html()• $("p:first").text()• $("input").val()
• $("em").attr("title", "zupzip")• $("label").html("zupzip")• $("p:first").text("zupzip")• $("input").val("zupzip")
Get
Set
![Page 17: J query](https://reader035.fdocuments.us/reader035/viewer/2022062418/5558bdf5d8b42a7e298b51e6/html5/thumbnails/17.jpg)
Event• Bind– $(“input”).bind(“blur”, fn);
• Trigger– $(“input”).trigger(“focus”);
• Event Helper– $(“input”).click(function() { alert(‘click’); });– S(“input”).click();
• Live– $(“input”).live(“click”, fn);
![Page 18: J query](https://reader035.fdocuments.us/reader035/viewer/2022062418/5558bdf5d8b42a7e298b51e6/html5/thumbnails/18.jpg)
Traversing• find $("p").find("span").css('color','red'); • children $
("div").children(".selected").css("color); • parent $("tr").parent().get(0).tagName;• next $("button[disabled]").next().text("this
button is disabled"); • prev $("p").prev(".selected").css("background",
"yellow");• sibling $(".hilite").siblings() .css("color", "red")
![Page 19: J query](https://reader035.fdocuments.us/reader035/viewer/2022062418/5558bdf5d8b42a7e298b51e6/html5/thumbnails/19.jpg)
Manipulation
• append $("p").append("<strong>Hello</strong>");
• appendTo $("span").appendTo("#foo");• prepend &prependTo• after $("p").after("<b>Hello</b>"); • before $("p").before("<b>Hello</b>");
![Page 20: J query](https://reader035.fdocuments.us/reader035/viewer/2022062418/5558bdf5d8b42a7e298b51e6/html5/thumbnails/20.jpg)
Effect
• show / hide• toggle• slide• fade• Custom animation