20 HELPFUL JQUERY API DOCUMENTATION, JQUERY EVENT METHODS

post-promotion-placement#checkSidebarAdDisplayCondition" data-controller="sticky-ad post-promotion-placement">
Read Time:14 minsLanguages:url-selector#selectionChanged" data-controller="url-selector">EnglishDeutschEspañolBahasa IndonesiaPусскийукраїнська мова

So you"ve been playing with jQuery for a while now, you"re starting to lớn get the hang of it, and you"re really liking it! Are you ready lớn take your jQuery knowledge to cấp độ two? Today, I"ll demonstrate twenty functions & features you probably haven"t seen before!

1 after() / before()

Sometimes you want lớn insert something into the DOM, but you don"t have any good hooks to bởi it with; append() or prepend() aren"t going khổng lồ cut it và you don"t want to địa chỉ cửa hàng an extra element or id. These two functions might be what you need. They allow you to lớn insert elements into the DOM just before or after another element, so the new element is a sibling of the older one.

$("#child").after($("")).text("This becomes a sibling of #child"));$("#child").before($("")).text("Same here, but this is go about #child"));You can also vày this if you"re working primarily with the element you want to lớn insert; just use the insertAfter() or insertBefore functions.

Bạn đang xem: 20 helpful jquery api documentation, jquery event methods

$("I"ll be a sibling of #child

").insertAfter($("#child"));

2 change()

The change() method is an sự kiện handler, just lượt thích click() or hover(). The change event is for textareas, text inputs, và select boxes, and it will fire when the value of the target element is changed; lưu ý that this is different from the focusOut() or blur() sự kiện handlers, which fire when the element loses focus, whether its value has changed or not.

The change() event is perfect for client-side validation; it"s much better than blur(), because you won"t be re-validating fields if the user doesn"t change the value.

$("input").change(function () switch (this.id) /* some validation obatambeienwasirherbal.com here */ );​​​​​​​​​​

3 Context

Context is both a parameter and a property in jQuery. When collecting elements, you can pass in a second parameter khổng lồ the jQuery function. This parameter, the context, will usually be a DOM element, & it limits the elements returned to item matching your selector that are children of the context element. That might sound a bit confusing, so check out this example:

Hello World

var hi1 = $(".hello"), hi2 = $(".hello", $("#wrap").get(0));console.group("hi1");console.log("Number of elements in collection:", hi1.length);console.log("Context of the collection:", hi1.context);console.groupEnd();console.group("hi2");console.log("Number of elements in collection:", hi2.length);console.log("Context of the collection:", hi2.context);console.groupEnd();

So where would this be useful? One place might be inside an sự kiện handler function. If you"d like to get an element within the one the event was fired on, you could pass this as the context:

$("ul#options li").click(function () $("a", this) . . .);

4 data() / removeData()

Have you ever wanted to store some bit of information about an element? You can do that easily with the data() method. Lớn set a value, you can pass in two parameters (a key & a value) or just one (an object).

$("#wrap").data("myKey", "myValue");$("#container").data( myOtherKey : "myOtherValue", year : 2010 );To get your data back, just call the method with the key of value you want.

$("#container").data("myOtherKey"); //returns "myOtherValue"$("#container").data("year"); //returns 2010To get all the data that corresponds with an element, call data without any parameters; you"ll get an object with all the keys and values you"ve given khổng lồ that item.If you want lớn delete a key/value pair after you"ve added it to an element, just hotline removeData(), passing in the correct key.

$("#container").removeData("myOtherKey");

5 queue() / dequeue()

The queue() và dequeue() functions khuyễn mãi giảm giá with animations. A queue is menu of animations lớn be executed on an element; be default, an element"s queue is named "fx." Let"s set up a scenario:

HTML

Start Animating Stop Animating showroom to Queue
JavaScript

$("#start").click(animateBox);$("#reset").click(function() $("div").queue("fx", <>););$("#add").click(function() $("div").queue( function() $(this).animate( height : "-=25", 2000); $(this).dequeue(); ););function animateBox() $("div").slideUp(2000) .slideDown(2000) .hide(2000) .show(2000, animateBox);So, here"s what"s going on: in the animateBox function, we"re setting up a queue of animations; notice that the last one calls back khổng lồ the function, so this will continually repeat the queue. When we click li#start, the function is called & the queue begins. When we click li#reset, the current animation finishes, and then the div stops animating. What we"ve done with jQuery is set the queue named "fx" (remember, the default queue) to lớn an empty array; essentially, we"ve emptied the queue. And what about when we click li#add? First, we"re calling the queue function on the div; this adds the function we pass into it to lớn the over of the queue; since we didn"t specify a queue as the first parameter, "fx" is used. In that function, we animate the div, and then gọi dequeue() on the div, which removes this function from the queue và continues the queue; the queue will continue repeating, but this function will not be part of it.

6 delay()

When you"re queuing up a chain of animations, you can use the delay() method lớn pause the animation for a length of time; pass that time as a parameter in milliseconds.

$("div").hide().delay(2000).show(); // div will stay hidden for 2 seconds before showing.

7 bind(), unbind(), live(), and die()

Did you know that when you địa chỉ a click event to an element like this . . .

$("#el").click(function () /*******/ );. . . You"re really just using a wrapper for the bind() method? to lớn use the bind() method itself, you can pass the sự kiện type as the first parameter và then the function as the second.

If you use a lot of events, you can categorize them with namespacing; just showroom a period after the event name and địa chỉ your namespace.

$("#el").bind("click", function () /*******/ );$("#el").bind("click.toolbarEvents", function () /*******/ ); // namespacedYou can also assign the same function to multiple events at the same time, by separating them with spaces. So if you wanted to lớn make a hover effect, you could start this way:

$("#el").bind("mouseover mouseout", function () /*******/ );You can also pass data to the function if you"d like, by adding a third parameter (in the second position).

$("#el").bind("click", status : "user-ready" , function () switch(event.data.status) /********/ );Sooner or later, you"ll find yourself inserting element into the DOM via an sự kiện handler; however, you"ll find that the sự kiện handlers you"ve made with bind (or its wrappers) don"t work for inserted elements. In cases lượt thích this, you"ll need to lớn use the live() (or delegate) method; this will địa chỉ cửa hàng the event handlers to lớn the appropriate inserted elements.

Xem thêm: Crm Là Gì? Phần Mềm Crm Là Gì ? Customer Relationship Management Là Gì

$(".toggle").live(function () /* obatambeienwasirherbal.com */ $("Enable Beta Features").appendTo($("#optionsPanel")); /* more obatambeienwasirherbal.com */);To remove event handlers created with bind(), use the unbind() method. If you don"t pass it any parameters, it will remove all the handlers; you can pass in the event type to lớn only remove sự kiện handlers of that type; to lớn remove events from a specific namespace, add the namespace, or use it alone. If you just want to remove a certain function, pass its name along as the second parameter.

$("button").unbind(); // removes all$("button").unbind("click"); // removes all clicks$("button").unbind(".toolbarEvents"); // removes all events from the toolbarEvents namespace$("button").unbind("click.toolbarEvents"); // removes all clicks from the toolbarEvents namespace$("button").unbind("click", myFunction); // removes that one handlerNote that you can bind/unbind functions you"ve passed in anonymously; this only works with the functions name.If you"re trying to lớn unbind an sự kiện from inside the function called by the event, just pass unbind() the sự kiện object.

$("p").bind("click", function (event) $("p").unbind(event); );You can"t use unbind() for live events; instead, use the die(). Without parameters, it will remove all live events from the element collection; you can also pass it just the sự kiện type, of the sự kiện type & the function.

$("span").die(); // removes all$("span").die("mouseover"); // removes all mouseovers$("span").die("mouseover", fn); // remove that one handlerAnd now, you can wield jQuery events with deftness và power!

You should also review the delegate() method, as there can be substantial performance benefits to lớn using it over live().

8 eq()

If you"re looking for a specific element within a mix of elements, you can pass the index of the element to the eq() method and get a single jQuery element. Pass in a negative index lớn count back from the end of the set.

var ps = $("p");console.log(ps.length); // logs 3;ps.eq(1).addClass("emphasis"); // just adds the class khổng lồ the second công trình (index in zero-based)You can also use :eq() in your selectors; so the previous example could have been done like this:

$("p:eq(1)").addClass("emphasis");

9 get()

When getting a collection of element, jQuery returns them as a jQuery object, so you have access to lớn all the methods. If you just want the raw DOM elements, you can use the get() method.

You can specify an index to get only one element.

alert( $("p") ); //