jquery_quiz.js

/* Here is your chance to take over Socrates!


Spend 10 minutes on each of the following hacks to the Socrates website.
Enter them in the console to make sure it works and then save
your results here.

Choose a new pair for each. Add your names to the section you complete.
*/

/*1. Use basic selectors (id, class, element) to
     choose an element on the page.
     Use the .css() method to alter at least
     two CSS properties of this element. */

$('p a')[0].attr('href','http://www.w3schools.com/cssref/css3_pr_box-shadow.asp')
TypeError: Object [object HTMLAnchorElement] has no method 'attr'

var link = $('p a')[0]

<a href=​"http:​/​/​api.jquery.com/​">​jQuery documentation​</a>​

$(link).attr('href','http://www.w3schools.com/cssref/css3_pr_box-shadow.asp')

<a href=​"http:​/​/​www.w3schools.com/​cssref/​css3_pr_box-shadow.asp">​jQuery documentation​</a>​

$(link).text('WE HACKED THIS!')

<a href=​"http:​/​/​www.w3schools.com/​cssref/​css3_pr_box-shadow.asp">​WE HACKED THIS!​</a>​


/*2. Use basic selectors and the find() method to select an image on the page
    and change it with another image of your choice.  */

    $(".comment_user img").attr('src','https://secure.gravatar.com/avatar/7f279cdd4dcbc3b5b98deed921ba86a2.png?r=PG&amp;d=mm&amp;s=50')

<img alt=​"Anne Spalding" src=​"https:​/​/​secure.gravatar.com/​avatar/​7f279cdd4dcbc3b5b98deed921ba86a2.png?r=PG&amp;​d=mm&amp;​s=50" title=​"Anne Spalding">​
,
<img alt=​"Anne Spalding" src=​"https:​/​/​secure.gravatar.com/​avatar/​7f279cdd4dcbc3b5b98deed921ba86a2.png?r=PG&amp;​d=mm&amp;​s=50" title=​"Anne Spalding">​

$('body').find('img')

$('body').find('img').attr('src','https://secure.gravatar.com/avatar/d5a228fe4dc32df5e9dc49bb6600ef1f.png?r=PG')

/*3. Use traverse methods to select all instances of a repeated
element on the page
(like the h3 surrounding the words 'Code Review' ) and
use the animate() method to modify it.
*/

$('h2').each(function(){
    $(this).animate({
      opacity: 0.5
    });
});

/*4. Try to find an element that requires at least three selectors /
  traverse
     methods to locate it and then use the .on() method to
     bind an event handler
     on these elements (use an event other than click).*/

$('div ol li').on('click', function() {
  alert($(this).text() );
});

$('div ul li').on('click', function() {
  alert($(this).text() );
});

/*5. Your choice. */
$('.span8').on('click', function() { $(this).text('We win!') });