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出錯'); }, }); ``` ```