jQuery操作

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成功时触发

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容