///
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('').addClass('foo') .filter('p').attr('id', 'bar').html('hello') .end() .appendTo('body'); $('p').after(function () { return 'Test
'); $('.container').append($('h2')); 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"); $("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(""); 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_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(); 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 () { }); } 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.toString()); //$("#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_clone() { $('.hello').clone().appendTo('.goodbye'); var $elem = $('#elem').data({ "arr": [1] }), $clone = $elem.clone(true) .data("arr", $.extend([], $elem.data("arr"))); $("b").clone().prependTo("p"); $('#copy').append($('#orig .elem') .clone() .children('a') .prepend('foo - ') .parent() .clone()); } 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_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_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() { $.each([52, 97], function (index, value) { alert(index + ': ' + value); }); 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 = console.error; } 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("All new content. You bet!
'); $('div.demo-container').html(function () { var emph = '' + $('p').length + ' paragraphs!'; return 'All new content for ' + emph + '
'; }); $("div").html("Wow! Such excitement..."); $("div b").append(document.createTextNode("!!!")) .css("color", "red"); } function test_inArray() { var arr: any[] = [4, "Pete", 8, "John"]; var $spans = $("span"); $spans.eq(0).text(jQuery.inArray("John", arr)); $spans.eq(1).text(jQuery.inArray(4, arr)); $spans.eq(2).text(jQuery.inArray("Karl", arr)); $spans.eq(3).text(jQuery.inArray("Pete", arr, 2)); var arr2: number[] = [1, 2, 3, 4]; $spans.eq(1).text(jQuery.inArray(4, arr2)); } function test_index() { var listItem = document.getElementById('bar'); alert('Index: ' + $('li').index(listItem)); var listItems = $('li:gt(0)'); alert('Index: ' + $('li').index(listItems)); alert('Index: ' + $('#bar').index()); $("div").click(function () { var index = $("div").index(this); $("span").text("That was div index #" + index); }); var listItems = $('li:gt(0)'); $('div').html('Index: ' + $('li').index(listItems)); $('div').html('Index: ' + $('#bar').index('li')); var foobar = $("li").index($('#foobar')); $('div').html('Index: ' + foobar); } function test_innerHeight() { var p = $("p:first"); $("p:last").text("innerHeight:" + p.innerHeight()); p.innerHeight(p.innerHeight() * 2).innerHeight(); } function test_innerWidth() { var p = $("p:first"); $("p:last").text("innerWidth:" + p.innerWidth()); p.innerWidth(p.innerWidth() * 2).innerWidth(); } function test_outerHeight() { var p = $("p:first"); $("p:last").text("outerHeight:" + p.outerHeight(true)); p.outerHeight(p.outerHeight() * 2).outerHeight(); p.outerHeight(p.outerHeight() * 2, true).outerHeight(); } function test_outerWidth() { var p = $("p:first"); $("p:last").text("outerWidth:" + p.outerWidth(true)); p.outerWidth(p.outerWidth() * 2).outerWidth(); p.outerWidth(p.outerWidth() * 2, true).outerWidth(); } function test_insertAfter() { $('Test
').insertAfter('.inner'); $('h2').insertAfter($('.container')); $("p").insertAfter("#foo"); } function test_insertBefore() { $('Test
').insertBefore('.inner'); $('h2').insertBefore($('.container')); $("p").insertBefore("#foo"); } function test_is() { $("ul").click(function (event) { var $target = $(event.target); if ($target.is("li")) { $target.css("background-color", "red"); } }); $("li").click(function () { var $li = $(this), isWithTwo = $li.is(function () { return $('strong', this).length === 2; }); if (isWithTwo) { $li.css("background-color", "green"); } else { $li.css("background-color", "red"); } }); $("div").one('click', function () { if ($(this).is(":first-child")) { $("p").text("It's the first div."); } else if ($(this).is(".blue,.red")) { $("p").text("It's a blue or red div."); } else if ($(this).is(":contains('Peter')")) { $("p").text("It's Peter!"); } else { $("p").html("It's nothing special."); } $("p").hide().slideDown("slow"); $(this).css({ "border-style": "inset", cursor: "default" }); }); var isFormParent = $("input[type='checkbox']").parent().is("form"); $("div").text("isFormParent = " + isFormParent); var isFormParent = $("input[type='checkbox']").parent().is("form"); $("div").text("isFormParent = " + isFormParent); var $alt = $("#browsers li:nth-child(2n)").css("background", "#00FFFF"); $('li').click(function () { var $li = $(this); if ($li.is($alt)) { $li.slideUp(); } else { $li.css("background", "red"); } }); var $alt = $("#browsers li:nth-child(2n)").css("background", "#00FFFF"); $('li').click(function () { if ($alt.is(this)) { $(this).slideUp(); } else { $(this).css("background", "red"); } }); } function test_isArray() { $("b").append("" + $.isArray([])); } function test_isEmptyObject() { jQuery.isEmptyObject({}); jQuery.isEmptyObject({ foo: "bar" }); } function test_isFuction() { function stub() { }; var objs: any[] = [ function () { }, { x: 15, y: 20 }, null, stub, "function" ]; jQuery.each(objs, function (i) { var isFunc = jQuery.isFunction(objs[i]); $("span").eq(i).text(isFunc); }); $.isFunction(function () { }); } function test_isNumeric() { $.isNumeric("-10"); $.isNumeric(16); $.isNumeric(0xFF); $.isNumeric("0xFF"); $.isNumeric("8e5"); $.isNumeric(3.1415); $.isNumeric(+10); $.isNumeric(0144); $.isNumeric(""); $.isNumeric({}); $.isNumeric(NaN); $.isNumeric(null); $.isNumeric(true); $.isNumeric(Infinity); $.isNumeric(undefined); } function test_isPlainObject() { $.isPlainObject(document.location); jQuery.isPlainObject({}); jQuery.isPlainObject("test"); } function test_isWindow() { $("b").append("" + $.isWindow(window)); } function test_isXMLDoc() { jQuery.isXMLDoc(document); jQuery.isXMLDoc(document.body); } function test_jQuery() { $('div.foo'); $('div.foo').click(function () { $('span', this).addClass('bar'); }); $('div.foo').click(function () { $(this).slideUp(); }); $.post('url.xml', function (data) { var $child = $(data).find('child'); }); var foo = { foo: 'bar', hello: 'world' }; var $foo = $(foo); var test1 = $foo.prop('foo'); $foo.prop('foo', 'foobar'); var test2 = $foo.prop('foo'); $foo.data('keyName', 'someValue'); console.log($foo); $foo.bind('eventName', function () { console.log('eventName was called'); }); $foo.trigger('eventName'); $foo.triggerHandler('eventName'); $("div > p").css("border", "1px solid gray"); $("input:radio", document.forms[0]); var xml: any; $("div", xml.responseXML); $(document.body).css("background", "black"); var myForm: any; $(myForm.elements).hide(); $('My new text
').appendTo('body'); $('Hello