基础操作
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出错');
},
});
作者:Yoby 创建时间:2020-07-22 21:28
更新时间:2024-12-05 13:26
更新时间:2024-12-05 13:26