一、CSS HACK
以下两种方法几乎能解决现今所有HACK.
1, !important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
2, IE6/IE77对FireFox
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
}
</style>
注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>
二、万能 float 闭合
Continue reading “CSS兼容IE6/IE7/FF的一些通用方法”
1、关于页面元素的引用
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。
2、jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如：$(document.getElementById(“msg”))则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：$(“#msg”)[0]，$(“div”).eq(1)[0]，$(“div”).get()[1]，$(“td”)[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：
$(“#msg”).html();
$(“#msg”)[0].innerHTML;
$(“#msg”).eq(0)[0].innerHTML;
$(“#msg”).get(0).innerHTML;
3、如何获取jQuery集合的某一项
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个<div>元素的内容。有如下两种方法：
$(“div”).eq(2).html(); //调用jquery对象的方法
$(“div”).get(2).innerHTML; //调用dom的方法属性
Continue reading “jQuery 常用方法”
标签： jquery
History历史对象并有以下方法
back() 后退，跟按下“后退”键是等效的。
forward() 前进，跟按下“前进”键是等效的。
go() 用法：history.go(x)；在历史的范围内去到指定的一个地址。如果 x < 0，则后退 x 个地址，如果 x > 0，则前进 x 个地址，如果 x == 0，则刷新现在打开的网页。history.go(0) 跟 location.reload() 是等效的。
reload() 相当于按浏览器上的“刷新”(IE)或“Reload”(Netscape)键。
replace() 打开一个 URL，并取代历史对象中当前位置的地址。用这个方法打开一个 URL 后，按下浏览器的“后退”键将不能返回到刚才的页面。
标签： JS实用
<script language=”JavaScript”>
var whatsNew = open(”,’_blank’,'top=50,left=50,width=200,height=300,’ +
‘menubar=no,toolbar=no,directories=no,location=no,’ +
’status=no,resizable=no,scrollbars=yes’);
whatsNew.document.write(‘<center><b>新窗口</b></center>’);
whatsNew.document.write(‘<p>新窗口测试</p>’);
whatsNew.document.write(‘<p>测试信息</p>’);
whatsNew.document.write(‘<p align=”right”>’ +’<a href=”javascript:self.close()”>关闭窗口</a></p>’);
whatsNew.document.close();
</script>
不过现在多数浏览器不让弹出窗口，所以现在使用这种方法并不适合，兼容好一点还是自己用DIV写一个靠谱
标签： JS实用, 弹窗
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=GB2312″ />
<meta name=”Author” content=”Aultoale” />
<style type=”text/css”>
body {font:normal 12px Verdana}
a#tip {position:relative;left:75px; font-weight:bold;}
a#tip:link,a#tip:hover {text-decoration:none;color:#000;display:block}
a#tip span {display:none;text-decoration:none;}
a#tip:visited {color:#000;text-decoration:underline;}
a#tip:hover #tip_info {display:block;border:1px solid #F96;background:#FFEFEF;padding:10px 20px;position:absolute;top:0px;left:90px;color:#009933}
</style>
</head>
<body>
<a id=”tip” href=”#”>
移到这里试试!
<span id=”tip_info”>这里是提示信息!</span>
</a>
</body>
</html>
标签： Div+Css
<!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=gb2312″ />
<title>DIV+CSS+JS制作滑动折叠的文字效果</title>
</head>
<style type=”text/css”>
<!–
body,div,ul,li,p,h1,h2{ margin:0; padding:0; border:0; background:#FAFAFA; font-family:Arial, Helvetica, sans-serif,”宋体”}
body{ text-align:center; font-size:12px}
li{ list-style:none}
.rolinList{ width:402px; height:auto; margin:20px auto 0 auto; text-align:left}
.rolinList li{margin-bottom:1px;border:1px solid #DADADA}
.rolinList li h2{ width:380px; height:40px; background:#fff; font-size:14px; line-height:40px; padding-left:20px; color:#333; cursor:pointer}
.content{ height:150px;width:400px; background:#fff; background:#FAFAFA}
.content p{ margin:12px}
–>
</style>
<script type=”text/javascript”>
//<![CDATA[
window.onload = function() {
rolinTab("rolin")
}
function rolinTab(obj) {
var list = $(obj).getElementsByTagName("LI");
var state = {show:false,hidden:false,showObj:false};
for (var i=0; i<list.length; i++) {
var tmp = new rolinItem(list[i],state);
if (i == 0) tmp.pShow();
}
}
function rolinItem(obj,state) {
var speed = 0.0666;
var range = 1;
var interval;
var tarH;
var tar = this;
var head = getFirstChild(obj);
var content = getNextChild(head);
var isOpen = false;
this.pHidden = function() {
if (isOpen) hidden();
}
this.pShow = show;
var baseH = content.offsetHeight;
content.style.display = “none”;
var isOpen = false;
head.onmouseover = function() {
this.style.background = “#EFEFEF”;
}
head.onmouseout = mouseout;
head.onclick = function() {
this.style.background = “#EFEFEF”;
if (!state.show && !state.hidden) {
if (!isOpen) {
head.onmouseout = null;
show();
} else {
hidden();
}
}
}
function mouseout() {
this.style.background = “#FFF”
}
function show() {
head.style.borderBottom = “1px solid #DADADA”;
state.show = true;
if (state.openObj && state.openObj != tar ) {
state.openObj.pHidden();
}
Continue reading “DIV+CSS+JS制作滑动折叠的文字效果”
标签： Div+Css, JS实用, 酷效果
<!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=gb2312″ />
<title>CSS首字下沉</title>
<style type=”text/css”>
.dyfirst {
width:300px;
border:1px solid #ddd;
padding:5px;
font-size:12px;
margin:5px 0;
}
.dyfirst:first-line {
color:#050;
}
.dyfirst:first-letter {
font-size:300%;
font-weight:bold;
color:#000;
float:left;
}
</style>
</head>
<body>
<div> To the world you may be one person, but to one person you may be theworld. Never frown, even when you are sad, because you never know who is fallingin love with your smile. </div>
<div> 对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。 </div>
</body>
</html>
标签： Div+Css
<style type=”text/css”>
* {margin:0; padding:0;}
body {font:normal 12px/1.5em Verdana, Lucida, Arial, Helvetica, “宋体”, sans-serif;background:#FCFCFC;}
.wrapper {width:200px;height:200px;position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;border:1px solid #333333;background:#CCCCCC;}
.content {width:180px;height:160px;margin:10px auto 0;overflow:hidden;border:1px solid #999999;background:#FFFFFF;}
.box {float:left;width:160px;height:150px;margin-bottom:10px;padding:10px;overflow:auto;}
.pager {width:180px;height:20px;margin:5pxauto;text-align:right;}
.pager a {padding:2px 4px;text-decoration:none;background:#FF0000;color:#FFFFFF;}
.pager a:hover {background:#FFFFFF;outline:#FF0000 1px solid;color:#000000;}
</style>
<div>
<div id=”a1″><h2>锚点控制内容</h2><p>第一屏</p><p>网上有很多这样的教程，我这个只是娱乐而已</p></div>
<div id=”a2″><h2>锚点控制内容</h2><p>第二屏</p></div>
<div id=”a3″><h2>锚点控制内容</h2><p>第三屏</p></div>
<div id=”a4″><h2>锚点控制内容</h2><p>第四屏</p></div>
<div id=”a5″><h2>锚点控制内容</h2><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p></div>
</div>
<div>
<a title=”" href=”#a1″>1</a>
<a title=”" href=”#a2″>2</a>
<a title=”" href=”#a3″>3</a>
<a title=”" href=”#a4″>4</a>
<a title=”" href=”#a5″>5</a>
</div>
标签： Div+Css, 分页
1.1 Form对象
现有问题：
现有代码这获得form对象通过document.forms(“formName”)，这样使用在IE 能接受，FF 不能。
解决方法：
改用 作为下标运算。改为document.forms["formName"]
备注
上述的改用 作为下标运算中的formName是id
1.2 HTML对象
现有问题：
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 FF 中不能。
document.all(“itemName”)或者document.all(“itemId”)
解决方法：
使用对象ID作为对象变量名
document.getElementById(“itemId”)
备注
document.all是IE自定义的方法，所以请大家尽量不使用。
还有一种方式，在IE和FF都可以使用
var f = document.forms["formName "];
var o = f. itemId;
1.3 DIV对象
现有问题：
在 IE 中，DIV对象可以使用ID作为对象变量名直接使用。在 FF 中不能。
DivId.style.display = “none”
解决方法：
document.getElementById(“DivId”).style.display = “none”
备注
获得对象的方法不管是不是DIV对象，都使用getElementById方法。参见1.2
1.4 关于frame
现有问题
在 IE中 可以用window.testFrame取得该frame，FF中不行
解决方法
在frame的使用方面FF和IE的最主要的区别是：
如果在frame标签中书写了以下属性：
Continue reading “JS的IE和Firefox兼容性整理”
标签： JS实用, 兼容性
有的女人就像Windows 虽然很优秀，但是安全隐患太大。
有的女人就像UNIX 她条件很好，然而不是谁都能玩的起。
有的女人就像C# 长的很漂亮，但是家务活不行。
有的女人就像C++,她会默默的为你做很多的事情。
有的女人就像JAVA,只需一点付出她就会为你到处服务。
有的女人就像JAVA script，虽然对她处处小心但最终还是没有结果。
有的女人就像汇编 虽然很麻烦，但是有的时候还得求它。
有的女人就像 SQL，她会为你的发展带来莫大的帮助。
爱情就是死循环，一旦执行就陷进去了。
爱上一个人，就是内存泄露，你永远释放不了。
真正爱上一个人的时候，那就是常量限定，永远不会改变。
女朋友就是私有变量，只有我这个类才能调用。
情人就是指针用的时候一定要注意，要不然就带来巨大的灾难。
标签： 娱乐
