jQuery 语法

jQuery 语法学习笔记jQuery 是一个快速、简洁的 JavaScript 库它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。其核心理念是“Write Less, Do More”写得更少做得更多。一、核心语法$()选择器jQuery 的核心是$()函数或jQuery()用于选择 DOM 元素。1. 基本选择器// 选择 ID 为 myId 的元素$(#myId);// 选择 class 为 myClass 的所有元素$(.myClass);// 选择所有 p 标签$(p);// 组合选择器$(div.container p.active);// 选择 class 为 container 的 div 下的 class 为 active 的 p 标签2. 层级与过滤选择器$(ul li:first);// 第一个 li$(ul li:last);// 最后一个 li$(ul li:nth-child(2));// 第二个 li$(input:not(:disabled));// 所有未禁用的 input$(tr:even);// 偶数行$(tr:odd);// 奇数行3. 内容过滤$(div:contains(Hello));// 包含 Hello 文本的 div$(input:checkbox:checked);// 所有被选中的复选框二、DOM 操作1. 获取和设置内容// 获取/设置 HTML 内容$(#id).html();// 获取$(#id).html(b新内容/b);// 设置// 获取/设置文本内容忽略 HTML 标签$(#id).text();$(#id).text(纯文本内容);// 获取/设置表单值$(#inputId).val();$(#inputId).val(新值);2. 获取和设置属性// 获取/设置属性$(#img).attr(src);$(#img).attr(src,new.jpg);// 获取/设置 CSS 类$(#id).addClass(active);$(#id).removeClass(active);$(#id).toggleClass(active);// 切换类$(#id).hasClass(active);// 检查是否有该类// 获取/设置 CSS 样式$(#id).css(color);$(#id).css(color,red);$(#id).css({color:red,font-size:20px});// 批量设置3. 增删改 DOM 元素// 添加内容$(#id).append(p追加到末尾/p);// 内部末尾$(#id).prepend(p插入到开头/p);// 内部开头$(#id).after(p插入到外部后/p);// 外部后$(#id).before(p插入到外部前/p);// 外部前// 删除元素$(#id).remove();// 删除元素及其所有事件和数据$(#id).empty();// 清空元素内容保留元素本身$(#id).detach();// 删除元素但保留事件和数据可重新插入// 克隆元素var$clone$(#id).clone();三、事件处理jQuery 简化了事件绑定并解决了浏览器兼容性问题。1. 绑定事件// 推荐写法使用 .on()$(#btn).on(click,function(){alert(按钮被点击了);});// 绑定多个事件$(#id).on({mouseenter:function(){$(this).css(background,yellow);},mouseleave:function(){$(this).css(background,white);}});// 事件委托用于动态添加的元素// 将事件绑定在父元素上利用事件冒泡$(#parent).on(click,.child,function(){alert(动态添加的子元素被点击了);});2. 常用事件简写$(#btn).click(function(){...});$(#input).focus(function(){...});$(#form).submit(function(){...});$(window).resize(function(){...});$(document).ready(function(){...});// 文档加载完成3. 触发与阻止事件// 触发事件$(#btn).click();// 等同于 .trigger(click)// 阻止默认行为$(#link).on(click,function(e){e.preventDefault();// 阻止链接跳转});// 阻止事件冒泡$(#child).on(click,function(e){e.stopPropagation();// 阻止冒泡到父元素});四、动画与效果1. 基本效果$(#id).hide();// 隐藏$(#id).show();// 显示$(#id).toggle();// 切换显示/隐藏$(#id).fadeOut();// 淡出$(#id).fadeIn();// 淡入$(#id).fadeToggle();// 切换淡入/淡出$(#id).slideUp();// 向上滑动$(#id).slideDown();// 向下滑动$(#id).slideToggle();// 切换滑动2. 自定义动画// 参数属性对象持续时间回调函数$(#id).animate({left:250px,opacity:0.5,fontSize:2em},1000,function(){alert(动画完成);});// 队列动画$(#id).animate({left:50px},1000).animate({top:50px},1000).animate({opacity:0},1000);五、Ajax 操作jQuery 封装了复杂的 Ajax 请求使其简单易用。1. 简化的 Ajax 方法// GET 请求$.get(url,{param:value},function(response){console.log(response);});// POST 请求$.post(url,{param:value},function(response){console.log(response);});// 加载 HTML 片段到元素中$(#div).load(page.html #section);// 只加载 #section 部分2. 完整的 $.ajax()$.ajax({url:api/data,type:POST,data:{id:123,name:John},dataType:json,// 期望返回的数据类型json, xml, html, script, textsuccess:function(data){console.log(成功:,data);},error:function(xhr,status,error){console.log(失败:,error);},complete:function(){console.log(请求完成);}});六、工具方法与遍历1. 遍历 DOM// 遍历每个匹配的元素$(li).each(function(index){console.log(index: $(this).text());});// 获取第一个/最后一个$(li).first();$(li).last();// 获取指定索引$(li).eq(2);// 获取父/子/兄弟$(li).parent();$(li).children();$(li).siblings();$(li).next();$(li).prev();2. 工具函数// 判断类型$.isArray([]);$.isFunction(function(){});$.isPlainObject({});// 数组操作$.map([1,2,3],function(n){returnn*2;});// [2, 4, 6]$.grep([1,2,3],function(n){returnn1;});// [2, 3]// 合并数组$.merge([1,2],[3,4]);// [1, 2, 3, 4]// 去重需自定义七、链式调用jQuery 支持链式调用即在一个选择器后连续调用多个方法。// 链式调用示例$(#id).addClass(active).css(color,red).slideUp(1000).slideDown(1000).removeClass(active);原理jQuery 的每个方法都返回 jQuery 对象本身return this从而支持链式调用。八、最佳实践与注意事项文档就绪// 推荐写法$(document).ready(function(){// 代码});// 简写$(function(){// 代码});避免$冲突如果其他库也使用$可以使用jQuery.noConflict()var$jjQuery.noConflict();$j(#id).hide();性能优化尽量使用 ID 选择器#id速度最快。避免在循环中使用选择器先缓存 jQuery 对象。使用事件委托处理动态元素。选择器缓存// ❌ 低效每次循环都重新选择for(vari0;i100;i){$(.item).addClass(active);}// ✅ 高效缓存选择器var$items$(.item);for(vari0;i100;i){$items.addClass(active);}九、常用代码片段1. 表单验证$(#form).on(submit,function(e){e.preventDefault();varname$(#name).val();if(name){$(#name).addClass(error).focus();returnfalse;}// 提交表单});2. 选项卡切换$(.tab-btn).on(click,function(){$(.tab-btn).removeClass(active);$(this).addClass(active);vartarget$(this).data(target);$(.tab-content).hide();$(target).show();});3. 无限滚动$(window).scroll(function(){if($(window).scrollTop()$(window).height()$(document).height()-100){// 加载更多数据loadMoreData();}});十、总结功能jQuery 方法原生 JS 替代选择元素$(#id)document.getElementById(id)获取内容.html(),.text().innerHTML,.textContent设置属性.attr(),.css().setAttribute(),.style添加类.addClass().classList.add()事件绑定.on().addEventListener()Ajax$.ajax()fetch(),XMLHttpRequest注意虽然现代浏览器原生 API如querySelector,fetch已经非常强大但 jQuery 在旧浏览器兼容性、代码简洁性和插件生态方面仍有优势特别是在维护旧项目时。提示jQuery 3.x 是最后一个主要版本现代新项目推荐使用原生 JavaScript (ES6) 或 Vue/React 等框架但在遗留系统中 jQuery 依然广泛使用。