一 操作类的方法
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
网友评论