jq和zepto很相似有许多共同的api，zepto也出了很多与jq不一样的api，总的来说，两者更相似，但是zepto更轻量一点，正好公司也在用，复习这两个没错
jq中的zepto的事件和ajax我没有整理，因为之前有专门的文章去详细的写了ajax和事件绑定的区别
再学ajax--第二天 | 基于php+mysql+ajax的表单注册、登录、注销
面试 | 蚂蚁金服面试经历 也讲到了js中的绑定事件的区别bind、on、delegate，以及事件绑定 事件委托的区别等
jquery复习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style > *{ margin:0; padding: 0; } </style> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> /* jQuery([selector,[context]]) */ console.log($('div>p')); $(document.body).css("background","black"); // 在文档的第一个表单中，查找所有的单选按钮 console.log($('input:radio',document.forms[0])) /*jQuery(html,[ownerDocument])*/ $(function(){ $('<div>hello world</div>').appendTo('.test'); // 动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中 $('<div>',{ "class":"test_valid", text:"click me", click:function(){ $(this).toggleClass("test2"); } }).appendTo(".test") // 创建一个 <input> 元素，同时设定 type 属性、属性值，以及一些事件。 $('<input>',{ type:'text', val:"text", focusin:function(){ // alert("focusin"); }, focusout:function(){ // alert("focusout"); } }).appendTo(".test"); }) /* jQuery(callback)*/ $(function(){ // do something // 等价于$(document).ready() }) /* jQuery.holdReady(hold) */ // 延迟就绪事件，直到已加载的插件。 // $.holdReady(true); // $.getScript("plugin.js",function(){ // $.holdReady(false) // }) /* each(callback) */ $(function(){ $('.test > span').each(function(i){ // console.log(this); // console.log($(this)); this.innerHTML="span"+i; // $(this).toggleClass("span"+i); // $(this).text("hello"); // 跳出遍历 // return false; }) }) /* size() */ // jQuery 对象中元素的个数 console.log($("div").size()); console.log($('div').length); /* selector、context 、get([index]) 、index([selector|element]) */ $(function(){ $("ul") // 返回传给jQuery()的原始选择器 .append("<li>"+$('ul').selector+"</li>") // 返回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。那么context指向当前的文档(document)。 console.log($('ul').context) console.log($('ul',document.body).context) console.log($('.innerTest>span').get(0)); // 选择文档中所有图像作为元素数组，并用数组内建的 reverse 方法将数组反向。 console.log($('.innerTest>span').get().reverse()); //传递一个DOM对象，返回这个对象在原先集合中的索引位置 console.log($('.innerTest>span').index(document.getElementById('bar'))); //传递一个jQuery对象 console.log($('.innerTest>span').index($('#bar'))); //传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置 console.log($('.innerTest>span').index($('.innerTest>span:nth-child(2)'))); }) /*数据缓存data*/ $(function(){ // 没什么卵用 $('.data').data("div-data","data"); }) /*queue(element,[queueName])*/ $(function(){ $("#show").on('click',function(){ var n = $(".queue").queue("fx"); // 显示在匹配元素上执行的函数队列的个数 console.log(n.length); }) function resuIt(){ $('.queue').show("slow"); $('.queue').animate({left:"+=200"},2000); $('.queue').slideToggle(1000); } resuIt() }) /*queue(element,[queueName]) jQuery.extend(object)*/ $(function(){ // 给选择器提供新方法 jQuery.fn.extend({ check:function(){ return this.each(function(){this.checked=true}) }, uncheck:function(){ return this.each(function(){this.checked=false}) } }) // 扩展jQuery对象本身 jQuery.extend({ min:function(a,b){return a<b?a:b}, max:function(a,b){return a>b?a:b} }) $(".innerTest>input[type=checkbox]").check(); $(".innerTest>input[type=radio]").uncheck(); console.log(jQuery.min(1,2)); console.log(jQuery.max(3,4)); }) /*属性相关*/ $(function(){ // attr console.log($('.innerTest>input').eq(1).attr('type')) $('.innerTest>span').eq(2).attr({class:"innerSpan","data-span":"innerSpan"}) // class的值为innerHTML的值 $('.innerTest>span').eq(2).attr("class",function(){return this.innerHTML}) // removeAttr $('.innerTest>span').eq(0).removeAttr("class"); // prop 获取在匹配的元素集中的第一个元素的属性值。 console.log($(".innerTest>input[type='checkbox").prop('checked')); // 禁用所有checkbox $(".innerTest>input[type='checkbox']").prop('checked',function(i,val){ return !val; }) // addClass $(".innerTest>span:nth-child(5)").addClass("span5 span_5") // 加上不同的class $(".innerTest>span").addClass(function(){ return "span_"+$(this).index(); }) // removeClass $(".innerTest>span").eq(0).removeClass('span_0'); // 删除最后一个元素与上面重复的class $(".innerTest>span:last").removeClass(function(){ return $(this).prev().attr('class'); }) // toggleClass 如果存在（不存在）就删除（添加）一个类。 // 点击三下添加一个类 let count = 1; $('.innerTest>span').eq(5).on('click',function(){ $(this).toggleClass("highlight",count ++ % 3==0) }) // 根据父元素添加类 $('.innerTest>span').eq(5).toggleClass(function(){ if($(this).parent().is(".innerTest")){ return "span_6" } }) // html和text $(".innerTest>p").html(function(n){ $(this).text(n); // 下面两者等价 $(this).each(function(i){ console.log($(this)[i].innerHTML) }); console.log($(this).text()) }) // val 元素必须要有value $('.innerTest>input').eq(0).val(function(){ return $(this).val() + "..."; }) }) /*css相关*/ $(function(){ // css $(".innerTest>span").eq(0).css({'font-size':'24px','color':'red'}) // 点击时自动变大，用到了定时器的this指向，采用闭包解决 $('.innerTest>span').eq(1).on('click',function(){ let count = 1.2; var _this = $(this); setInterval(function(){ count++; _this.css({ 'font-size':parseFloat(15)*count +'px' }) },500) }); // offset 获取匹配元素在当前视口的相对偏移。 let offset_1 = $('.innerTest>span').eq(0).offset(); console.log(offset_1.left); console.log(offset_1.top); // position 获取匹配元素相对父元素的偏移。 let offset_2 = $('.innerTest>span').eq(0).position(); console.log(offset_2.left); console.log(offset_2.top); // scrollTop获取匹配元素相对滚动条顶部的偏移。 console.log($('.innerTest>span').eq(0).scrollTop()); // scrollLeft获取匹配元素相对滚动条左侧的偏移。 console.log($('.innerTest>span').eq(0).scrollLeft()); // height.width console.log($('.innerTest>span').eq(0).height()); console.log($('.innerTest>span').eq(0).width()); // innerHeight、innerWidth获取第一个匹配元素内部区域高度（包括补白、不包括边框）。 console.log($('.innerTest>span').eq(0).innerHeight()); console.log($('.innerTest>span').eq(0).innerWidth()); // outerHeight、outerWidth获取第一个匹配元素外部高度（默认包括补白和边框）。 console.log($('.innerTest>span').eq(0).outerHeight()); console.log($('.innerTest>span').eq(0).outerWidth()); }) /*选择器相关(就不写基本的或者简单的选择器了)*/ $(function(){ // 空格：在给定的祖先元素下匹配所有的后代元素 // >：在给定的父元素下匹配所有的子元素 // +：一个有效选择器并且紧接着第一个选择器 // ~ ： 匹配元素之后的所有兄弟元素 // :first ：获取第一个元素 // :last ：获取最后一个元素 // :not(selector) ：反向选择器 // :even ：匹配所有索引值为偶数的元素，从 0 开始计数 // :odd ：匹配所有索引值为奇数的元素，从 0 开始计数 // :eq(index) ：匹配一个给定索引值的元素 // :gt(index) ：匹配所有大于给定索引值的元素 // :lt(index) ：匹配所有小于给定索引值的元素 // :header ：匹配如 h1, h2, h3之类的标题元素 // :animated ：匹配所有正在执行动画效果的元素 // :contain(text) : 匹配包含给定文本的元素 // :empty() : 匹配所有不包含子元素或者文本的空元素 // :has(selector) : 匹配含有选择器所匹配的元素的元素 console.log($('.data:has(p)').text()) // :parent() : 匹配含有子元素或者文本的元素 // :hidden 匹配所有不可见元素，或者type为hidden的元素 console.log($('.innerTest>h1:hidden')) // :visible 匹配所有的可见元素 // [attribute] 匹配包含给定属性的元素。 console.log($('div[class]')) // [attribute=value] console.log($("input[type='button']")) // [attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。 console.log($("input[type!='button']")) // [attribute^=value] 匹配给定的属性是以某些值开始的元素 console.log($("span[class^='span']")) // [attribute$=value] 匹配给定的属性是以某些值结尾的元素 console.log($("span[class$='_2']")) // [attribute*=value] 匹配给定的属性是以包含某些值的元素 console.log($("span[class*='_']")) // [selector1][selector2][selectorN] 复合属性选择器，需要同时满足多个条件时使用。 console.log($("input[class][name='radio']")) // :first-child 匹配第一个子元素 注意和+号的区别 console.log($('ul li:first-child')) // ':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 console.log($('ul li:last-child')) }) /*文档处理*/ // appendTo：把选择器的内容追加到appendTo里面的内容中和append:把append里面的内容追加到选择器中 // prepend(content)：向每个匹配的元素内部前置内容。 $(function(){ // after(content|fn) // before(content|fn) console.log($("p:nth-child(1)").after("<b>hello</b>")) console.log($("p:nth-child(1)").before("<b>hello</b>")) // insertAfter(content) 前者插到后者后面 $(".123").insertAfter(".456"); // insertBefore(content) 后者插到前者前面 $(".101112").insertBefore(".789"); // wrap(html|ele|fn) 把所有匹配的元素用其他元素的结构化标记包裹起来。 $("b:nth-child(1)").wrap("<div class='pchild'></div>") // replaceWith(content|fn) $(".replaceP").replaceWith("<b>replaceP</b>") // empty() 删除匹配的元素集合中所有的子节点。 $(".emptyAll").empty() // remove([expr]) 从DOM中删除所有匹配的元素 $(".remove").remove(); // filter $(".filter").filter(function(idx){ console.log($(this)); return $("ol",this).length==0; }) // is(expr|obj|ele|fn) console.log($(".innerTest2").is("div")); // find(expr|obj|ele|fn) console.log($(".innerTest2").find("li")) // add() 返回一个数组，包含添加过的元素 console.log($(".innerTest2").add("<p>---</p>")); }) /* 动画 */ $(function(){ // show $(".innerTest2 li").eq(0).show("slow"); // hide $(".innerTest2 li").eq(1).hide("slow"); $(".innerTest2 li").eq(2).slideDown("slow"); $(".innerTest2 li").eq(2).fadeOut("slow"); $(".innerTest2 li").eq(2).fadeIn("slow"); }) </script> <body> <div class="test" style="500px;heigth:500px;border:solid 1px black"> <h1>测试区</h1> <p>div>p</p> <input type="text"> <br> <span></span> <span></span> <ul></ul> <ul class="ul"> <li>-</li> <li>+</li> </ul> <div class="innerTest"> <h1 style="display:none">h1</h1> <a href=""></a> <span id="foo" class="span1" style="border:solid 1px black">1</span> <span id="bar">2</span> <span>3</span> <span class="span4">4</span> <span class="span4">5</span> <span>6</span> <input type="checkbox" value="checkbox1">一 <input type="radio" name="radio" class="radio">二 <input type="checkbox">三 <input type="checkbox">四 <p></p> <p></p> <p></p> </div> <p class="filter"> <ol> <li>hello</li> </ol> </p> <div class="innerTest2" > <li style="display:none">1</li> <li>2</li> <li>3</li> </div> <p class="replaceP">replaceP</p> <p class="emptyAll">empty <b>123</b</p> <p class="remove">empty <b>123</b</p> <p class="123">123</p><div class="pdiv">456</div> <p class="123">789</p><div class="101112">101112</div> <div class="data"><p>有p</p></div> <input type="button" id="show" value="show"> <div class="queue">queuequeuequeue</div> </div> <form action=""> <input type="radio" value="input:radio"> </form> </body> </html>
zepto
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.js"></script> <script type="text/javascript"> $(function(){ // 1、驼峰转换 console.log($.camelCase("hello-world")) // 2、检查父节点是否包含给定的dom节点，如果两者相同，则返回 false。 // $.contains = function (parent, node) { // return parent !== node && parent.contains(node) // } // true console.log($.contains($(".parent")[0],$(".child")[0])) // false console.log($.contains($("body")[0],$("body")[0])) // false console.log($.contains($(".parent")[0],$(".parent")[0])) // 3、each $.each(['a','b','c'],function(index,item){ // 索引 console.log(index); // 内容 console.log(item); }) var obj = {name:"zepto","size":"micro"}; $.each(obj,function(key,value){ console.log(key); console.log(value); }) // 4、$.extend var target = {"1":"2"} var source = {"name":"zepto"} $.extend(target,source); console.log(target) // 5、$.fn $.fn.alert1 = function(){ alert(1); } $(".parent").alert1(); // 6、$.grep console.log($.grep([1,2,3],function(item){ return item >1 })) // 7、$.inArray 搜索数组中指定值并返回它的索引（如果没有找到则返回-1）。 console.log($.inArray("abc",["abc","123"])) console.log($.inArray("abc",["123"])) // 8、$.isArray 如果object是array，则返回ture。 // 9、$.isFunction 如果object是function，则返回ture. // 10、$.isPlainObject 测试对象是否是纯粹的对象（通过 "{}" 或者 "new Object" 创建的），如果是，则返回true。 console.log($.isPlainObject(window)); //false console.log($.isPlainObject({})); //true // 11、$.isWindow 确定参数是否为一个窗口（window对象），如果是则返回true。 这在处理iframe时非常有用，因为每个iframe都有它们自己的window对象 // 12、$.map console.log($.map([-2,1,2,3],function(item,index){ if(item>1){return item*item} })) console.log($.map({1:1,2:2,3:3},function(item,index){ if(item>1){return item*item} })) // 12、$.parseJSON 接受一个标准格式的 JSON 字符串，并返回解析后的 JavaScript 对象。 // 13、$.trim 删除字符串开始和末尾的空白符。 // 14、$.type 获取JavaScript 对象的类型。 // 15、$.add 添加元素到匹配的元素集合 console.log($("ul").add("span")); // [ul, span, selector: Array(2)] // 16、addClass 为每个匹配的元素添加指定的class类名 // 17、after 在每个匹配的元素后插入内容。 // 18、append 在每个匹配的元素末尾插入内容。 // 19、appendTo 将匹配的元素插入到目标元素的末尾（里面的后面）。 // 20、before 在匹配每个元素的前面（外面）插入内容。 // 21、children 获得每个匹配元素集合元素的直接子元素，如果selector存在，只返回符合css选择器的元素。 // 22、$('ol').children('*:nth-child(2n)') // 23、clone 通过深度克隆来复制集合中的所有元素。 // 24、concat console.log($("li").eq(0).concat([$("li").eq(1)])); // 25、data 读取或写入dom的 data-* 属性。 console.log($("li").eq(0).data("he")); // 26、each $("form input").each(function(index){ console.log(this,index); }) // 27、empty 从Zepto对象集合中移除所有的dom子节点。 // 28、filter console.log($("form input").filter(function(index){ return index %2==0; })) // 29、find console.log($("form").find('input,select')); // 30、first 获取当前Zepto对象集合中的第一个元素。 console.log($("form").first()); // 返回form // 31、forEach $("form input").forEach(function(item,index,array){ console.log(item,index,array) }) // 32、get console.log($("form input").get(0)); // 33、has console.log($("form").has('input')) // 34、hasClass 是否有元素含有指定的class // 35、height console.log($("form").height()); // 36、hide 设置display 为 none 隐藏元素 // 37、index console.log($("form").index()); // 38、insertAfter // 39、insertBefore // 40、is() 判断当前Zepto元素集合中的第一个元素是否符css选择器。 // 41、last() 获取Zepto集合对象中最后一个元素。 console.log($("form").last()); // 42、pluck console.log($("form >*").pluck('nodeName')) // 43、position 相对于第一个定位过的祖先元素 console.log($("form").position()) // 44、prop 它在读取属性值的情况下优先于 attr 多用于checked和selected 用户交互改变的属性 $("form input").eq(3).on("click",function(){ console.log(1); console.log($(this).attr("checked")) console.log($(this).prop("checked")) }) // 45、scrollTop 获取页面上的滚动元素或者整个窗口已经滚动的像素值。 console.log($("form").scrollTop()); // 46、toggle 显示或隐藏匹配元素。 如果 setting为true，相当于show 法。 $("form input").toggle($("form input").eq(4).val()=="he"); }) </script> <body> <div class="parent"> <div class="child"></div> </div> <ul> <li data-he="123">1</li> <li>2</li> <li>3</li> </ul> <span>hello</span> <form action=""> <input type="text" value="1"> <input type="text" value="2"> <input type="text" value="3"> <input type="checkbox" value="checkbox"> <select name="" id=""></select> <input type="text" value="he" style="display:none"> </form> </body> </html>