document ready function
.
Now let's write our first jQuery statement. All jQuery functions start with a $
, usually referred to as a dollar sign operator
, or as bling
.
jQuery often selects an HTML element with a selector
, then does something to that element.
For example, let's make all of your button
elements bounce. Just add this code inside your document ready function:
$("button").addClass("animated bounce");
Note that we've already included both the jQuery library and the Animate.css library in the background so that you can use them in the editor. So you are using jQuery to apply the Animate.css bounce
class to your button
elements.
addClass()
function to give the classes animated
and bounce
to your button
elements.'
testString: 'assert($("button").hasClass("animated") && $("button").hasClass("bounce"), "Use the jQuery addClass()
function to give the classes animated
and bounce
to your button
elements.");'
- text: Only use jQuery to add these classes to the element.
testString: 'assert(!code.match(/class.*animated/g), "Only use jQuery to add these classes to the element.");'
- text: Your jQuery code should be within the $(document).ready();
function.
testString: assert(code.match(/\$\(document\)\.ready\(function.*(\s|\n)*.*button.*.addClass.*\);/g), 'Your jQuery code should be within the $(document).ready();
function.');
```