jquery 好看alert_a标签

一、

jquery 好看alert_jquery_02

1.1

jquery 好看alert_CSS_03

1.2

jquery 好看alert_jquery_04

1.3

不能在导入这里写代码

jquery 好看alert_a标签_05

1.3.1

判断是否加载成功

jquery 好看alert_a标签_06

二、选择器

但是两者获取的类型不同,属性和方法就不同,不能混着用

通过id获取

jquery 好看alert_jquery 好看alert_07

通过class获取

jquery 好看alert_a标签_08

看同一个标签下有几个元素

jquery 好看alert_CSS_09

这种用的比较多,标签.class名


jquery 好看alert_父级元素_10

属性选择器

jquery 好看alert_父级元素_11

加条件


jquery 好看alert_jquery 好看alert_12

jquery 好看alert_a标签_13

p标签里有个a标签


jquery 好看alert_CSS_14

id和class用的最多

三、事件绑定(非常重要,使用的是现代事件绑定方式)

3.1 绑定一个事件

绑定一个事件,从上到下执行

jquery 好看alert_jquery_15

这种方法三个参数.bind(type,date,fn),一般不传参数,从fn函数内获取

jquery 好看alert_CSS_16

3.2 事件解除绑定

一个标签绑定了很多事件,所以要解除绑定

只解除一个参数,click全部解除

jquery 好看alert_jquery 好看alert_17

有很多function的时候,识别不出来,要给function取名

jquery 好看alert_CSS_18

注意test不要加(),代表这个函数,加了(),会直接把这个函数执行结果放进去

jquery 好看alert_jquery 好看alert_19

jquery 好看alert_CSS_20

jquery 好看alert_a标签_21

3.3 绑定多个事件

对所有的p标签都进行绑定

jquery 好看alert_jquery 好看alert_22

能切换焦点的元素具有focus属性

change指的是value的改变

jquery 好看alert_父级元素_23

jquery 好看alert_jquery 好看alert_24

四、熟练使用

4.1 特效和动画

hide():括号里可以加fast,slow,具体时间(毫秒)

jquery 好看alert_jquery_25

hide后面接函数会直接执行,这样就需要回调函数(是重点,尤其是在AJax中)

回调函数:在某个动作执行完才执行的函数

jquery 好看alert_jquery 好看alert_26

淡出,淡入和切换

jquery 好看alert_CSS_27

向上滑动(收起);向下滑动(展开);切换

jquery 好看alert_CSS_28

动画:唯一不能改的就是颜色

jquery 好看alert_a标签_29

jquery 好看alert_a标签_30

练习:fixed针对当前窗口,没有滚动条;absolute针对网页body,有滚动条

4.2 DOM中的操作(内容,属性,CSS)

1.获取内容

无参数代表获取,有参数代表修改

jquery 好看alert_jquery 好看alert_31

同上

jquery 好看alert_a标签_32

2.属性

jquery 好看alert_CSS_33

3.内容(value)

1) 获取值

失去焦点,获取元素内容

jquery 好看alert_a标签_34

2) 设置值

jquery 好看alert_CSS_35

4.修改CSS

修改一个属性的样式

jquery 好看alert_父级元素_36

用{}同样的效果

jquery 好看alert_jquery_37

不加双引号要用驼峰命名法

jquery 好看alert_jquery 好看alert_38

可以选择多个

jquery 好看alert_CSS_39

添加样式


jquery 好看alert_父级元素_40

代码中添加了这个样式

jquery 好看alert_jquery_41

删除样式

jquery 好看alert_CSS_42

用CSS修改法相当于修改样式改法,优先级比class要高

4.3 遍历文档结构

4.3.1

新创建一个元素对象

jquery 好看alert_父级元素_43

添加到body子元素最后面

jquery 好看alert_jquery_44

前面

jquery 好看alert_jquery_45

在选取元素前面和后面添加:before和after

jquery 好看alert_a标签_46

4.3.2删除元素

完全移除

jquery 好看alert_CSS_47

清空

jquery 好看alert_jquery_48

4.3.3层级关系

子元素,后代元素,同级相邻元素,父级元素

1.获取子元素:

获取第一层级的所有子元素,不包括后代元素

jquery 好看alert_jquery 好看alert_49

对子元素进行过滤

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dFwrcAGg-1597225467265)(C:/Users/CEO/AppData/Roaming/Typora/typora-user-images/image-20200808224743552.png)]

jquery 好看alert_jquery 好看alert_50

2.获取后代元素(第二层级)

获取所有子元素下的a标签

jquery 好看alert_jquery 好看alert_51

3.同级相邻元素

结果为一个

jquery 好看alert_父级元素_52

jquery 好看alert_a标签_53

更多方法


jquery 好看alert_jquery 好看alert_54

jquery 好看alert_父级元素_55

移除兄弟元素的上一个

jquery 好看alert_a标签_56

移除上面的所有

jquery 好看alert_jquery 好看alert_57

移除(某一个)标签前所有元素

jquery 好看alert_jquery_58

前面查找直到找到第一个p标签,把它移除

jquery 好看alert_jquery_59

4.父级元素

div有body和html两个父级,用parents,结果为2

直接用parent就是找到第一个父级元素

jquery 好看alert_jquery_60

最常用parent和parents,里面选中想指定的父级元素,因为可能有像div一样的很多个父级


jquery 好看alert_a标签_61

5.过滤

操作这个


jquery 好看alert_a标签_62

一组li标签的第一个

jquery 好看alert_jquery 好看alert_63

移除最后一个

jquery 好看alert_jquery_64

移除下标为1的元素(排第二位)

jquery 好看alert_父级元素_65

移除一堆元素中不等于谁的剩余所有元素

jquery 好看alert_CSS_66

点击绑定遍历获取所有的元素i,有4个就是0123

jquery 好看alert_jquery_67

类似于写了一个循环

jquery 好看alert_jquery 好看alert_68