jQuery: Find all textareas and add all paragraphs and make a border

jQuery Fundamental - I : Exercise-1

Using jQuery find all textareas, and makes a border. Then adds all paragraphs to the jQuery object to set their borders red.

Sample solution :

HTML Code :

<!DOCTYPE html>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Using jQuery find all textareas and makes a border. Now adds all paragraphs to the jQuery object and makes a border.</title>
<button id="button1">Click to check the effect</button>

CSS Code:

button {
    display: block;
    margin: 20px 0 0 0;
textarea {
    width: 200px;
    height: 60px;
    margin: 10px;
    float: left;
    font-size: 18px;
  p {
    clear: left;
    font-weight: bold;
    font-size: 18px;
    color: green;
    margin: 5px 10px 0 10px;
    padding: 2px;

JavaScript Code :

$( "textarea" ).css( "border", "2px solid red" ).add( "p" )
  .css( "border", "2px solid red" );

Used Methods :

  • .add(elements) : Create a new jQuery object with elements added to the set of matched elements. Here .add(elements) adds or more "p" elements to add to the set of "textarea" elements.
  • .css(propertyName) : Get the computed style properties for the first element in the set of matched elements.

See the Pen jquery-fundamental-exercise-1 by w3resource (@w3resource) on CodePen.

Contribute your code and comments through Disqus.

Previous: jQuery Fundamental - I exercises
Next: Set the background color red of the following elements using jQuery.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

Follow us on Facebook and Twitter for latest update.