Introduction to j_query
•Download as PPTX, PDF•
0 likes•297 views
Brief about j_query Learn more @ www.PracticalCoding.in
Recommended
More Related Content
What's hot
What's hot (18)
Viewers also liked
Viewers also liked (20)
Similar to Introduction to j_query
Similar to Introduction to j_query (20)
Recently uploaded
Recently uploaded (20)
Introduction to j_query
- 1. jQuery A Library that provides a general-purpose abstraction layer for common web scripting www.PracticalCoding.in
- 2. Advantages Let’s fill in the blanks… ➔ Accessing the DOM becomes easy ➔ Updating the page becomes easy compared to javascript ➔ CSS is easily altered on the fly using JQuery ➔ Respond to user interaction ➔ Animate changes being made to a document ➔ Retrieve information from server without a page refresh using AJAX ➔ Simplify common JavaScript functions www.PracticalCoding.in
- 3. JavaScript vs jQuery <div class=”simpletext”> Lorem ipsum </div> <div class=”littletext”> Lorem ipsum </div> <div class=”simpletext”> Lorem ipsum willeing </div> www.PracticalCoding.in
- 4. Selectors add(), parent(), children(), siblings(), addClass(),removeClass(), find(), toggleClass(), append() and so on.. www.PracticalCoding.in
- 5. Event handlers click,blur,change,dblclick,focus,keydown,keyup, keypress,load,mousedown,mousemove,mouseout,mou seover,mouseup,resize,scroll,select,submit,unload, mouseenter, mouseleave Events are handled using .on() method www.PracticalCoding.in
- 7. CSS and Animations .css() : Get and set hide() show() fadeIn() fadeOut() slideUp() slideDown() www.PracticalCoding.in
- 8. Creating and inserting new elements insertAfter() insertBefore() prependTo() appendTo() append() prepend() before() after() www.PracticalCoding.in
Editor's Notes
- window.onload = function() { var divs = document.getElementsByTagName('div'); for (var i = 0; i < divs.length; i++) { if (divs[i].className == 'simpletext’) && !hasClass(divs[i], 'highlight')) { divs[i].className += ' highlight'; } } $(document).ready(function() { $('div.poem-stanza').addClass('highlight'); });