Erstellt von Andrea Juric
vor etwa 9 Jahre
|
||
Frage | Antworten |
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. |
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 } }); |
Möchten Sie mit GoConqr kostenlos Ihre eigenen Karteikarten erstellen? Mehr erfahren.