jQuery 样式属性元素操作动画效果尺寸位置操作

Posted 2021-08-19 YuLong~W

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 样式属性元素操作动画效果尺寸位置操作相关的知识，希望对你有一定的参考价值。

文章目录

jQuery样式操作
- 操作CSS方法
- 设置样式类方法
jQuery属性操作
jQuery元素操作
- jQuery内容文本值
- 遍历、创建、添加、删除元素
jQuery动画效果
jQuery尺寸、位置操作
- jQuery尺寸
- jQuery位置

jQuery样式操作

操作CSS方法

1、获取样式属性的值

$(selector).css('样式属性名')

2、设置样式属性的值对象方式：属性名和属性值用冒号隔开，属性可以不用加引号

$(selector).css({'样式属性' : '值'})

3、函数传值方式：属性必须加引号，值如果是数字可以不用跟单位和引号

$(selector).css('样式属性','值')

设置样式类方法

作用等同于以前的 classList，可以操作类样式，注意操作类里面的参数不要加点 .

方法	语法
添加样式类	$(selector).addClass(样式类名)
删除样式类	$(selector).removeClass(样式类名)
判断元素是否含有给定样式类	$(selector).hasClass(样式类名)
交替添加(删除)样式类	$(selector).toggleClass(样式类名)

tab栏切换案例：

参考案例：JavaScript 操作元素案例练习
在这里插入图片描述

jQuery核心代码：

$(function(){
	//1、点击上部li，当前li添加current类，其余兄弟移除current类
	$('.tab_list li').click(function(){
		$(this).addClass('current').siblings().removeClass('current');
		//2、点击同时，得到当前li的索引号
		var index=$(this).index();
		//3、让下部相应索引号的item显示，其余item隐藏
		$('.tab_con .item').eq(index).show().siblings().hide();
	});
})

类操作与className区别：

原生 JS 中 className 会覆盖元素原先里面的类名
jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。 addClass相当于追加类名

jQuery属性操作

操作元素固有属性

1、获取元素的固有属性值

$(selector).prop('属性')

2、设置元素的固有属性值

$(selector).prop('属性名','属性值')

操作元素自定义属性

1、获取元素自定义属性值

$(selector).attr('属性名') //类似于原生getAttribute（）

2、设置元素自定义属性值

对象方式：

$(selector).attr({'属性名':'属性值'})

键值对方式：

$(selector).attr('属性名','属性值')//类似于原生setAttribute（）

回调函数方式：

$(selector).attr('属性名',function(){
   					return '属性值' 
   				})

3、删除元素自定义属性

$(selector).removeAttr('属性名')

数据缓存

data（）方法：

用来设置和获取元素上的值，不影响DOM结构。
类似给元素绑定了一个变量，而变量存在内存中，html中是看不到。
一旦页面刷新，之前存放的数据都将被移除。

1、添加数据

$(selector).data('name','value')

2、获取数据

$(selector).data('name')

jQuery元素操作

jQuery内容文本值

主要针对元素的内容还有表单的值操作

1、操作HTML：作用类似于innerHTML

获取html代码

$(selector).html()

设置html代码

$(selector).html('html代码')

2、操作文本：作用类似于innerText

获取标签文本

$(selector).text()

设置标签文本

$(selector).text('文本')

3、操作值：相当于原生value

获取val值

$(selector).val()

设置val值

$(selector).val('值')

遍历、创建、添加、删除元素

遍历元素： 给同一类元素做不同操作，就需要用到遍历

$(selector).each(function (index, domEle) { })

$(selector).each() 方法遍历匹配的每一个元素。主要用DOM处理。
each 每一个里面的回调函数有2个参数： index是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
要使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)

$.each(object，function (index, element) { })

$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容

创建元素： 动态创建了一个<li>元素

$('<li></li>')

添加元素：

添加方式	添加方法	说明
内部添加	element.append(‘内容’)	匹配元素内部最后面。类似于原生appendChild
内部添加	element.prepend(‘内容’)	匹配元素内部最前面
外部添加	element.after(‘内容’)	目标元素后面
外部添加	element.before(‘内容’)	目标元素前面

内部添加元素，生成之后，它们是父子关系
外部添加元素，生成之后，他们是兄弟关系

删除元素：

删除方法	说明
element.remove()	删除匹配的元素（本身）
element.empty()	删除匹配的元素集合中所有的子节点
element.html(’ ')	清空匹配的元素内容

empty () 和 html(’ ') 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容

jQuery动画效果

显示隐藏

语法	说明
show ([speed, [easing], [fn]])	显示
hide ([speed, [easing], [fn]])	隐藏
toggle ([speed, [easing], [fn]])	切换

参数说明：

参数都可以省略，无动画直接显示
speed：三种预定速度之一的字符串(‘slow’,‘normal’, ‘fast’) 或表示动画时长的毫秒数值(如：1000)
easing：(Optional)用来指定切换效果，默认是’swing’（先快后慢），可用参数’linear’（匀速）
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次

滑动和事件切换

滑动：

语法	说明
slideDown ([speed, [easing], [fn]])	下滑
slideUp ([speed, [easing], [fn]])	上滑
slideToggle ([speed, [easing], [fn]])	滑动切换

参数说明同上

事件切换： hover([over,]out)

over:鼠标移到元素上要触发的函数（相当于mouseenter）
out:鼠标移出元素要触发的函数（相当于mouseleave）
如果只写一个函数，则鼠标经过和离开都会触发它

tab下拉菜单案例（jQuery事件切换实现）：

jQuery核心代码：

$('.nav>li').hover(function(){
	$(this).children('ul').stop().slideToggle();
});

动画队列： 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行

停止排队： stop() 方法用于停止动画或效果

stop() 写到动画或者效果的前面，相当于停止结束上一次的动画

淡入淡出

语法	说明
fadeIn ([speed, [easing], [fn]])	淡入
fadeOut ([speed, [easing], [fn]])	淡出
fadeToggle ([speed, [easing], [fn]])	切换
fadeTo([[speed], opacity, [easing], [fn]])	渐进方式（opacity透明度0-1必须写，speed必须写）

参数说明同上