zepto/jquery · 万能Web开发文档笔记

# zepto/jquery ### 基础操作 zepto官方<https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js> zepto中文文档 <https://zeptojs.bootcss.com/> jquery<https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js> jquery手册[http://www.w3school.com.cn/jquery/jquery\_reference.asp](http://www.w3school.com.cn/jquery/jquery_reference.asp) - dom操作 ``` <pre class="calibre14">``` html text val分别用于获取设置html/文本/表单 $("img").attr("src");$("img").attr("src","test.jpg");设置返回属性 addClass()/removeClass()/toggleClass("selected");添加/删除/切换类 parent()父元素 children() 子元素 find() 查询元素 siblings()兄弟元素 next()下一个 prev() 上一个 var data = $('#data').data('title');获取 $('#data').removeData('x'); 移除 $('#data').data('x',{"qq":"89"});设置 dom对象相互转换 var dom = $("#ss")[0]; var z= $(document.getElementById("id")); ``` ``` - 常用 ``` <pre class="calibre14">``` $('#nav li').click(function(){ $(this).addClass('active').siblings().removeClass('active'); }) 对象数组 $.each(arr,function(i,n){ alert("索引"+i+"对应的值"+n); }); 数组获取 var img=[]; $('input[name="img[]"]').each(function(){img.push($(this).val())}); on 绑定多种事件 click dblclick change select,submit tap手机单机 doubleTap手机双击 longTap 手机长按 swipe, swipeLeft, swipeRight, swipeUp, swipeDown 手机滑动 hover(func1,func2) 鼠标移入调用func1函数，移出调用func2函数 focus/blur 鼠标聚焦/失去焦点触发事件（不支持冒泡） $("form").on("submit", function(event) { //表单提交 }); $(document).on('click','.list',function(){ //动态创建也生效 }) $('#con').focus().val("文字右边获得焦点"); fadeIn()淡入显示 fadeOut()淡出隐藏 hide() 和 show() 方法来隐藏和显示 $('dt').click(function(e){ //防止冒泡 e.stopPropagation(); }); ``` ``` 刷新表单数据 `$('#form1')[0].reset()` 清空表单不能是隐藏域表单验证 ``` <pre class="calibre14">``` onsubmit="return form2()" const form2=()=>{ } ``` ``` - 表单取值 ``` <pre class="calibre14">``` var select = $("#select option:selected").val() ;//select单选 var select = [] ;//select多选 $("#select option:selected").each(function(){ select.push($(this).val()) ; }) ; var radio = $('input[name="radio"]:checked').val(); //单选 $(`input[name='sex'][value='1']`).attr('checked','true'); 设置单选选中 var checkbox=[]; //复选 $('input[name="checkbox[]"]:checked').each(function(){ checkbox.push($(this).val()) ; }); 设置复选选中 foreach([1,2,3,4],function(v){ $(`input[name='tezhen'][value='${v}']`).attr('checked','true'); }) <input type="checkbox" onclick="var ck=this.checked;$('input[name=\'checkbox[]\']').each(function(){this.checked = ck});">//全选取消 ``` ``` - ajax ``` <pre class="calibre16">``` $.post("1.php",{a:1,b:"2"},function(res){ alert(JSON.stringify(res)); },'json');//POST返回默认json,html,jsonp,xml,text,script $.get("1.php",{a:1,b:"2"},function(res){ alert(JSON.stringify(res)); },'json'); $("#form1").serialize();//直接提交 $.ajax({ //跨域 url: "http://shanliwawa.top", type: "GET", dataType: "jsonp", jsonp:"callback", success: function (data) { } }); php echo $_GET['callback'] . '(' . $json . ')'; $.ajax({ type:"get", url:'', data: {}, dataType:'json', timeout:10000, beforeSend:function(xhr){ $('.loading').show(); }, success:function(rs){ $('.loading').hide(); var tpl = document.getElementById('tpl').innerHTML; var desc=tpl(tpl,rs); $("#rank-list").append(desc); }, error:function(xhr){ alert('ajax出错'); }, }); ``` ```