怎么取得&div id=&xxx&&&/div&e面的热
&来源：读书人网&【读书人网()：综合教育门户网站】
如何取得div idxxx/dive面的热荩渴褂javascript捉取W热xmlHttpnewActiveXObject( MSXML2.
如何取得&div id=&xxx&&&/div&e面的热荩使用javascript捉取W热
xmlHttp & = & new & ActiveXObject( &MSXML2.XMLHTTP &);，
var & objText & = & xmlHttp.responseT
--------------------
objText正_取得W的热荩渲杏 &div & id= &idname && xxxxxxx &/div& @拥热荩怎N尤〉id= &idname &e的热xxxxxxx？
因槭responseText的，我用getElementById]起作用。[解决办法]document.getElementById( &idname &).innerText
document.getElementById( &idname &).innerHTML[解决办法]2楼正解.[解决办法]var divs = objText.getElementsByTagName( &div &);
for (var i = 0; i
& divs. i++)
if (divs[i].getAttribute( &idname &))
return divs[i].innerT
}[解决办法]4楼那个把所有 &div& 的标签都扫描了一遍[解决办法]在ie里面请用
alert(document.getElementById( &idname &).innerHTML);
在ff里面请用
alert(document.getElementById( &idname &).textContent);
[解决办法]先判断有没有这个控件[解决办法]先把objText 赋给某个div 如document.getElementById( 'div1 ').innerHTML = objT
再alert(document.getElementById( &idname &).innerHTML);[解决办法] &div id=\ &idname\ && ([\s|\S]*?) &/div&[解决办法]楼上匹配出来不还是“ &div id= &idname && csdfaer2342rwqer2?$@#$@#Dswweef &/div& ”嘛。楼主的意思是要
标记包含的内容，标记本身是不需要的。
正确的代码应该是这样的：
&input type= &button & value= &GetDiv & onclick= &getDivContent(); &&
function getDivContent()
var div_str =
'dsadasd &div id= &idname && csdfaer2342rwqer2?$@#$@#Dswweef &/div& 231231 ';
var re = / &div id= &idname && (.*?) &\/div& /;
re.exec(div_str);
alert(RegExp.$1);
&/script&[解决办法]既然是要标记里面的内容,那就用xml传数据啊
js用responseXML,然后用js的DOM得到这个id= '... '的内容,
为什么要用reponseText,把问题搞的这复杂[解决办法]如果是 &div id= &idname && csdfaer23 &div& 42r &/div& wqer2 &div& ?$@#$@#D &/div& swweef &/div& 类型的，那idname的DIV之外不能再有DIV包含，不然就不好处理，可以用：
&div id=\ &idname\ && ([\s|\S]*) &/div&[解决办法]服务器输出用xml格式,这个会错,不是吧.[解决办法]在 FireFox 中改成 alert(document.getElementById(id).textContent); 测试通过。[解决办法]因为存在嵌套的问题，所以我觉得正则表达式可能会有问题的。[解决办法]还是改用DOM方式了，最省事！_ 坚持不一定会胜利，但放弃一定会失败。
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。实现方法：overflow:
text-overflow:
white-space:效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出显示省略号，如下。实现方法：display: -webkit-
-webkit-box-orient:
-webkit-line-clamp: 3;
overflow:效果如图：适用范围：因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；注：-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：display: -webkit- 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。实现方法：p::after{content: &...&; position: bottom: 0; right: 0; padding-left: 40
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}效果如图：适用范围：该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。注：将height设置为line-height的整数倍，防止超出的文字露出。给p::after添加渐变背景可避免文字只显示一半。由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：&span&…&span/&）；兼容ie8需要将::after替换成:after。
在web2.0时代里面我们一般大量的使用ajax， 这样就避免不了利用网址参数（GET参数）了下面分享一个我自己封装的将网址参数转存成JSON对象var getRequest = function(){
var url = location. //获取url中&?&符后的字串
var theRequest = new Object();
if (url.indexOf(&?&) != -1) {
var str = url.substr(1);
var strs = str.split(&&&);
for(var i = 0; i & strs. i ++) {
theRequest[strs[i].split(&=&)[0]] = decodeURI(strs[i].split(&=&)[1]);
return theR
window.request = getRequest();该Javascript类是由Mr.K封装, 切勿用于商业用途有什么意见或建议请联系在下面留言，觉得没用的请绕道~！希望大家在这里能学到更多的东西，一起交流先进的前端技术E-mail： QQ:
很多情况下我们需要按需加载我们的静态资源文件（JS、CSS），比如我们在某一个页面使用某一个组件的时候，需要引入该组件的一些JS或CSS文件，因为动态页面我们是把头尾写在一个文件里面的，所以我们通常会把需要用到的组件框架 一次性引入到我们的网站当中， 这样我们在不需要用到这种组件的页面上还要白白的加载无用的组件JS或CSS文件，浪费资源不说，如果组件的文件比较大，还会影响网页打开的速度 这样就得不偿失了推荐： HTML 页面内部尽量避免直接写入JS代码块解决方案：1. 我们会在包含底部文件后面加上引用代码这样能解决我们浪费资源的问题但是： 我们遮掩做的后果是 要把处理该组件的 业务代码放在你引用文件的后面， 这样对于一个相对于庞大的项目来说并不是一个好的解决方法， 我们在管理我们的JS业务逻辑代码的时候会非常头疼 不推荐使用上图为一个使用Jquery上传组件的页面2. 编写一个按需加载的方法 这个是我通常做的方式我们可以通过这个方法来实现引入组件相关的JS或CSS文件好处是我们可以更好的来管理我们的代码好！ 那么重点来了！下面分享我自己的 按需加载方法/**
* 按需加载JS、CSS文件
加载文件的URL
{Function} callback 文件加载完成的回调函数
var loadFile = function(url, callback){
var elem, bl,
type = 'link',
isExecuted = false, isExecutedForIE = // 防止在ie9中，callback执行两次
var load = function(u, cFn){
/* 判断文件类型并检测引入文件是否已存在 */
if(u.indexOf('.js') != -1){
type = 'script';
var oScripts = document.getElementsByTagName('script');
for(var i=0;i&oScripts.i++){
if(oScripts[i].src.indexOf(u) != -1) return cFn();
type = 'link';
var oLinks = document.getElementsByTagName('link');
for(var i=0;i&oLinks.i++){
if(oLinks[i].href.indexOf(u) != -1) return cFn();
/* 生成Dom */
elem = document.createElement(type);
type == 'link' ? elem.rel = 'stylesheet' :
if ( typeof cFn === 'function' )
function changeFn(){
var status = elem.readyS
if (status == 'loaded' || status == 'complete') {
if (bl && !isExecutedForIE) {
isExecutedForIE =
elem.onreadystatechange =
if(browser == &IE&){
elem.onreadystatechange = changeFn;
// for 非ie
if (bl && !isExecuted) {
elem.onload = cFn;
isExecuted =
if(type == 'link'){
elem.href =
elem.src =
document.getElementsByTagName('head')[0].appendChild(elem);
url = [].concat(url);
if(url.length & 1) return callback && callback();
var uIndex = 0;
for(var u=0;u&url.u++){
load(url[uIndex], function(){
uIndex ++;
if(uIndex & url.length){
load(url[uIndex]);
callback && callback();
};因为要兼容所以依赖于/**
* 获取浏览器类型
var browser = (function(){
var userAgent = navigator.userA //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf(&Opera&) & -1;
if (isOpera) {
return &Opera&
}; //判断是否Opera浏览器
if (userAgent.indexOf(&Firefox&) & -1) {
return &Firefox&;
} //判断是否Firefox浏览器
if (userAgent.indexOf(&Chrome&) & -1){
return &Chrome&;
if (userAgent.indexOf(&Safari&) & -1) {
return &Safari&;
} //判断是否Safari浏览器
if (userAgent.indexOf(&compatible&) & -1 && userAgent.indexOf(&MSIE&) & -1 && !isOpera) {
return &IE&;
}; //判断是否IE浏览器
})();使用方法：loadFile('js/test.js', function(){
//ToDo ...
loadFile(['js/test1.js', 'js/test2.js'], function(){
//ToDo ...
});这样我们就可以更方便的管理我们的代码了该Javascript类是由Mr.K封装, 切勿用于商业用途有什么意见或建议请联系在下面留言，觉得没用的请绕道~！希望大家在这里能学到更多的东西，一起交流先进的前端技术E-mail： QQ:
2015年你必须学习的编程语言和前端框架各种前端开发库和前端框架在不断的更新，为了适应潮流的需要，你必须不断的学习新的东西。但是下面提到的编程语言和前端框架会在很长的时间内占据重要的位置，学习和掌握它们是值得的和必须的。从长远来看，它们是十分受欢迎的，被广大社区支持，并且提供很多的就业机会。　JAVASCRIPT如果你正在从事前端web的开发工作，那么不论你使用什么后台语言，前台开发中javascript使你必须掌握的语言。你可以在浏览器中、在服务器上、在移动app中、甚至是在可编程硬件上使用JS。ECMAScript 6将会使语言更强大、更易于编写。更好的方法是学习Bower 和 npm，以及使用 jshint和 jscs等工具来编写代码和检查错误。　ANGULARJSAngularJS 是谷歌的一个javascript框架。它能够很容易的建立各种强大的WEB应用程序。你会发现在各种前端工作的招聘中，都提到需要你掌握AngularJS。但是你先不要急着完全掌握它，有消息透露，在新的2.0版本中，AngularJS将作出重大的改进和调整。你可以参考guide angularjs examples。REACT　React是一个新东西，它的理念是可重复使用的WEB组件。这个库是由Facebook开发的，因为是虚拟DOM，它的性能非常突出，它还能很容易的集成到其它项目中。它还有一个非常活跃的、可开发各种组件的社区的支持。在我们看来，React是很有潜力的，你应该在2015年掌握它。NODE.JS使用Node.js，你可以使用javascript开发网络服务器应用程序。它可以用于简单的网站后台框架如：Express， API endpoints， websocket服务，甚至是 torrent clients。NodeJS有一个活跃的社区支持其模块的编写。如果你是一个初学者，我们建议你从 NodeSchool 开始学习。NOSQL DATABASES不需要SQL数据库表的数据库在目前还未流行，但是我们相信它会在不久的将来成为热门。有两个值得我们考虑的选择： Mongodb和Redis。它们的起步比MySQL数据库更容易。但是不要简单的认为NoSQL数据库是一个简单的替代-在某些情况下，一个典型的关系型数据库将更使你的开发容易，即使这需要付出更多的工作量。LESS/SASS/STYLUSCSS有时是十分令人困扰的，大于1000行的CSS代码你要想修改它是非常困难的，为了解决这些问题，出现了 Less 、 Sass 和 Stylus 等带变量和宏、可编译的CSS预处理语言。它们将能帮你写出更好的CSS代码。你可以选择其中之一来学习。NEW FRAMEWORKSMeteor 是一种全新的WEB应用开发方式，它模糊了前端和后端之间的界限。它允许你编写实时(reall-time)应用程序，并且有一个专门的社区为其编写各种应用程序包。 Hood.ie 提供了一种全新的方法，它可以帮你处理后台程序，是你可以完全投入到前台的开发当中。NEW LANGUAGES对于程序语言爱好者来说， Golang 、 Rust 和 Elixir 无疑是他们的新大陆。这些语言被在特殊情况下使用，它们需要非常高的性能支持。你可以从现在开始学习一些关于它们的知识。A CLASSIC FULL STACK FRAMEWORK虽然单页应用日益普及，但是仍有很多的服务器端的Web应用程序的需求。 Ruby on Rails 、 Django 、Laravel 、 Play 、ASP.NET是当前最顶级的全栈式框架。但是任何MVC框架都需要你花费大量时间去研究它。THE OLD GUARD许多平台和语言仍然是当前流行的 - Java 、 .NET 、 Python 、 Ruby 。这些语言有大量社区的支持，它们各自都有优点和缺点。当你选择它们时，最主要是看它是否能完成你当前的工作需要。DON’T FORGET THESEPHP、 WordPress 和 jQuery 仍然是创建网站的一个有效方式。WordPress已经超越了一个博客平台的范畴，它现在是一个功能强大的CMS /框架开发一个广泛的Web应用程序。如果你是一个设计师，你应该考虑选择这些技术了。如果你觉得使用PHP作为你的后台程序，那么请了解正确使用php的方法。如果你已经准备好了，请参考一下Bootstrap-它能帮助你写出优秀的前端代码。
日，万维网联盟启动Web支付工作组，打造更简便更安全的在线支付体验。W3C 计划制定的标准将支持目前现存及即将问世的诸多支付方式，其中包括借记卡支付、信用卡支付、移动支付系统、代管账户支付、比特币支付以及其他分布式分账类 技术。相关支付API将支持浏览器辅助实现的支付工具注册及选择等功能，并为自动安全支付，特别是移动设备端的自动安全支付建立良好的基础，从而为广大商 家和用户带来更安全的交易平台以及更多的支付方式选择。W3C CEO Jaffe博士评论说，“行业将电子钱包视为一种可以改善支付安全和可用性，并多种营销手段的支付解决方案。然而，用户并没有完全接受这一方案。我们认为 其中的一个原因是电子钱包市场的分裂性，以及电子钱包提供商使用不兼容的编程接口造成的。W3C即将编写的标准将通过定义标准化的编程接口帮助确保不同支 付方案的互操作性。所以，当你购买商品的时候，你应该有一个标准的方法来使自己的支付工具和商家可接受的工具相匹配，并确保二者能够与商家的结账流程平滑整合。”W3C新启动的Web支付工作组章程（及常见问题解答）由W3C Web支付兴趣组完成，该兴趣组成员来自银行、支付服务提供商、商家、浏览器厂商、硬件厂商以及其他行业相关方。新的Web支付工作组将于日-30日在日本札幌举办的W3C全体技术大会期间举办第一次小组会议。更多关于W3C Web支付工作组的信息请见新闻通稿（英文版）（中文版）。
如果你经常使用jQuery，那么你也许很熟悉事件绑定。这是很基本的东西，但是深入一点，你就能够找到机会让你事件驱动的代码变得不太零碎，并且更容易管理。更好的选择器策略让我们从基础的例子开始。下面的HTML代码表示的是可以开合的导航菜单。&button class=&nav-menu-toggle&&Toggle Nav Menu&/button&
&li&&a href=&/&&West Philadelphia&/a&&/li&
&li&&a href=&/cab&&Cab Whistling&/a&&/li&
&li&&a href=&/throne&&Throne Sitting&/a&&/li&
&/nav&下面这个是点击按钮之后控制导航菜单开合的javascript代码$('.nav-menu-toggle').on('click',function(){
$('nav').toggle();
});这可能是最常用的实现方式。它能够使用，但是比较脆。javascript代码依赖了按钮的类名nav-menu-toggle。很可能在未来其他开发者或者健忘的你在重构代码的时候会删除或者重命名这个类名。问题的核心是我们同时在表现和交互中使用了CSS的类名。这违反了关注点分离的原则，让维护更容易出错。让我们用一个不同的方法来实现&button data-hook=&nav-menu-toggle&&Toggle Nav Menu&/button&
&nav data-hook=&nav-menu&&
&li&&a href=&/&&West Philadelphia&/a&&/li&
&li&&a href=&/cab&&Cab Whistling&/a&&/li&
&li&&a href=&/throne&&Throne Sitting&/a&&/li&
&/nav&这次我们使用这个data属性（data-hook）来选择元素。任何对CSS类的改变将不会影响到javascript，让我们能够实现关注点分离以及更加稳定的代码。下面我们用data-hook属性来选择对应的元素：$('[data-hook=&nav-menu-toggle&]').on('click',function(){
$('[data-hook=&nav-menu&]').toggle();
});需要注意的是，我也使用data-hook作为nav元素的选择器。你不一定需要，但是我喜欢这里面包含的思想：任何使用你看到data-hook，你会知道这个元素在javascript中引用到啦。一些语法糖我必须承认data-hook选择器并不是很漂亮。让我们通过扩展jQuery实现一个自定义的函数：$.extend({
hook:function(hookName){
if(!hookName || hookName === '*'){
// select all data-hooks
selector='[data-hook]'
// select specific data-hook
selector='[data-hook*=&'+hookName+'&]';
return $(selector);
});上面准备完毕，我们来重写一下javascript。$.hook('nav-menu-toggle').on('',function(){
$.hook('nav-menu').toggle();
});更好的是，我们甚至可以把一系列以空格分开的hook名字放在一个元素上。&button data-hook=&nav-menu-toggle video-pause click-track&&Toggle Nav Menu&/button&我们可以找到里面的任意个hook名字：$.hook('click-track'); // returns the button as expected我们也能够找到页面上所有的hook元素// both are equivalent
$.hook('*');防止函数表达式到目前为止，我们在事件处理中使用的都是匿名函数。让我们重写一下，使用声明的函数来代替它。function toggleNavMenu(){
$.hook('nav-menu').toggle();
$.hook('nav-menu-toggle').on('click',toggleNavMenu);这让事件绑定的代码更加易读。这个toggleNavMenu函数名表达了意图，是代码自我注释的好例子。我们同时也获得了可复用的能力，因为其他地方可能需要使用toggleNavMenu函数。最后，这对于自动化测试来说是意见大喜事，因为声明的函数的单元测试要比匿名函数单元测试容易的多。同时使用多个事件jQuery提供了一个简单方便的语法来处理多事件的问题。比如，你可以为一系列空格隔开的事件列表绑定同一个事件处理函数。$.hook('nav-menu-toggle').on('click keydown mouseenter',trackAction);如果你需要为不同的事件绑定不同的处理函数，你可以使用对象表达方式：$.hook('nav-menu-toggle').on({
'click':trackClick,
'keydown':tranckKeyDown,
'mouseenter':trackMouseEnter
});反过来，你可以同时取消多个事件的绑定：// unbinds keydown and mouseenter
$.hook('nav-menu-toggle').off('keydown mouseenter');
// nuclear options:unbinds everything
$.hook('nav-menu-toggle').off();你可以想象到的是，不小心的取消事件绑定可能会导致严重的我们不想要的副作用。继续看我们可以通过哪些技巧来减轻这个问题。小心的取消事件绑定一般情况下我们不会在一个元素的同一事件类型绑定多个事件处理函数。让我们再看一下之前的那个按钮：&button data-hook=&nav-menu-toggle video-pause click-track&&Toggle Nav Menu&/button&不同的代码区域可能会在同一个元素的同一事件绑定不同的事件处理函数：// somewhere in the nav code
$.hook('nav-menu-toggle').on('click',toggleNavMenu);
// somewhere in the video playback code
$.hook('video-pause').on('click',pauseCarltonDanceVideo);
// somewhere in the analytics code
$.hook('click-track').on('click',trackClick);尽管我们使用了不同的选择器，但是这个元素现在有三个事件处理函数啦。假如我们的分析代码不在关心这个按钮：// no good
$.hook('click-track').off('click');糟糕的是，上面的代码实际上回删除所有的点击事件处理函数，不仅仅是trackClick。我们应该实用更加有辨别力的方式来指定我们需要删除的事件处理函数：$.hook('click-track').off('click',trackClick);另一种方式是使用命名空间。任何事件都有资格使用一个命名空间来实现绑定和取消绑定，这样你就可以更好的控制事件绑定和取消绑定。// binds a click event in the &analytics& namespace
$.hook('click-track').on('click.analytics', trackClick);
// unbinds only click events in the &analytics& namespace
$.hook('click-track').off('click.analytics');你也可以使用多个命名空间：// binds a click event in both the &analytics& and &usability& namespaces
$.hook('click-track').on('click.analytics.usability',trackClick);
// unbinds any events in either the &analytics& OR &usability& namespaces
$.hook('click-track').off('.usability .analytics');
// unbinds any events in both the &analytics& AND &usability& namespaces
$.hook('click-track').off('.usability.analytics');需要注意的是，命名空间的顺序是没有关系的，因为命名空间不是层级式的。如果你有一个复杂的功能需要多个元素绑定多个事件，那么使用命名空间是一种简单的把他们组织起来然后快速清除的方式：// free all elements on the page of any &analytics& event handling
$('*').off('.analytics');命名空间在写插件的时候尤其有用，因为这样你就能保证只会取消自己命名空间范围内的事件处理函数的绑定。原文：Effective Event Binding with jQuery
自从1998年CSS2作为推荐以来，表格的使用渐渐退去，成为历史。正因为此，从那以后CSS布局成为了优雅代码的代名词。对于所有设计师使用过的CSS概念，负边距作为最少讨论到的定位方式要记上一功。这就像是在线纹身-每个人都会做，但是没有人会谈论它。（It’s like an online taboo—everyone’s doing it, yet no one wants to talk about it.）为其正名我们都使用过CSS得外边距，但是当谈到负边距的时候，我们好像往差的方向发展啦。在网页设计中负边距的使用出现了两种极端，一种特别喜欢它，也有一些人认为这完全就是魔鬼的作品。负边距的使用如下：#content {margin-left:-100}负边距通常在小范围使用。但是接下来你会看到，它能做的事情很多。下面是一些你应该知道的关于负边距的事情：他们是完全有效的CSS这不是在跟你开玩笑。W3C甚至都说，在外边框中使用负边距是允许的。要了解更多可以点击这篇文章负边距不是在hack这是尤其正确的。正是因为没有很好地了解负边距才是导致各种奇怪的问题。只有在被用来解决其他地方的bug的时候才是hack它符合正常的文档流当负边距使用在没有浮动的元素上时并不会破坏正常的文档流。所以付过你使用负边距把元素向上微调的话，所有后面的元素也会向上微调。它是相当好的兼容性负边距基本上被所有现代的浏览器支持（IE6的大部分情况也是）当使用了float之后，会有不同的表现负边距不是你平常使用的属性，所以使用的时候要格外小心。Dreamweaver不理解它负边距不会在DW的设计窗口展示出效果。那你为什么还用DW的设计窗口查看效果呢？与其共事负边距如果可以正确的使用的话它的功能是很强大的。有两种场景负边距是很重要的。在static元素中使用负边距一个static元素是一个没有使用过float的元素。上面的图片展示了一个static的元素使用负边距之后的情况。当一个static元素在top/left使用负边距时，它把元素向这个特定的方向拉，比如/* Moves the element 10px upwards */
#mydiv1 {margin-top:-10}但是当你将负边距设置为相对bottom/right时，它并不会把元素向下或右拉，相反，它会把后面的元素往里面拉，从而覆盖自己。/*
所有在#mydiv1后面的元素都会向上
移动10px，而#mydiv1一点都不会移动
#mydiv1{margin-bottom:-10}如果宽度没有设置，左右负边距会把元素向两个方向拉以增加宽度。在这里margin的作用相当于padding在浮动中使用负边距加入下面就是我们的html代码：&div id=&mydiv1&&First&/div&
&div id=&mydiv2&&Second&/div&如果对一个浮动的元素使用负边距，它会产生一个空白，其他元素就可以覆盖这一部分。这个技巧可以很好地用户流式布局。比如有一列宽度100%，另一列有固定的宽度，比如说100px。/*
A negative margin is applied opposite the float
#mydiv1 {float: margin-right:-100}如果两个元素都使用了左浮动并且设置margin-right:-20px。#mydiv2会把#mydiv1看成宽度缩小20px（所以会覆盖一部分），但是有趣的是#mydiv1并不会有任何变化，而是依然保持原先的宽度。如果负边距和宽度一样大的话，它就会被完全覆盖掉。因为外边距，内边距，边框和内容加起来等于元素的宽度。如果负外边距等于元素的宽度的话，那么该元素的宽度就会变成0px。学以致用既然我们知道使用负边距在CSS2中是有效的，使用它可以给我们提供一些非常有趣的CSS技巧。把单个列表变成三列如果你有一个列表垂直方向太长了，为什么不把它分成几列呢？负边距可以让你在不增加任何浮动和标签的情况下完成。你会发现用负边距实现这个是多么地简单，就像下面：HTML&ul&
&li class=&col1&&Eggs&/li&
&li class=&col1&&Ham&li&
&li class=&col2 top&&Bread&li&
&li class=&col2&&Butter&li&
&li class=&col3 top&&Flour&li&
&li class=&col3&&Cream&/li&
&/ul&CSSul {list-style:}
li {line-height:1.3}
.col2 {margin-left:100}
.col3 {margin-left:200}
.top {margin-top:-2.6} /* the clincher */通过对.top的添加margin-top:-2.6em。所有的元素会完美的对齐好。使用负边距会比使用相对定位好很多，因为你只需要给新的一列的第一个元素添加负边距即可。酷吧，哈哈哈重叠来强调故意重叠元素也是一种很好地设计隐喻。重叠效果可以增强深度感从而为突出特定元素。一个很好地例子就像上图一样，通过重叠来吸引注意力。只需要使用z-index属性和一点小创意你就可以做到。惊艳的3D文本效果这是一个精致的技巧。通过使用两个视图的两种颜色创建safari一样有点倾斜的效果。然后通过负边距来把其中一个叠加到另一个上面，保持1到2像素的偏移。这样你就可以二道可选的，机器友好的倾斜字体。就不需要浪费很多贷款来加载大的图片来实现这个效果啦简单的两列布局负边距也是在流式布局中创建简单一列宽度固定，一列内容为宽度的100%的两列布局的好方法。HTML&div id=&content&& &p&Main content in here&/p& &/div&
&div id=&sidebar&& &p&I’m the Sidebar! &/p& &/div&CSS#content {width:100%; float: margin-right:-200}
#sidebar {width:200 float:}哈哈，这样你就得到了一个简单的两列布局。它也能在IE6完美的渲染出来。现在为了让#sidebar不要被#content给掩盖，只要简单的加上：/* Prevent text from being overlapped */
#content p {margin-right:210}
/* It’s 200px + 10px, the 10px being an additional margin.*/当适当的使用的时候，负外边距能够提供一个灵活的文档结构，完爆table的布局。灵活的文档布局是一种可访问性和SEO的技巧，通过它能够让你根据你的关注点以任意顺序组织你的html代码。这里有一个文章讨论了负边距在多列布局中的应用。微调元素这是负外边距最常也是最简单的使用方式。假如你把第十个div插入到9个其他的div中，不知道什么原因没有正确的排列，使用负边距来调整这个div就不需要改变其他9个div了，很方便。解决bug文本和链接问题在float中使用负边距可能会在旧的浏览器造成一些问题，比如下面的这些：让链接不可点击文本变得很难选择失去焦点的时候按tab键失效解决方法：只要添加position:relative，就可以啦。图片被剪切啦如果你运气不好刚好在办公室使用IE6，当遇到覆盖和浮动的时候内容有些时候回突然被剪切掉。解决方法：同样的只要给浮动元素加上position:relative，所有的问题就解决啦。结论负外边距能够在不使用任何额外标签的情况下定位元素让它在现在网页设计中占有一席之地。随着更多的用户使用更新的浏览器（包括IE8)，未来使用这些技巧的网站会变得更加有前景。原文 The Definitive Guide to Using Negative Margins
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图
片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这
与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载
可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. 官方演示地址 (一)如何使用 Lazy Load?Lazy Load 依赖于 jQuery. 请将下列代码加入页面 head 区域:
在你的执行代码中加入下面语句: Js 代码$(&http://www.appelsiini.net/projects/lazyload/img&).lazyload();这将使 id=&http://www.appelsiini.net/projects/lazyload/img& 区域下的图片将
被延迟加载. (二) 占位图片
还可以设定一个占位图片并定义事件来触发加载动作. 这时需要为占位图片设定一个
URL 地址. 透明, 灰色和白色的 1x1 象素的图片已经包含在插件里面.Js 代码 $(&img&).lazyload({ placeholder : &img/grey.gif& }); (三) 事件触发加载
事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事
件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在
位置. 在灰色占位图片被点击之前阻止加载图片, 可以这样做: Js 代码 $(&img&).lazyload({
placeholder : &img/grey.gif&,
event : &click&
});(四) 使用特效
当图片完全加载的时候, 插件默认地使用 &show() 方法来将图显示出来. 其实你可以
使用任何你想用的特效来处理. 下面的代码使用 FadeIn 效果.
Js 代码$(&img&).lazyload({
placeholder : &img/grey.gif&,
effect : &fadeIn&
}); (五)图片在容器里面
可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容
器定义为 jQuery 对象并作为参数传到初始化方法里面. 这是水平滚动演示页面和垂直滚动 CSS 代码: #container {
height: 600
}Js 代码: $(&img&).lazyload({
placeholder : &img/grey.gif&,
container: $(&#container&)
});(六) 当图片不顺序排列
滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域
内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为. Js 代码: $(&img&).lazyload({
failurelimit : 10
});将 failurelimit 设为 10 令插件找到 10 个不在可见区域的图片是才停止搜索. 如
果有一个猥琐的布局, 请把这个参数设高一点. (七)延迟加载图片
Lazy Load 插件的一个不完整的功能, 但是这也能用来实现图片的延迟加载. 下面的
代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行
加载. 这是延迟加载演示页面.
Js 代码: $(function() {
$(&img:below-the-fold&).lazyload({
placeholder : &img/grey.gif&,
event : &sporty&
$(window).bind(&load&, function() {
var timeout = setTimeout(function() {$(&img&).trigger(&sporty&)}, 5000);
在jquery中，遍历对象和数组，经常会用到$().each和$.each()，两个方法。两个方法是有区别的，从而这两个方法在针对不同的操作上，显示了各自的特点。$().each,对于这个方法，在dom处理上面用的较多。如果页面有多个input标签类型为checkbox，对于这时用$().each来处理多个checkbook，例如：$(“input[name=’ch’]”).each(function(i){
if($(this).attr(‘checked’)==true){
//一些操作代码
});回调函数是可以传递参数，i就为遍历的索引。对于遍历一个数组，用$.each()来处理，简直爽到了极点。例如：$.each([{“name”:”limeng”,”email”:”xfjylimeng”},{“name”:”hehe”,”email”:”xfjylimeng”},function(i,n){
alert(“索引:”+i,”对应值为：”+n.name);
//参数i为遍历索引值，n为当前的遍历对象.
var arr1 = [ “one”, “two”, “three”, “four”, “five” ];
$.each(arr1, function(){
alert(this);
//输出：one
var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
$.each(arr2, function(i, item){
alert(item[0]);
var obj = { one:1, two:2, three:3, four:4, five:5 };
$.each(obj, function(key, val) {
alert(obj[key]);
5在jQuery里有一个each方法，用起来非常的爽，不用再像原来那样写for循环，jQuery源码里自己也有很多用到each方法其实jQuery里的each方法是通过js里的call方法来实现的。下面简单介绍一下call方法。call这个方法很奇妙，其实官方的说明是：“调用一个对象的一个方法，以另一个对象替换当前对象。”网上更多的解释是变换上下文环境，也有说是改变上下文this指针。call([thisObj[,arg1[, arg2[,
[,.argN]]]]])参数thisObj可选项。将被用作当前对象的对象。arg1, arg2,
, argN可选项。将被传递方法参数序列。说明call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。引用网上有一个很经典的例子Js代码function add(a,b){
alert(a+b);
function sub(a,b){
alert(a-b);
add.call(sub,3,1);
//用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4);注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。具体call更深入的就不在这里提了。下面提一下jQuery的each方法的几种常用的用法Js代码var arr = [ “one”, “two”, “three”, “four”];
$.each(arr, function(){
alert(this);
//上面这个each输出的结果分别为：one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
//其实arr1为一个二维数组，item相当于取每一个一维数组，
//item[0]相对于取每一个一维数组里的第一个值
//所以上面这个each输出分别为：1
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(key, val) {
alert(obj[key]);
//这个each就有更厉害了，能循环每一个属性
//输出结果为：1
开篇：如果说Notepad++是一款不错Code神器，那么Sublime Text应当称得上是神器滴哥。Sublime Text最大的优点就是跨平台，Mac和Windows均可完美使用；其次是强大的插件支持，几乎无所不能。开始使用Sublime Text：Sublime Text有Dev版本，推荐使用，下载地址，一般推荐下载便携版本（Portable version），这样拿来拿去很方便，也不用安装，而且插件和主体在一个目录下，便携。Sublime Text快捷键：Ctrl+Shift+P：打开命令面板Ctrl+P：搜索项目中的文件Ctrl+G：跳转到第几行Ctrl+W：关闭当前打开文件Ctrl+Shift+W：关闭所有打开文件Ctrl+Shift+V：粘贴并格式化Ctrl+D：选择单词，重复可增加选择下一个相同的单词Ctrl+L：选择行，重复可依次增加选择下一行Ctrl+Shift+L：选择多行Ctrl+Shift+Enter：在当前行前插入新行Ctrl+X：删除当前行Ctrl+M：跳转到对应括号Ctrl+U：软撤销，撤销光标位置Ctrl+J：选择标签内容Ctrl+F：查找内容Ctrl+Shift+F：查找并替换Ctrl+H：替换Ctrl+R：前往 methodCtrl+N：新建窗口Ctrl+K+B：开关侧栏Ctrl+Shift+M：选中当前括号内容，重复可选着括号本身Ctrl+F2：设置/删除标记Ctrl+/：注释当前行Ctrl+Shift+/：当前位置插入注释Ctrl+Alt+/：块注释，并Focus到首行，写注释说明用的Ctrl+Shift+A：选择当前标签前后，修改标签用的F11：全屏Shift+F11：全屏免打扰模式，只编辑当前文件Alt+F3：选择所有相同的词Alt+.：闭合标签Alt+Shift+数字：分屏显示Alt+数字：切换打开第N个文件Shift+右键拖动：光标多不，用来更改或插入列内容鼠标的前进后退键可切换Tab文件按Ctrl，依次点击或选取，可需要编辑的多个位置按Ctrl+Shift+上下键，可替换行Sublime Text 设置：Setting User{
&font_face&: &courier new&,
&font_size&: 9.0,
&highlight_line&: true,
&scroll_past_end&: false,
&tab_size&: 4,
&theme&: &Soda Dark.sublime-theme&,
&word_wrap&: true
}Sublime Text插件：建议先启用Package Control，作用是安装插件时很方便，启用方法：菜单栏 – View – Show Console，贴入以下代码并回车，然后重启Sublime。如果你所在的网络无法启用，则无法使用，手动搜索下载去吧（话说你的网也被封了？）。import urllib2,pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else Nopen(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())开始安装一些非常实用的插件吧，Ctrl+Shift+P（菜单 – Tools – Command Paletter），输入 install 选中Install Package并回车，输入或选择你需要的插件回车就安装了（注意左下角的小文字变化，会提示安装成功），安装其它插件也是这个方法，非常快速。ZenCoding不得不用的一款前端开发方面的插件，Write less , show more.安装后可直接使用，Tab键触发，Alt+Shift+W是个代码机器。Alignment代码对齐，如写几个变量，选中这几行，Ctrl+Alt+A，哇，齐了。Prefixr写 CSS可自动添加 -webkit 等私有词缀，Ctrl+Alt+X触发。TagHtml格式化，右键Auto-Format Tags on Ducument。Clipboard History剪贴板历史记录，显示更多历史复制，Ctrl+Shift+V触发。SideBarEnhancements侧栏右键功能增强，非常实用Theme – Soda完美的编码主题，用过的都说好，Setting user里面添加”theme”: “Soda Dark.sublime-theme”GBK to UTF8将文件编码从GBK转黄成UTF8，菜单 – File里面找SFTP直接编辑 FTP 或 SFTP 服务器上的文件，绝对FTP浮云WordPress集成一些WordPress的函数，对于像我这种经常要写WP模版和插件的人特别有用PHPTidy整理排版PHP代码YUI Compressor压缩JS和CSS文件本文转自： 大前端 >> Sublime Text 使用介绍、全套快捷键及插件推荐
前端开发工程师是Web前端开发工程师的简称，是近五年才真正开始受到重视的一个新兴职业。Web前端开发技术是一个先易后难的过程，主要包括三个要素：HTML（标准通用标记语言下的一个应用）、级联样式表和JavaScript，这就要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。
前端开发工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间是从2005年开始的，是指Web前端开发工程师的简称。
Web前端开发是从美工演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，Web 1.0时代，网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
前端开发技术
必须掌握基本的Web前端开发技术，其中包括：CSS、HTML、DOM、javascript、Ajax等，在掌握这些技术的同时，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。
奋斗在技术之路的程序猿，喜欢JS，热爱。
本站内容仅供观摩学习交流之用，将不对任何资源负法律责任。如有侵犯到您的权利，请联系本站，本站将尽快处理。
& 2015 All rights reserved}