jq的学习

最新推荐文章于 2025-08-05 19:58:13 发布

一路追求匠人精神

最新推荐文章于 2025-08-05 19:58:13 发布

阅读量131

点赞数

CC 4.0 BY-SA版权

文章标签： jq的学习

本文链接：https://blog.youkuaiyun.com/qq_36566924/article/details/80970275

本文介绍jQuery的基本操作，包括选择器、属性设置、事件绑定等。详细解释了如何使用jQuery来隐藏、显示、淡入淡出及滑动元素，调整CSS属性，获取或设置元素内容等。

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

①$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素

②$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

③$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

④$("p").css("background-color","red");
把所有 p 元素的背景颜色更改为红色：

⑤$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

⑥$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

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

⑧$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

⑨jQuery 拥有下面四种 fade 方法：
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);可以自动实现淡入到淡出的切换效果
$(selector).fadeTo(speed,opacity,callback);opacity是指到达的透明度

⑩$(selector).slideToggle
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

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

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

①③jQuery attr() 方法用于获取属性值。

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

①⑤上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
如$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});

①⑥然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
但是如果在一个按钮中after和before同时出现则只能实现后面一个

①⑦如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
$("p").remove(".italic");remove接受过滤器的操作，即仅删除里面class为italic的元素

①⑧css() 方法设置或返回被选元素的一个或多个样式属性。

①⑨width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

②零:jq里面的html就相当于js里面的innerHTML

②①innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。

②②outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。

②③outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

②④用height和width也可以直接设置div的相关宽和高

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

②⑥返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：
$("span").parents("ul");

②⑦parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
$("span").parentsUntil("div");返回span和div之间的所有元素

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

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

③零：有许多有用的方法让我们在 DOM 树进行水平遍历：
siblings() next() nextAll() nextUntil() prev() prevAll() prevUntil()

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

③②next() 方法返回被选元素的下一个同胞元素。该方法只返回一个元素。
nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

③③prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：
它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

③④first() 方法返回被选元素的首个元素。last() 方法返回被选元素的最后一个元素。

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

③⑥not() 方法返回不匹配标准的所有元素。提示：not() 方法与 filter() 相反。