JQuery容易被忽略的知识点，整理了下

╰半夏微凉° 2022-05-21 00:37 232阅读 0赞

JQuery，简单易学的JavaScript库，大伙们应该不陌生吧，但越简单的东西，很多东西越容易被忽视掉。

下面介绍一些JQuery中往往容易被忽视的知识点（文章不会全方面介绍JQuery，以下大部分知识，大家平常都用的相对较少，但却不可忽视）~

# 0、js/jQuery入口函数 #

> $(function() \{
> 
> \});

是

> $(document).ready(function() \{
> 
> \});

的简写形式

js入口：

> window.onload = function() \{
> 
> \}

# 1、隐藏/显示/隐藏显示切换 #

> // 隐藏、显示
> 
> $(selector).hide(speed, callback);
> 
> $(selector).show(speed, callback);
> 
> $(selector).toggle(speed, callback);
> 
> // 淡入、淡出
> 
> $(selector).fadeIn(speed, callback);
> 
> $(selector).fadeOut(speed, callback);
> 
> $(selector).fadeToggle(speed, callback);
> 
> $(selector).fadeTo(speed, opacity callback); // 第2个参数为透明值，透明值从1渐变到opacity
> 
> // 滑入、滑出
> 
> $(selector).slideDown(speed, callback);
> 
> $(selector).slideUp(speed, callback);
> 
> $(selector).slid(speed, callback);

重点在于方法里面的2个参数：

speed：显示/隐藏速度，填入毫秒数，有一种动画的效果

callback：执行完后，回调的函数（输入需要回调的函数名称，不要加括号）

![15299999659471c3870b0ce][]

![15300001672682dc17584a6][]

![1530000174077f308c4fd7b][]

# 2、动画： #

> // 动画
> 
> $(selector).animate(\{params\},speed,callback);
> 
> // 停止动画，在播放动画的途中，可以停止动画
> 
> $(selector).stop();

params：形成动画的CSS属性，例如：\{left: "100px", top: "100px"\}

speed：动画的时间

callback：回调函数

![1530001382697110db974ba][]

# 3、JQuery链： #

一般我们是一次写一条jquery语句，jquery里面有一种“链”，在相同的元素下，运行多条命令

如：$(selector).hide(1000).show(1000);

优点：浏览器就不必多次查找相同的元素了

# 4、元素属性的设置与读取 #

> // 获取属性值
> 
> $(selector).attr(属性名称);
> 
> // 设置属性值
> 
> $(selector).attr(属性名称， 属性值);

例如：

> $(selector).attr(\{
> 
> "href":"baidu.com",
> 
> "title": "哇咔咔"
> 
> \});

# 5、添加元素： #

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

例如：

$(selector).append(txt1, txt2, txt3);

# 6、删除元素： #

> remove() - 删除被选元素（及其子元素）
> 
> remove(过滤规则) - 删除指定的元素
> 
> empty() - 从被选元素中删除子元素

例如：

$(selector).remove();

$(selector).empty();

// 删除选中的所有p元素中class=‘tmp’的元素们

$("p").remove(".tmp");

# 7、CSS类： #

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

其中的参数都是css样式名称，如：

addClass("myColor1 myColor2");

$(selector).css(\{

"width": "100px",

"height": "100px"

\});

# 8、元素尺寸的计算方式： #

补充：

$(selector).offset().top - 上边距

$(selector).offset().bottom - 下边距

$(selector).offset().left - 左边距

$(selector).offset().right - 右边距

![1530002353724f325d999fd][]

# 9、祖先/后代/同胞 #

> parent() - 直接父元素
> 
> parents(\[x\]) - 所有父元素，参数可选（加入参数，可以过滤想要的父元素）
> 
> parentsUntil(\[x\]) - 返回2个元素之间的所有父元素，参数可选（不加入参数，默认和parents功能一样）
> 
> children(\[x\]) - 返回所有直接子元素，参数可选（加入参数，可以过滤想要的子元素）
> 
> find(x) - 通过参数，查找给定的元素，参数必须
> 
> siblings(\[x\]) - 所有同胞元素（在同一级的所有元素），参数可选（加入参数，可以过滤想要的同胞元素）
> 
> next() - 下一个同胞元素
> 
> nextAll(\[x\]) - 跟随其后的是所有同胞元素
> 
> nextUntil(\[x\]) - 介于2个元素之间的所有元素
> 
> prev() - 同上
> 
> prevAll(\[x\]) - 同上
> 
> prevUntil(\[x\]) - 同上

例如：

$(selector).parents("p"); // 返回所有父元素中p节点元素

$("\#div").parentsUtil("\#div1"); // 返回id=div与id=div1之间的所有父元素

# 10、过滤： #

> first()
> 
> last()
> 
> eq(x) - 选取第x + 1个元素（下表从0开始）
> 
> filter(x) - 根据参数，过滤想要的元素
> 
> not(x) - filter(x)返回结果相反

例如：

$("p").filter(".url");

[15299999659471c3870b0ce]: /images/20220521/da1ce708a391428695fdb20788b17c0e.png
[15300001672682dc17584a6]: /images/20220521/c388a07d5a36441394aa552e29ff7f3e.png
[1530000174077f308c4fd7b]: http://p3.pstatp.com/large/pgc-image/1530000174077f308c4fd7b
[1530001382697110db974ba]: http://p9.pstatp.com/large/pgc-image/1530001382697110db974ba
[1530002353724f325d999fd]: http://p9.pstatp.com/large/pgc-image/1530002353724f325d999fd