jQuery知识点总结

最新推荐文章于 2024-11-17 17:55:20 发布

木槿花开lalala

最新推荐文章于 2024-11-17 17:55:20 发布

阅读量664

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/zl_best/article/details/54710425

JavaScript 专栏收录该内容

32 篇文章

订阅专栏

本文详细总结了jQuery的基础语法、选择器、事件、效果、HTML操作、遍历和Ajax方法，包括如何选择元素、触发事件、执行动画效果、操作DOM以及进行异步数据请求等核心知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、jQuery语法

基础语法： $(selector).action()

二、jQuery选择器

元素选择器、#id选择器、.class选择器

实例
$("*")：选取所有元素
$(this)：选取当前 HTML 元素
$("p.intro")：选取 class 为 intro 的 <p> 元素
$("p:first")：选取第一个 <p> 元素
$("ul li:first")：选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")：选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")：选取带有 href 属性的元素
$("a[target='_blank']")：选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")：选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")：选取所有 type="button" 的 <input> 元素和 <button> 元素
$("tr:even")：选取偶数位置的 <tr> 元素
$("tr:odd")：选取奇数位置的 <tr> 元素

三、jQuery事件

（1）语法

$("p").click(function(){
// 动作触发后执行的代码!!
});

（2）常见DOM事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

四、jQuery效果

（1）隐藏和显示

语法:

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
切换hide()和show()方法：$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

（2）淡入淡出

fadeIn() 方法用于淡入已隐藏的元素：$(selector).fadeIn(speed,callback);

fadeOut() 方法用于淡出可见元素：$(selector).fadeOut(speed,callback);

fadeToggle() 方法用于在 fadeIn() 与 fadeOut() 方法之间进行切换：$(selector).fadeToggle(speed,callback);

fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）：$(selector).fadeTo(speed,opacity,callback);

（3）滑动

slideDown() 方法用于向下滑动元素：$(selector).slideDown(speed,callback);

slideUp() 方法用于向上滑动元素：$(selector).slideUp(speed,callback);

slideToggle() 方法用于在 slideDown() 与 slideUp() 方法之间进行切换：$(selector).slideToggle(speed,callback);

（4）动画

animate() 方法用于创建自定义动画：$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

注意：可以定义相对值（该值相对于元素的当前值），需要在值的前面加上 += 或 -=；

可以把属性的动画值设置为 "show"、"hide" 或 "toggle"；

默认地，jQuery 提供针对动画的队列功能。

（5）停止动画

stop() 方法用于在它们完成之前停止动画或效果：$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

（6）Callback方法

Callback 函数在当前动画 100% 完成之后执行。

//使用 callback 实例
$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落现在被隐藏了");
  });
});

//没有 callback(回调)
$("button").click(function(){
  $("p").hide(1000);
  alert("段落现在被隐藏了");
});

（7）链

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

//"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

五、HTML

（1）捕获

获得内容 -- text()、html() 以及 val()

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

获取属性 -- attr()

（2）设置

设置内容 -- text()、html() 以及 val()

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

text()、html() 以及 val() 的回调函数
回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

设置属性 -- attr()

（3）添加元素

添加新的 HTML 内容

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

（4）删除元素

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

（5）CSS类

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

（6）css() 方法

返回 CSS 属性：css("propertyname");

设置 CSS 属性：css("propertyname","value");

设置多个 CSS 属性：css({"propertyname":"value","propertyname":"value",...});

（7）尺寸

jQuery 尺寸方法：width()、height()、innerWidth()、innerHeight()、outerWidth()、outerHeight()

六、遍历

（1）祖先

parent() 方法：返回被选元素的直接父元素。

parents() 方法：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

parentsUntil() 方法：返回介于两个给定元素之间的所有祖先元素。

（2）后代

children() 方法：返回被选元素的所有直接子元素。

find() 方法：返回被选元素的后代元素，一路向下直到最后一个后代。

（3）同胞

siblings() 方法：返回被选元素的所有同胞元素。

next() 方法：返回被选元素的下一个同胞元素。

nextAll() 方法：返回被选元素的所有跟随的同胞元素。

nextUntil() 方法：返回介于两个给定参数之间的所有跟随的同胞元素。

prev(), prevAll() 以及 prevUntil() 方法：工作方式与上面的方法类似，只不过方向相反而已，它们返回的是前面的同胞元素。

（4）过滤

first() 方法：返回被选元素的首个元素。

last() 方法：返回被选元素的最后一个元素。

eq() 方法：返回被选元素中带有指定索引号的元素。

filter() 方法：允许您规定一个标准，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

not() 方法：返回不匹配标准的所有元素。

七、Ajax

（1）load()方法

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法: $(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。

回调函数可以设置不同的参数：