Article

Chaining functions

https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js
Copy to clipboard

Jquery allows us to combine functions so that more is accomplished withfewer lines of code.

Suppose we want to change the width and height of a div whose id is popup. We could write the following code: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/jquery%20functions/ex2.js?actionable=true In the above example we have chained two different functions width() and height(). Chaining allows a developer to apply an arbitrary number of functions to any given elements.

<script>
$(document).ready(function(){
  XT1
});
</script>
Copy to clipboard
Send to Live Demo

Live demo

<style>#buy{color:#baff00;} #buy:hover{text-decoration:underline;} .highlighter{background-color: rgb(186 255 0 / 17%);}</style><div id="minidivpage" class="example-live"><h1 class="heading">This is a heading</h1><div id="popUp" class="pop-up">POP UP DIV</div><h4 class="heading-4">Categories in a webflow list:</h4><ul role="list" class="list"><li>Location</li><li>Position</li><li>Level</li></ul><h3 id="title" class="heading-3">This is a title</h3><div class="highlighter"></div><a id="buy" target="_blank" href="#">Link</a></div>

<script>    
$(document).ready(function() {
  XT1
});
</script>
<script>
  
</script>
Copy to clipboard
Press the Run Demo button to execute the scripts above.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Your browser is too small

Resize your browser to be at least 769px wide.