jQuery框架的方法功能介绍

173 阅读3分钟

jQuery 框架

jQuery对象

$() 方法获取到的内容叫做jQuery对象

内部·封装了大量的属性和方法,比如.css()和.html()和.animate()等方法都是jQuery对象方法

通过$()获取的元素是一组元素,进行操作时是批量操作。

JQ对象和原生对象的转换

jQuery对象中原生对象的个数

$().length

$().size()

互相转换

jQuery 转换原生:直接利用数组下标方式,得到jQuery封装的原生对象

原生转jQuery:将原生对象用$()方法包裹即可

jQuery筛选选择器

$(":first") 第一个

$(":last") 最后一个

$(":eq(index)") 下标为index的项

$(":gt(index)") 大于下标为index的项

$(":lt(index)") 小于小标为index的项

$(":odd") 小标为奇数的项

$(":even") 下标为偶数的项

$(":not(selector)") 去除所有与给定选择器匹配的元素

筛选方法:

$("p").first()

$("p").last()

$("p").eq(3)

html方法

获取:文本和内部标签

语法:jQuery对象.html();

设置:若设置标签时,标签会被渲染

语法:jQuery对象.html('文本内容');、

text()方法

获取:文本

语法:jQuery对象.text();

设置:若设置标签时,标签会被当做普通文本

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

val()方法

获取:表单元素的value

语法:jQuery对象.val();

设置:表单元素的value

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

attr()方法

attr:属性的意思

作用:用来获取或者设置标签的属性值

设置标签的属性

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

获取标签属性值

语法:jQuery对象.attr(name);

removeAttr()方法

作用:移出标签的属性

语法:removeAttr(name);

prop()方法

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

获取

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

设置

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

css()方法

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

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

参数2:设置或者更改的属性值。

(注意:两个参数的情况下,参数2可以进行赋值等运算。同时设置多条属性时可以使用对象形式的参数)

addClass()添加类名

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

参数:字符串格式的类名

removeClass()移除类名

删除指定的类名

语法:jQuery对象.removeClass();

参数:字符串格式的类名

不传参数:表示删除所有的类名

toggleClass() 类名切换

若这个类名存在,则移除该类名,否则添加该类名

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

参数:字符串格式的类名。

优点:三个方法只操作参数部分的类名,不影响原有的其他类名。

hasClass()类名判断方法

语法:jQuery对象.hasClass('类名');

返回值:true,false

jQuery常用事件方法

1.不需要写on

2.事件方法需要jQuery对象打点调用,小括号内的参数是事件函数

另外:mouseenter和mouseleave没有事件冒泡

hover()方法

相当于将上述两个事件进行了合写

参数:有两个参数,第一个参数是鼠标移上执行函数,第二个则是鼠标离开执行函数。

$box.hover(function(){
  //鼠标移上
},function(){
  鼠标离开
})

节点关系查找方法

$(this)自己

在jQuery中将this关键字传递给$()方法,得到的就是指向自己的jQuery对象,就可以使用JQ中的方法。

parent()父级

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

父级得到的也是一个jquery对象,直接继续打点调用JQ方法和属性

children()子级

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

得到的子级组成的jQuery对象可以继续调用JQ方法和属性。

获得子级时,不限制标签类型。

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

siblings() 兄弟

jQuery对象通过调用siblings()方法可以得到除了自己以外的所有同级元素怒组成的jQuery对象,找到的只能是亲兄弟。

得到jQuery对象可以继续使用JQ的方法和属性。

siblings()方法得到的jQuery对象可以进行二次选择,通过给参数传递字符串格式的选择器。

链式调用

jQuery对象调用任何方法(除了节点关系方法)执行完后,方法都有一个返回值,返回值就是jQuery对象自己,可以对执行结果继续打点调用jq的方法值和属性。

可以使用jQuery对象进行连续打点调用 (其实可以理解为在使用一个方法后如果你想给当前元素添加其他方法不需要多次书写部分重复代码,只需要在后面继续打点调用相关方法。)

find()后代元素

jQuery对象可以利用find()方法,传递一个参数,参数部分规定的选择器,查找范围是jquery对象的所有后代。

参数是字符串格式的选择器。

兄弟元素

next() 下一个兄弟

prev() 前一个兄弟

多选方法

nextAll() 后面所有的兄弟

prevAll() 前面所有的兄弟

(可传递参数)

eq()方法

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

index()方法

该方法被调用时,得到的是它自己在HTML结构中的兄弟下标的位置。

each()遍历

参数是一个函数

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

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

优点1:

each的函数内部,也有一个this,指向的是进来遍历的每一次元素。

优点2:

each的函数可以传一个参数i,i表示的是这一次的遍历对象在整体的jQuery对象大排队中的下标位置。

入口函数

语法1;

$(document).ready(function(){
  //获取元素
})

简化:

$(function(){

})

show(),hide()方法

hide():元素隐藏,前提是display:block;

show():元素显示,显示的前提必须是display:none;

toggle(): 在元素隐藏和显示之间进行切换。

参数:

单词格式:"slow","normal","fast"

数字格式的时间,单位是毫秒,在规定时间之内会出现显示或者隐藏的动画。

过渡时间内,伴随着宽度,高度,以及透明度的变化。

slideDown() 和 slideUp()方法

slideDown():滑动显示(方向不一定)

slideUp():滑动隐藏

slideToggle():滑动切换

fadeIn()和fadeOut()方法

fadeIn():淡入,透明度逐渐增大最终显示

fadeOut():淡出,透明度逐渐降低最终隐藏

fadeToggle():切换效果

fadeTo():淡入或者淡出到某个指定的透明度

animate()方法

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

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

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

参数2:可选,规定动画的速度,默认值是“normal”。其他值,“slow”,“fast”.

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

参数4:可选,animate函数执行完之后,要执行的函数。

动画延迟 delay()

将delay()设置在某个运动方法前,表示后面的运动要在规定时间之后再执行。

参数:时间的数值,表示延迟的时间

stop()方法

作用:将设置元素对象身上的排队动画以何种方式停止。

有两个参数,都是布尔值

第一个参数:设置是否清空后面的动画排队。true表示清空,false表示只停止当前动画。

第二个参数:设置当前动画是否立即完成,如果是true表示立即完成,如果是false表示立即停止在当前位置。

节点操作

jQuery创建追加元素方法

创建元素

语法:$('<li><li>')

追加元素:

向父元素最后追加

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

语法:新创建jquery对象.appendTo('父元素选择器'或者父元素jQuery对象)

向父元素最前面追加

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

语法:新创建jquery对象.prependTo('父元素选择器'或者父元素jQuery对象)

向元素后面追加新的兄弟

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

语法:新创建jQuery对象.insertAfter('选择器'或者jQuery对象)

向元素前面追加新的兄弟

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

语法:新创建jQuery对象.insertBefore('选择器'或者jQuery对象)

删除,清空元素

删除元素

语法:jQuery对象.remove();

清空元素

方法1:jQuery对象.empty();推荐

方法2:jQuery对象.html('');(不清除事件)

克隆元素

语法:jquery对象.clone(布尔值):返回克隆好的元素。

参数:默认是false,表示仅仅克隆内容,true表示克隆内容和事件。

操作元素尺寸

width(),height()方法

操作大小仅仅是内容部分

设置:

语法:jquery对象.width(数字);

获取:

语法:jquery对象.width();

操作大小是内容部分+padding

设置:

语法:jQuery对象.innerWidth(数字);(改变的是内容宽度)

获取:

语法:jQuery对象.innerWidth();

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

设置:

语法:jQuery对象.outerWidth(数字);

获取:

语法:jQuery对象.outerWidth();

jQuery操作元素的位置

获取元素距离文档的位置

位置:jQuery对象.offset();

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

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

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

语法:jQuery对象.position();

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

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

操作卷去的页面间距

获取

语法:jQuery对象.scrollTop();

返回数字

设置

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

JQ事件

on方法注册事件

注册简单事件语法:jQuery对象.on('事件',事件处理程序);

事件委托的实现:jQuery对象.on('事件','选择器',事件处理程序);

选择器:子孙元素

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

off方法事件溢出

解绑简单的事件:jQuery对象.off('click',事件处理程序名称);

解绑事件委托注册的事件:jQuery对象。off('click','选择器',事件处理程序名称);

触发事件

语法:jquery对象.trigger('事件名');

事件对象

鼠标事件对象相关属性

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

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

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

键盘事件

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

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

属性

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

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

方法:

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

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

多库共存

关于$冲突的问题

解决方案1:jQuery不使用$,使用jQuery

解决方案2:jQuery库释放$符合的使用权,用其他简单的符号代替

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

var $1=jQuery.noConflict();