jquery知识点总结

一. 筛选选择器

:first 获取第一个元素
:eq(n) 获取第n个元素
:odd 索引号是基数行
:even 索引号是偶数行
:last 获取最后一个元素

 二. 筛选的方法

parent()查找父级 最近一级
childred('li')相当于> 最近一级的(亲儿子) 子代选择器
find('li') 相当于 空格 后代选择器
siblings('li')查找兄弟节点,不包括自己本身
nextAll()查找当前元素之后所有同辈元素
prevtAll()查找当前元素之前所有的同辈元素
hasClass('class')检查当前的元素是否含有某个特定的类,如果有,则返回true
eq(2)相当于:eq(2),索引从0开始

三. 类操作

添加类 addClass('类名')
删除类 removeClass('类名')
切换类 toggleClass('类名')
jQuery操作类名,不会修改原先的类,只会在指定的类进行操作

四. 显示隐藏效果

显示-----------------------
show(speed,easing,fn)
参数都可以省略,无动画直接显示
speed:三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒数值(如:1000)
easing:用来指定切换效果,默认是'seing',可用参数'linear'
fn:回调函数,在动画完成时执行的函数,每个元素执行一次.
隐藏--------------------------
hide(speed,easing,fn)
参数都可以省略,无动画直接显示
speed:三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒数值(如:1000)
easing:用来指定切换效果,默认是'seing',可用参数'linear'
fn:回调函数,在动画完成时执行的函数,每个元素执行一次.

五. 滑动效果

下滑动 slideDown();
上滑动 slideUp();
滑动切换 slideToggle();

六. 事件切换

hover(over,out);
over:鼠标移到元素上要触发的函数(相当于mouseover)
out:鼠标移出元素要触发的函数(相当于mouseout)

如果只写一个函数,鼠标移入,移除都会触发这个函数

七. 动画队列及其停止排队方法

1. 动画或效果队列
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行.
2. 停止排队
stop()方法用于停止动画或效果
添加stop()方法,必须写到动画的前面,相当于停止上一次动画

八. 淡入淡出效果

fadeIn() 淡入
fadeOut() 淡出
fadeToggle() 淡入淡出切换
fadeTo(speed,opacity,easing,fn)
opacity 透明度必须写 取值0-1之间
速度必须写

九. 自定义动画animate

animate(params,[speed],[easing],[fn])
params:想要更改的样式属性,以对象形式传递,必须写.属性名可以不用带引号,如果是复合属性则需要采用驼峰命名法,其余参数可以省略
speed:时间
easing:指定切换效果
fn:回调函数

十. 属性操作

1. 获取固有属性:prop('属性名','属性值');
例如获取href:console.log($('a').prop('href','http://www.baoidu.com/'))
可以直接修改属性值
2. 获取自定义属性值:attr('属性名','属性值');
可以直接修改属性值
3. 数据缓存:data() 
这个数据是存放在元素的内存里面,将元素当做变量使用,在dom中看不到存放的数据
 data()方法可以在指定的元素上存取数据,并不会修改DOM元素结构,一旦页面刷新,之前存放的数据都将被移除.
 也可以获取h5新增的data-inndex属性,不用写data-开头,而且返回的是数字型
 data("index")
4. 发生改变:change(fn())

十一. 表单选中事件

:chencked选择器 表示查找被选中的表单元素

例如 $("input:checked").length 被选中元素的个数

十二. 内容文本值操作

1. 普通元素内容 html()  (相当于原生innerHTML)
html() // 获取元素内容
html('内容') // 设置元素内容
2. 普通元素文本内容text() (相当于原生innerText)
text() // 获取元素文本内容
text('内容') //设置元素文本内容
3. 表单的值val() (相当于原生value)

parents('选择器')可以返回指定祖先元素
toFixed(2) 保留两位小数
表单内容发生改变 触发change事件

十三. 遍历元素

1. each() 遍历元素 主要用于遍历dom对象
each(function(index,domEle)(xxx))
参数一:每个元素的索引
参数二:每一个dom元素对象(不是jquery对象);
// domEle要想使用jquery方法,需要给这个dom元素转换为jquery对象$(domEle)
2. $.each() 方法遍历元素 主要用于遍历数据,处理数据(也可以处理数组,对象)
$.each(object,function(index,element){xxx});
参数一:遍历的对象
参数二:回调函数
函数参数一:索引号(key值)
函数参数二:遍历的内容(value值)

十四. 创建元素

$('<li></li>') 动态创建了li标签

十五. 添加元素

1. 内部添加
element.append('内容')//把内容放入到匹配元素内部的最后面,类似于原生js的appendChild
element.prepend('内容')//把内容放到匹配元素的最前面
2. 外部添加
element.after('内容')//把内容放到目标元素外的后面
element.before('内容')//把内容放到目标元素外的前面

十六.删除元素

element.remove()//删除匹配的元素(删除本身)
element.empty()//删除匹配的元素集合中所有的子节点
element.html("")//清空匹配的元素内容