HTML5-jQ-有缝轮播-事件

这篇博客详细介绍了如何使用jQuery进行HTML5页面的开发,包括引入jQuery库、选择器的使用、过滤选择器、内容过滤、节点操作、动画效果以及实现有缝轮播。重点讲解了可见性过滤、属性过滤、子元素过滤、表单属性过滤等选择器,以及如何进行HTML、文本、值、属性和样式的操作。此外,还涵盖了节点的遍历、创建、插入、删除、替换和复制。最后,展示了自定义动画和轮播效果的实现,强调了stop方法在轮播中的作用。
摘要由CSDN通过智能技术生成

1、 jQuery——–index1.html

这里写图片描述

(1)引入Jq

这里写图片描述
这里写图片描述

(2)获取

这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

eq(1)选择下标为1的,第一个蓝,第二个无,第三个红色。

(3)jq对象

这里写图片描述
这里写图片描述
Js和jq可以同时出现
这里写图片描述
这里写图片描述

如下所示:前者是dom到jq,后者是jq到dom
这里写图片描述
这里写图片描述

(4)jq选择器——-index2.html

这里写图片描述

这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
后代

这里写图片描述

子代

这里写图片描述
紧挨着的第一个兄弟
这里写图片描述

其后所有元素
这里写图片描述

(5)过滤选择器———-index3.html

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述
对于li,如果有小点没内容,可以设置li的背景颜色,如果没有小点,则没有高度,就设置不了li的样式。even,odd是以下标为准
这里写图片描述

(6)内容过滤选择器——index4.html

这里写图片描述
has指后代里有括号内元素的。
这里写图片描述
例一:contains

这里写图片描述

这里写图片描述

这里写图片描述
这里写图片描述
box和div1内部北京是红色,因为box含有回车,空格,也算有内容。

5-4

1、 可见性过滤选择器

这里写图片描述
这里写图片描述

2、 属性过滤选择器

这里写图片描述

这里写图片描述

这里写图片描述
这里写图片描述
这里写图片描述

3、 子元素过滤选择器

这里写图片描述

这里写图片描述
这里写图片描述
注意:ul后面要加空格,因为li是ul的子代,如果是li,则不需要加空格。

4、 表单属性过滤选择器

这里写图片描述
这里写图片描述
这里写图片描述

指把文本框隐藏。

5、 表单选择器

这里写图片描述
这里写图片描述

6、操作

(1)html操作

这里写图片描述

(2)文本操作

这里写图片描述

(3)值操作

这里写图片描述
这里写图片描述

(4)属性操作

这里写图片描述
获取和修改属性
这里写图片描述
这里写图片描述
添加属性
这里写图片描述

(5)样式操作

这里写图片描述
这里写图片描述
这里写图片描述
Attr会改变class名,addclass前没有class,则没有添加上。
注:classname可以有多个。
这里写图片描述
此时Class=aa,bb
这里写图片描述
此时class=cc;
这里写图片描述
前者删掉了cc,后者删掉了所有的classname,如果括号内是‘’,则相当于什么都没有删除。
ToggleClass常用
Css设置一个,多个样式写法。
这里写图片描述

7、节点操作

(1)遍历节点

这里写图片描述

(2)创建DOM节点

这里写图片描述

在body中添加p标签(两种方式)
这里写图片描述
这里写图片描述
前面两句相当于第三句。
这里写图片描述

(3)插入节点

这里写图片描述
这里写图片描述
5-5

(4)删除节点

这里写图片描述

(5)替换节点

这里写图片描述
前者是前被后替换,后者是后被前替换。

(6)复制节点

这里写图片描述
没有true,则克隆后生成的不能再执行克隆,若加上true则可以继续执行克隆事件

这里写图片描述

这里写图片描述

这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

这里写图片描述
这里写图片描述
这里写图片描述

这里写图片描述
这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

8、动画

创建自定义动画——index4.html
这里写图片描述
这里写图片描述

9、轮播———index5.html(有缝轮播)

这里写图片描述
这里写图片描述
加上stop,可以防止连点之后出错.
这里写图片描述
hover,即是鼠标移入,移出。前者是移入,后者是移出。
i,em标签是斜体;b,strong是加粗
这里写图片描述
对小点的指向事件

这里写图片描述
这里写图片描述
这是透明度的轮播设置

10、动画效果

这里写图片描述
Show改变的是高度,宽度,透明度
这里写图片描述
只改变高度
这里写图片描述
只改变透明度
例1:几个效果可以混用
这里写图片描述
例2:
这里写图片描述
例3:
下面3种格式都是先往右走,再往下走
这里写图片描述
这里写图片描述
这里写图片描述
因为相同的对象,不能一起执行。
例4
这里写图片描述
box先执行,执行完后,box1再执行。
这里写图片描述
box,box1一起执行。因为是不同的对象就一起执行。
例5:往右下角跑
这里写图片描述

这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
结果是0 1 2 3 4

这里写图片描述

——————————————
- 技术交流QQ群:198983438(加群请备注在哪里看到我们的群)在群里面随时会更新一些我们的课程视频

善知教育学习视频大汇总

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值