function test_add() { $("p").add("div").addClass("widget"); var pdiv = $("p").add("div"); $('li').add('p').css('background-color', 'red'); $('li').add(document.getElementsByTagName('p')[0]) .css('background-coailor', 'red'); $('li').add('
new paragraph
') .css('background-color', 'red'); $("div").css("border", "2px solid red") .add("p") .css("background", "yellow"); $("p").add("span").css("background", "yellow"); $("p").clone().add("Again").appendTo(document.body); $("p").add(document.getElementById("a")).css("background", "yellow"); var collection = $("p"); collection = collection.add(document.getElementById("a")); collection.css("background", "yellow"); } function test_addClass() { $("p").addClass("myClass yourClass"); $("p").removeClass("myClass noClass").addClass("yourClass"); $("ul li:last").addClass(function (index) { return "item-" + index; }); $("p:last").addClass("selected"); $("p:last").addClass("selected highlight"); $("div").addClass(function (index, currentClass) { var addedClass: string; if (currentClass === "red") { addedClass = "green"; $("p").text("There is one green div"); } return addedClass; }); } function test_after() { $('.inner').after('Test
'); $('').after('').after(document.createDocumentFragment()); $('').after('').addClass('foo') .filter('p').attr('id', 'bar').html('hello') .end() .appendTo('body'); $('p').after(function () { return 'Test
'); $('.container').append($('h2')).append(document.createDocumentFragment()); var $newdiv1 = $(''), newdiv2 = document.createElement('div'), existingdiv1 = document.getElementById('foo'); $('body').append($newdiv1, [newdiv2, existingdiv1]); } function test_appendTo() { $('Test
').appendTo('.inner'); $('h2').appendTo($('.container')); } function test_attr() { var title = $("em").attr("title"); $("em").attr("title", null); // Delete an attribute. $("div").text(title); $('#greatphoto').attr('alt', 'Beijing Brush Seller'); $('#greatphoto') .attr('title', 'Photo by Kelly Clark'); $('#greatphoto').attr({ alt: 'Beijing Brush Seller', title: 'photo by Kelly Clark' }); $('#greatphoto').attr('title', function (i, val) { return val + ' - photo by Kelly Clark' }); $("div").attr("id", function (arr) { return "div-id" + arr; }) .each(function () { $("span", this).html("(ID = '" + this.id + "')"); }); $("img").attr("src", function () { return "/images/" + this.title; }); } function test_attributeSelectors() { $('a[hreflang|="en"]').css('border', '3px dotted green'); $('input[name*="man"]').val('has man in it!'); $('input[name~="man"]').val('mr. man is in it!'); $('input[name$="letter"]').val('a letter'); $('input[value="Hot Fuzz"]').next().text(" Hot Fuzz"); $('input[name!="newsletter"]').next().append('; not newsletter'); $('input[name^="news"]').val('news here!'); } function test_before() { $('.inner').before('Test
'); $('.container').before($('h2')).before(document.createDocumentFragment()); $("").before(""); var $newdiv1 = $(''), newdiv2 = document.createElement('div'), existingdiv1 = document.getElementById('foo'); $('p').first().before($newdiv1, [newdiv2, existingdiv1]); } function test_bind() { $('#foo').bind('click', function () { alert('User clicked on "foo."'); }); $('#foo').bind('mouseenter mouseleave', function () { $(this).toggleClass('entered'); }); $('#foo').bind({ click: function () { }, mouseenter: function () { } }); $('#foo').bind('click', function () { alert($(this).text()); }); $(document).ready(function () { $('#foo').bind('click', function (event) { alert('The mouse cursor is at (' + event.pageX + ', ' + event.pageY + ')'); }); }); var message = 'Spoon!'; $('#foo').bind('click', function () { alert(message); }); message = 'Not in the face!'; $('#bar').bind('click', function () { alert(message); }); var message = 'Spoon!'; $('#foo').bind('click', { msg: message }, function (event) { alert(event.data.msg); }); message = 'Not in the face!'; $('#bar').bind('click', { msg: message }, function (event) { alert(event.data.msg); }); $("p").bind("click", function (event) { var str = "( " + event.pageX + ", " + event.pageY + " )"; $("span").text("Click happened! " + str); }); $("p").bind("dblclick", function () { $("span").text("Double-click happened in " + this.nodeName); }); $("p").bind("mouseenter mouseleave", function (event) { $(this).toggleClass("over"); }); $("p").bind("click", function () { alert($(this).text()); }); function handler(event) { alert(event.data.foo); } $("p").bind("click", { foo: "bar" }, handler) $("form").bind("submit", function () { return false; }) $("form").bind("submit", function (event) { event.preventDefault(); }); $("form").bind("submit", function (event) { event.stopPropagation(); }); $("p").bind("myCustomEvent", function (e, myName?, myValue?) { $(this).text(myName + ", hi there!"); $("span").stop().css("opacity", 1) .text("myName = " + myName) .fadeIn(30).fadeOut(1000); }); $("button").click(function () { $("p").trigger("myCustomEvent", ["John"]); }); $("div.test").bind({ click: function () { $(this).addClass("active"); }, mouseenter: function () { $(this).addClass("inside"); }, mouseleave: function () { $(this).removeClass("inside"); } }); } function test_unbind() { $("#foo").unbind(); $("#foo").unbind("click"); var handler = function () { alert("The quick brown fox jumps over the lazy dog."); }; $("#foo").bind("click", handler); $("#foo").unbind("click", handler); $("#foo").bind("click", function () { alert("The quick brown fox jumps over the lazy dog."); }); // Will NOT work $("#foo").unbind("click", function () { alert("The quick brown fox jumps over the lazy dog."); }); $("#foo").bind("click.myEvents", handler); $("#foo").unbind("click"); $("#foo").unbind("click.myEvents"); $("#foo").unbind(".myEvents"); var timesClicked = 0; $("#foo").bind("click", function (event) { alert("The quick brown fox jumps over the lazy dog."); timesClicked++; if (timesClicked >= 3) { $(this).unbind(event); } }); 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..."); }); $("p").unbind(); $("p").unbind("click"); var foo = function () { // Code to handle some kind of event }; $("p").bind("click", foo); // ... Now foo will be called when paragraphs are clicked ... $("p").unbind("click", foo); // ... foo will no longer be called. } function test_blur() { $('#target').blur(function () { alert('Handler for .blur() called.'); }); $('#other').click(function () { $('#target').blur(); }); $("p").blur(); } interface JQueryStatic { Topic; } function test_callbacks() { function fn1(value) { console.log(value); } function fn2(value) { fn1("fn2 says:" + value); return false; } var callbacks = $.Callbacks(); var callbacks2 = $.Callbacks("once"); callbacks.add(fn1); callbacks.fire("foo!"); callbacks.add(fn2); callbacks.fire("bar!"); callbacks.remove(fn2); callbacks.fire("foobar"); var topics = {}; jQuery.Topic = function (id) { var callbacks, method, topic = id && topics[id]; if (!topic) { callbacks = jQuery.Callbacks(); topic = { publish: callbacks.fire, subscribe: callbacks.add, unsubscribe: callbacks.remove }; if (id) { topics[id] = topic; } } return topic; }; $.Topic("mailArrived").subscribe(fn1); $.Topic("mailArrived").subscribe(fn2); $.Topic("mailSent").subscribe(fn1); $.Topic("mailArrived").publish("hello world!"); $.Topic("mailSent").publish("woo! mail!"); $.Topic("mailArrived").subscribe(fn1); var dfd = $.Deferred(); var topic = $.Topic("mailArrived"); dfd.done(topic.publish); dfd.resolve("its been published!"); } function test_callbacksFunctions() { var foo = function (value) { console.log('foo:' + value); } var bar = function (value) { console.log('bar:' + value); } var callbacks = $.Callbacks(); callbacks.add(foo); callbacks.fire('hello'); callbacks.add(bar); callbacks.fire('world'); callbacks.disable(); // Test the disabled state of the list console.log(callbacks.disabled()); // Outputs: true callbacks.empty(); callbacks.fire('hello'); console.log(callbacks.fired()); callbacks.fireWith(window, ['foo', 'bar']); var foo2 = function (value1, value2) { console.log('Received:' + value1 + ',' + value2); }; console.log(callbacks.has(foo2)); callbacks.lock(); console.log(callbacks.locked()); callbacks.remove(foo); } function test_change() { $('.target').change(function () { alert('Handler for .change() called.'); }); $('#other').click(function () { $('.target').change(); }); $("input[type='text']").change(function () { }); $("input[type='text']").change(); } function test_children() { $('ul.level-2').children().css('background-color', 'red'); $("#container").click(function (e) { $("*").removeClass("hilite"); var $kids = $(e.target).children(); var len = $kids.addClass("hilite").length; $("#results span:first").text(len); //$("#results span:last").text(e.target.tagName); e.preventDefault(); return false; }); $("div").children(".selected").css("color", "blue"); } function test_clearQueue() { $("#start").click(function () { var myDiv = $("div"); myDiv.show("slow"); myDiv.animate({ left: '+=200' }, 5000); myDiv.queue(function () { var _this = $(this); _this.addClass("newcolor"); _this.dequeue(); }); myDiv.animate({ left: '-=200' }, 1500); myDiv.queue(function () { var _this = $(this); _this.removeClass("newcolor"); _this.dequeue(); }); myDiv.slideUp(); }); $("#stop").click(function () { var myDiv = $("div"); myDiv.clearQueue(); myDiv.stop(); }); } function test_click() { $("#target").click(function () { alert("Handler for .click() called."); }); $("#other").click(function () { $("#target").click(); }); $("p").click(function () { $(this).slideUp(); }); $("p").click(); } function test_submit() { $("#target").submit(function () { alert("Handler for .submit() called."); }); $("#target").submit(); } function test_trigger() { $("#foo").on("click", function () { alert($(this).text()); }); $("#foo").trigger("click"); $("#foo").on("custom", function (event, param1?, param2?) { alert(param1 + "\n" + param2); }); $("#foo").trigger("custom", ["Custom", "Event"]); $("button:first").click(function () { update($("span:first")); }); $("button:last").click(function () { $("button:first").trigger("click"); update($("span:last")); }); function update(j) { var n = parseInt(j.text(), 10); j.text(n + 1); } $("form:first").trigger("submit"); var event = jQuery.Event("submit"); $("form:first").trigger(event); if (event.isDefaultPrevented()) { // Perform an action... } $("p") .click(function (event, a, b) { // When a normal click fires, a and b are undefined // for a trigger like below a refers to "foo" and b refers to "bar" }) .trigger("click", ["foo", "bar"]); var event = jQuery.Event("logged"); (Test
'); $('.container').prepend($('h2')).prepend(document.createDocumentFragment()); var $newdiv1 = $(''), newdiv2 = document.createElement('div'), existingdiv1 = document.getElementById('foo'); $('body').prepend($newdiv1, [newdiv2, existingdiv1]); } function test_prependTo() { $("Test
").prependTo(".inner"); $("h2").prependTo($(".container")); $("span").prependTo("#foo"); } function test_closest() { $('li.item-a').closest('ul') .css('background-color', 'red'); $('li.item-a').closest('li') .css('background-color', 'red'); var listItemII = document.getElementById('ii'); $('li.item-a').closest('ul', listItemII) .css('background-color', 'red'); $('li.item-a').closest('#one', listItemII) .css('background-color', 'green'); $(document).bind("click", function (e) { $(e.target).closest("li").toggleClass("hilight"); }); var $listElements = $("li").css("color", "blue"); $(document).bind("click", function (e) { //$(e.target).closest($listElements).toggleClass("hilight"); }); } function test_contains() { jQuery.contains(document.documentElement, document.body); jQuery.contains(document.body, document.documentElement); } function test_contents() { $('.container').contents().filter(function () { return this.nodeType == 3; }) .wrap('') .end() .filter('br') .remove(); $("#frameDemo").contents().find("a").css("background-color", "#BADA55"); } function test_context() { $("ul") .append("Another paragraph!
"); }); $("body").delegate("p", "click", function () { alert($(this).text()); }); $("body").delegate("a", "click", function () { return false; }); $("body").delegate("a", "click", function (event) { event.preventDefault(); }); $("body").delegate("p", "myCustomEvent", function (e, myName?, myValue?) { $(this).text("Hi there!"); $("span").stop().css("opacity", 1) .text("myName = " + myName) .fadeIn(30).fadeOut(1000); }); $("button").click(function () { $("p").trigger("myCustomEvent"); }); } function test_undelegate() { 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..."); }); $("p").undelegate(); $("p").undelegate("click"); var foo = function () { // Code to handle some kind of event }; // ... Now foo will be called when paragraphs are clicked ... $("body").delegate("p", "click", foo); // ... foo will no longer be called. $("body").undelegate("p", "click", foo); var foo = function () { // Code to handle some kind of event }; // Delegate events under the ".whatever" namespace $("form").delegate(":button", "click.whatever", foo); $("form").delegate("input[type='text'] ", "keypress.whatever", foo); // Unbind all events delegated under the ".whatever" namespace $("form").undelegate(".whatever"); } function test_dequeue() { $("button").click(function () { $("div").animate({ left: '+=200px' }, 2000); $("div").animate({ top: '0px' }, 600); $("div").queue(function () { $(this).toggleClass("red"); $(this).dequeue(); }); $("div").animate({ left: '10px', top: '30px' }, 700); }); } function test_queue() { $("#show").click(function () { var n = jQuery.queue($("div")[0], "fx"); $("span").text("Queue length is: " + n.length); }); function runIt() { $("div") .show("slow") .animate({ left: "+=200" }, 2000) .slideToggle(1000) .slideToggle("fast") .animate({ left: "-=200" }, 1500) .hide("slow") .show(1200) .slideUp("normal", runIt); } runIt(); $(document.body).click(function () { var divs = $("div") .show("slow") .animate({ left: "+=200" }, 2000); jQuery.queue(divs[0], "fx", function () { $(this).addClass("newcolor"); jQuery.dequeue(this); }); divs.animate({ left: "-=200" }, 500); jQuery.queue(divs[0], "fx", function () { $(this).removeClass("newcolor"); jQuery.dequeue(this); }); divs.slideUp(); }); $("#start").click(function () { var divs = $("div") .show("slow") .animate({ left: "+=200" }, 5000); jQuery.queue(divs[0], "fx", function () { $(this).addClass("newcolor"); jQuery.dequeue(this); }); divs.animate({ left: "-=200" }, 1500); jQuery.queue(divs[0], "fx", function () { $(this).removeClass("newcolor"); jQuery.dequeue(this); }); divs.slideUp(); }); $("#stop").click(function () { jQuery.queue($("div")[0], "fx", []); $("div").stop(); }); } function test_detach() { $("p").click(function () { $(this).toggleClass("off"); }); var p; $("button").click(function () { if (p) { p.appendTo("body"); p = null; } else { p = $("p").detach(); } }); } function test_each() { var numArray: number[]; numArray = $.each([1, 2, 3, 4], function (index: number, value: number) { alert(index + ': ' + value); }); numArray = $.each([1, 2, 3, 4], function (index: number, value: number) { alert(index + ': ' + value); return value < 2; }); var res: {one: number, 2: string}; res = $.each({ one: 1, 2: "two" }, function(key: string, value: any) { alert(key + ': ' + value); }); res = $.each({ one: 1, 2: "two" }, function(key: string, value: any) { alert(key + ': ' + value); return key === "2"; }); var map = { 'flammable': 'inflammable', 'duh': 'no duh' }; $.each(map, function (key, value) { alert(key + ': ' + value); }); var arr = ["one", "two", "three", "four", "five"]; var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 }; jQuery.each(arr, function () { $("#" + this).text("Mine is " + this + "."); return (this != "three"); }); jQuery.each(obj, function (i, val) { $("#" + i).append(document.createTextNode(" - " + val)); }); $.each(['a', 'b', 'c'], function (i, l) { alert("Index #" + i + ": " + l); }); $.each({ name: "John", lang: "JS" }, function (k, v) { alert("Key: " + k + ", Value: " + v); }); $.each([{a: 1}, {a: 2}, {a: 3}], function (i, o) { alert("Index #" + i + ": " + o.a); }); $('li').each(function (index) { alert(index + ': ' + $(this).text()); }); $(document.body).click(function () { $("div").each(function (i) { if (this.style.color != "blue") { this.style.color = "blue"; } else { this.style.color = ""; } }); }); $("span").click(function () { $("li").each(function () { $(this).toggleClass("example"); }); }); $("button").click(function () { $("div").each(function (index, domEle) { // domEle == this $(domEle).css("backgroundColor", "yellow"); if ($(this).is("#stop")) { $("span").text("Stopped at div index #" + index); return false; } }); }); } function test_empty() { $('.hello').empty(); } function test_end() { $('ul.first').find('.foo').css('background-color', 'red') .end().find('.bar').css('background-color', 'green'); $('ul.first').find('.foo') .css('background-color', 'red') .end().find('.bar') .css('background-color', 'green') .end(); } function test_eq() { $('li').eq(2).css('background-color', 'red'); $('li').eq(-2).css('background-color', 'red'); $('li').eq(5).css('background-color', 'red'); $("body").find("div").eq(2).addClass("blue"); } function test_error() { $('#book') .error(function () { alert('Handler for .error() called.') }) .attr("src", "missing.png"); $("img") .error(function () { $(this).hide(); }) .attr("src", "missing.png"); jQuery.error("Oups"); jQuery.error = (message?: string) => { console.error(message); return this; }; } function test_eventParams() { $("p").click(function (event) { event.currentTarget === this; }); $(".box").on("click", "button", function (event) { $(event.delegateTarget).css("background-color", "red"); }); $("a").click(function (event) { event.isDefaultPrevented(); event.preventDefault(); event.isDefaultPrevented(); }); function immediatePropStopped(e) { var msg = ""; if (e.isImmediatePropagationStopped()) { msg = "called" } else { msg = "not called"; } $("#stop-log").append("