Flashcards
jQuery
Flashcards do conjunto (26)
- 1All Selector (“*”)$( "#test" ).find( "*" ).css( "border", "3px solid red" ).length;
Finds all elements with css within #test
Caution: extremely slow, except when used by itself. - 2find()$( "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. - 3show()Shows element
- 4hide()Hides element
- 5.click()$( "#target" ).click(function() {
alert( "Handler for .click() called." );
});
This method is a shortcut for .on( "click", handler ) - 6document.getElementById('contents'); vs var contents = $('#contents');document.getElementById('contents'); //returns a HTML DOM Object
var contents = $('#contents'); //returns a jQuery Object with additional methods - 7hides current element (syntax) hides all paragraphs$(this).hide()
$("p").hide() - 8What is jQuery?jQuery is a library of JavaScript Functions.
jQuery is a lightweight "write less, do more" JavaScript library. - 9Demonstrates the jQuery hide() method, hiding the current HTML element.$(document).ready(function(){
$("button").click(function(){
$(this).hide();
}); });
Click me - 10Demonstrates the jQuery hide() method, hiding all elements with class="test".$(document).ready(function(){
$("button").click(function(){
$(".test").hide(); }); });
This is a heading
This is a paragraph.
This is another paragraph.
Click me - 11jQuery Element SelectorsjQuery uses CSS selectors to select HTML elements.
$("p") selects all elements.
$("p.intro") selects all elements with class="intro".
$("p#demo") selects all elements with id="demo". - 12jQuery CSS SelectorsQuery 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"); - 13jQuery Attribute SelectorsQuery 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". - 14how you prevent all jQuery methods/code from running before the documents is finished loadingput jQuery inside a document.ready() function:
$(document).ready(function(){
// jQuery functions go here...
});
or Shorthand for $( document ).ready()
$(function() {
console.log( "ready!" );
}); - 15Write 'ready' function for jQuery$(document).ready(function(){
});
or
$(function(){
}); - 16examples of actions that can fail if functions are run before the document is fully loadedTrying to hide an element that doesn't exist
Trying to get the size of an image that is not loaded - 17AJAXAsynchronous Javascript Extensible Markup Language
- 18Alias and sign for jQjQuery(function(){
});
same as
$(function(){
}); - 19What 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();
}); - 20Is 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. - 21How to load jQuery locally when CDN fails?if (typeof jQuery == 'undefined')
{
document.write(unescape("%3Cscript src='Scripts/jquery.1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));
} - 22What 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]") - 23How can I select an element by name with jQuery?$('td[name=tcol1]') // matches exactly 'tcol1'
$('td[name^=tcol]') // matches those that begin with 'tcol'
data1
data2
data1
data2
data1
data2 - 24Name attribute can be used on which objects?Only on form objects:
input, select, textarea and button
Deprecated on , , etc. - 25How to get element that is NOT allowed name attribute?Create custom atribute: data-name:
$('[data-name="message"]').text("Here is a new message!"); - 26How 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
}
});