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="width: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>
原文地址：https://www.cnblogs.com/dirkhe/p/8536371.html
时间： 2024-10-04 11:36:40