Question

Question 1.

Show the correct jQuery code for each of the following UI tasks:

a) Select all elements with class="name" and give each of them a unique id in the form "name-0", "name-1", "name-2"… and so on

b) Anytime an element with class="trackClick" is clicked (using the "click" event), output the text "element clicked" to the console (using console.log()). This must work for all present and future elements with the class "trackClick".

Question 2.

Assume that there is only one <table> in the DOM tree and the table hast at least one row with five columns. Write down a small JavaScript code fragment to add one row to this table.

Question 3.

Write a JavaScript function that deletes all <image> tags from the screen.

Question 4.

Develop a JavaScript function that takes a DOM element as argument and reverses the order of its children, i.e. first child becomes last child, second child becomes one before last child, etc.

Question 5.

Consider the following code fragment:

Write a piece of code in JavaScript to remove all the styles from the web-page.

Question 6.

Write down a JavaScript expression to remove all the rows of a <table>. Assume that there is ONLY one table in the page and that the table has at least one row with at least one column (the exact number of columns is unknown to us).

Question 7.

Develop a JavaScript function that takes a DOM element as argument and reverses the order of its children, i.e. first child becomes last child, second child becomes one before last child, etc. (This question in duplicated from Test Two)

Question 8.

In the following code fragment, modify the style of the paragraph text using JavaScript code. Clicking on the button the font size and color of the paragraph text will be changed.

Question 9.

Look at the following code fragment. Write a JavaScript program to removes items from a dropdown list one at a time.

Question 10.

Write down a JavaScript code that turns the color of all <p> tags to “Red”.

Answer 1

As we are allowed to answer only four sub parts, please post new question for remaining questions.

1a)

var id=0;

$(".name").each(function(){
   $(this).attr('id', 'name'+id);
id++;
})

Sample screenshot:

1b)

$('body').on('click', '.trackClick', function(event) { 
console.log("element clicked");

}

Live takes care of future elements as well.

2)

$('#myTable tr:last').after('<tr><td/> <td/> <td/> <td/> <td/> </tr>');

myTable is the id of the table. It adds a row with 5 columns at the end.

3)

function removeImages() {

var images = document.getElementsByTagName('img');
var l = images.length;
for (var i = 0; i < l; i++) {
    images[0].parentNode.removeChild(images[0]);
}

}

4) Reversing dom elements

function reverse(n) {          // Reverse the order of the children of Node n
    var kids = n.childNodes;   
    var numkids = kids.length; 
    for(var i = numkids-1; i >= 0; i--) {  
        var c = n.removeChild(kids[i]);    //Remove child from lastand append from first
        n.appendChild(c);                  
    }
}

Here I answered you 5 sub parts. In case of any doubts, please comment.