jQuery 备忘清单 & jquery cheatsheet & 速查表
入门
引入 jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
官方 CDN
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
jQuery 语法
$(selector).methodOrFunction();
例子
$('#menu').on('click', () =>{
$(this).hide();
});
$("body").css("background", "red");
jQuery 文档准备就绪
$(document).ready(function() {
// 在加载 DOM 后运行
alert('DOM fully loaded!');
});
$(function(){
// 在加载 DOM 后运行
alert('DOM fully loaded!');
});
jQuery 选择器
例子
$("button").click(() => {
$(":button").css("color", "red");
});
组合选择器
$("selector1, selector2 ...selectorn")
基本
基本过滤器
属性
子过滤器
Forms
jQuery 属性
例子
$('h2').css({
color: 'blue',
backgroundColor: 'gray',
fontSize: '24px'
});
jQuery 添加类
$('.button').addClass('active');
jQuery 移除类
$('.button').on('mouseleave', evt => {
let e = evt.currentTarget;
$(e).removeClass('active');
});
jQuery 切换类
$('.choice').toggleClass('highlighted');
Attributes
CSS
Dimensions
Offset
jQuery 操控
Examples
/*<span>Span.</span>*/
$('span').after('<p>Paragraph.</p>');
/*<span>Span.</span><p>Paragraph.</p>*/
/*<span>Span.</span>*/
$('<span>Span.</span>').replaceAll('p');
/*<p>Span.</p>*/
/*<span>This is span.</span>*/
$('span').wrap('<p></p>');
/*<p><span>This is span.</span></p>*/
复刻
DOM 插入，环绕
DOM 插入，内部
DOM 插入，外部
DOM 移除
DOM 替换
jQuery 遍历
过滤
杂项遍历
树遍历
jQuery 事件
Examples
// 鼠标事件“点击”
$('#menu-button').on('click', () => {
$('#menu').show();
});
// 键盘事件“键盘”
$('#textbox').on('keyup', () => {
$('#menu').show();
});
// 滚动事件“滚动”
$('#menu-button').on('scroll', () => {
$('#menu').show();
});
事件对象
$('#menu').on('click', event => {
$(event.currentTarget).hide();
});
方法链
$('#menu-btn').on('mouseenter', () => {
$('#menu').show();
}).on('mouseleave', () => {
$('#menu').hide();
});
防止事件
$( "p" ).click(function( event ) {
event.stopPropagation();
// Do something
});
浏览器事件
事件对象
文档加载
事件处理程序附件
形式事件
键盘事件
鼠标事件
jQuery Effects
例子
$('#menu-button').on('click', () => {
// $('#menu').fadeIn(400, 'swing')
$('#menu').fadeIn();
});
淡出效果
$('#menu-button').on('click', () => {
// $('#menu').fadeOut(400, 'swing')
$('#menu').fadeOut();
});
基本
滑动
自定义
衰退
jQuery Ajax
Examples
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize()
}).done(function(server_data){
console.log("success" + server_data);
}).fail(function(jqXHR, status, err){
console.log("fail" + err);
});