当前位置：首页 > 数据库 > 正文内容

jquery常用api，jQuery核心API速查手册

wzgly2个月前 (07-01)数据库2

jQuery 是一个流行的 JavaScript 库，提供了丰富的 API 以简化 DOM 操作和事件处理，以下是一些常用的 jQuery API：，1. 选择器：$('#id')，$('.class')，$('div') 用于选择元素。，2. 事件绑定：.click()，.hover()，.on() 用于绑定事件。，3. 属性操作：.attr('name', 'value')，.prop('checked', true) 用于获取和设置属性。，4. 文本和内容：.text('text')，.html('html') 用于获取和设置文本或HTML内容。，5. CSS 操作：.css('property', 'value') 用于获取和设置CSS样式。，6. DOM 操作：.append()，.prepend()，.remove() 用于添加或移除元素。，7. 动画：.animate({property: value}, duration) 用于创建动画效果。，8. AJAX：$.ajax({url: 'url', method: 'GET', success: function(){} }) 用于发送异步请求。，这些 API 极大地提高了 JavaScript 开发的效率。

选择器API

jQuery的选择器非常强大，可以轻松选取页面中的元素,以下是一些常用的选择器API：

: 这是jQuery的入口函数，用于创建jQuery对象。$(document)可以获取整个文档的jQuery对象。
`$('#id'): 通过ID选择元素。$('#myDiv')可以选中ID为myDiv的元素。
`$('.class'): 通过类选择元素。$('.myClass')可以选中所有类名为myClass的元素。
`$('div'): 通过标签选择元素。$('div')可以选中所有的div元素。
:eq(index): 选择第index个匹配的元素。$('#myDiv :eq(1)')可以选中ID为myDiv的第2个元素（index从0开始）。

属性操作API

属性操作是jQuery中非常实用的功能,以下是一些常用的属性操作API：

.attr(name, value): 设置或获取元素的属性。$('#myDiv').attr('title', 'Hello World')可以设置ID为myDiv的元素的title属性为Hello World。
.prop(name, value): 设置或获取元素的属性，与.attr()类似，但.prop()通常用于HTML5新属性。
.val(): 获取或设置表单元素的值。$('#myInput').val('Hello')可以设置ID为myInput的输入框的值为Hello。

CSS操作API

jQuery提供了丰富的CSS操作API,可以轻松修改元素的样式：

.css(name, value): 设置或获取元素的CSS样式。$('#myDiv').css('color', 'red')可以设置ID为myDiv的元素的文本颜色为红色。
.addClass(className): 为元素添加一个或多个类。$('#myDiv').addClass('myClass')可以为ID为myDiv的元素添加类myClass。
.removeClass(className): 从元素中移除一个或多个类。$('#myDiv').removeClass('myClass')可以移除ID为myDiv的元素上的类myClass。

事件处理API

事件处理是jQuery的另一个核心功能,以下是一些常用的事件处理API：

.on(event, selector, handler): 为指定元素绑定事件。$('#myDiv').on('click', function() { alert('Clicked!'); })可以为ID为myDiv的元素绑定点击事件。
.off(event, selector, handler): 解除事件绑定。$('#myDiv').off('click')可以解除ID为myDiv的元素上的点击事件绑定。
`.trigger(event, [data]): 触发指定事件。$('#myDiv').trigger('click')可以手动触发ID为myDiv的元素的点击事件。

动画API

jQuery提供了丰富的动画API,可以轻松实现各种动画效果：

.animate(props, duration, easing, complete): 对元素进行动画。$('#myDiv').animate({ width: '200px' }, 1000, 'linear', function() { alert('Animation complete!'); })可以将ID为myDiv的元素的宽度从初始值动画到200px，动画持续时间为1000毫秒,动画完成后弹出提示框。
`.fadeIn(duration, [callback]): 淡入动画。$('#myDiv').fadeIn(1000)可以将ID为myDiv的元素淡入显示。
`.fadeOut(duration, [callback]): 淡出动画。$('#myDiv').fadeOut(1000)可以将ID为myDiv的元素淡出隐藏。

就是jQuery的一些常用API，希望对大家有所帮助，在实际开发中,熟练掌握这些API可以大大提高开发效率。

其他相关扩展阅读资料参考文献：

精准定位网页元素

基础选择器
jQuery的核心在于选择器，通过函数可快速定位元素。$("#id")选择ID为id的元素，$(".class")选择类名为class的元素，$("tag")选择所有tag标签。*选择器语法简洁，支持通配符`和层级符号>`**，能高效替代原生JS的繁琐选择逻辑。
层级选择器
通过父子、子代、相邻等关系选择元素，如$("div > p")选择div下的直接子元素p，$("p + div")选择紧随p元素后的div，$("ul li:nth-child(2)")选择ul中第二个子元素li。层级选择器能精准控制元素范围，避免误操作。
属性选择器
利用元素属性筛选目标，例如$("input[type='text']")选择所有类型为text的输入框，$("a[href$='.pdf']")选择以.pdf结尾的链接，$("div[data-role='header']")选择具有data-role属性且值为header的div。属性选择器灵活性强，可替代部分CSS选择器功能。

事件处理：动态交互的基石

事件绑定
使用.on()方法统一绑定事件，如$(".btn").on("click", function() { ... })。相比直接使用click()、hover()等方法，.on()支持动态元素绑定，提升代码复用性。
事件冒泡与阻止
通过.stopPropagation()阻止事件冒泡，如$("div").on("click", function(e) { e.stopPropagation(); })。合理控制事件传播链，避免触发父元素的事件干扰。
事件委托
将事件监听器绑定到祖先元素，如$("body").on("click", ".child", function() { ... })。事件委托能有效处理动态加载内容的交互，减少内存占用。

DOM操作：高效修改页面结构

增删改节点
常用方法包括.append()、.prepend()添加元素，.remove()删除节点，.empty()。这些方法操作简单，可快速构建动态页面结构。
属性与值操作
使用.attr()获取或设置属性，如$("img").attr("src", "new.jpg")。结合.prop()可精确控制表单元素状态（如checked、disabled）。
文本与HTML内容
通过.text()获取或设置纯文本内容，.html()处理带标签的HTML内容。注意.text()会自动过滤XSS攻击，而.html()需手动防范安全风险。

动画效果：提升用户体验的利器

基础动画
.show()、.hide()、.toggle()实现显示/隐藏效果，.fadeIn()、.fadeOut()控制透明度。基础动画适合简单场景，如表单验证提示。
队列动画
使用.animate()创建复杂动画，如$(".box").animate({ width: "200px", opacity: 0.5 }, 1000)。动画队列支持连续执行，可实现平滑过渡效果。
淡入淡出与滑动
.slideDown()、.slideUp()实现元素高度变化，.fadeTo()调整透明度。这些方法常用于页面切换或数据加载时的视觉反馈。

AJAX请求：异步数据交互的核心

GET与POST方法
.get()用于获取数据，如$.get("url", function(data) { ... })；.post()提交数据，如$.post("url", { key: value }, function() { ... })。GET适合获取数据，POST适合提交表单或敏感信息。
数据格式处理
使用.getJSON()解析JSON数据，.serialize()序列化表单数据为字符串。数据处理方法简化了前后端交互的复杂性。
错误与状态处理
通过.fail()处理请求失败，如$.ajax({ url: "url", success: function() { ... }, error: function() { ... } })。合理设置回调函数能增强程序健壮性，避免页面崩溃。

jQuery的API设计以简洁性和功能性著称，选择器、事件处理、DOM操作、动画效果和AJAX请求是其五大核心模块。掌握这些API能显著提升开发效率，尤其在处理复杂交互和动态页面时，建议开发者结合实际场景灵活运用，使用事件委托优化性能，用属性选择器精准定位元素，或通过AJAX实现无刷新数据加载。注意API的兼容性和安全性，避免过度依赖已淘汰的方法，随着前端技术的发展，jQuery虽逐渐被Vue、React等框架取代，但其API仍具有重要参考价值。合理使用jQuery能帮助开发者快速上手，过渡到现代框架时也更具优势。