jQuery(一):选择器、样式操作、动画效果

选择器

1.基础选择器
语法格式:

$(“选择器”) // 里面选择器直接写 CSS 选择器即可,但是要加引号

常见选择器类型

请添加图片描述

请添加图片描述

例如:

请添加图片描述

2.样式设置

语法格式:

$(‘div’).css(‘属性’, ‘值’)

例如:

请添加图片描述

效果图:

请添加图片描述

3.隐式迭代

遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代。

例如:

请添加图片描述

上面样式设置的把div背景颜色全部设置为红色就是隐式迭代,相当于一个循环,然后把所有的div挨个设置背景色。如果是使用DOM元素的话,只能使用for循环来设置每一个背景元素。如上图所示,使用循环

4. jQuery 筛选选择器

请添加图片描述

例如:

   $('ul li:first').css('background','red');//将ul下的第1个li背景颜色改为红色
   $('ul li:eq(3)').css('background','red');//将ul下的第4个li背景颜色改为红色

请添加图片描述
例如:

请添加图片描述

效果:

请添加图片描述

5.排他思想

想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。

格式:

$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

例如:

请添加图片描述
效果为点击哪一个按钮,哪一个按钮的背景颜色变为红色,其余的为默认颜色

请添加图片描述

6.链式编程

链式编程是为了节省代码量,使用链式编程一定注意是哪个对象执行样式。

例如:

$(this).css('color', 'red').sibling().css('color', '');    

这个效果为当前元素的字体颜色变为红色,其余兄弟元素变为默认颜色

请添加图片描述

样式操作

1. 参数只写属性名,则是返回属性值

$(this).css(''color'');

2. 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号

$(this).css(''color'', ''red'');

3.参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号

$(this).css({
    
     "color":"white","font-size":"20px"});

例如:

请添加图片描述

4.添加类

$(“元素名称”).addClass(''类名'');

5.移除类

$(“元素名称”).removeClass(''类名'');

6.切换类

切换类名:如果你没有类名,那就加上这个类,如果你有这个类了,就去掉

$(“元素名称”).toggleClass(''类名'');

例如:

请添加图片描述

jQuery 动画效果

1.显示、隐藏、切换

语法格式:

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

参数:

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

例如:

请添加图片描述

效果:
请添加图片描述

请添加图片描述

点击显示按钮,盒子在1000ms之内缓慢出来,点击隐藏按钮,则隐藏盒子,隐藏后弹出alert警示框,切换就是隐藏时点击后显示,显示时点击后隐藏。

2.滑动效果

下滑效果

slideDown([speed,[easing],[fn]])

上滑效果

slideUp([speed,[easing],[fn]])

滑动切换

slideToggle([speed,[easing],[fn]])

滑动效果参数

  • 参数都可以省略。
  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。
  • easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
  • fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。

例如:

请添加图片描述

3.事件切换

语法格式一:

$(‘元素名’).hover(function(){},function(){})
第一个function(){}是鼠标经过时触发,第二个是鼠标离开时触发

语法格式二:

$(‘元素名’).hover(function(){})
只写一个function(){}表示鼠标经过和离开都会触发

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

例如:

请添加图片描述

效果:

请添加图片描述
方法一和方法二效果相同,鼠标经过,跳出文本框,鼠标离开,文本框隐藏

4.动画队列及其停止排队方法

动画或效果队列: 动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。比如鼠标移入事件,如果移入第一个元素,再移入第二个元素,那么必须等到第一个元素的事件触发完毕,才会执行第二个元素的移入事件的触发

停止排队

stop()

  • stop() 方法用于停止动画或效果。
  • stop() 写到动画或者效果的前面, 相当于停止结束上一次的动画。

例如:

请添加图片描述
stop 方法必须写到动画的前面,stop()停止的是上一次的动画。如果写在slideToggle(),那么我们鼠标移入上去之后,文本框显示,但是鼠标离开之后,不会再隐藏,因为动画被停止了

如果写成将上述代码改为: $(this).children(“ul”).slideToggle().stop();
效果如下:鼠标离开后,文本框也不会再隐藏,因为滑动效果取消了

请添加图片描述

5.淡入淡出效果

淡入

fadeIn([speed,[easing],[fn]])

淡出

fadeOut([speed,[easing],[fn]])

淡入淡出切换

fadeToggle([speed,[easing],[fn]])

参数:

  • 参数都可以省略。
  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。
  • easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
  • fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。

例如:
请添加图片描述
请添加图片描述
请添加图片描述

6.自定义动画 animate

语法格式

animate(params,[speed],[easing],[fn])

参数

  • params: 想要更改的样式属性,以对象形式传递,必须写。 属性名可以不用带引号, 如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。

  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值

  • easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

  • fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。

例如:

请添加图片描述

效果:
请添加图片描述

点击后:

请添加图片描述

猜你喜欢

转载自blog.csdn.net/weixin_53912712/article/details/128708525
今日推荐