当前位置:  编程技术>WEB前端
本页文章导读:
    ▪如何让div水平居中      如何让div水平居中:建议:尽可能的手写代码,可以有效的提高学习效率和深度。让整个div水平居中的使用相当频繁。例如,一般情况下都是让网页页面在浏览器中水平居中。代码实例:<!DOCTYPE.........
    ▪js nextSibling属性和previousSibling属性      原文:http://blog.csdn.net/biologypianoprogram/archive/2009/04/30/4139903.aspx     1:nextSibling属性         该属性表示当前节点的下一个节点(其后的节点与当前节点同.........
    ▪jQuery性能优化28条建议      一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些。找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来。我也做了一个jQuery性能优化的简.........

[1]如何让div水平居中
    来源:    发布时间: 2013-11-06

如何让div水平居中:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
让整个div水平居中的使用相当频繁。例如,一般情况下都是让网页页面在浏览器中水平居中。
代码实例:

<!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=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.mytest
{
width:200px;
height:200px;
border:1px solid red;
margin:0px auto;
}
</style>
</head>
<body>
<div >我将要浮动</div>
</body>
</html>

给对象添加margin:0px auto即可实现此效果。

原文地址:如何让div水平居中

本文链接


    
[2]js nextSibling属性和previousSibling属性
    来源:    发布时间: 2013-11-06

原文:http://blog.csdn.net/biologypianoprogram/archive/2009/04/30/4139903.aspx

     1:nextSibling属性

        该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别);如果其后没有与其同级的节点,则返回null。

       需要特别注意的是:该属性在不同的浏览器中的执行结果并不都相同,见下面例示:

      先来看一个例子:

 

<body>
<div>
<input id="a4" type="button" onclick="alert(this.nextSibling);" value="d" />
<input id="a5" type="button" onclick="alert(this.nextSibling);" value="e" />
</div>
</bod

 

      该对象的结构表面上看,div的nextSibling只有2项——两个input节点。但实际上有5项——/n,input,/n,input,/n。 这是因为input作为创建各种表单输入控件的标签,无论是生成button、checkbox、radio...等或其他表单控件,IE都会自动在后面 创建一个1字节位的空白。

 

       IE将跳过在节点之间产生的空格文档节点(如:换行字符),而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取,因此,在ie 中用nextSibling便可读取到的下一个节点元素,在FF中就需要这样写:nextSibling.nextSibling了。

       opera和safari对nextSibling的处理方式与FF一致

        2:previousSibling属性

        该属性与nextSibling属性的作用正好相反。例如:someTagObject.nextSibling.previousSibling其实返回的是该标签元素本身,但前提必须是:该标签元素的后面必须有一个同级的元素,否则就返回null了。

       3:通过nextSibling或者 previousSibling所获得的HTML标签元素对象的属性问题

       一般先通过nextSibling.nodeName来获知其标签名,或者通过nextSibling.nodeType来获知其标签类型,然后,如果该 nextSibling.nodeName = #text,则通过nextSibling.nodeValue来获知其文本值;否则,可以通过nextSibling.innerHTML等其他常用标 签元素属性来获取其属性。

本文链接


    
[3]jQuery性能优化28条建议
    来源:    发布时间: 2013-11-06

一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些。找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来。我也做了一个jQuery性能优化的简明样式表,你可以打印出来或者设为桌面背景。 
一、选择器性能优化建议

1. 总是从#id选择器来继承
这是jQuery选择器的一条黄金法则。jQuery选择一个元素最快的方法就是用ID来选择了。

1$('#content').hide();



或者从ID选择器继承来选择多个元素:

1$('#content p').hide();




2. 在class前面使用tag
jQuery中第二快的选择器就是tag选择器(如$(‘head’)),因为它和直接来自于原生的Javascript方法getElementByTagName()。所以最好总是用tag来修饰class(并且不要忘了就近的ID)

1var receiveNewsletter = $('#nslForm input.on');



jQuery中class选择器是最慢的,因为在IE浏览器下它会遍历所有的DOM节点。尽量避免使用class选择器。也不要用tag来修饰ID。下面的例子会遍历所有的div元素来查找id为’content’的那个节点:

1var content = $('div#content'); // 非常慢,不要使用



用ID来修饰ID也是画蛇添足:

1var traffic_light = $('#content #traffic_light'); // 非常慢,不要使用




3. 使用子查询
将父对象缓存起来以备将来的使用

1
2
3
4var header = $('#header'); 
var menu = header.find('.menu'); 
// 或者 
var menu = $('.menu', header);



来看个例子

4. 优化选择器以适用Sizzle的“从右至左”模型
自版本1.3之后,jQuery采用了Sizzle库,与之前的版本在选择器引擎上的表现形式有很大的不同。它用“从左至右”的模型代替了“从右至左”的模型。确保最右的选择器具体些,而左边的选择器选择范围较宽泛些:

1var linkContacts = $('.contact-links div.side-wrapper');



而不要使用

1var linkContacts = $('a.contact-links .side-wrapper');




5. 采用find(),而不使用上下文查找
.find()函数的确快些。但是如果一个页面有许多DOM节点时,需要来回查找时,可能需要更多时间:

1
2
3var divs = $('.testdiv', '#pageBody'); // 2353 on Firebug 3.6 
var divs = $('#pageBody').find('.testdiv'); // 2324 on Firebug 3.6 - The best time 
var divs = $('#pageBody .testdiv'); // 2469 on Firebug 3.6




6. 利用强大的链式操作
采用jQuery的链式操作比缓存选择器更有效:

1
2
3
4$('li.menu-item').click(function () {alert('test click');}) 
                     .css('display', 'block') 
                     .css('color', 'red') 
                     fadeTo(2, 0.7);




7. 编写属于你的选择器
如果你经常在代码中使用选择器,那么扩展jQuery的$.expr[':']对象吧,编写你自己的选择器。下面的例子中,我创建了一个abovethefold选择器,用来选择不可见的元素:

1
2
3
4
5
6$.extend($.expr[':'], { 
abovethefold: function(el) { 
return $(el).offset().top < $(window).scrollTop() + $(window).height(); 

}); 
var nonVisibleElements = $('div:abovethefold'); // 选择元素




二、优化DOM操作建议

8. 缓存jQuery对象
将你经常用的元素缓存起来:

1
2
3var header = $('#header'); 
var divs = header.find('div'); 
var forms = header.find('form');




9. 当要进行DOM插入时,将所有元素封装成一个元素
直接的DOM操作很慢。尽可能少的去更改HTML结构。


    
最新技术文章:
▪css white-space:nowrap属性用法(可以强制文字不...
▪IE里button设置border:none属性无效解决方法
▪border:none与border:0使用区别
▪html清除浮动的6种方法示例
▪三个不常见的 HTML5 实用新特性简介
▪css代码优化的12个技巧
▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
▪小技巧处理div内容溢出
▪html小技巧之td,div标签里内容不换行
▪纯CSS实现鼠标放上去改变文字内容
▪li中插入img图片间有空隙的解决方案
▪CSS3中Transition属性详解以及示例分享
▪父div高度不能自适应子div高度的解决方案
▪告别AJAX实现无刷新提交表单
▪从零学CSS系列之文本属性
▪HTML 标签
▪CSS3+Js实现响应式导航条
▪CSS3实例分享之多重背景的实现(Multiple background...
▪用css截取字符的几种方法详解(css排版隐藏溢...
▪页面遮罩层,并且阻止页面body滚动。bootstrap...
▪CSS可以做的几个令你叹为观止的实例分享
▪详细分析css float 属性以及position:absolute 的区...
▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
▪CSS小例子(只显示下划线的文本框,像文字一...
▪可以给img元素设置背景图
▪不通过JavaScript实现的自动滚动视差效果
▪div+CSS 兼容小摘
▪CSS的inherit与auto使用分析
 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3