Jquery

Question 1

Whats a DOM?

Answer 1

The browser’s layout engine goes through the HTML and CSS to build a “document” using the HTML Document Object Model (DOM).

Question 2

How does the DOM work?

Answer 2

DOM has helped HTML, CSS, and JavaScript work together more effectively. It provides a standardized skeleton that all modern browsers use to make browsing the Web more effective. Many people think of the DOM as being built like a tree: it has a root and branches with nodes at the end. Alternatively, you can think of it as an x-ray for how the page is built.

Question 3

Where did this whole DOM thing come from?

Answer 3

Web developers and designers were tired of inconsistencies across browsers and decided they needed a standard they could use to add behavior to and interact with web pages on any browser. The World Wide Web Consortium (aka W3C) worked to define the standard collaboratively with these various groups.

Question 4

Whats client side scripting?

Answer 4

Web developers often refer to the web browser as a client because it consumes data from a (web) server. A client-side scripting language is one that can give directions to the browser behind the scenes, while a server-side language gives directions to the server.

Question 5

Why create jQuery if all it does is use JavaScript? Isn’t JavaScript enough on its own?

Answer 5

JavaScript is great for a lot of things—especially manipulating the DOM—but it’s pretty complex stuff. DOM manipulation is by no means straightforward at the base level, and that’s where jQuery comes in. It abstracts away a lot of the complexity involved in dealing with the DOM, and makes creating effects super easy. (It was created by John Resig;

Question 6

What’s this business with the dollar sign all about?

Answer 6

It’s just a shortcut so you don’t have to write “jQuery” over and over! But when you’re working with other client-side languages, using jQuery() helps avoid naming conflicts.

Question 7

When I go to download jQuery, there’s a production version and a developer version. What’s the difference between the two?

Answer 7

The production version is minified, which means that a bunch of unnecessary characters and whitespace have been removed. It is optimized to run faster in a production environment, but it’s kind of harder to see what’s going on. The developer version is nicely spaced and much more readable. It’s intended for anyone who wants to dig around in the jQuery code to change or even extend it (it is open source, after all!).

Question 8

(#id) ?

Answer 8

Selects a single element with the given id attribute. For id selectors, jQuery uses the JavaScript function document.getElementById(), which is extremely efficient.

Question 9

.toggle( ) ?

Answer 9

Display or hide the matched elements.

Question 10

.ready( ) ?

Answer 10

Specify a function to execute when the DOM is fully loaded. For instance: $( document ).ready(function() { console.log( “ready!” ); });

Question 11

.click( ) ?

Answer 11

Bind an event handler to the “click” JavaScript event, or trigger that event on an element This method is a shortcut for .on( “click”, handler ) in the first two variations, and .trigger( “click” ) in the third. The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. $( “#target” ).click(function() { alert( “Handler for .click() called.” ); });

Question 12

Silly mistakes to avoid?

Answer 12

1. Misspelling selector id (“#clickME”) 2. Missing curly braces { 3. Not reading the JQuery documentation carefully

Question 13

What’s happening here? $(document).ready(function( ) { $(“#clickMe”).click(function( ) { }); });

Answer 13

(document) - Hey, DOM… .ready - whenever you’re ready and loaded… (function( ) { - …I want you to do something for me. As soon as I possibly can, I’ll start executing code within the curly braces! $(“#clickMe”) - Here’s our ID selector for the clickMe div. .click - The dot separates the selector part from the method part. Connecting the button with an ID of clickMe to the click event, this code makes the button clickable. { }); - The code for what will happen when the button is pressed will go between these curly braces (aka the “code block”). } ) ; - The semicolon is a terminator. It ends our jQuery click statement. } ) ; - This semicolon ends our jQuery ready function.

Question 14

.animate( )

Answer 14

Almost all css properties can be animated using jQuery .animate() method, but the property names must be CamelCased (eg: margin-top becomes marginTop), here’s syntax of jQuery animate method.

Question 15

Whats happening here?

Answer 15

describe

Question 16

.fadeOut( ) ?

Answer 16

Hide the matched elements by fading them to transparent.

Question 17

.fadeToggle( ) ?

Answer 17

Display or hide the matched elements by animating their opacity

Question 18

Whats happening in the following script?

** $( “button:last” ).click(function() {**

$( “p:last” ).fadeToggle( “fast”, function() {

** $( “#log” ).append( “
finished
“ );**

** });**

});

Answer 18

Fading in and out and appending message

Question 19

After your browser receives a web page from a web server, it loads that web page into its _________.

Answer 19

Memory

Question 20

A ____________ is used by jQuery to locate and return an element from the web page.

Answer 20

Selector

Question 21

The JavaScript __________ translates directions you give it into different actions on the page.

Answer 21

Interpreter

Question 22

A CSS setting that makes sure an element won’t show when the page loads, display: _____ .

Answer 22

none

Question 23

You know you’re dealing with a ________ when you see a set of parentheses after a keyword.

Answer 23

method

Question 24

Name of the character used to separate a jQuery selector from a jQuery method.

Answer 24

Dot

Question 25

jQuery function ?

Answer 25

You use this to select elements from an HTML page to manipulate.

The $ shortcut means you don’t have to type “jQuery” over and over.

The jQuery function can handle selectors, straight HTML, and even JavaScript objects.

Question 26

Selectors ?

Answer 26

jQuery selects elements the same way CSS does: with selectors.

Just about any kind of HTML element is fair game for a jQuery selector.

Question 27

Fade effect ?

Answer 27

Once you’ve selected an element, you can fade it in a variety of ways, using FadeIn, FadeOut, FadeTo, and FadeToggle.

You can fade in all kinds of elements, from text to images and more.

Control the speed of your fade effect by putting a time (in milliseconds) value inside the parentheses at the end of the statement.

Question 28

Would you use just CSS classes or IDs separately, or a combination of both, to specify the div elements above? Which would work best, and why?

Answer 28

Classes are used to group elements together and give them common style attributes. You can have one or more elements on the page that have the same class. For jQuery, we can use the same class selector, and affect the same group of elements with jQuery methods. Both CSS and jQuery use the “.” to signify a class, which makes it super easy to start classing up your code.

An ID selector is used to identify a single, unique element on a page. In jQuery, as in CSS, the # symbol is used to identify an ID selector. IDs are great when you want to get specific with an element, or when there is only going to be one of that kind of element on the page, like a page header or footer.

Question 29

What can be used by a single JavaScript method, cross- browser, to identify an element

Answer 29

ID selector

Question 30

What is a block-level element?

Answer 30

Block-level elements appear within their parent elements as rectangular objects that do not break across lines. They also appear with block margins, width and height properties that can be set independently of the surrounding elements.

Question 31

Why is the

 tag at the bottom of the page before the </body> tag? I thought it was always supposed to be inside the <head> </head> tags? </p>

<p> </p>

</script>

Answer 31

Yes, that used to be (and for some people, still is) the suggested best practice. However, the problem caused by scripts is that they block parallel downloads in the browser. Images from different servers can be downloaded more than two at a time, but once your browser encounters a

 tag, it can no longer download multiple items in parallel. Having them at the bottom means it will help speed up your page load time. </span></p>

<p> </p>

</script>

Question 32

What’s up with that whole JavaScript alert thing?

Answer 32

The ones we used didn’t look that pretty, but alerts are useful for a variety of reasons. Really, a JavaScript alert is a simple window containing a message. The text inside the parentheses is what is shown in the alert message. If you want to show a string of text, enclose the text in quotes. To display variable values, enter the variable name without quotes. You can also combine variable values and text strings by using the + sign. You probably see these all the time and don’t think about it, like when you don’t fill in a required field in a form. In our case, we’re using them more for testing and debugging purposes.

Question 33

How is the web page wired?

Answer 33

Classes and IDs are common ground for the three layers of a web page that we looked at in Chapter 1: structure, style, and script. Selectors are where those layers get wired together so they can all work in concert. HTML provides the building blocks (i.e., elements and their attributes), or structure of the web page. CSS provides the style, or the presentation and position of those elements. JavaScript and jQuery provide the script that controls the behavior or function of those elements.

Question 34

Is there a way to select every element on the page?

Answer 34

Simply pass in a “*” into the jQuery wrapper to get all the elements.

Question 35

How many classes can I give to elements?

Answer 35

There is no defined maximum, according to the standards, but the number in real-world usage is around 2,000 classes per element.

Question 36

Are there any restrictions on what I can call variables?

Answer 36

Yes! Variables cannot begin with numbers. Also, they cannot contain any mathematical operators (+ * - ^ / ! ), spaces, or punctuation marks. They can, however, contain underscores. They cannot be named after any JavaScript keywords (like window, open, array, string, location), and are case sensitive.

Question 37

Are there any restrictions on what I can use for class names?

Answer 37

A class name must begin with an underscore (_), a dash (-), or a letter (a–z), followed by any number of dashes, underscores, letters, or numbers. There is a catch: if the first character is a dash, the second character must be a letter or underscore, and the name must be at least two characters long.

Question 38

this vs. $(this) ?

Answer 38

In JavaScript, “this” refers to whatever DOM element we want to work with in our code. Adding the $( ) to this, giving us $(this), allows us to interact with our DOM element using jQuery methods.

We use when we want to be really specific about which element we’re selecting. When it comes to specificity, the simplest selector to write is $(this). (All you have to remember is the pronoun “this,” after all.) The $(this) selector gives us an easy way to point to the current element.

Question 39

descendant selectors ?

Answer 39

Descendant selectors are yet another selector we can use with jQuery, and they happen to fit our situation perfectly. With descendant selectors, we can specify relationships between elements. We can select children, parents, or siblings.

Question 40

Where did this come from?

Answer 40

In many object-oriented programming languages, this (or self) is a keyword that can be used in instance methods to refer to the object on which the currently executing method has been invoked.

Question 41

$(this) ?

Answer 41

Selects the “current” element.

The meaning of $(this) will change throughout your code, depending on where it is being referenced.

Question 42

jQuery Selectors?

Answer 42

$(this) — Selects the current element.

$(“div”) — Selects all the div elements on the page.

$(“div p”) — Selects all the p elements that are directly inside div elements.

$(“.my_class”) — Selects all the elements with the my_class class.

$(“div.my_class”) — Selects only the divs that have the my_class class. (Different types of elements can share a class.)

$(“#my_id”) — Selects the element that has the ID of my_id.

Question 43

What is an “event” in jQuery and Javascript? What is function?

Answer 43

In jQuery and JavaScript, a click is referred to as an event (there are plenty of other events, but for our purposes, we’ll just focus on clicks for now). An event is a mechanism that allows you to run a piece of code when something happens on the page (like a user clicking a button).

The code that gets run is a function, and functions allow you to make your jQuery more efficient and reusable. We’ll look more closely at functions in a minute, but for now, let’s look at how a click event really works.

Question 44

How does a click event work?

Answer 44

1. A click event happens to an HTML button.
2. The event listener hears the event and passes it on to.
3. …the JavaScript interpreter, which works out what needs to happen for each event…
4. …and runs code to change the page.

$(“#btnSubmit”).click( function(){ // Some jQuery here!

});

Question 45

What’s with that event listener? I haven’t seen that before. What does it do, exactly?

Answer 45

Event listeners are a part of the Document Object Model (DOM). You can add them to any page, so you don’t have to rely on users clicking links and buttons to make things happen.

Event listeners are the browser’s way of paying attention to what a person does on a page, and then telling the JavaScript interpreter if it needs to do something or not.

jQuery gives us very easy ways to add event listeners to any element on the page, so users are no longer just clicking on links and buttons!

Question 46

Whats binding an event?

Answer 46

When we add an event to an element, we call this binding an event to that element. When we do this, the event listener knows to tell the JavaScript interpreter what function to call.

Question 47

What are the two ways of binding events to elements?

Answer 47

Method 1

We use this method to add events to elements as the page is getting loaded. This is often known as the convenience method.

$(“#myElement”).click( function( ) {

  alert($(this).text());

});

Method 2

We use this method just like Method 1, but we can also use it to add events to elements that get added to the page after it is loaded, like when we create new DOM elements.

$(“#myElement”).bind(‘click’, function( ) {

alert($(this).text());

});

Question 48

Whats the main difference between binding Method 1 and Method 2 ?

Answer 48

Method 1—the convenience method—is simply a shortcut for Method 2, but only when the DOM elements exist already.

jQuery offers many shortcuts like this to help you keep your code cleaner. They are known as convenience methods because they are included solely for ease of use—but they do have limits. You’ll want to use Method 2 to add events to new DOM elements that you create within your code, like if you added a new clickable image, or a new item to a list that you want the user to interact with.

Question 49

What triggers an event? Give examples of keyboard, mouse, browser, form, and document loading events.

Answer 49

Events can be triggered by a wide variety of things on any given page. In fact, your entire browser is eventful, and pretty much any part of it can trigger events!

Keyboard events - keydown, keypress, keyup

Mouse events - click, dbl click, focusin, focusout, hover, mousedown, mouseenter, mouseleave, mousemove, toggle etc.

Browser events - error, resize, scroll

Form events - blur, chage, focus, select, submit

Document loading - load, ready, unload

Question 50

What about those functions inside the events?

Answer 50

They are called handler functions. A handler function is a block of code that runs when the event is triggered.

Question 51

How many different categories of events are there?

Answer 51

jQuery groups events into five different categories: browser events, document loading events, form events, keyboard events, and mouse events.

Question 52

How many different events are there?

Answer 52

There are nearly 30 different types, between all the different event categories.

Question 53

What can trigger an event (i.e., make an event happen) on the page?

Answer 53

It’s mostly input devices (keyboard and mouse) that trigger the different event types. However, your browser, the page document, your jQuery code, and even an HTML form on your page can trigger events, too.

Question 54

How does jQuery handle issues regarding browser support for events?

Answer 54

jQuery knows which browser is being used, so it decides how to deal with events, depending on what browsers your website viewer is using. As for an object, it’s nothing fancy. In practical terms, an object is really just variables and functions combined into a single structure.

Question 55

How do you remove or unbind an event?

Answer 55

Just like binding events to elements, you often need to remove events from elements—for example, when you don’t want people to click a submit button twice on a form, or you only want to allow them to do something once on a page.

So we use the unbind method

Question 56

Whats looping do in jQuery?

Answer 56

Oftentimes, we need to interact with a group of elements one by one.

jQuery gives us the ability to loop through groups of elements, based on whatever selector we choose. Looping, also known as iteration, is simply going through a group of elements one at a time, and doing something to each element along the way.

The .each method allows us to loop through each of the elements that match our selector.

Question 57

How does looping work?

Answer 57

$(“.nav_item”).each(function(){

$(this).hide(); });

1. A jQuery selector
2. Loop through each of the elements that match our selector.
3. Run this handler function.
4. Run this code on each element that matches our selector.

Question 58

Can I trigger events in my code?

Answer 58

Yes! This is relatively common. Good examples of this are submitting forms for validation or hiding modal pop-up boxes, to name a couple.

Question 59

How do I use the trigger event?

Answer 59

Just like most things in jQuery, its creators tried to make things memorable. You can just use the .trigger method, combined with a selector; for example,

$(“button:first”). trigger(‘click’); or $(“form”). trigger(‘submit’);.