一、
1.1
1.2
1.3
不能在导入这里写代码
1.3.1
判断是否加载成功
二、选择器
但是两者获取的类型不同,属性和方法就不同,不能混着用
通过id获取
通过class获取
看同一个标签下有几个元素
这种用的比较多,标签.class名
属性选择器
加条件
p标签里有个a标签
id和class用的最多
三、事件绑定(非常重要,使用的是现代事件绑定方式)
3.1 绑定一个事件
绑定一个事件,从上到下执行
这种方法三个参数.bind(type,date,fn),一般不传参数,从fn函数内获取
3.2 事件解除绑定
一个标签绑定了很多事件,所以要解除绑定
只解除一个参数,click全部解除
有很多function的时候,识别不出来,要给function取名
注意test不要加(),代表这个函数,加了(),会直接把这个函数执行结果放进去
3.3 绑定多个事件
对所有的p标签都进行绑定
能切换焦点的元素具有focus属性
change指的是value的改变
四、熟练使用
4.1 特效和动画
hide():括号里可以加fast,slow,具体时间(毫秒)
hide后面接函数会直接执行,这样就需要回调函数(是重点,尤其是在AJax中)
回调函数:在某个动作执行完才执行的函数
淡出,淡入和切换
向上滑动(收起);向下滑动(展开);切换
动画:唯一不能改的就是颜色
练习:fixed针对当前窗口,没有滚动条;absolute针对网页body,有滚动条
4.2 DOM中的操作(内容,属性,CSS)
1.获取内容
无参数代表获取,有参数代表修改
同上
2.属性
3.内容(value)
1) 获取值
失去焦点,获取元素内容
2) 设置值
4.修改CSS
修改一个属性的样式
用{}同样的效果
不加双引号要用驼峰命名法
可以选择多个
添加样式
代码中添加了这个样式
删除样式
用CSS修改法相当于修改样式改法,优先级比class要高
4.3 遍历文档结构
4.3.1
新创建一个元素对象
添加到body子元素最后面
前面
在选取元素前面和后面添加:before和after
4.3.2删除元素
完全移除
清空
4.3.3层级关系
子元素,后代元素,同级相邻元素,父级元素
1.获取子元素:
获取第一层级的所有子元素,不包括后代元素
对子元素进行过滤
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dFwrcAGg-1597225467265)(C:/Users/CEO/AppData/Roaming/Typora/typora-user-images/image-20200808224743552.png)]
2.获取后代元素(第二层级)
获取所有子元素下的a标签
3.同级相邻元素
结果为一个
更多方法
移除兄弟元素的上一个
移除上面的所有
移除(某一个)标签前所有元素
前面查找直到找到第一个p标签,把它移除
4.父级元素
div有body和html两个父级,用parents,结果为2
直接用parent就是找到第一个父级元素
最常用parent和parents,里面选中想指定的父级元素,因为可能有像div一样的很多个父级
5.过滤
操作这个
一组li标签的第一个
移除最后一个
移除下标为1的元素(排第二位)
移除一堆元素中不等于谁的剩余所有元素
点击绑定遍历获取所有的元素i,有4个就是0123
类似于写了一个循环
- 二阶段评奖: