开学学习（2.19-2.23）

最新推荐文章于 2024-10-02 21:20:07 发布

zcann

最新推荐文章于 2024-10-02 21:20:07 发布

阅读量95

点赞数

文章标签：学习 html css

本文链接：https://blog.csdn.net/zcann/article/details/129191041

版权

2.19

排他思想

更换背景：

如：

鼠标经过：onmouseover

鼠标离开：onmouseout

表单全选按钮：

分别命名头与身

点击头：this.checked

自定义属性的操作

获取属性值

1.element.属性

2.element.getAttribute('属性')

设置属性值

1.element.属性=‘值'

2.element.setAttribute('属性','值');

数值不用引号

class特殊，平常是element.className='';

在2里面属性是class而不是className

移除可以用removeAttribute('')

如图

Tab栏切换

思路

大盒子分上下两盒子

上盒子有ul包含n个小li

下盒子也是n个盒子

下面记得display:none

可以在第一个添加行内样式style="dispaly:block"以显示

在for内给每个小li设置自定义属性，方便下半区域辨别

lis[i].setAttribute('index',i);

2.20

H5自定义属性

【两种获取方法】

节点操作

可以加下标来找第几个元素，children[n]

下拉菜单案例

发布留言案例

阻止链接跳转：

href="javascript:;"

数组中可以添加多个对象

【{}，{}，{}】

三种动态创建元素的区别

innerHTML效率比creatElement高（用数组）

2.21

DOM重点核心（p246）

创建

1.document.write

2.innerHTML

3.createElement

增

1.appendChild

2.insertBefore

删

1.removeChild

改

查

属性操作

事件操作

高级事件

注册事件（绑定事件）

记得里面的事件类型是字符串，必定加引号而且不带on

【上面的attachEvent了解即可】

删除事件（解绑事件）

DOM事件流

事件对象

常见的属性和方法

e.target返回的是触发事件的对象/元素

this返回的是绑定事件的对象/元素

阻止默认事件，可以return false。但是后面代码不执行

事件委托

常用的鼠标事件

contextmenu显示右键菜单，可以阻止

selectstart可以选中文字，可以禁止

鼠标事件对象

图片跟着鼠标移动

     <style>
         img{
             position: absolute;
             top:2px;
             left:2px;
         }
     </style>
 </head>
 <body>
     <img src="./Snipaste_2023-02-21_16-30-39.png" alt="">
     <script>
         var pic=document.querySelector('img');
         document.addEventListener('mousemove',function(e){
             var x=e.pageX;
             var y=e.pageY;
             console.log(x,y);
             pic.style.left=x+'px';
             pic.style.top=y+'px';
         });
     </script>