css+html+js总结 （0）制作一个网页之前一定要先计算好各个width还有color，这样写出来的代码的维护性和效率才高。 （1）做ZB_Login.html文件时的css总结—–2016/5/25 第一、现在我终于明白transparent（无色）和白色的区别了，虽然他们两个的呈现效果都是白色。使用 transparent制作的图片，transparent部分不会覆盖前面的颜色，也就是说显示的是前面的颜色，白色的部分 则和其他的颜色一样，会覆盖前面的部分，呈现为白色，而不是前面的颜色，例如”ZL_headRight.png“这个 图片在制作的时候，那白色部分一定是用transparent处理的，因为该图片没有覆盖背景颜色，显示的是背景颜 色，“ZL_loginBox.png”图片也是一样，没有显示白色部分，显示的是背景颜色 第二、margin-left是从对象的右边出发的，我怎么老用这个属性来解决距离右边的距离啊 第三、margin-top：-10px;这样会使的应用该属性的对象向上移动10px，这样势必就会产生重叠，一般来 说是后面的覆盖前面的，但是可以采用z-index来设定重叠级别，这样可以改变默认的后面覆盖前面的，z- index必须和position：absolute|relative一起使用才有效。 （2）做JavaScript实战的播放器页面的css总结—-2016/5/26 第一、浮动素在块状素前面，那么块状素还是会独占一行，不理会块状素，然而浮动素会覆盖 块状素一部分，但是不会覆盖块状素的内容，内容从浮动素的右边开始显示。 第二、浮动素在内联素前面，那么内联素从浮动素右边开始显示。 第三、块状素在前面，浮动素在后面，那么浮动素在下面一行显示，因为块状素要独占一行。 第四、内联素在前面，浮动素在后面，那么浮动素飘到内联素前面，内联素在浮动素右边显 示。 第五、使用css样式的background属性来显示图片没有alt和title，使用HTML标签来显示图片有alt和 title （3）做JavaScript实战的播放器页面js总结—-2016/5/27-2016/5/29 卡了我很久的是定时器的滥用和mousemove事件 第一、在使用setInterval的时候要特别注意，不要乱设置setInterval，因为只要你没有手动清除你先前 设定的setInterval，那么这个定时器就会一直运行下去，会带来很多隐患，所以在设定一个新的定时器之前要 最好考虑好先前设定的那个定时器是不是还需要，最好在设定新的定时器之前将旧的定时器清除。 第二、实现素拖到功能时，使用的mousedown，mousemove，mouseup事件，mousemove事件是在素内移 动才会有效，所以要想在某素mousedown之后，鼠标脱离该目标素也能拖动，那么就需要 $(document).mousemove,而不是$(target).mousemove，当然你可以通过event.pageX来限定target素的拖动 范围，mousemove事件是鼠标在目标素上移动1px就会触发的。 第三、预先写好的函数，在bind和setInterval时，只写函数名就行，不要加上函数执行符号()，这个也 要特别注意,“()”是函数执行符号,函数名后面加上“()”，函数才会得到执行。 （4）如下代码： $(document).ready(function(){ $(“ul li”).click(function(){ //只是给页面加载完成后，页面中的li绑定click事件，并指定事件处理函数，不管后面通过何种方 式在ul后面加入了li素，都需要对新加入的li素重新绑定，因为这些新加入的li素是在ready后面加入的 ，浏览器解析引擎早就在document.ready的时候就给页面的li绑定好了，这个要特别注意 }); }); （5）json和js对象的区别 json格式的数据每个名称必须加上双引号，字符串值也要加上，然而js对象的属性名称就不需要，因为该 名称是对象的一个属性。 如json数据：[{“name”:”wmy”,”value”:”wmy”},{“name”:”mbj”,”value”:”mbj”}] 如js数组：[{name:”wmy”,value:”wmy”},{name:”mbj”,value:”mbj”}] （6）服务器在返回json和客户端接收json时要注意的问题 在客户端使用ajax向服务器端请求数据时候，如果服务器response.write(‘{“name”:”mbj”,”age”:18}’); 那么在使用ajax请求的时候，如果指定dataType:”json”,那么获得的数据是一个js对象，jquery自动帮我们转 换了，如果没有显示指定dataType:”json”,那么返回的数据还是json对象，需要我们手动解析，使用 jquery.parseJSON(“”+data);因为parseJSON的参数是json字符串，而服务器返回的是 {“name”:”mbj”,”age”:18}。如果在ajax中没有设置data字段，数据是在url后面，那么body-parser就无能为力 了，需要node.js的url模块，url.parse(req.url,true).query就获得了数据的js对象了，如果要给客户端返回 json格式的数据，则使用res.json({name:”mbj”,age:19});就行了，json函数会自动把里面的js对象转化为 json数据格式,serialize()方法也是作用于一个JQuery对象，它能够将DOM素内容序列化为字符串， serializeArray()方法不是返回字符串，而是将DOM素序列化后，返回JSON格式的数据。如果是使用ajax请求 的数据，那么不可以使用res.redirect(“/”);重定向到其他的页面，因为当前页面的ajax还在等着服务器返回 数据， （7）图片本身是有大小的，但是如果不再图片的css中设置width和height的属性，那么当在该图片的 width和height的时候就不到了，如$(“img”).width(); （8）mongoose的使用，var UserModel=mongoose.model(“mmbbjj”,UserSchema);//这句话表示用UserSchema创 建一个UserModel，创建的数据库集合的名字叫做mmbbjjs，注意哈，mongoose会自动给你的collections加一个 后缀s，当然如果是mmbbjjs，mongoose就不会在加了 （9）标签会和前面的字体对齐的，如果前面的字体的font-size比较大的话，font-size的大小接近后面的 height，那么后面的那个素会和字体对齐的，这样会导致后面的素布局有问题 （10）valign属性只适用于table标签的td标签，disabled=“disabled”可以使得素无效，但是数据得不到 提交，可以弄一个hidden来代替发送数据 （11）输入框如果没有输入字符串的时候，$(“textarea”).val()==””,为true，而不是等于undefined，或者 null，在JavaScript中null==undefined，但是””(空字符串)不和undefined和null相等 （12）清除浮动带来的高度塌陷的方式， 第一在浮动素后面添加一个div或者br素，如<div style=”clear:both;height:0;”> 第二假设父素的id=”main”，则main:after {content:”.”,visibility:hidden;height:0;clear:both;display:hidden;} 第三，给父素也加上float：left，属性 第四，给父素加上overflow:hidden 第五，给父素加display:table属性 （13）这个教训可是困了我好几个小时的，就是在a素的click事件中有ajax请求，然后在ajax中的success对 应的回调函数中，我用$(this)想来当前被的a素，结果一直不对，后来才灵光一现，想起来在 回调函数的this已经不是表示当前被的素了，而是这个this表示window了，以后千万要记住了哈，保存 好this （14）*zoom IE8抛弃了haslayout 启动hasLayout的值：有值 取消hasLayout的值：narmal或者空值 （zoom是微软IE专有属性，可以触发hasLayout但不会影响页面的显示效果。zoom: 1常用来除错，不过 ie 5 对这个属性不支持。） IE hasLayout bugs经常出现各种很奇怪的问题，如果ie有些很难解释的问题，第一件 事情要做的就是给该素一个layout，hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关 。在ie中，一个素要么自己对自身的内容进行计算大小和组织，要么依赖于父素来计算尺寸和组织内容。 当一个素的hasLayout属性值为true时，它负责对自己和可能的子孙素进行尺寸计算和定位。虽然这意味着 这个素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先素来完成这些工作。 （15）对js传入函数作为参数的理解 如果一个函数以一个函数为参数，那么这个函数参数的实参在定义函数的时候就决定了，只不过怎么使用这些 决定了的实参就是函数参数的事情了，就像node.js中大量的回调函数那样，你必须要明白回调函数传入的参数 的意义，你才知道怎么样使用这些传入的参数， （16）text-align和vertical-align text-align用于块级素内文本的对齐方式，是文本的对齐方式，对素没有用，vertical-align用于内联 素在行内的垂直对齐方式，vertical-align：middle，表示位于父素中间，默认是放在父素的底端，对于 文本来说middle无效，因为文本本来就在一行，vertical-align：top；表示素的顶端和行中最高素对齐， text-top表示素顶端和行内文本的顶端对齐，vertical-align：-7px；则素在本来的位置上下移7px，如果 是vertical-align：7px；则表示上移7px （17）line-height 图片可以撑开行框，但是不能改变行高，默认文字和图片的对齐方式就是基线对齐，要想文字在图片的中间， 可以对图片使用vertical-align：middle，如果这样也达不到要求的话，只能把img的css设置成position： relative，然后再通过top和left来调位置了，基线就是书写英文字母那三行的最下面一行,line-height:1.7; 表示的是缩放因子，是font-size的1.7倍，line-height可继承，应用方面就是设置line-height等于素的 height，那么素里面的文字会垂直居中显示 （18）让后面的素和前面的素对齐，而不是和前面的素的字体对齐 .btn:before{ /*必须要加这个，因为后面的素是和字体对齐的，加这个，然后在vertical-align：top，和前面的 素对齐，可以让后面的素和前面的素对齐，而不是和前面素的字体对齐*/ content: “”; display: inline-block; vertical-align: top; } （19）form的action属性 action属性表名form提交的数据交给谁处理，如果action=”/upload”，则表名是交服务器端的upload处理， action=”javascript:functionName;” 加了JavaScript则表示数据交给functionName这个函数处理,不可以少了 javascript，有了JavaScript才能作为js函数处理，而不是服务器端处理 ————————————-做博客网站的经验——————————- （20）contenteditable—-在线编辑器—–困3小时 contenteditable使得只读素也变得可以编辑，但是要注意一个问题，当你删除完一个素的所有输入后，你 以为这个素的内容是空了，可是并不是，它是一个<br>,自动给你在这个素中添加上去的,这个要特别注意 困了我3个小时,true.false，如果父素的contenteditable=”true”，那么子素的contenteditable=”true” 也等于true，这个就意味着子素中的内容也可以编辑，就像你把body的contenteditable=”true”，那这个网 页都可编辑。 （21）去除可编辑素获得焦点默认的样式，outline:0 none;border:0 none;cursor:text;还有一个神奇的属 性，pointer-events：none；可以去除素的click事件，比如给a素加上此属性，那么在a的时候就没有 反应 （22）获得当前选中区域 ie支持的获得当前选中区域文字的语法是document.selection.createRange().text,safari和firefox获得当前 选中文字：window.getSelection（） （23）IE下的trigger的使用——困5个小时 $(“.imgPreview”).click(function(){ $(“input[type=file]”).trigger(“click”).change(function(){ PreviewImg(); }); }); 这样当选择好文件后，根本就不会发生change事件，我猜测可能的原因是选择文件的时间太长，IE直接忽略了 change函数的定义，但是其他的浏览器不会出现这样的问题，是上面的代码也能work，但是最好换成另一种写 法，$(“.imgPreview”).click(function(){ $(“input[type=file]”).change(function(){ PreviewImg(); }).trigger(“click”); }); 这样的写法IE下是正常的，先定义后trigger （24）IE下的unselectable=”on”，在做在线编辑器的时候——-困了1天，2016-8-5 事情是这样的，我要做的一个功能是显示一张图片到焦点所在的地方，这个需要用到range（被选中的文本区域 ），于是使用<input type=”file” style=”display:none”>,然后其他的div素trigger该input，然后在 给该input一个change事件，在change事件中让让图片在焦点处显示，一直以来，除IE外，其他的浏览器都可以 正常的获得range对象，但是IE一直获得错误的range对象，后面就是加了这个unselectable=”on”才正常的获得 了range对象，unselectable=”on”指示这个素是不可选中的，也就是不能触发已经获得焦点的素的onblur 事件，难怪我会出现一直不能获得正确的range的情况，因为我一该div素，获得焦点的素就失去焦点 ，所以，给div素加上这个属性，会导致原来获得焦点的素还是获得焦点的，这样的话讲究可以获得正确的 range了，chrome和firefox对应的是-moz-user-select:none;-webkit-user-select:none;此外，还明白了 range是根据焦点来确定选中内容的位置的,<input type=”file” style=”display:none”>,在一个form表单中是 可以同时存在很多个的 （25）做博客网站时，实现为文章选择标签的时候所走的弯路， 我以为那个可以输入的框是一个div，而且是一个contenteditable=”true”的div，结果在实现的时候，给 定的标签，构造类似新浪博客那样的效果，但是两个标签块之间还是可以获得焦点，这个问题一直解决不了， 而且firefox不能直接通过后退键删除contenteditable=”false”的素，但是IE和chrome可以，后来去看了一 下新浪博客的实现，发现是我想错了，那个输入框不是一个contenteditable=”true”的div，而是一个普通的 div+一个input[type=text]的输入框，在这个div中嵌入一个固定输入字符的input，在需要加块的时候，在这 个input前面插入块即可 （26）做博客网站时，处理文章代码部分最烦———博客网站 1.首先要标注那一块区域是代码，而不是普通的文字，我采用的是给选择的区域（假定选中区域的内容为value ）加<pre><cc>value</cc></pre> 2.在加之前，还要对value进行处理，要不然替换的时候会导致value的html部分也会被解析成html的形式，而 不是代码的形式，处理的方式是替换掉value中的”<“为<”>”为>这样才不会解析为html标签， 3.对已经被cc包围的value部分，再次cc时，应该要无效，我的做法是的时候，给该value的部分加上 cc，但是我会在后面判断每一个cc标签是不是存在祖先素为cc的，如果有，那么删除该cc标签，保留祖先cc 标签，这样就做到了cc不会在嵌套cc， 4.经过以上三步，就成功的标注代码区域了，接下来是把value传给服务器，在传之前，需要把value中的< 变为”<“,>变为”>”, 5.接受到value后，需要对value中的回车换行符进行处理，要不然返回给前端的时候，由于回车换行符的影响 会导致”unterminated string literal”，没有终结的字符串这个错误，我解决的方法是将回车换行符替换掉， 但是要注意后面是需要回车换行符的效果的，因此，用”<br>”来替换最好，下面是替换的代码: realContent = realContent.replace(/(\n\r)/g, “<br> ”); realContent = realContent.replace(/(\r\n)/g, “<br> ”); realContent = realContent.replace(/(\r)/g, “”); realContent = realContent.replace(/(\n)/g, “<br> ”); realContent = realContent.replace(/(\t)/g, “ ”); 其中realContent是需要处理的回车换行符的字符串 6.现在，前端可以正常接收value数据了，接收之后，会发现value中的<,>,空格等html中有特殊意义的字符都 变成了其他的形式，如”<“变为<”>”变为> 变成”&nbsp;”，这样，又需要把这些变回来，要不 然不能以html的形式解析，变回来可不能直接将所有的<变为”<“,>变为”>”,代码部分的不能变，要不然 代码部分也会被当做html解析，因此，得先把<cc>代码</cc>包围的这部分复制出来，然后在全部替换，最后把 替换好的cc部分用原先复制的替换，下面是代码： var str=(“<%= realContent %>”); //需要处理的字符串 var codeStr; //在匹配之前，得先把本来就是代码的部分提取出来，否则经过下面的正则表达式之后会被当作html标签显示 codeStr=str.match(/<cc>(.)*[^<cc>](.)*<\/cc>/g); str=str.replace(/(<)/g,”<“); str=str.replace(/(>)/g,”>”); str=str.replace(/(")/g,”\””); str=str.replace(/(')/g,”\'”); str=str.replace(/( )/g,” “); if(codeStr!=null){ for(var i=0;i<codeStr.length;i++){ str=str.replace(/<cc>(.)+[^<cc></cc>](.)+<\/cc>/,codeStr[i].substring(codeStr[i].indexOf (“>”)+4,codeStr[i].lastIndexOf(“<”)).replace(/ (<br>&nbsp;&nbsp;)/g,”<br>”).replace(/(&nbsp;)/g,” “)); } } $(“.p1”).html(str); 7.结果上面6步，代码部分就算完成了
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/47823.html
