![<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
// When document is ready to be manipulated
jQuery(document).ready( pageReadyToBeManipulated );
function pageReadyToBeManipulated() {
// If link is clicked
jQuery("a").click( linkClick );
}
function linkClick(event) {
alert("Thanks for visiting!");
// Prevent the default action
event.preventDefault();
}
//]]>
</script>](https://image.slidesharecdn.com/jquery-120401044428-phpapp01/75/short-intro-to-jquery-and-modernizr-4-2048.jpg?cb=1670696931)
![<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
// When document is ready to be manipulated
$(document).ready( pageReadyToBeManipulated );
function pageReadyToBeManipulated() {
// If link is clicked
$("a").click( linkClick );
}
function linkClick(event) {
alert("Thanks for visiting!");
// Prevent the default action
event.preventDefault();
}
//]]>
</script>](https://image.slidesharecdn.com/jquery-120401044428-phpapp01/75/short-intro-to-jquery-and-modernizr-6-2048.jpg?cb=1670696931)
![// USING ANONYMOUS FUNCTIONS
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
event.preventDefault();
});
});
//]]>
</script>](https://image.slidesharecdn.com/jquery-120401044428-phpapp01/75/short-intro-to-jquery-and-modernizr-7-2048.jpg?cb=1670696931)
![// EVEN SHORTER SYNTAX, FORGET THE DOCUMENT PARAMETER
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$().ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
event.preventDefault();
});
});
//]]>
</script>](https://image.slidesharecdn.com/jquery-120401044428-phpapp01/75/short-intro-to-jquery-and-modernizr-8-2048.jpg?cb=1670696931)
![JQuery
and
Selectors
• Select
all
h1
elements
– $(“h1”)
• Select
the
first
one
– $(“h1”)[0]
• Add
contents
– $(“h1”)[0].innerHTML
=
“hello!”;
• Lot
of
different
selectors
– hOp://api.jquery.com/category/selectors/](https://image.slidesharecdn.com/jquery-120401044428-phpapp01/75/short-intro-to-jquery-and-modernizr-10-2048.jpg?cb=1670696931)
Short intro to JQuery and Modernizr
•2 j'aime•5,378 vues
Télécharger pour lire hors ligne
Signaler
Recommandé
Contenu connexe
Tendances
Tendances(18)
Similaire à Short intro to JQuery and Modernizr
J Query (Complete Course) by Muhammad Ehtisham SiddiquiMuhammad Ehtisham Siddiqui
244 vues•37 diapositives
Similaire à Short intro to JQuery and Modernizr(20)
Plus de Jussi Pohjolainen
Plus de Jussi Pohjolainen(20)
Dernier
"How we switched to Kanban and how it integrates with product planning", Vady...Fwdays
59 vues•24 diapositives
Dernier(20)
Short intro to JQuery and Modernizr
- 1. Short into to JQuery and Modernizr Jussi Pohjolainen Tampere University of Applied Sciences
- 2. JQuery? • Mo?va?on – Simple things may require lot of coding – Common browsers are different and implementa?on varies • Solu?on, use a framework – jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, anima?ng, and Ajax interac?ons for rapid web development.
- 3. How? • Download JQuery file (hOp://jquery.com/) – hOp://code.jquery.com/jquery-‐1.7.1.min.js • Make your xhtml page and reference to the file in script block • Make your code and use JQuery func?ons!
- 4. <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ // When document is ready to be manipulated jQuery(document).ready( pageReadyToBeManipulated ); function pageReadyToBeManipulated() { // If link is clicked jQuery("a").click( linkClick ); } function linkClick(event) { alert("Thanks for visiting!"); // Prevent the default action event.preventDefault(); } //]]> </script>
- 5. Some Basic Syntax • JQuery can be used in two ways: – JQuery() – Or – $() • $ is an alias to JQuery()! $ more commonly used
- 6. <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ // When document is ready to be manipulated $(document).ready( pageReadyToBeManipulated ); function pageReadyToBeManipulated() { // If link is clicked $("a").click( linkClick ); } function linkClick(event) { alert("Thanks for visiting!"); // Prevent the default action event.preventDefault(); } //]]> </script>
- 7. // USING ANONYMOUS FUNCTIONS <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); event.preventDefault(); }); }); //]]> </script>
- 8. // EVEN SHORTER SYNTAX, FORGET THE DOCUMENT PARAMETER <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $().ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); event.preventDefault(); }); }); //]]> </script>
- 9. GeOers in the Tradi?onal Way • getElementsById • getElementsByTagName • getAttribute
- 10. JQuery and Selectors • Select all h1 elements – $(“h1”) • Select the first one – $(“h1”)[0] • Add contents – $(“h1”)[0].innerHTML = “hello!”; • Lot of different selectors – hOp://api.jquery.com/category/selectors/
- 11. Crea?ng Elements in Tradi?onal Way • createElement • createTextNode • setAttribute • appendChild • removeChild
- 12. JQuery Insert $().ready(function(){ $("a").click(function(event){ // Insert the new element after element with id here $("<p>New Element</p>").insertAfter("#here"); event.preventDefault(); }); });
- 13. Manipula?on Func?ons • .addClass() • .afer() • .append() • .css() • … • See: hOp://api.jquery.com/category/ manipula?on/
- 14. Some Effects: Lot of Anim Func?ons $('#clickme').click(function() { $('#book').slideUp('slow', function() { // Animation complete. }); });
- 15. MODERNIZR
- 16. Modernizr • Small JS library for detec?ng browser features • Replaces highly unreliable user agent sniffing • Feature detec?on for each browser what the browser can or cannot do • Tests over 40 features – Creates Modernizr object containing the results
- 17. How • Download and install modernizr.js • Add – <html class=“no-‐js”> • Modernizr replaces this – <html class=“canvas canvastext geoloca?on..”> • Classes for every feature it detects!
- 19. Adding CSS
- 20. Result
- 21. HTML5 and Video
- 22. Solu?on