Recommended
More Related Content
What's hot
What's hot (20)
Similar to J query ppt
Similar to J query ppt (20)
More from Kavi Kumar
Recently uploaded
Recently uploaded (20)
J query ppt
- 1. Introduction • jQuery is a fast, small, and feature-rich JavaScript library. • The purpose of jQuery is to make it much easier to use JavaScript on website. • jQuery is a lightweight, "write less, do more", JavaScript library.
- 2. Downloading jQuery • Download the jQuery library from jQuery.com • There are two versions of jQuery available for downloading: – Production Version – Development Version: This is for Development and testing
- 3. Continue… • The jQuery library is a single JavaScript file. • Include jQuery File inside HTML <script> tag • Notice that the <script> tag should be inside the <head> section: • EG: – <head> <script src="jquery-3.2.0.min.js"></script> </head>
- 4. jQuery CDN • CDN stands for “Content Delivery Network” • Use jQuery CDN if you don’t want to download jQuery file. • Include it from CDN: – Google and – Microsoft host jquery – Use One Of these
- 5. Continue… • Include from google use this source – <head> <script src="https://ajax.googleapis.com/ajax/libs/ jquery/3.2.0/jquery.min.js"></script> </head> – And From Microsoft: <head> <script src="https://ajax.aspnetcdn.com/ajax/jQu ery/jquery-3.2.0.min.js"></script> </head>
- 6. Advantage of using the hosted jQuery from Google or Microsoft: • This is good to use jQuery CDN • Google or Microsoft one of the site where mostly user visit And jQuery downloaded. • As a result, it will be loaded from cache when they visit your site, which leads to faster loading time.
- 7. Example Of jQuery (Dynamic Add Control) Add controls on button click: There are five buttons to add simple text, textbox, checkbox, radio and normal button. <div style="display:inline"> <input type="button" id="txtPlain" value="Add Plain Text" style="" /> <input type="button" id="txt" value="Add TextBox" style="" /> <input type="button" id="chk" value="Add CheckBox" style="" /> <input type="button" id="rad" value="Add Radio" style="" /> <input type="button" id="btn" value="Add Button" style="" /> </div> <div id="holder"> </div>
- 8. jQuery Code For Add Textbox • $(document).ready(function(){ • $("#txt").click(function(){ • var $ctrl = $('<input/>').attr({ type: 'text', name:'text', value:'text'}).addClass("text"); $("#holder").append($ctrl); • });
- 9. jQuery Code For Add CheckBox • $("#chk").click(function(){ • var $ctrl = $('<input/>').attr({ type: 'checkbox', name:'chk'}).addClass("chk"); • $("#holder").append($ctrl); • });
- 10. Jquery Code For Add Radio Button $("#rad").click(function(){ var $ctrl = $('<input/>').attr({ type: 'radio', name:'rad'}).addClass("rad"); $("#holder").append($ctrl); });
- 11. jQuery Code For Add Button $("#btn").click(function(){ var $ctrl = $('<input/>').attr({ type: 'button', name:'btn',value:'Button'}).addClass("btn"); $("#holder").append($ctrl); }); $("#txtPlain").click(function(){ var lbl = prompt ("Enter Text",""); $("#holder").append(lbl); }); });