初学心得

刚刚开始学习JS,写了一个弹出遮罩效果,发现其中还是有挺多细节问题要处理的,在实现效果的过程中遇到很多问题,哦哦,此刻想到,我应该把这个效果写成插件,以后方便使用额。。。bingo.再次一一列举,为以后提醒自己不要再犯此错误。。。

一、事件冒泡

dom结构没写好,img标签直接把所有内容都包括了,所以点击里面的BUTTON关闭弹出层的时候,发生了事件冒泡。。。结果一直关闭不了。

二、各种高度及兼容性

网页可见区域宽: document.body.clientWidth;

网页可见区域高: document.body.clientHeight;

网页可见区域宽: document.body.offsetWidth (包括边线和滚动条的宽);

网页可见区域高: document.body.offsetHeight (包括边线的宽);

网页正文全文宽: document.body.scrollWidth;

网页正文全文高: document.body.scrollHeight;

网页被卷去的高(ff不兼容):document.body.scrollTop;

网页被卷去的高(所有都兼容): document.documentElement.scrollTop;

网页被卷去的左:document.body.scrollLeft;

网页正文部分上:window.screenTop;

网页正文部分左:window.screenLeft;

某个元素的宽度:obj.offsetWidth;

某个元素的高度:obj.offsetHeight;

某个元素的上边界到body最顶部的距离:obj.offsetTop;(在元素的包含元素不含滚动条的情况下)

某个元素的左边界到body最左边的距离:obj.offsetLeft;(在元素的包含元素不含滚动条的情况下)

返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offsetTop(在元素的包含元素含滚动条的情况下)

返回当前元素的左边界到它的包含元素的左边界的偏移量:obj.offsetLeft(在元素的包含元素含滚动条的情况下)

scrollTop, scrollLeft设置或返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候,例如,元素的 CSS overflow 属性设置为 auto 的时候,这些像素才有用。这些属性也只在文档的 <body> 或 <html> 标记上定义(这和浏览器有关),并且一起来制定滚动文档的位置。注意,这些属性并不会指定一个 <iframe> 标记的滚动量。这是非标准的但却得到很好支持的属性。

三、遮罩层以及弹出内容定位要使用JS进行控制,注意要隐藏滚动,以及top的值要包含页面卷去的高度。

时间: 2024-10-10 05:51:41

初学心得的相关文章

Unity3D初学心得

作为一款强大的游戏引擎,Unity3D有其独特的特点:简单,通俗易懂. 初学Unity3D,我是边看视频边学着做的,虽然仍然有些困难,但最终还是做出了一个小小的游戏<Roll a ball> 心得: 对于五视图要熟练掌握,知道每一个视图的作用以及操作方法.熟悉世界坐标和局部坐标的转换,2D视角和3D视角的转换,知晓一些快捷键的用法,比如q,w,e,r,t,f等键. 尤其重要的一点就是对于每个场景,代码,背景等要分类打包,不然找起来会很麻烦的.Unity3D代码编写需要用到C#,所以这门语言还是

Python初学心得体会

初学程序编程对于一个没学过程序的小白来说是一个很大的挑战! 首先分别搭建在Linux和Windows下的python环境,这里有一个小的麻烦,就是在Windows的浏览器使用jupyter时,需要在Linux中python家目录中将防火墙服务打开,否则无法打开网页(service iptables stop ,因为是临时关闭,所以每回使用都需要去关闭防火墙.作为一个新手多麻烦点还是比较好的,尤其是非计算机方面的!) python的基础语法,像for , while , if 语句,转义序列,标识

PHP基础班初学心得:用JQ实现表单的全选、反选、取消和删除功能

摘要: 本人刚参加PHP基础班培训,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. 在这里分享一下我们基础班学员遇到的一些疑点和我的分析.PS:分析不一定正确,希望同行指教 前一段时间笔者重感冒了,身体不舒服,还请了一天假没去上实操课,播客也没有来得及和大家分享.今天感冒已经好得差不多啦,就剩下一点留鼻涕喉咙痒而已,刚好今天是休息天不用上课,这里打铁趁热,赶紧给大家分享一下昨天学到的用JQ实

PHP基础班初学心得:脑洞实验-JS变量存储函数与return的一些问题

本人刚参加PHP基础班培训第一天,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. 在这里分享一下我们基础班学员遇到的一些疑点和我的分析.PS:分析不一定正确,希望同行指教 一:将定义函数赋值给一变量 像var str=function say(){} 我的分析:相当于函数覆盖了变量,变量可以像函数调用,不过调用里面好像弄不了参数,原来的函数再调用也不会有效果 二:脑洞实验:将定义函数赋值给一

PHP基础班初学心得:关于网页创作

前提:本人刚参加PHP基础班培训第一天,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. 这里使用刚学到的比较基础的知识. 如这个网站首页 我们一般把它拆分来做,这一大块红边框的为总体"div-kaixue",再细分黄边框"div-title"和"div-content" 然后开始做title,这个比较简单,前后套<span&g

PHP基础班初学心得:JS里inner的一些理解

本人刚参加PHP基础班培训,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. 在这里分享一下我们基础班学员遇到的一些疑点和我的分析.PS:分析不一定正确,希望同行指教 一:inner 如: <div id="test"> <span style="color:red">test1</span> test2 </d

初学Java:整理的几个简单小程序以及初学心得

整理这几天里写的几个小程序,都是循环练习//设N是一个四位数,它的9倍恰好是其反序数//(例如:1234的反序数是4321),求N值package Azhi;public class Job_5 {public static void main(String[] args) { for(int n=1000;n<=9999;n++){ int ge=n%10; int shi=n%100/10; int bai=n%1000/100; int qian=n/1000; int temp=ge*1

FPGA初学心得

有三种方法在模块中产生逻辑:1.使用连续赋值语句“assign”:2.用实例元件 3.用“always”块.所以在always块中赋值不能使用assign,而是直接给变量赋值就行. reg与wire的区别与用法:只要是在“always”块中被赋值的变量就要定义成reg型.要引用实例时的变量就要定义成wire型.

机器学习初学心得——梯度下降法

回归与梯度下降: 回归在数学上来说是给定一个点集,能够用一条曲线去拟合之,如果这个曲线是一条直线,那就被称为线性回归,如果曲线是一条二次曲线,就被称为二次回归,回归还有很多的变种,如locally weighted回归,logistic回归,等等,这个将在后面去讲. 用一个很简单的例子来说明回归,这个例子来自很多的地方,也在很多的open source的软件中看到,比如说weka.大概就是,做一个房屋价值的评估系统,一个房屋的价值来自很多地方,比如说面积.房间的数量(几室几厅).地段.朝向等等,