J query
Download as PPTX, PDF1 like779 views
This document discusses jQuery, a popular JavaScript library. It provides advantages over plain JavaScript such as being cross-browser compatible, having built-in functions, and allowing unobtrusive JavaScript coding. The document explains jQuery syntax including selectors to select elements, events to bind behavior, and methods to perform actions. It also discusses using jQuery with Ajax and plugins.
![Cross-BrowserJavascriptvarelm = null; if (document.getElementById) {elm = document.getElementById(id); } else if (document.all) {elm = document.all[id]; } else if (document.layers) {elm = document.layers[id];}jQueryvar elm = $(“#id”);](https://image.slidesharecdn.com/jquery-110630114646-phpapp02/85/J-query-14-320.jpg)
J query
- 1. How I LearnedTo Stop Worryingand Love jQueryDavid Giard, Sogeti USA C# MVP MCTS, MCSD, MCSE, MCDBADavidGiard.com
- 3. JavaScript in your page <script type="text/javascript"> …</script> <script type="text/javascript“src=“xxx.js"> </script>
- 4. JavaScript: The Good PartsInteractive web pagesFastAjax
- 5. JavaScript: The Bad PartsCross-browser issuesCross-platform issues
- 7. jQueryJavaScript AbstractionCross-BrowserBuilt-In FunctionsFastUnobtrusivePopularShips with Visual Studio 2010
- 11. Obtrusive<a href=“” onclick=“DoSomething();”> Click Me</a>Unobtrusive<script type="text/javascript">$(document).ready(function(){ $(“#MyLink”).click(function(){DoSomething(); }); </script> <a href=“” id=“Link1”> Click Me </a>Unobtrusive JavaScript
- 12. Enable jQueryDownload from jQuery.com<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
- 13. Content Delivery Network<script type="text/javascript" src=“http://ajax.microsoft.com/ajax/jquery/jquery-1.6.1.min.js"></script><script type="text/javascript" src=“http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><script type="text/javascript" src=“http://code.jquery.com/jquery-1.6.1.min.js "></script>
- 14. Cross-BrowserJavascriptvarelm = null; if (document.getElementById) {elm = document.getElementById(id); } else if (document.all) {elm = document.all[id]; } else if (document.layers) {elm = document.layers[id];}jQueryvar elm = $(“#id”);
- 15. jQuery SyntaxjQuery keywordSelectorsEventsFunctions / Methods
- 16. “jQuery” KeywordjQuery$Represents the jQueryobjectIndicates what follows is jQuery
- 17. SelectorsReturns a set of objectsCall method on each objectBind event to each object
- 18. CSS SelectorsTag nameh2 { font-family: "Calibri"; font-size: 66pt; font-weight: bold;}.FootNote { font-family: "Calibri"; font-size: 18pt; font-weight: bold;}#MyElement { font-family: “Times New Roman";font-color: red;}Div#MyDiv{ font-family: “Arial";font-size: 48pt;}Class nameElement IDCombine selectors
- 21. Events$(document).ready(function(){ $(“#MyDiv”).click(function(){ … });});
- 22. Methods$(document).ready(function(){ $(“#MyDiv”).click(function(){ $(“a”).attr(“target”, “_blank”); });});
- 23. Combining SelectorsContainership$(‘selector1’ ‘selector2’)Ex: $(‘div a’)Narrow scope$(‘Selector1Selector2’)Ex: $(‘a#MyLink’)Filter$(selector1).filter(selector2)Ex: $(‘#MyDiv’).filter(‘#MyLink’)
- 25. AjaxCall web service from jQuery
- 27. jQuery UI
Editor's Notes
- #9: Sour