j Query Randy Connolly and Ricardo Hoar Fundamentals
- Slides: 10
j. Query Randy Connolly and Ricardo Hoar Fundamentals of Web Development Textbook to be published by Pearson © Ed 2015 in early Pearson 2014 Fundamentals ofhttp: //www. funwebdev. com Web Development
What is j. Query? § j. Query is a Javascript Framework § Widely used as an Abstraction layer § Writing less code to do more functionality § Mostly used for: – DOM manipulation – AJAX calling Randy Connolly and Ricardo Hoar Fundamentals of Web Development
What is available with j. Query? Cross browser support and detection AJAX functions CSS functions DOM manipulation and traversion Plugins for pre built user interfaces, advanced animations, and form validation § Custom plugins § § § Randy Connolly and Ricardo Hoar Fundamentals of Web Development
How to add j. Query to your website § Download the j. Query library from the official website j. Query. com <head> <script src="j. Query-1. 12. 2. min. js"></script> </head> § Include j. Query from a CDN – Google: <head> <script src="https: //ajax. googleapis. com/ajax/libs/j. Query/1. 12. 2/j. Query. min. js"></script > </head> Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Introducing j. Query functions § j. Query to work properly, needs the DOM to be fully loaded onto the browser. $(document). ready(function(){ //Script goes here }); Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Syntax $ (selector). action() Define/ access j. Query Find HTML element j. Query action HTML element: Paragraph element $ (‘p’) Classes: Class =“deals” $(‘. deals’) ID: ID =“first. Name” $(‘#first. Name’) Attribute: Paragraph with [Name] attribute = “opening” $(‘p: [name=opening]’) Randy Connolly and Ricardo Hoar Fundamentals of Web Development
j. Query / DOM comparison j. Query equivalent DOM method $("#id") get. Element. By. Id("id") $("tag") get. Elements. By. Tag. Name("tag") $("[name='somename']") get. Elements. By. Name("somename") $("selector") query. Selector("selector") $("selector") query. Selector. All("selector") Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Syntax Examples § Hide/show an element with id ‘textbox’: //javascript document. get. Element. By. ID(‘textbox’). style. display(‘ hide’); Document. get. Elementby. ID(‘textbox’). style. display(‘ show’); //j. Query $(‘#textbox’). hide(); $(‘#textbox’). show(); Randy Connolly and Ricardo Hoar Fundamentals of Web Development
j. Query Tutorials § Code Academy http: //www. codecademy. com/courses/you-andj. Query/0? curriculum_id=4 fc 3018 f 74258 b 0003001 f 0 f #!/exercises/0 § Code School: http: //www. codeschool. com/courses/j. Query-air-firstflight Randy Connolly and Ricardo Hoar Fundamentals of Web Development
References § § http: //www. w 3 resource. com/jquery-exercises/ http: //www. w 3 schools. com/jquery/default. asp https: //learn. jquery. com/about-jquery/ http: //www. slideshare. net/arulmr/jqueryforbeginners Randy Connolly and Ricardo Hoar Fundamentals of Web Development