JQuery容易被忽略的知识点，你都知道哪些呢

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：执行完后，回调的函数（输入需要回调的函数名称，不要加括号）

2、动画：

// 动画

$(selector).animate(,speed,callback);

// 停止动画，在播放动画的途中，可以停止动画

$(selector).stop();

params：形成动画的CSS属性，例如：

speed：动画的时间

callback：回调函数

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 - 右边距

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");

小编的分享就到这了，喜欢的童鞋们可以点一波关注哦，后面会有更精彩的内容等着大家~