jQuery — Wrapping, Visibility, and Delegation

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

.triggerHandler()

The .triggerHandler() method lets us run all handlers attached to an event for an element.

For example, if we have:

<button id="new">.triggerHandler( "focus" )</button><br><br>

<input type="text" value="To Be Focused">

Then we can trigger the focus event when we click on the button by writing:

$("#new").click(function() {
  $("input").triggerHandler("focus");
});

$("input").focus(function() {
  $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
});

We show the Focused! text when we click on the button as the input is focused.

.unbind()

The .unbind() method removes a previous attached event handler from the elements.

For example, if we have:

<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div id="theone"></div>

Then we can bind and unbind the click handler for the div with id theone by writing:

function aClick() {
  $("div").show().fadeOut("slow");
}

$("#bind").click(function() {
  $("#theone")
    .bind("click", aClick)
    .text("Can Click!");
});
$("#unbind").click(function() {
  $("#theone")
    .unbind("click", aClick)
    .text("Does nothing...");
});

We bind and unbind the click events on the div in the click handlers for the buttons.

.undelegate()

The .undelegate() method removes a handler from the event for all elements which match the current selector which match the current selector based on the root element.

For example, if we have:

<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div id="theone"></div>

Then we can bind and unbind the click handler from the div with ID theone by writing:

function aClick() {
  $("div").show().fadeOut("slow");
}

$("#bind").click(function() {
  $("body")
    .delegate("#theone", "click", aClick)
    .find("#theone")
    .text("Can Click!");
});

$("#unbind").click(function() {
  $("body")
    .undelegate("#theone", "click", aClick)
    .find("#theone")
    .text("Does nothing...");
});

.unwrap()

The .unwrap() method removes the parent of the set of matched elements from the DOM.

For example, if we have:

<button>wrap/unwrap</button>
<p>Hello</p>
<p>World</p>

We can toggle the wrapping and unwrapping of the div around the p elements by writing:

const pTags = $("p");
$("button").click(function() {
  if (pTags.parent().is("div")) {
    pTags.unwrap();
  } else {
    pTags.wrap("<div></div>");
  }
})

wrap all wrap each p element in its own div.

.val()

The .val() method gets the current value of the first element in the set of matched elements.

We can also use it to set th value of every matched element.

For example, if we have:

<select id="single">
  <option>Single</option>
  <option>Single2</option>
</select>

<select id="multiple" multiple="multiple">
  <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</select>

Then we can get the value selected from the select element by writing:

function displayVals() {
  const singleValues = $("#single").val();
  const multipleValues = $("#multiple").val() || [];
  console.log(singleValues, multipleValues)
}

$("select").change(displayVals);

For example, if we have:

<input type="text" value="some text">

Then we can get the value from the input as we type by writing:

$("input")
  .keyup(function() {
    const value = $(this).val();
    console.log(value);
  })
  .keyup();

:visible Selector

The :visible selector lets us select all elements that are visible.

For example, if we have the following HTML:

<button>Show hidden</button>
<div></div>
<div class="starthidden"></div>
<div></div>
<div></div>
<div style="display:none;"></div>

And CSS:

div {
  width: 50px;
  height: 40px;
  margin: 5px;
  border: 3px outset green;
  float: left;
}

.starthidden {
  display: none;
}

Then we can show all the divs that are hidden when we click on the button by writing:

$("div:visible").click(function() {
  $(this).css("background", "yellow");
});
$("button").click(function() {
  $("div:hidden").show("fast");
});

And when we click on the visible divs, we see a yellow background.

Conclusion

We can trigger handlers, unbind events, and make elements visible with jQuery.