HTML5-jQ-有缝轮播-事件

1、 jQuery——–index1.html

HTML5-jQ-有缝轮播-事件

(1)引入Jq

HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件

(2)获取

HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件

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

(3)jq对象

HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
Js和jq可以同时出现
HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件

如下所示:前者是dom到jq,后者是jq到dom
HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件

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

HTML5-jQ-有缝轮播-事件

HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
后代

HTML5-jQ-有缝轮播-事件

子代

HTML5-jQ-有缝轮播-事件
紧挨着的第一个兄弟
HTML5-jQ-有缝轮播-事件

其后所有元素
HTML5-jQ-有缝轮播-事件

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

HTML5-jQ-有缝轮播-事件

HTML5-jQ-有缝轮播-事件

HTML5-jQ-有缝轮播-事件

HTML5-jQ-有缝轮播-事件
对于li,如果有小点没内容,可以设置li的背景颜色,如果没有小点,则没有高度,就设置不了li的样式。even,odd是以下标为准
HTML5-jQ-有缝轮播-事件

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

HTML5-jQ-有缝轮播-事件
has指后代里有括号内元素的。
HTML5-jQ-有缝轮播-事件
例一:contains

HTML5-jQ-有缝轮播-事件

HTML5-jQ-有缝轮播-事件

HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
box和div1内部北京是红色,因为box含有回车,空格,也算有内容。

5-4

1、 可见性过滤选择器

HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件

2、 属性过滤选择器

HTML5-jQ-有缝轮播-事件

HTML5-jQ-有缝轮播-事件

HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件

3、 子元素过滤选择器

HTML5-jQ-有缝轮播-事件

HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
注意:ul后面要加空格,因为li是ul的子代,如果是li,则不需要加空格。

4、 表单属性过滤选择器

HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件

指把文本框隐藏。

5、 表单选择器

HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件

6、操作

(1)html操作

HTML5-jQ-有缝轮播-事件

(2)文本操作

HTML5-jQ-有缝轮播-事件

(3)值操作

HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件

(4)属性操作

HTML5-jQ-有缝轮播-事件
获取和修改属性
HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
添加属性
HTML5-jQ-有缝轮播-事件

(5)样式操作

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

7、节点操作

(1)遍历节点

HTML5-jQ-有缝轮播-事件

(2)创建DOM节点

HTML5-jQ-有缝轮播-事件

在body中添加p标签(两种方式)
HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
前面两句相当于第三句。
HTML5-jQ-有缝轮播-事件

(3)插入节点

HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
5-5

(4)删除节点

HTML5-jQ-有缝轮播-事件

(5)替换节点

HTML5-jQ-有缝轮播-事件
前者是前被后替换,后者是后被前替换。

(6)复制节点

HTML5-jQ-有缝轮播-事件
没有true,则克隆后生成的不能再执行克隆,若加上true则可以继续执行克隆事件

HTML5-jQ-有缝轮播-事件

HTML5-jQ-有缝轮播-事件

HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件

HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件

HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件

HTML5-jQ-有缝轮播-事件

HTML5-jQ-有缝轮播-事件

HTML5-jQ-有缝轮播-事件

HTML5-jQ-有缝轮播-事件

8、动画

创建自定义动画——index4.html
HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件

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

HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
加上stop,可以防止连点之后出错.
HTML5-jQ-有缝轮播-事件
hover,即是鼠标移入,移出。前者是移入,后者是移出。
i,em标签是斜体;b,strong是加粗
HTML5-jQ-有缝轮播-事件
对小点的指向事件

HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
这是透明度的轮播设置

10、动画效果

HTML5-jQ-有缝轮播-事件
Show改变的是高度,宽度,透明度
HTML5-jQ-有缝轮播-事件
只改变高度
HTML5-jQ-有缝轮播-事件
只改变透明度
例1:几个效果可以混用
HTML5-jQ-有缝轮播-事件
例2:
HTML5-jQ-有缝轮播-事件
例3:
下面3种格式都是先往右走,再往下走
HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
因为相同的对象,不能一起执行。
例4
HTML5-jQ-有缝轮播-事件
box先执行,执行完后,box1再执行。
HTML5-jQ-有缝轮播-事件
box,box1一起执行。因为是不同的对象就一起执行。
例5:往右下角跑
HTML5-jQ-有缝轮播-事件

HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
HTML5-jQ-有缝轮播-事件
结果是0 1 2 3 4

HTML5-jQ-有缝轮播-事件

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

善知教育学习视频大汇总