Downloaded 68 times
![FILTERS
Basic Filters :
:first, :last, :even, :odd, …...
Content Filters:
:empty , :contains(text), :has(selector), …..
Attribute Filters:
[attribute], [attribute=value], [attribute!=value], …..
For e.g.
$(“#students tr:even”).css(“background-color”, “#dde”)
It selects even elements and change BGcolor of that <td> (index starts from zero)
Name Class Roll No. Comment
Raju XII 2 Good
Masud IX 1 Good
Apu XII 3](https://image.slidesharecdn.com/jquery-120119222235-phpapp02/85/Jquery-12-320.jpg)
Uploaded byPaRa Vaishnav
Jquery
jQuery is a JavaScript library that simplifies web development and is widely used. It allows developers to select elements, manipulate DOM elements, handle events, and develop animations and AJAX interactions easily. jQuery supports cross-browser functionality and makes tasks like DOM manipulation, event handling, animation, and Ajax easier through its simple and concise API. Developers can implement jQuery either from scratch or by using existing plugins.
![Getting Started with Apache Spark: Big Data Made Simple [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/apachesparkgettingstarted-260203175547-8361bcc3-thumbnail.jpg?width=640&height=640&fit=bounds)
Jquery
- 1.
- 2. BASIC IDEA jQuery is one type of JavaScript library. Simplify Web development process. Used widely.
- 3. USP OF JQUERY JQUERYis an Open Source
- 4. USP OF JQUERY JQUERY follows this For e.g. $(“#deleted”).addClass(“red”).fadeOut(“slow”);
- 5. USP OF JQUERY JQUERY supports, Cross-Browser Functionality
- 6. WHY USE JQUERY? Ease of use JQUERY is reusable -plug and play It is Compact -no need of writing long long javascript AJAX support $(“#comments”).load(“/get_comments.php”); Creates Effects and Animations Next
- 7. var xmlhttp; if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); $.post( } 'ajax_test.php', xmlhttp.open("POST","ajax_test.asp",true); { fname : 'Henry', lname : 'Ford' }, xmlhttp.setRequestHeader("Content- function(resp) { type","application/x-wwwform- $('#myDiv').html(resp); } urlencoded"); ); xmlhttp.send("fname=Henry&lname=Ford"); Wednesday, September xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("myDiv").innerHTML = xmlhttp.responseText; } }; Wednesday, September Back
- 8. Supports All Versions of CSS Size and Speed Instant Plug-ins Great Documentation Large Community
- 9. HOW TO USEJQUERY? First Download the latest version of JQUERY .JS file from http://jquery.com/ Documentation from http://code.google.com/apis/libraries/devguide.html#jquery Plug-ins from http://plugins.jquery.com/
- 10. KNOW JQUERY'S PARTS Find Some Elements { $(“DIV”).ADDCLASS(“XYZ”); jQuery Object } Do something with them For e.g. $(“p”).addClass(“blue”); <p class=“blue”>Hello Students</p>
- 11. SELECTORS #header{ Imagine any CSS file margin : 0 } div{ margin : 0px; padding : 0px } ul.menu li{ ….. } Selecting By Id $(“#header”)
- 12. FILTERS Basic Filters : :first, :last, :even, :odd, …... Content Filters: :empty , :contains(text), :has(selector), ….. Attribute Filters: [attribute], [attribute=value], [attribute!=value], ….. For e.g. $(“#students tr:even”).css(“background-color”, “#dde”) It selects even elements and change BGcolor of that <td> (index starts from zero) Name Class Roll No. Comment Raju XII 2 Good Masud IX 1 Good Apu XII 3
- 13. JQUERY METHODS DOM Manipulation before(), after(), append(), appendTo(), ….. Attributes css(), addClass(), attr(), html(), val(), ….. Events click(), bind(), unbind(), live(), ….. Effects hide(), fadeOut(), toggle(), animate(), ….. Ajax load(), get(), ajax(),.ajaxStart()…..
- 14. DOM MANIPULATION EXAMPLE Move all paragraphs in div with id “contents” <body> <h1>jQuery</h1> <p>jQuery is good</p> <p>jQuery is better</p> <div id=“contents”></div> <p>jQuery is the best</p> </body> $(“p”).appendTo(“#contents”); will append <p> in <div id=“contents”> <h1>jQuery</h1> <div id=“contents”> <p>jQuery is good</p> <p>jQuery is better</p> <p>jQuery is the best</p> </div>
- 15. ATTRIBUTE EXAMPLE Make the texts of last paragraph bold $(“#contents p:last”).css(“color”, “green”); <body> <h1>jQuery Dom Manipulation</h1> <div id=“contents”> <p >jQuery is good</p> <p>jQuery is better</p> <p style=“color:green”>jQuery is the best</p> </div> </body> Also we can Get or Set the values of attributes : Set : $(“img.logo”).attr(“align”, “left”); Get : var allignment = $(“img.logo”).attr(“align”);
- 16. IMPLEMENTING JQUERY We can implement JQUERY in two ways function slideSwitch() { From Scratch var $active = $('#slideshow IMG.active'); var $next = $active.next(); $next.addClass('active'); $active.removeClass('active'); } $(function() { setInterval( "slideSwitch()", 5000 ); }); Use ready plug-ins
- 17.
- 18. USING PLUG-INS Download the plug-in (any version) Unzip the downloaded file to a folder and put it whichever application you are using. Add the plug-in's JavaScript and CSS files inside the header section of your Web page: For e.g <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script src="star-rating/jquery.rating.js"></script> Change in styles and css according to your needs And you are ready to use your customized plug-ins .
- 19. SOURCE Links :- jquery.com http://blog.themeforest.net/ http://code.google.com/apis/libraries/devguide.html#jquery http://en.wikipedia.org/wiki/JQuery#Etymology E-Books :- JQUERY NOVICE TO NINJA -earle castledine & craig sharkie
- 20.