Learning jQuery seemed very daunting to begin with. Using the jQuery Fundamentals editor, allowed me to gain a basic understanding of how it works and its structure.

The first task I had to do was the change the content of the H3 (Heading 3) in the html document to something else. The code is defined that it is Javascript using the dollar symbol ($) and then calls for the h3 in the html code. I have then over written the text to be “Tom was here”. Finally I have ended this with a semi-colon to say that this javascript script is over.

$(‘h3’).html(‘Tom was here’);

The second task was the change the CSS from the list items (li) to something else. To do this I used the inspect element function in Google Chrome to look at the code of the page. It showed that there was a class for the only the CSS item on the list called “Special”. To change this, I used the $ and then ‘.special’ to target the class. I then called for the html file as that is where the list it. I then overwrite the text to say “Hello”.

$(“.special”).html(“Hello”);

The third task was to remove the drop down menu. This html tag is called select and using the .remove function will hide the drop down menu. This was a fairly easy issue to resolve in comparison with some of the others.

$(“select”).remove();

Unfortunately, I could not get it to capture the value of the text inputted into the text box and display it at the end of the list. I tried using Google and the documentation available on the jQuery Fundamentals website. I tried using many different methods and used the same structure as I used for the previous issues which Is the format for Javascript, however, failed.

I hope to try and resolve this later to gain a better understanding. This exercise was great to understand the basics, however, some more in-depth and related support to the specific tasks would have been beneficial on the website to help those struggling like myself.

Tom.