jQuery 常用方法汇总学习使用

操作标签方法

1.HTML（）方法

HTML（）方法相当于原生JS中的innerHTML属性，用来获取/设置标签内部内容

语法：jQuery对象.html()

语法：jQuery对象.html('文本内容')

2.text()方法

text（）方法相当于原生JS中的innerText属性，用来获取/设置标签内部文字

语法：jQuery对象.text()

语法：jQuery对象.text('文本内容')

3.val（）方法

val（）方法相当于原生JS中的value属性，用来获取/设置表单元素内容

语法：jQuery对象.val()

语法：jQuery对象.val('文本内容')

4.attr（）方法

用来获取/设置标签的属性值

语法：jQuery对象.attr(name,value)

语法：jquery对象.attr(name)

5.removeAttr()方法

移除标签的属性

语法：removeAttr(name)

6.prop()方法

直接操作的就是布尔值

针对：selected、checked、disabled等表单元素的属性。此类属性的属性值与属性名相同

语法：$('input').prop('属性名')

语法：$('input').prop('属性名',值)

操作样式方法

css()方法

jQuery对象有一个css()方法，用于调用css属性值/更改css属性值

语法：jQuery对象.css(name,value)

参数1：字符串格式的css样式属性名

参数2：设置/更改的属性值

操作类名方法

jQuery中的类名控制方法，只会操作指定的类名，不会影响其他类名

1.addClass()添加类名

语法：jQuery对象.addClass('类名')

参数：字符串格式的类名

2.removeClass()移除类名

删除指定的类名

语法：jQuery对象.removeClass()

参数：字符串格式的类名，不传参数，表示删除所有的类名

3.toggleClass()类名切换

这个类名存在，会移除该类名。否则添加该类名

语法：jQuery对象.toggleClass('类名')

4.hasClass()检测类名是否存在

语法：jQuery对象.hasClass(‘类名’)

返回值：true、false

jQuery常用事件方法

jQuery对象封装了一系列的事件方法

点击事件：click()方法

1.mouseenter()方法

鼠标进入一个元素触发的事件

2.mouseleave()方法

鼠标离开一个元素触发事件

注意：mouseenter和mouseleave没有事件冒泡

在使用时替换mouseover和mouseout更加合适

3.hover()方法

hover事件相当于将mouseenter和mouseleave事件进行了合写

参数：有两个参数，第一个参数是鼠标移上执行的事件函数，第二个参数是鼠标离开执行事件函数

jQuery关系查找方法

1.$(this)自己

在原生的DOM操作中，事件函数内部有一个this关键字指向的就是触发事件的事件源，在jQuery中将this关键字传递给$()方法，得到就是指向自己的jQuery对象，可以使用JQ方法

2.parent()父级

jQuery对象都有一个parent()方法，得到的是自己的父级

3.children()子级

jQuery对象内部有一个children()方法，可以得到自己的所有子级元素组成的jQuery对象

children()可以传参数：参数是字符串格式的选择器，在选中所有子级的情况下，保留满足选择器的部分，进行了二次选择

4.siblings()兄弟

jQuery对象通过调用siblings()方法可以得到除了自己以外的所有同级元素(兄弟)组成jQuery对象，找到的只能是亲的兄弟，不能是叔叔家的兄弟得到jQuery对象可以继续使用JQ的方法和属性。

链式调用

jQuery对象调用任何方法(除了节点关系方法)执行完后，方法都会有一个返回值，返回值就是jQuery对象自己，这个现象给我们提供了便利，可以对执行结果继续打点调用JQ的方法和属性

其他节点关系方法

find()后代元素

jQuery对象可以利用find()方法，传递一个参数，参数部分规定的选择器

兄弟元素

紧邻的兄弟元素方法

next()下一个兄弟

prev()前一个兄弟

多选方法

nextAll()后面所有的兄弟

prevAll()前面所有兄弟

parents()祖先级

通过该方法得到的是指定对象的包含body在内的所有祖先级元素组成的jQuery对象

jQ 排序和动画

1.eq（）方法，大排序

jQuery中获得的对象，内部包含选择一组原生JS对象，在jQuery对象中会进行一个大排序，这个排序与原来的HTML结构没有关系

eq()方法在jQuery对象中通过下标获取某个对象，下标是jQuery对象中的大的排序的下标

2.index()方法

jQuery对象调用index()方法时，得到的是它自己在HTML结构中的兄弟的下标位置。和jQuery大排序没有关系

index()方法获取下标时，排序跟新生成的jQuery对象无关

依赖于自身元素在父级中同级元素之间的位置

3.排他方法

jQuery中可以让this特殊设置，让兄弟siblings设置成默认

4.each()方法

jQuery对象进行的操作都是批量操作，批量操作只能执行一些简单的效果

参数是一个函数

作用：就是对jQuery对象中的元素每一个都执行函数内部的操作

each方法的基本原理就是for循环，从对象的下标为0的项一直便历到最后一项，然后对每一项进行操作

jQuery入口函数

入口函数

1.原生的window.onload

onload事件在加载时，指的是页面中所有的资源【DOM树、音频、视频、图片等】加载完毕后，才能触发

2.jQuery中的入口函数

仅仅需要等待页面中DOM树加载完毕就可以执行了

在一个页面中可以书写多个jQuery的入口函数，执行顺序按照前后加载顺序执行

语法1：

$(document).ready(function(){

  //获取元素

})

jQuery中切换效果的方法

显示隐藏方法

1.hide()：元素隐藏，隐藏的前提必须是元素display:block

2.show()：元素显示，显示的前提必须是元素display:none

3.toggle()：在元素隐藏和显示之间进行切换

这三个方法可以设置元素的显示和隐藏效果，在过程中还可以出现过渡动画

show、normal、fast

如果不传参数：直接显示和隐藏，没有过渡动画

滑动显示隐藏

1.slideDown()：滑动显示(方向不一定)

2.slideUp()：滑动隐藏

3.slideToggle()：滑动切换

让元素在display属性的block和none之间进行切换

谈入谈出

1.fadeln()：谈入，透明度逐渐增大最终显示

2.fadeOut()：谈出，透明度逐渐降低最终隐藏

3.fadeToggle()：切换效果

4.fadeTo()：谈入/谈出到某个指定的透明度

动画效果，执行的是透明度动画。也是在display属性的block和none之间切换

jQuery动画方法

animate()动画方法

作用：执行CSS属性集的自定义动画

语法：$(selector).animate(style,speed,easing,callback)

参数1：css的属性名和运动结束位置的属性值的集合

参数2：可选，规定动画的速度，默认是“noemal”。其他值 slow、normal、fast,数字格式，单位为毫秒

参数3：可选，规定在不同的动画点中设置动画速度的easing函数，值包含swing和linear

参数4：可选，animate函数执行完之后，要执行的函数

动画排队

1.同一个元素对象身上，如果定义了多个动画，动画会排队等待执行

2.如果是不同元素对象都有动画，不会出现排队机制

3.如果有其他非运动的代码，不会等待运动完成

4.之前学习的自带动画的显示隐藏方法，如果设置给同一个元素，也有动画排队

同一个元素身上的运动，可以简化成链式调用的方法

动画延迟

delay：延迟

将delay()设置在某个运动方法之前，表示后面的运动要在规定的时间之后再执行，有延迟运动效果

参数：时间的数值，表示延迟的时间

除了animate方法之外，其他的运动方法也有延迟效果

stop()方法 停止动画

stop()作用：设置元素对象身上的排队的动画以何种方式进行停止

有两个参数，都是布尔值

参数1：设置是否清空后面的动画排队，如果是true表示清空，如果是false表示不清空只停止当前的一个动画

参数2：设置当前是否立即完成，如果是true表示立即完成，对象会立刻走到结束位置，如果是false表示不完成当前动画，立即停止在当前位置

默认情况下，两个参数值默认值为fasle

实际工作中，一般要求会清空后面的动画 并且当前动画要停止在当前的位置

更多时候使用 stop(true)

$("#btn2").click(function(){

       $box1.stop(true,false)

   })

-------------------------------------------------------------------------------------

// 清空后面的动画，走到结尾

   $("#btn1").click(function(){

       $box1.stop(true,true)

   })

   // 清空后面的动画，立即停止在当前

   $("#btn2").click(function(){

       $box1.stop(true,false)

   })

   //不清空后面的动画，跳到结尾

   $("#btn3").click(function(){

       $box1.stop(false,true)

   })

   // 不清空动画，立即停在当前位置 执行下一次动画

   $("#btn4").click(function(){

       $box1.stop(false,false)

   })

动画排队问题

如果将开启运动的程序放在一个事件函数中，事件多次被触发，会执行多次函数，就会在一个元素身上添加了多个动画 会进行动画排队

需要去清除排队的动画，进行放骚扰操作

清空动画排队

清除方法1

利用stop()方法

在每一个运动函数之前都增加一个stop(true)，表示在运动执行之前，会将前面排队的动画清空，然后停止在当前位置

清除方法2

利用函数节流方法，如果元素在运动，直接return,不要执行后面的运动代码

每个jQuery对象，都能调用一个is()方法，作用是显示元素对象的某种状态

如果参数位置是is(“:animated”)，返回值是布尔值，true表示正在运动，false表示没有运动

jQuery节点操作

创建元素

语法：$('<li></li>')

追加元素1

1.向父元素最后追加

语法：父元素jQuery对象.append(新创建的jQuery对象)

语法：新创建jQuery对象.appendTo(‘父元素选择器’/父元素jQuery对象)

2.向父元素最前面追加

语法：父元素jQuery对象.prepend(新创建的jQuery对象)

语法：新创建jQuery对象.prependTo(‘父元素选择器’/父元素jQuery对象)

追加元素2

1.向元素后面追加新的兄弟

语法：jQuery对象.after(新创建的jQuery对象)

语法：新创建jQuery对象.insertAfter(‘选择器’/jQuery对象)

2.向元素前面追加新的兄弟

语法：jQuery对象.before(新创建的jQuery对象)

语法：新创建jQuery对象.insertBefore(‘选择器’/jQuery对象)

删除元素

语法：jQuery对象.remove()

删除谁就让谁调用方法

清空元素

清空方式1：jQuery对象.empty() 推荐使用，清空内部的所有元素及元素相关的事件

清空方式2：jQuery对象.html(‘’) 仅仅清空内部的元素，不清理内存中的元素的事件

元素尺寸

操作元素尺寸方法

1.width()、height()方法

语法：jQuery对象.width(数字)

语法：jQuery对象.width()

2.innerWidth()、innerHeight()方法

操作的大小是内容部分 + padding

语法：jQuery对象.innerWidth(数字)

语法：jQuery对象.innerWidth()

3.outerWidth()、outerHeight()方法

操作的大小是内容部分 + padding + border

语法：jQuery对象.outerWidth(数字)

语法：jQuery对象.outerWidth()

操作元素的位置

获取元素距离文档的位置

语法：jQuery对象.offset()

返回一个对象，对象中包含了元素的位置

注意：offset()方法获取的元素的位置，永远参照文档和定位没有关系

距离上级定位参考元素的位置

语法：jQuery对象.position()

返回一个对象，对象中包含了元素的位置

注意：position()方法获取的元素的位置，参照最近的定位元素(和定位有关系)

操作卷去的页面间距

语法：jQuery对象.scrollTop()

语法：jQuery对象.scrollTop(数字)

jQuery 事件操作

on方法注册事件

注册简单事件语法：jQuery对象.on(‘事件名’，事件处理程序)

事件委托的实现：jQuery对象.on(‘事件名’，‘选择器’,事件处理程序)

选择器：子孙元素

注意：在事件处理程序中，this代表的是子孙元素(所点最先触发的)

off方法移除事件

解绑简单的事件：jQuery对象.off(‘click’,事件处理程序名称)

解绑事件委托注册的事件：jQuery对象.off(‘click’,‘选择器’，事件处理程序名称)

触发事件

语法：jQuery对象.trigger(‘事件名’)

事件对象

鼠标事件对象相关的属性

事件对象.clientX/Y 参照浏览器

事件对象.pageX/Y 参照文档

事件对象.offsetX/Y 参照元素

键盘事件对象相关的属性

事件对象.kegCode 返回键码数字

事件对象.altKey/shiftKey/ctrlKey 返回是布尔值。检测是否按下(ture)

公共的属性/方法

事件对象.target 最初触发事件的DOM元素

事件对象.currentTarget 在事件冒泡阶段中的当前DOM元素

方法：

事件对象.preventDefault() 阻止默认行为

事件对象.stopPropagation() 阻止事件冒泡

多库共存问题

解决方法1：jQuery中不使用$,使用jQuery

解决方法2：jQuery库释放$符号的使用权，用其他简单的符号代替

jQuery.noConflict() 释放$，把$代表的函数返回给用户，用户可以用其他变量接收