1. jquery选择器:
$( ):获取到的是一组元素
jQuery( )
按ID选择:$('#id名')
按类名选择:$('.类名'):获得一组元素
特殊选择器:
first( ):获取第一个元素
last( ):获取最后一个元素
eq(n):获取索引是第n的元素
odd:索引为奇数
even:索引为偶数
2. jquery筛选器:
first( ):筛选出集合里的第一个元素
last( ):筛选出集合里的最后一个元素
eq(n):筛选出集合里索引是n的元素
next( ):筛选出下一个兄弟元素
nextAll( ):筛选出后面的所有兄弟元素
nextUntil('选择器'):筛选出后面的兄弟元素直到选择器
prev( ):筛选出上一个兄弟元素
prevAll( ):筛选出前面的所有兄弟元素
prevtUntil('选择器'):筛选出前面的兄弟元素直到选择器
parent( ):筛选出父元素
parents( ):筛选出所有祖先元素
parentsUntil('选择器'):筛选出所有祖先元素直到选择器
children():筛选出所有的子级元素
find('选择器'):找出所有符合选择器条件的元素
siblings():筛选出所有的兄弟元素
siblings('选择器'):筛选出符合选择器条件的所有的兄弟元素
index( ):获取元素的索引
3. jquery操作文本内容:
html( ):可读写,只能获取第一个元素的值,类似innerHTML
text( ):可读写,可以获取所有元素的值,类似innerText
val( ):可读写,只能获取第一个元素的值,类似value
4. jquery操作元素类名:
addClass( ):添加类名
removeClass( ):删除类名
togglClass( ):切换类名(有就删除,没有就添加)
hasClass( ):判断是否有类名,返回boolean值
5. jquery操作元素样式:
css('元素名称'):获取元素的样式
css('元素名称','样式值'):设置元素的样式
css({
元素名称:样式值,
元素名称:样式值,
}) :批量设置样式
6. jquery操作元素属性:
attr( ):设置的属性存储在元素标签上
attr( )传递一个值是获取属性,传递两个值是设置属性
removeAttr('属性名')删除属性
prop( ):设置的属性存储在元素对象上
prop( )传递一个值是获取属性,传递两个值是设置属性
removeProp('属性名')删除属性
data( ):设置的属性存储在元素对象单独开辟的空间上
data( )传递一个值是获取属性,传递两个值是设置属性
removeData('属性名')删除属性
7. jquery绑定事件:
on( ):绑定事件
one( ):只能执行一次
off( ):解绑事件
trigger( ):专门触发事件的方法
hover( ):鼠标悬停
直接可以使用是的事件:(不用on)
click( ):单击事件
dblclick( ):双击事件
scroll( ):滚动条事件
hover( ):鼠标悬停事件,里面有两个事件函数,移入和移出。
8. jquery节点操作:
创造节点:类似createElement( )
$(html格式文本)
插入节点:类似appendChild( )
内部插入:
页面元素.append(要插入的元素)
要插入的元素.appendTo(页面元素)
页面元素.prevent(要插入的元素)
要插入的元素.preventTo(页面元素)
外部插入:
页面元素.after(要插入的元素)
要插入的元素.insertAfter(页面元素)
页面元素.before(要插入的元素)
要插入的元素.insertBefore(页面元素)
删除节点:
页面元素.empty( ):把自己变成空标签
页面元素.remove( ):把自己移除
替换元素:
页面元素.replacewith(替换元素)
替换元素.replaceAll(页面元素)
克隆节点:
元素.clone('自己的事件是否克隆','子节点是否克隆')
9. jquery获取尺寸
获取元素内容区域的尺寸:width( )、height( )
获取元素内容+padding:innerWidth( )、innerHeight( )
获取元素内容+padding+border:outerWidth( )、outerHeight( )
获取元素内容+padding+border+margin:outerWidth(true)、outerHeight(true)
10. jquery获取元素的位置:
offset( ):可读写、获取偏移量、元素相对于页面的位置
position( ):只读、元素相对于父级元素的位置
11. jquery的函数:
ready( ):类似于window.onload( )
each(要遍历的数组,function(index,value){}):类似于foreach( ),遍历数组
$.extend(要合并到的对象,合并的对象1,合并的对象2,...):合并对象
12. jquery的动画:
标准动画:
show(时间,运动曲线,运动结束的函数):显示
hide(时间,运动曲线,运动结束的函数):隐藏
toggle(时间,运动曲线,运动结束的函数):切换
折叠动画:
slideDown(时间,运动曲线,运动结束的函数):显示
slideUp(时间,运动曲线,运动结束的函数):隐藏
slideToggle(时间,运动曲线,运动结束的函数):切换
渐隐渐显动画:
fadeIn(时间,运动曲线,运动结束的函数):显示
fadeOut(时间,运动曲线,运动结束的函数):隐藏
fadeToggle(时间,运动曲线,运动结束的函数):切换
fadeTo(时间,指定的透明度,运动曲线,运动结束的函数):到指定的透明度
综合动画:
animate({},时间,运动曲线,运动结束的函数)
停止动画:
stop( ):运动到哪里就停在哪里
finish( ):瞬间达到结束位置
13. jquery发送ajax请求:
$.get(请求地址,携带参数,回调函数,期望数据类型):
$.post(请求地址,携带参数,回调函数,期望数据类型):
$.ajax({
url:请求地址
data:携带到后端的参数
dataType:期望后端返回的参数
success:function( ){} 成功回调的函数
error:function( ){} 失败回调的函数
timeout:超时时间,单位是毫秒
cache:true 是否缓存,默认为true
})
.then( )接收响应
14. jquery发送jsonp请求
使用$.ajax({})方法,dataType='jsonp'
jsonp:回调函数
15. jquery的全局钩子函数:
ajaxStart( ):第一个ajax之前触发
ajaxSend( ):每一个ajax发送之前都触发
ajaxSuccess():ajax发送成功触发
ajaxError( ):ajax发送失败触发
ajaxComplete( ):每一个ajax完成时触发
ajaxStop( ):最后一个ajax成功时触发