jQuery 入门教程 jQuery 备忘单

2024-02-25 开发教程 jQuery 入门教程 匿名 3

这个jQuery备忘单对于初学者和有经验的开发人员都是很好的参考。

开始

导入jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" rel="external nofollow" ></script>

官方CDN

<script src="https://code.jquery.com/jquery-3.5.1.min.js" rel="external nofollow"  crossorigin="anonymous"></script>

jQuery 语法

$(selector).methodOrFunction();

例子:

$('#menu').on('click', () =>{
$(this).hide();
});

$("body").css("background", "red");

jQuery 文档准备就绪

$(document).ready(function() {
// Runs after the DOM is loaded.
alert('DOM fully loaded!');
});
$(function(){
// Runs after the DOM is loaded.
alert('DOM fully loaded!');
});

jQuery 选择器

例子

$("button").click(() => {
$(":button").css("color", "red");
});

组合选择器

$("selector1, selector2 ...selectorn")

基本

基本过滤器

属性

子过滤器

组件

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 .toggleClass

$('.choice').toggleClass('highlighted');

属性

数据

CSS

Dimensions

Offset

jQuery 操作

例子

/*<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 事件

例子

// A mouse event 'click'
$('#menu-button').on('click', () => {
$('#menu').show();
});

// A keyboard event 'keyup'
$('#textbox').on('keyup', () => {
$('#menu').show();
});

// A scroll event 'scroll'
$('#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 效果

例子

$('#menu-button').on('click', () => {
// $('#menu').fadeIn(400, 'swing')
$('#menu').fadeIn();
});

淡出效果

$('#menu-button').on('click', () => {
// $('#menu').fadeOut(400, 'swing')
$('#menu').fadeOut();
});

隐藏显示

滑动

动画

淡入淡出

jQuery Ajax

例子

$.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);
});

全局 Ajax 事件处理程序

辅助函数

低级接口

速记方法

其他

jQuery 对象

延迟对象

公共方法

DOM 元素方法

内件

回调对象