zepto|Jquery

基础操作

zepto官方https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js
zepto中文文档 https://zeptojs.bootcss.com/
jqueryhttps://cdn.bootcss.com/jquery/1.11.0/jquery.min.js
jquery手册http://www.w3school.com.cn/jquery/jquery_reference.asp

• dom操作

  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"));

• 常用

 $('#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() 清空表单不能是隐藏域
表单验证

onsubmit="return form2()"
const form2=()=>{

}

• 表单取值

  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

$.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出错');
                    },
                });