Category: jQuery

Sometimes, we want to set the src sttribute of an element with jQuery.

In this article, we’ll look at how to set the src sttribute of an element with jQuery.

Set the Src Attribute of an Element with jQuery

To set the src sttribute of an element with jQuery, we can call the attr method with the attribute name and value.

For instance, we write:

<img>

to add the img element.

Then we write:

$("img").attr("src", "https://picsum.photos/200");

to select the img element with $.

Then we call attr on the returned element with attribute name and value strings.

Now we should see an image displayed.

Conclusion

To set the src sttribute of an element with jQuery, we can call the attr method with the attribute name and value.

Sometimes, we want to remove whitespace and line breaks between HTML elements using jQuery.

In this article, we’ll look at how to remove whitespace and line breaks between HTML elements using jQuery.

Remove Whitespace and Line Breaks between HTML Elements Using jQuery

To remove whitespace and line breaks between HTML elements using jQuery, we can use the filter method to remove any items that are whitespace in the selected items list.

For instance, if we have:

 <div id="widget">        <h2>foo</h2><p>hi.</p>        </div>

Then we write:

jQuery.fn.cleanWhitespace = function() {
  this.contents().filter(
      function() {
        return (this.nodeType == 3 && !/\S/.test(this.nodeValue));
      })
    .remove();
  return this;
}

const widget = $('#widget').cleanWhitespace();
console.log(widget.contents())

We add the cleanWhitespace method to the jQuery object to remove all the selected items that are whitespaces.

In the method, we call this.contents to get the selected contents.

Then we call filter with a callback that returns the nodes with nodeType 3, which are text nodes, and nodes that aren’t whitespaces only, which we check with the regex.

Then we call remove to remove the nodes returned by filter.

And finally we return this.

Next, we select the div with $ and call cleanWhitespace on it.

And finally, we call widget.contents and should see that there are no whitespace nodes left.

Conclusion

To remove whitespace and line breaks between HTML elements using jQuery, we can use the filter method to remove any items that are whitespace in the selected items list.

To list all bindings of an element with jQuery, we can use the _data method.

For instance, if we have the following input:

<input>

Then we can write:

const input = $('input')
input.bind('click', () => {})
input.bind('input', () => {})
$.each($._data($(input)[0], 'events'), (i, e) => {
  console.log(i, e);
});

to get the input with $('input').

Then we add the event handlers with:

input.bind('click', () => {})
input.bind('input', () => {})

Next, we get the event handler bindings with:

$._data($(input)[0], 'events')

Then we use the $.each method to loop through the bindings returned by $._data.

In the callback, i is the event name string and e has the event data,

To check if an input field is required using jQuery, we can check if the required attribute of each input field is set.

For instance, if we have:

<form id="register">
  <label>Nickname:</label>
  <input type="text" name="name" required="" />
  <br>

  <label>Email:</label>
  <input type="email" name="email" required="" />
  <br>

  <label>Password:</label>
  <input type="password" name="password" required="" />
  <br>

  <label>Again:</label>
  <input type="password" name="password-test" required="" />
  <br>

  <input type="submit" value="Register" />
</form>

Then we write:

$('form#register').find('input').each(function() {
  if (!$(this).prop('required')) {
    console.log("not required");
  } else {
    console.log("required");
  }
});

We have a form that has a few input elements.

Then we get all the input elements in the form with $('form#register').find('input').

Next, we call each with a callback that gets the value of the required attribute with:

$(this).prop('required')

And we negate that to check if a field isn’t required.

If the required attribute isn’t present, then we log 'not required'.

Otherwise, we log 'required'.

To set margin CSS properties with jQuery, we can call the css method to change the margin CSS properties.

For instance, if we have the following HTML:

<div>
  hello
</div>

Then we write:

$('div').css('margin-left', '100px');

to select the div with $('div').

Then we call the css method on the returned div jQuery object with the property key and value we want to set respectively.

Therefore, we set margin-left to 100px.

The unit must be included.

Now we should see a 100px left margin added to the div.