一、
1.1
1.2
1.3
不能在导入这里写代码
1.3.1
判断是否加载成功
二、选择器
但是两者获取的类型不同,属性和方法就不同,不能混着用
通过id获取
通过class获取
看同一个标签下有几个元素
这种用的比较多,标签.class名
![image-20200806001224653](https://i-blog.csdnimg.cn/blog_migrate/9508e9d6cceb60801bcca0cceca11d67.png)
属性选择器
加条件
![image-20200806001508909](https://i-blog.csdnimg.cn/blog_migrate/521f1d603b63f3ce8e9c6bd35081ac8d.png)
![image-20200806001519544](https://i-blog.csdnimg.cn/blog_migrate/ac39c40078e12a981aa3d63986736065.png)
p标签里有个a标签
![image-20200806001704550](https://i-blog.csdnimg.cn/blog_migrate/e0a51b608c8c63fac04612692d278987.png)
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
修改一个属性的样式
用{}同样的效果
不加双引号要用驼峰命名法
可以选择多个
添加样式
![image-20200808213713075](https://i-blog.csdnimg.cn/blog_migrate/aef9bc86cac9188f557a5fb3d15e3b51.png)
代码中添加了这个样式
删除样式
用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.同级相邻元素
结果为一个
更多方法
![image-20200809154315526](https://i-blog.csdnimg.cn/blog_migrate/849a73031025ba9040496b9d10bbb230.png)
![image-20200808230201828](https://i-blog.csdnimg.cn/blog_migrate/11dd19209d7cbaac2abf4accff97ea1d.png)
移除兄弟元素的上一个
移除上面的所有
移除(某一个)标签前所有元素
前面查找直到找到第一个p标签,把它移除
4.父级元素
div有body和html两个父级,用parents,结果为2
直接用parent就是找到第一个父级元素
最常用parent和parents,里面选中想指定的父级元素,因为可能有像div一样的很多个父级
![image-20200808225833090](https://i-blog.csdnimg.cn/blog_migrate/81d853faaec4641d6aed95ccdcba2bfa.png)
5.过滤
操作这个
![image-20200809162534842](https://i-blog.csdnimg.cn/blog_migrate/d1e373f47a83103bfdc07a1d2d396b4e.png)
一组li标签的第一个
移除最后一个
移除下标为1的元素(排第二位)
移除一堆元素中不等于谁的剩余所有元素
点击绑定遍历获取所有的元素i,有4个就是0123
类似于写了一个循环
- 二阶段评奖: