jQuery效果1

发布于:2024-05-23 ⋅ 阅读:(140) ⋅ 点赞:(0)

一、jQuery概述

j是javaScript,query是查询的意思,即查询js
jQuery是JavaScript中的一种,常见JavaScript还有
jQuery,prototype,YUI,DoJo,Extjs,移动端zepto
jQuery中封装了js常用功能代码,学习jQuery的本质是学习调用这些函数
jQuery的使用包括:1.从官网上引入jQuery.min.js2.入口函数
在这里插入图片描述
入口函数,一般用第一种
顶级对象$相当于jQuery
在这里插入图片描述
DOM对象和jQuery对象的区别
在这里插入图片描述
DOM对象和jQuery对象的相互转换
第一种DOM–>jquery:括号里不带引号
在这里插入图片描述

二、选择器

1.基础选择器,层级选择器,筛选选择器,筛选方法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.补充1:隐式迭代

jquery默认有隐式迭代
不需要循环,可获得全部
在这里插入图片描述
在这里插入图片描述

3.例子,下拉菜单

用两个ul li
在这里插入图片描述

4.补充2:排他思想

因为jQuery有隐式迭代,不需要for循环,所以和原生js中的用法不一样
例子,淘宝精品服饰案例
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

5.补充3:链式编程

this是当前元素不用引号
在这里插入图片描述

在这里插入图片描述

三、样式操作

1.少用css

在这里插入图片描述

2.较多用类名

在这里插入图片描述

3.补充4:类名注意

在这里插入图片描述
在这里插入图片描述

4.例子,tab栏转换

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

四、效果

1.显示隐藏

show([s],[e],[fn])
hide([s],[e],[fn])
toggle([s],[e],[fn])
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.补充5:hover函数/动画排队,停止排队

hover([over,] out)
在这里插入图片描述

在这里插入图片描述

3.滑动

slideDown([s],[e],[fn])
slideUp([s],[e],[fn])
slideToggle([s],[e],[fn])

4.淡入淡出

fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeToggle([s],[e],[fn])
fadeTo([[s],opacity,[e],[fn]])
在这里插入图片描述
在这里插入图片描述
例子
在这里插入图片描述
在这里插入图片描述

5.自定义动画

在这里插入图片描述
在这里插入图片描述

6.王者荣耀手风琴案例

在这里插入图片描述
在这里插入图片描述
每个英雄都有一张大图片,一张小图片
第一个英雄能看大图片,不能看小图片;其他英雄能看小图片,不能看大图片

在这里插入图片描述
在这里插入图片描述