基础操作

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出错');
                    },
                });
文档更新时间: 2021-12-28 00:20   作者:Yoby