Jquery 常用函数

一 操作类的方法
1.addClass(className)
2.removeClass(className)
3.hasClass(className)
4.toggleClass(className)
A 给元素 $node 添加 class active，给元素 $noed 删除 class active

$node.addClass('active');//增加类
$node.removeClass('active');//移除类

二 效果
1.hide()这个方法不接受任何参数。
2.show()这个方法不接受任何参数。
3.toggle()如果没有参数，最简单的方法来切换一个元素可见性。

$node.hide();//隐藏类
$node.show();//显示类

三 属性的操作
attr();设置或者获取元素的属性值
removeAttr();移除元素的属性

attr( attributeName) 获取匹配的元素集合中的第一个元素的属性的值。
attr( attributeName, value )设置每一个匹配元素的一个或多个属性。

attr.png

给$node 添加自定义属性data-src

增加属性.png

四 元素的添加和删除
1 append() 被选元素的内部最末尾插入参数内容
2 prepend() 被选元素的内部最开头插入参数内容
3 after() 在被选元素之后插入参数内容
4 before() 在被选元素之前插入参数内容

在$ct 内部最开头添加元素$node
在$ct 内部最末尾添加元素$node

Paste_Image.png

元素的删除

empty() 从DOM中移除集合中匹配元素的所有子节点。
remove() 将匹配元素集合从DOM中删除。（注：同时移除元素上的事件及 jQuery 数据。）

empty和remove.png

五 尺寸

width(); 设置或返回元素的宽度，不包括(内边距，外边距 边框)
height();设置或返回元素的高度，不包括(内边距，外边距 边框)
innerWidth(); 返回元素的宽度,包括内边距
innerWidth(); 返回元素的高度,包括内边距
outerWidth(); 返回元素的宽度,包括内边距、边框
outerHeight(); 返回元素的高度,包括内边距、边框
outerWidth(true); 返回元素的宽度,包括内边距、边框、外边距
outerHeight(true); 返回元素的高度,包括内边距、边框、外边距

内容宽高.png

其他尺寸.png

设置宽高属性的话
.width(value) 其他同样设置

六 距离

.offset() 在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档。

.scrollleft()

scrolltop()

获取窗口滚动条垂直滚动距离

$(window).on('scroll',function(){
    console.log($(this).scrollTop());
})

获取$node 到根节点水平、垂直偏移距离

offset.png

七 修改CSS 样式

.css("属性") 返回属性值
.css("属性"，"属性值")
.css({"属性:属性值","属性:属性值",...})

CSS.png

CSS2.png

八 遍历
jQuery.each( collection, callback(indexInArray, valueOfElement) )
一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

each.png

获取$ct 里面的所有孩子
从$ct 里查找 class 为 .item的子元素

children.png

对于$node，向上找到 class 为’.ct’的父亲，在从该父亲找到’.panel’的孩子

parent和children.png

获取选择元素的数量

Paste_Image.png

获取当前元素在兄弟中的排行
index()

index.png