jQuery Basics

Question 1

What are the Four P’s of problem solving

Answer 1

P preparation
P planning
P Perform
P Perfect

Question 2

What is preparation in the four P’s of problem solving?

Answer 2

The first P is preparation, where we try to understand the problem and think of a solution.

Question 3

What is planning in the four P’s of problem solving?

Answer 3

The second P is planning, where we plan out the solution.

Question 4

What is Perform in the four P’s of problem solving?

Answer 4

The third P is perform, where we perform what’s required for our proposed solution.

Question 5

What is Perfect in the four P’s of problem solving?

Answer 5

Fourth is we’ll perfect our solution if there’s any mistakes or things that we haven’t considered yet.

Question 6

.hide()

Answer 6

Hide the matched elements.

.hide()

With no parameters, the .hide() method is the simplest way to hide an element:

$( “.target” ).hide();

Question 7

.show()

Answer 7

Display the matched elements.

.show()


With no parameters, the .show() method is the simplest way to display an element:

$( “.target” ).show();

Question 8

How to show an element slowly.

Answer 8

$( “button” ).click(function() {
$( “p” ).show( “slow” );
});

Question 9

.ready( handler )

Answer 9

Specify a function to execute when the DOM is fully loaded.

.ready( handler )

handler
Type: Function()
A function to execute after the DOM is ready.

* $( document ).ready( handler )
* $( handler )

$( document ).ready(function() {
  // Handler for .ready() called.
});

Question 10

.append()

Answer 10

.append()

Insert content, specified by the parameter, to the end of each element in the set of matched elements.

.append( content [, content ] )

$( “.inner” ).append( “<p>Test</p>” );

Question 11

.click()

Answer 11

Bind an event handler to the “click” JavaScript event, or trigger that event on an element.

.click( handler )
◦ handler
Type: Function( Event eventObject )
A function to execute each time the event is triggered.

$("button").click(function(){
    //3.1 We want to show the spoiler next to the button clicked.
  $(this).prev().show();
    //3.2 Get rid of the button
  $(this).remove();
});

Question 12

.remove()

Answer 12

Remove the set of matched elements from the DOM.

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>
We can target any element for removal:

$( “.hello” ).remove();
This will result in a DOM structure with the <div> element deleted:

<div>
<div>Goodbye</div>
</div>

</div>

Question 13

.prev()

Answer 13

Get the immediately preceding sibling of each element in the set of matched elements. If a selector is provided, it retrieves the previous sibling only if it matches that selector.

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
To select the element that comes immediately before item three:

$( “li.third-item” ).prev().css( “background-color”, “red” );

Question 14

.attr()

Answer 14

Get the value of an attribute for the first element in the set of matched elements.


.attr( attributeName )

$(“#imageGallery a”).click(function(event){
$(this).attr(“href”);
console.log();
});

Question 15

event.preventDefault()

Answer 15

If this method is called, the default action of the event will not be triggered.

$( "a" ).click(function( event ) {
  event.preventDefault();
  $( "<div>" )
    .append( "default " + event.type + " prevented" )
    .appendTo( "#log" );
});</div>

Question 16

.children()

Answer 16

Get the children of each element in the set of matched elements, optionally filtered by a selector.

.children( [selector ] )
◦ selector
Type: Selector
A string containing a selector expression to match elements against.

$( “ul.level-2” ).children().css( “background-color”, “red” );