jQuery

Question	Answer
All Selector (“*”)	$( "#test" ).find( "*" ).css( "border", "3px solid red" ).length; Finds all elements with css within #test Caution: extremely slow, except when used by itself. Image: 6bbae367-baa5-4037-b0e6-08e4cec4b877.PNG (image/PNG)
find()	$( "p" ).find( "span" ).css( "color", "red" ); same as $( "p span" ) Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
show()	Shows element
hide()	Hides element
.click()	$( "#target" ).click(function() { alert( "Handler for .click() called." ); }); This method is a shortcut for .on( "click", handler )
document.getElementById('contents'); vs var contents = $('#contents');	document.getElementById('contents'); //returns a HTML DOM Object var contents = $('#contents'); //returns a jQuery Object with additional methods
hides current element (syntax) hides all paragraphs	$(this).hide() $("p").hide()
What is jQuery?	jQuery is a library of JavaScript Functions. jQuery is a lightweight "write less, do more" JavaScript library.
Demonstrates the jQuery hide() method, hiding the current HTML element.	<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $(this).hide(); }); }); </script> </head> <body> <button>Click me</button> </body> </html>
Demonstrates the jQuery hide() method, hiding all elements with class="test".	<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); }); </script> </head> <body> <h2 class="test">This is a heading</h2> <p class="test">This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html>
jQuery Element Selectors	jQuery uses CSS selectors to select HTML elements. $("p") selects all <p> elements. $("p.intro") selects all <p> elements with class="intro". $("p#demo") selects all <p> elements with id="demo".
jQuery CSS Selectors	Query CSS selectors can be used to change CSS properties for HTML elements. The following example changes the background-color of all p elements to yellow: Example: $("p").css("background-color","yellow");
jQuery Attribute Selectors	Query uses XPath expressions to select elements with given attributes. $("[href]") select all elements with an href attribute. $("[href='#']") select all elements with an href value equal to "#". $("[href!='#']") select all elements with an href attribute NOT equal to "#". $("[href$='.jpg']") select all elements with an href attribute that ends with ".jpg".
how you prevent all jQuery methods/code from running before the documents is finished loading	put jQuery inside a document.ready() function: $(document).ready(function(){ // jQuery functions go here... }); or Shorthand for $( document ).ready() $(function() { console.log( "ready!" ); });
Write 'ready' function for jQuery	$(document).ready(function(){ }); or $(function(){ });
examples of actions that can fail if functions are run before the document is fully loaded	Trying to hide an element that doesn't exist Trying to get the size of an image that is not loaded
AJAX	Asynchronous Javascript Extensible Markup Language
Alias and sign for jQ	jQuery(function(){ }); same as $(function(){ });
What is jQuery.noConflict?	As other client side libraries like MooTools, Prototype can be used with jQuery and they also use $() as their global function and to define variables. This situation creates conflict as $() is used by jQuery and other library as their global function. To overcome from such situations, jQuery has introduced jQuery.noConflict(). jQuery.noConflict(); // Use jQuery via jQuery(...) jQuery(document).ready(function(){ jQuery("div").hide(); });
Is there any difference between body onload() and document.ready() function?	document.ready() function is different from body onload() function for 2 reasons. We can have more than one document.ready() function in a page where we can have only one body onload function. document.ready() function is called as soon as DOM is loaded where body.onload() function is called when everything gets loaded on the page that includes DOM, images and all associated resources of the page.
How to load jQuery locally when CDN fails?	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> if (typeof jQuery == 'undefined') { document.write(unescape("%3Cscript src='Scripts/jquery.1.9.1.min.js' type='text/javascript'%3E%3C/script%3E")); } </script>
What are selectors in jQuery and how many types of selectors are there?	6 types: 1) Name, 2) #ID, .Class, Universal (*), Multiple Elements $("[href]") select all elements with an href attribute., Attribute - $("[href]")
How can I select an element by name with jQuery?	$('td[name=tcol1]') // matches exactly 'tcol1' $('td[name^=tcol]') // matches those that begin with 'tcol' <tr> <td>data1</td> <td name="tcol1" class="bold"> data2</td> </tr> <tr> <td>data1</td> <td name="tcol1" class="bold"> data2</td> </tr> <tr> <td>data1</td> <td name="tcol1" class="bold"> data2</td> </tr>
Name attribute can be used on which objects?	Only on form objects: input, select, textarea and button Deprecated on <a>, <em>, etc.
How to get element that is NOT allowed name attribute?	Create custom atribute: data-name: <div data-name="message" class="myclass"></div> $('[data-name="message"]').text("Here is a new message!");
How do you check if an element is empty?	:empty selector:(document).ready(function(){ if ($('#element').is(':empty')){ //Element is empty } }); or $(document).ready(function(){ if($.trim($('#element').html())=='') { //Element is empty } });

Next up

Description

Resource summary

Similar

	Created by Andrea Juric about 9 years ago