jQuery

Beschreibung

jQuery
Andrea Juric
Karteikarten von Andrea Juric, aktualisiert more than 1 year ago
Andrea Juric
Erstellt von Andrea Juric vor etwa 9 Jahre
134
1

Zusammenfassung der Ressource

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 } });
Zusammenfassung anzeigen Zusammenfassung ausblenden

ähnlicher Inhalt

Front-End Web Development
Chanthy Ngin
jQuery Basics functions and method
Victor Bini
Interview questions
Ryan O'Connor
Quiz - Object Oriented Javascript
arunram.krish
Examen Fundamentos Basicos de Programación
Jose Valderrama0721
Test I. Introduction to web technologies
Angel Martínez Rodriguez
JavaScript Fundamentals
Andrew Watters
Javascript - Quiz - Jan 2016
arunram.krish
OpenSource Programming
Faheem Ahmed
Javascript basics
James Drummond
JavaScript DOM API - Funções Basicas - Interactive Web Pages
Victor Bini