Zarah - 博客园

Web前端优化

摘要：一、HTML优化1、避免使用iframe，iframe又叫做内联frame。可以将一个HTML文档嵌套到另一个HTML文档里面。iframe的好处是：嵌入的文档独立于父文档，通常也借此使浏览器模拟多线程。缺点是：（1）虽然iframe能够模拟多线程，但是主流浏览器的同域名并行下载数是不变的。（2）在页面加载时，iframe会阻碍父文档的onload事件的触发。（3）iframe开销昂贵2、避免空连接属性空连接指：img、link、script和iframe元素的src或href属性的值为空。（如src=””）设置了空连接后浏览器依然会以默认规则发送请求： ①IE6~8中只有img元素会出问题. 阅读全文

posted @ 2013-06-13 16:07 Zarah 阅读(137) 评论(0) 推荐(0)

jQuery学习教程——入门

摘要：想要结构与行为分离就不能使用类似<button onclick="…"></button>的东西了，所以就产生了jQuery颇具创意的$(document).ready(function(){})还可以更加精简：$(function (){});jQuery对象的方法和DOM对象的方法是不能混合使用的。例如$("id").innerHTML()和document.getElementById("id").html()都是错误的。jQuery对象和DOM对象的转换，jQuery选择器返回的对象实则是以对象数组的方阅读全文

posted @ 2013-03-30 11:21 Zarah 阅读(121) 评论(0) 推荐(0)

document

摘要： document子对象概述Document子对象包括body主体对象、location位置对象、selection选区对象、Link链接对象、Anchor锚点对象、Image图像对象和form表单对象。body主体子对象的参数如下：document.body.innerText：设置HTML文档主题中的文本document.body.innerHTML：设置HTML文档主体中的HTML代码document.body.topMargin:设置HTML文档主体中页面的上边距document.body.leftMargin:设置HTML文档主体中的左边距document.body.rightMarg 阅读全文

posted @ 2013-03-19 20:48 Zarah 阅读(285) 评论(0) 推荐(0)

previousSibling

摘要： previousSibling 属性可返回某节点之前紧跟的节点（处于同一树层级）如果没有此节点，那么该属性返回 null。语法：nodeObject.previousSibling例子：<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script type="text/javascript"> function test(str){ alert(str); } </script>& 阅读全文

posted @ 2013-03-15 17:52 Zarah 阅读(229) 评论(0) 推荐(0)

利用Javascript制作Tab面板

摘要： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb23 阅读全文

posted @ 2013-03-14 21:27 Zarah 阅读(176) 评论(0) 推荐(0)

动态变色的表格

摘要： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb23 阅读全文

posted @ 2013-03-14 09:14 Zarah 阅读(207) 评论(0) 推荐(0)

制作固定宽度的表格

摘要：如果不定义表格中每个单元格的宽度，当向单元格中插入网页元素时，表格往往会变形。这样无法利用表格精确定位网页中的元素，网页中会有很多不必要的空隙，使网页显得不紧凑也不美观，因此要利用固定宽度的表格和单元格精确地包含住其中的内容。制作固定宽度的表格通常有一下两种方法。（1）定义所有列的宽度，但不定义整个表格的宽度。例如：<tableborder="0"cellpadding="0"cellspacing="0"><tr><tdwidth="200"></td><td 阅读全文

posted @ 2013-03-04 23:46 Zarah 阅读(221) 评论(0) 推荐(0)

跑马灯标记<marquee></marquee>

摘要： <marquee>是一个有趣的标记，它能使其中的文本（也可以是图像）在浏览器屏幕上不断滚动。其中behavior="alternate"设置滚动方式为来回滚动，设置为scroll表示循环滚动，设置为"slide"表示滚动到目的地就停止。Direction属性用于控制滚动的方向，可以上下滚动或左右滚动。Loop设置滚动的次数，loop为0表示不断滚动。Scrollamount属性设置滚动的速度。Scrolldelay属性设置滚动的延时。例如下面的代码能使标记中的内容从下到上循环滚动，并且当鼠标停留（ommouseover事件）在文本上时，文本会阅读全文

posted @ 2013-03-04 23:44 Zarah 阅读(294) 评论(0) 推荐(0)

制作跟随鼠标移动的图片放大效果

摘要：本例中，当鼠标滑动到某张图片上时，鼠标的旁边就会显示这张图片的放大图片，而且放大的图片会跟随鼠标移动。在整个例子中原图和放大的图片都采用的是同一张图片，只不过对原图设置了width和height属性，使它缩小显示，而放大图片就显示图片的真实大小。制作步骤如下：（1）把几张要放大的图片放到一个div容器中，然后再添加一个div的空容器用来放置当鼠标经过时显示的放大图像。结构代码如下：<div id="demo"> <img src="images/pr_l_1.jpg" /><img src="images/pr_l 阅读全文

posted @ 2013-03-03 21:01 Zarah 阅读(1178) 评论(1) 推荐(0)

事件对象——IE和DOM中的事件对象

摘要：事件在浏览器中是以对象的形式存在的，在IE中，事件（event）又是window对象的一个属性event，因此访问时通常采用如下方法：oP.onclick=function(){var oEvent=window.event;}尽管它是window的属性，但event对象还是只能在事件发生时被访问，所有的事件处理函数执行完成之后，改对象就自动消失了。而标准DOM中规定event对象必须作为唯一的参数传递给事件处理函数，因此在类似FireFox浏览器中访问事件对象通常将其作为参数，代码如下：oP.onclick=function(oEvent){}因此为了兼容这两种浏览器，通常采用下面的方法。o 阅读全文

posted @ 2013-03-03 16:22 Zarah 阅读(170) 评论(0) 推荐(0)