简介
JavaScript 框架
write less, do more(写的更少,做的更多)
优势
省时
简化一般JavaScript任务
易用
浏览器器兼容性
免费
应用
下载引用 Jquery
<script src="js/jquery-3.1.0.min.js"></script>
引用 CDN jQuery文件
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
https://www.bootcdn.cn/
基本语法
$("选择器或document").事件(function(){});
id
class
tag
document
$(document).ready(function(){});
载入完毕执行
选择器
按ID选择 $("#id")
$("#msg").css("background","green");
按照class选择 $(".class")
$(".bg-red").css("background","red");
按元素名称选择 $("tag")
$("p").css("color","yellow");
按属性过滤 $("tag[属性=值]")
$("input[type='text']").css("background","green");
...
事件
语法
jQuery(document).ready(function($){});
$("选择器或document").事件(function(){});
$().click(function(){});
$(this).slideUp();
$().bind("事件名".function(){})
给目标元素加事件
表单
change() 值改变时
focus() 获取焦点时
blur() 失去焦点时
submit() 提交时
特效
显示/隐藏
隐藏 hide()
显示show()
切换 toggle()
参数 (时间,callback)
淡入/淡出
fadeOut()
fadeIn()
fadeToggle()
卷起
slideUp()
slideDown()
slideToggle()
动画
$().animate({css属性},duration,callback);
方法链
$().action().action();