复习 | 重温jQuery和Zepto的API
Posted Jen Ho
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了复习 | 重温jQuery和Zepto的API相关的知识，希望对你有一定的参考价值。
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移动端开发框架Zepto.js