Exercises on JQuery

Try to answer these questions. Solution links are available below the questions.
  1. Assign font size and font family and background colour to a <p> tag by using style property.
  2. Use the above <p> tag in three places in a page and set this common style property to above tag.
  3. Use the above code to style the tags in multiple pages by using common file.
  1. On click of a button, welcome message should display.
  2. There are five input textboxes. On click of the input box , the background colour should change to yellow. ( Hint : use this )
  3. Remove and add different style to the element by using JQuery. Create two style classes and by default apply first one to one element. On click of a button change the elements associated property to other style.
  4. Toggle the style properties of the element on click
  5. Create one button and a textbox. On click of the button the text written in text box should display on the button.
  1. Create a div tag and it should display Welcome message (by using JQuery )
  2. Create two div tags and assign yellow as background colour to both of them by using JQuery.
  3. Display and hide message shown in the div tag on click of the buttons. You can use Jquery show hide.
  4. Display and hide message by using a single button . You can use Jquery toggle().
  5. Create a div tag and on click of a button it should display your name.
  1. Create one textarea and one button. On click of the button the length of text entered inside the textarea will be displayed.
  2. In the above code show the counter as and when text is entered.
  3. Use one progress bar for showing the number of text entered.
  1. Create one style class and name it error, give its border colour as red and background colour as yellow. Apply this class to the text box when the focus is moved out of it and if entered data is more than 10.
  2. Create two textboxes and one button with + on it. On click of the button you should display sum of the two entered numbers in textbox. Similarly add Subtract, Multiple and Division buttons.
  3. Your buttons in above code will remain in disable state till both the inputs are filled. ( Use one function to enable or disable buttons. Trigger that function with on Blur events of the textboxes )
  1. Create a form asking users to enter userid and password. On submit of the form the page should submit the data to backend page written in PHP or Python. Note that you are submitting the form using JQuery so page should not reload or redirect. If submitted data is valid then the login form should show welcome message by hiding the input boxes, otherwise it should ask the user to try again.
  2. You have created one style css error in previou exercise above. Use the same when wrong user id or password is entered.
  1. In above example create one session with userid if userid and password are matching.
  2. After creating the session redirect the user to a new page where the session is checked and display a welcome message along with a logout link.
  3. Once logout link is visited the user session will be destroyed and in place of logout link the login link should appear.
  4. Create a member profile page for each member to update their password.
    Create one progress bar interlocked with a spinner. The value of spinner should reflect on the progress bar.
DEMO of three drop down listbox


* indicates required
Subscribe to plus2net


    Most Popular JQuery Scripts


    Two dependant list boxes


    Calendar with Date Selection


    Data change by Slider


    Show & Hide element

    JQuery Video Tutorials

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2022 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer