People.engr.tamu.edu



JQuery Intro – Flipped Lab Version AYou are working on this as a group!! Your names here:Complete one problem at a timeHave the Instructor or TA sign off after you complete each problem so you may move on.You will be graded on your overall completion.You are allowed notes, books, etc…To save time, some HTML code has been built for you. Add the JavaScript code to the HTML files given. To get the pre-built files, use: Basic HTMLWith the HTML file “JQuery1.html” and the JavaScript file “JQuery1.js” write the JQuery required to perform the following operations to the “p” element with id “text”:Append the text present in the text field to the end of the “p” element’s current text if “Append Text” is clickedReplace the entirety of the “p” element’s current text with the text present in the text field if “Replace Text” is clickedClear the text within the “p” element if “Clear Text” is clickedNone of these operations need to clear the text field when a button is clicked.Do not edit “JQuery1.html”, all code should be added to “JQuery1.js”Show both code and browser view!!Instructor/TA signatureYour names here:Manipulating CSSWith the HTML file “JQuery2.html”, the CSS file “JQuery2.css” and the JavaScript file “JQuery2.js” write the JQuery required to perform the following operations to the “div” element with id “content”:When the value of the style dropdown changes, change the class of the “div” element to match the class given by the dropdown optionWhen the value of the color dropdown changes, change only the “div” element’s text color to match the color given by the dropdown optionDo not edit “JQuery2.html” or “JQuery2.css”, all code should be added to “JQuery2.js”Show both code and browser view!!Instructor/TA signatureYour names here:Element DimensionsWith the HTML file “JQuery3.html”, the CSS file “JQuery3.css” and the JavaScript file “JQuery3.js” write the JQuery required to perform the following operations:On page load, set the text of the “span” element with id “height” to be the height of the “div” element” with id “content and the “span” element with id “width” to be the width of the same “div” using only JQueryWhen “Add 10 to height” is clicked, add 10 to the height of the “div” element and update the relevant “span” elementWhen “Add 20 to width” is clicked, add 20 to the width of the “div” element and update the relevant “span” elementInitialAfter 3 clicks of “Add 10 to height”Then after 3 clicks of “Add 20 to width”Do not edit “JQuery3.html” or “JQuery3.css”, all code should be added to “JQuery3.js”Show both code and browser view!!Instructor/TA signatureYour names here:AnimationsWith the HTML file “JQuery4.html and the JavaScript file “JQuery4.js” write the JQuery required to perform the animations sequentially when the “Animate” button is clicked:Move the “div” element to the right 500 pixels while making it slightly transparentMove the “div” element slowly down 100 pixels while making it completely transparentReturn the “div” element to its starting location and make it completely opaque Do not edit “JQuery4.html”, all code should be added to “JQuery4.js”Show both code and browser view!!Instructor/TA signatureYour names here:Adding LogicYou are given an HTML file “JQuery5.html” which contains a 6x6 grid of “X”’s; you are also given the CSS file “JQuery5.css” and the JavaScript file “JQuery5.js”.When an element of the grid is clicked, it should become selected if it is not currently selected and be deselected if it is currently selected. An element is considered ‘selected’ if it has the CSS class ‘selected.’Upon clicking “Change Selected Symbols” every selected “X” should turn into an “O” and every selected “O” should turn into an “X.” A user may select a mixture of “X”’s and “O”’s to change in the same operation. Upon clicking “Clear selection”, every element should be deselected.The result should look similar to below:InitialSelect some XClicking “Change Selected Symbols”Changing SelectionClicking “Change Selected “Symbols”Clicking “Clear selection”Do not edit “JQuery5.html” or “JQuery5.css”, all code should be added to “JQuery5.js”Show both code and browser view!!Instructor/TA signatureYour names here:AJAX and TraversingYou are given three HTML files “JQuery6.html”, “JQuery6UL.html”, and “JQuery6OL.html.” “JQuery6.html” contains 5 buttons. Each button should perform the function specified below:“Add Unordered List” – When clicked, a new <ul> element should be created containing the contents of “JQueryUL.html.” This content must be loaded with AJAX. The <ul> element should then be appended to the <table> element“Add Ordered List” – When clicked, a new <ol> element should be created containing the contents of “JQueryOL.html.” This content must be loaded with AJAX. The <ol> element should then be appended to the <table> element“Color Unordered Lists” – When clicked all <li> elements within all <ul> elements should be colored red“Color After ‘after’ Elements” – When clicked all elements immediately following an element with the class ‘after’ should be colored blue. Hint: These elements are siblings of the elements with class ‘after’“Color Parents of ‘colorParent’ Elements” – When clicked all immediate parent elements of an element with the class ‘colorParent’ should be colored yellow.IMPORTANT NOTE: For adding the <ul> and <ol> elements in a way that lets you easily use the AJAX .load() method and append the result to the table, see the “Add Several New Elements With append() and prepend()” section of not edit “JQuery6.html”, “JQuery6UL.html” or “JQuery6OL.css”, all code should be added to “JQuery6.js”Show both code and browser view!!Instructor/TA signature ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download