jquery笔记-api

//jQuery1.10笔记

//核心// jQuery([selector,[context]])$("div", xml.responseXML);$("input:radio", document.forms[0]);//返回值:jQuery jQuery(html,[ownerDocument])$("<input>", {type: "text",val: "Test",focusin: function() {$(this).addClass('active');},focusout: function() {$(this).toggleClass('type');}}).appendTo('form');// jQuery(callback)$(function() {// body...});//返回值:BooleanjQuery.holdReady(hold) $.holdReady(true);$.getScript("myplugin.js", function() {$.holdReady(false);});// 返回值:jQuery each(callback)$('img').each(function(i) {this.src = "test" + i + ".jpg"});//返回值:Numbersize()$('img').size();//返回值:Numberlength$('img').length();//返回值:Striingselector$('ul').append('<li>' + $('ul').selector + '<li>');// 返回值:Elementcontext$('ul', document.body).context.nodeName;// 返回值:Elementget([index])$('img').get().reverse();//返回值:Numberindex([selector|element])$('li').index($('li:gt(0)'));// 返回值:jQuery data([key],[value])//能在一个元素上存放任何格式的数据，而不仅仅是字符串。$('div').data('blah', {first: 16,last: 'pizza'});// 返回值:jQuery removeData([name|list])$('div').removeData('blah');//返回值:Array/jQuery queue(element,[queueName,[callback]])//返回值:jQuery dequeue([queueName])// 返回值:jQuery clearQueue([queueName])//返回值:jQuery jQuery.fn.extend(object)jQuery.fn.$.extend({check: function() {return this.each(function() {this.checked = true;});}});$('input[type=checkbox]').check();//返回值:jQuery jQuery.extend(object)jQuery.extend({min: function(a, b) {return a < b ? a : b;},max: function(a, b) {return a > b ? a : b;}});//返回值:jQuery jQuery.noConflict([extreme])//运行这个函数将变量$的控制权让渡给第一个实现它的那个库。// 选择器// 返回值:Array<Element>#id$('#myDiv');// 返回值:Array<Element(s)>element$('div');// 返回值:Array<Element(s)>.class$(".myClass");// 返回值:Array<Element(s)>*$("*");// 返回值:Array<Element(s)>selector1,selector2,selectorN$("div,span,p.myClass");// 返回值:Array<Element(s)>ancestor descendant$("form input");// 返回值:Array<Element(s)>parent > child$("form > input");// 返回值:Array<Element(s)>prev + next$("label + input");// 返回值:Array<Element(s)>prev ~ siblings$("label ~ input");// 返回值:jQuery :first$("li:first");// 返回值:Array<Element(s)>:not(selector)$("input:not(:checked)");// 返回值:Array<Element(s)>:even$("tr:even");// 返回值:Array<Element(s)>:odd$("tr:odd");// 返回值:Array<Element>:eq(index)$("tr:eq(1)");// 返回值:Array<Element(s)>:gt(index)$("tr:gt(0)");// 返回值:jQuery :lang(language)$("p:lang(it)");// 返回值:jQuery :last()$('li:last');// 返回值:Array<Element(s)>:lt(index)$("tr:lt(2)");// 返回值:Array<Element(s)>:header$(":header").css("background", "#EEE");// 返回值:Array<Element(s)>:animated$("div:not(:animate)").animate({left: "+=20"}, 1000);// 返回值:jQuery :focus$("a").focus();// 返回值:jQuery :root$(":root").css("background-color", "yellow");// 返回值:jQuery :target// 返回值:Array<Element(s)>:contains(text)$("div:contains('Jhon')");// 返回值:Array<Element(s)>:empty$("td:empty");// 返回值:Array<Element(s)>:has(selector)$("div:has(p)").addClass("test");// 返回值:Array<Element(s)>:parent$("td:parent");// 返回值:Array<Element(s)>:hidden$("tr:hidden");// 返回值:Array<Element(s)>:visible$("tr:visible");// 返回值:Array<Element(s)>[attribute]// 返回值:Array<Element(s)>[attribute!=value]// 返回值:Array<Element(s)>[attribute=value]$("input[name='newsletter']").attr("checked", true);// 返回值:Array<Element(s)>[attribute^=value]$("input[name^='news']");// 返回值:Array<Element(s)>[attribute$=value]$("input[name$='er']");// 返回值:Array<Element(s)>[attribute*=value]$("input[name*='man']");// 返回值:Array<Element(s)>[selector1][selector2][selectorN]$("input[id][name$='man']");// 返回值:Array<Element(s)>:first-child$("ul li:first-child");// 返回值:jQuery :first-of-type$("div:fist-of-type");// 返回值:Array<Element(s)>:last-child$("ul li:last-child");// 返回值:jQuery :last-of-type$("p:last-of-type");// 返回值:jQuery :nth-last-child(n|even|odd|formula)// 返回值:Array<Element(s)>:nth-child// ':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。// :nth-child从1开始的，而:eq()是从0算起的！$("ul li:nth-child(2n)");// 返回值:jQuery :nth-last-of-type// 返回值:jQuery :nth-of-type(n|even|odd|formula)// 返回值:Array<Element(s)>:only-child$("ul li:only-child");//返回值:Array<Element(s)> :only-of-type$("button:only-of-type").text("Alone").css("border", "2px blue solid");// 返回值:Array<Element(s)>:input// 匹配所有 input, textarea, select 和 button 元素$(":input");// 返回值:Array<Element(s)>:text$(":text");// 返回值:Array<Element(s)>:password$(":password")// 返回值:Array<Element(s)>:radio// 返回值:Array<Element(s)>:checkbox// 返回值:Array<Element(s)>:submit// 返回值:Array<Element(s)>:image// 返回值:Array<Element(s)>:reset// 返回值:Array<Element(s)>:button// 返回值:Array<Element(s)>:file// 返回值:Array<Element(s)>:checked// 返回值:Array<Element(s)>:selected// 返回值:Array<Element(s)>:disabled// 返回值:Array<Element(s)>:enabled$("input:enabled");// 返回值:Array<Element(s)>:has(selector)//文档处理// 返回值:jQuery append(content|fn)// 返回值:jQuery appendTo(content)// 返回值:jQuery prepend(content)// 返回值:jQuery prependTo(content)// 返回值:jQuery after(content|fn)// 返回值:jQuery before(content|fn)// 返回值:jQuery insertAfter(content)// 返回值:jQuery insertBefore(content)// 返回值:jQuery wrapAll(html|ele)// 将所有包裹起来// 返回值:jQuery wrap(html|element|fn)// 将每一个包裹起来// 当HTML标记代码中的元素包含文本时无法使用这个函数。因此，如果要添加文本应该在包裹完成之后再行添加$('.inner').wrap(function() {return '<div class="' + $(this).text() + '"/>';});// 返回值:jQuery unwrap()// 返回值:jQuery wrapInner(htm|element|fnl)// 返回值:jQuery replaceWith(content|fn)// 是移动到目标位置来替换，而不是复制一份来替换// 返回值:jQuery replaceAll(selector)// 返回值:jQuery empty()// 返回值:jQuery remove([expr])// 返回值:jQuery detach([expr])// 与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。$("p").detach(".hello");// 返回值:jQuery clone([Even[,deepEven]])// 事件// 返回值:jQuery ready(fn)// 返回值:jQuery on(events,[selector],[data],fn)$('p').on("click", function() {alert($(this).text());});// 返回值:jQuery off(events,[selector],[fn])$('p').off();$('p').off("click");// 返回值:jQuery bind(type,[data],fn)// .bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置$("button").bind({click: function() {$("p").slideToggle();},mouseover: function() {$("body").css("background-color", "red");},mouseout: function() {$("body").css('background-color', '#FFF');}});// 返回值:jQuery one(type,[data],fn)$("p").one("click", function() {alert($(this).text());});// 返回值:jQuery trigger(type,[data])$("p").click(function(event, a, b) {//一个普通的点击事件时，a和b是undefined类型//如果用下面的语句触发，a指向"foo",而b指向"bar"}).trigger('click', ["foo", "bar"]);$("p").bind('myEvent', function(event, message1, message2) {alert(message1 + ' ' + message2);});$("p").trigger("myEvent", ["Hello", "World"]);// 返回值:jQuery triggerHandler(type, [data])// 与trigger类似，但有以下三个主要区别： // 第一，他不会触发浏览器默认事件。// 第二，只触发jQuery对象集合中第一个元素的事件处理函数。// 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。$("#new").click(function() {$("input").triggerHandler('focus');});// 返回值:jQuery unbind(type,[data|fn])// 返回值:jQuery live(type, [data], fn)// jQuery 给所有匹配的元素附加一个事件处理函数，(与bind()的区别)即使这个元素是以后再添加进来的也有效。//事件委托！！// 返回值:jQuery die(type, [fn])// 返回值:jQuery delegate(selector,[type],[data],fn)$("div").delegate("button", "click", function() {$("p").slideToggle();});// 返回值:jQuery undelegate([selector,[type],fn])// 返回值:jQuery hover([over,]out)// hover()方法通过绑定变量"handlerInOut"来切换方法。$("td").bind("mouseenter mouseout", handlerInOut);$("td").hover(handlerInOut);$("td").hover(function() {$(this).addClass("hover");}, function() {$(this).removeClass("hover");});// 返回值:jQuery toggle([speed],[easing],[fn])$("p").toggle("slow");// 返回值:jQuery blur([[data],fn])// 返回值:jQuery change([[data],fn])// 该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。// 返回值:jQuery click([[data],fn])// 返回值:jQuery dblclick([[data],fn])// 如果把 dblclick和 click 事件应用于同一元素，可能会产生问题// 返回值:jQuery error([[data],fn])// 返回值:jQuery focus([[data],fn])$("#login").focus();// 返回值:jQuery focusin([data],fn)// focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。// 返回值:jQuery focusout([data],fn)// focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。// 返回值:jQuery keydown([[data],fn])$(window).keydown(function(event) {switch (event.keyCode) {}});// 返回值:jQuery keypress([[data],fn])// 每插入一个字符，就会发生 keypress 事件// 返回值:jQuery keyup([[data],fn])// 返回值:jQuery mousedown([[data],fn])$("button").mousedown(function() {$("p").slideToggle();});// 返回值:jQuery mouseup([[data],fn])// 返回值:jQuery mouseenter([[data],fn])// 与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。$("p").mouseenter(function() {$("p").css("background-color", "yellow");});// 返回值:jQuery mouseleave([[data],fn])// 只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件// 返回值:jQuery mouseover([[data],fn])// 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件// 返回值:jQuery mouseout([[data],fn])// 不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件// 返回值:jQuery mousemove([[data],fn])$(document).mousemove(function(e) {$("span").text(e.pageX + "," + e.pageY);});// 返回值:jQuery resize([[data],fn])$(window).resize(function() {alert("stop it");});// 返回值:jQuery scroll([[data],fn])$(window).scroll(function() {$("span").text(x += 1);});// 返回值:jQuery select([[data],fn])// textarea 或文本类型的 input 元素$("input").select(function() {return false; //防止触发浏览器的默认行为});// 返回值:jQuery submit([[data],fn])// 只适用于表单元素// 返回值:jQuery unload([[data],fn])// 效果// 返回值:jQuery show([speed,[easing],[fn]])// easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"// 返回值:jQuery hide([speed,[easing],[fn]])// 返回值:jQuery slideDown([speed],[easing],[fn])// 返回值:jQuery slideUp([speed,[easing],[fn]])$("p").slideUp("slow");// 返回值:jQuery slideToggle([speed],[easing],[fn])// 返回值:jQuery fadeIn([speed],[easing],[fn])// 返回值:jQuery fadeOut([speed],[easing],[fn])// 返回值:jQuery fadeTo([[speed],opacity,[easing],[fn]])$("p").fadeTo("fast", 0.6, function() {alert("animation done");});// 返回值:jQuery fadeToggle([speed,[easing],[fn]])// 返回值:jQuery animate(params,[speed],[easing],[fn])// 所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left// 如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！$("#go").click(function() {$("#block").animate({width: "90%",height: "100%",fontSize: "10em",borderWidth: 10}, 1000);});$("#right").animate({opacity: 'show',height: 'toggle'}, "slow", "easein");// 返回值:jQuery stop([clearQueue],[jumpToEnd])// 返回值:jQuery delay(duration,[queueName])// 返回值:jQuery finish( [queue ] )// .stop(true, true)将清除队列，并且目前的动画跳转到其最终值。但是，不同的是，.finish() 会导致所有排队的动画的CSS属性跳转到他们的最终值。// 返回值:BooleanjQuery.fx.off// 返回值:NumberjQuery.fx.interval// Ajax// 返回值:XMLHttpRequest jQuery.ajax(url,[settings])$.ajax({url: '/path/to/file',type: 'default GET (Other values: POST)',dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',data: {param1: 'value1'},success: function function_name(data, textStatus, jqXHR) {// body...},complete: function function_name(argument) {// body...},contentType: 'application/x-www-form-erlencoded',context: document,error: function function_name(XHR, textStatus, errorThrown) {// body...}}).done(function() {console.log("success");}).fail(function() {console.log("error");}).always(function() {console.log("complete");});// 返回值:jQuery load(url, [data], [callback])$("#feeds").load("feeds.php", {limit: 25}, function() {alert("loaded");});// 返回值:XMLHttpRequestjQuery.get(url, [data], [callback], [type])$.get('test.php', {name: "jhon",time: 2 px}, function(argument) {// body...});// 返回值:XMLHttpRequestjQuery.getJSON(url, [data], [callback])$.getJSON('test.js', {name: 'john',time: '2pm'}, function(json, textStatus) {alert("json data:" + json.users[3].name);});// 返回值:XMLHttpRequestjQuery.getScript(url, [callback])$.getScript("test.js", function() {alert("script");});// 返回值:XMLHttpRequestjQuery.post(url, [data], [callback], [type])$.post("test.php", {"func": getNameAndTime}, function(data) {alert(data.name);}, "json");// 返回值:jQuery ajaxComplete(callback)$("#txt").ajaxComplete(function() {$("#wait").css("display", "none");});// 返回值:jQuery ajaxError(callback)// 返回值:jQuery ajaxSend(callback)// 返回值:jQuery ajaxStart(callback)// 返回值:jQuery ajaxStop(callback)// 返回值:jQuery ajaxSuccess(callback)// XMLHttpRequest 对象和设置作为参数传递给回调函数。$("#msg").ajaxSuccess(function(evt, request, settings) {$(this).append("<li>请求成功</li>");});// 返回值:undefinedjQuery.ajaxPrefilter( [dataTypes] , handler(options, originalOptions, jqXHR) )// 返回值:jQuery jQuery.ajaxSetup([options])// 返回值:String serialize()// 返回值:Array<Object>serializeArray()// 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。// 属性// 返回值:String attr(name|properties|key,value|fn)$("img").attr({src: "test.jpg",alt: "test image"});$("img").attr("src", "test.jpg");// 返回值:jQuery removeAttr(name)// 返回值:jQuery prop(name|properties|key,value|fn)// attribute表示HTML文档节点的属性，property表示JS对象的属性。// 返回值:jQuery removeProp(name)// 返回值:jQuery addClass(class|fn)// 返回值:jQuery removeClass([class|fn])$("li:last").removeClass(function() {return $(this).prev().attr('class');});// 返回值:jQuery toggleClass(class|fn[,sw])var count = 0;$("p").click(function() {$(this).toggleClass("highlight", count++ % 3 == 0);});// 返回值:String html([val|fn])$('p').html(); //返回匹配元素的内容$('p').has(function(n) {return "这个P元素的index是：" + n;}); //设置匹配元素的内容// 返回值:String text([val|fn])// 返回值:String,Array val([val|fn|arr])// CSS// 返回值:String css(name|pro|[,val|fn])// 返回值:Object jQuery.cssHooks// 返回值:Object offset([coordinates])// 获取匹配元素在当前视口的相对偏移。var p = $("p:last")var offset = p.offset();p.html("left:" + offset.left + "top:" + offset.top);// 返回值:Object{top,left}position()// 获取匹配元素相对父元素的偏移。// 返回值:IntegerscrollTop([val])// 获取匹配元素相对滚动条顶部的偏移。// 返回值:IntegerscrollLeft([val])// 返回值:Integer height([val|fn])// 不包括padding，border，margin// 返回值:Integer innerHeight()// 包括padding，不包括border，margin// 返回值:Integer outerHeight([options])// 包括padding，border，margin// 返回值:Integer width([val|fn])// 返回值:Integer innerWidth()// 返回值:Integer outerWidth([options])// 筛选// 返回值:jQuery eq(index|-index)// 返回值:jQuery first()// 返回值:jQuery last()// 返回值:BooleanhasClass(class)// 返回值:jQuery filter(expr|obj|ele|fn)$("p").filter(".selected,:first");// 返回值:Booleanis(expr|obj|ele|fn)$("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');}}); //如果点击的是第二个strong，当前的li增加背景色为绿色// 返回值:jQuery map(callback)$("p").append($("input").map(function() {return $(this).val();}).get().join(",")); //把每个input元素的值建立一个列表// 返回值:jQuery has(expr|ele)// filter()方法，条件作用于自身；has()方法条件是作用于它的后代元素中。$("ul").has("li"); //含有li的ul// 返回值:jQuery not(expr|ele|fn)// 从匹配的集合中删除与指定表达式匹配的元素$("p").not($("#select")).css("background-color", "red");// 返回值:jQuery slice(start, [end])$("p").slice(0, 1).wrapInner('<div class="extra-wrapper"></div>');// 返回值:jQuery children([expr])// 返回值:jQuery closest(expr,[context]|object|element)// 返回值:jQuery find(expr|obj|ele)// children()返回匹配的子元素，find()返回匹配的所有后代元素$("ul").find('li'); //在ul里查找li,注意与has()的区别// 返回值:jQuery next([expr])$("p").next(".selected");// 返回值:jQuery nextAll([expr])// 返回值:jQuery nextUntil([exp|ele][,fil])// 返回值:jQuery offsetParent()// 返回父元素中第一个其position设为relative或者absolute的元素// 返回值:jQuery parent([expr])// 返回值:jQuery parents([expr])// 返回值:jQuery parentsUntil([expr|element][,filter])// 返回值:jQuery prev([expr])// 返回值:jQuery prevAll([expr])// 返回值:jQuery prevUntil([exp|ele][,fil])// 返回值:jQuery siblings([expr])// 返回值:jQuery add(expr|ele|html|obj[,con])// add()追加到元素集合中，append()添加元素节点// 返回值:jQuery andSelf()// 返回值:jQuery contents()// 返回值:jQuery end()// 事件对象// 延迟对象// 回调函数// 工具// 事件委托// attr() 与 prop()的区别再看看// 返回值:Object jQuery.cssHooks// 返回值:jQuery closest(expr,[context]|object|element)// 返回值:jQuery find(expr|obj|ele)// position:absolute|relative// absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个具有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。// 注意设置position之后，它的兄弟元素和后代元素如何显示// float// bootstap的滚动监听的使用