比较合 适。

2、使用overflow属性。该方法有效地解决了通过空标签元素去除浮动而不增加无意代码的缺点。该方法仅在需要去除浮动元素中定义CSS属性：overflow:auto，即可！”zoom:1″用于兼容IE6,也可以用width:100%。

不过使用overflow它可能会影响页面性能，而且这种影响是不确定的，你最好在多个浏览器上测试你的页面；

3、使用after清除伪对象的浮动。 该方法仅适用于非IE浏览器 。具体写作方法可参考以下示例。使用时应注意以下几点。1、该方法必须在需要去除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像 素；二、content属性是必要的，但其值可以是空的。当蓝色理想地讨论这种方法时content属性值设为.但我发现空也可以。

这三种方法各有优缺点，使用时要选择最好的。个人习惯于第一种，稳定可靠。

参考链接：http://www.cnblogs.com/engzheng126/archive/2012/05/19/2508778.html

------*/

定位属性

position: absolute; 绝对定位

position: relative; 相对定位

position: fixed;

ul下li的点变为图标

list-style-image:url(../images/i_bg.gif);

边框合并为一条
border-collapse: collapse;

图片对齐

vertical-align:middle;

去ul下li的点

list-style: none

去滚动条

overflow:hidden;

下划线

text-decoration:underline;

使鼠标浮动光标变为“小手”型状。

cursor:pointer;

Chome中：文本框内部轮廓

outline:none;

可延伸长度属性

min-height:123px;(IE6不支持)

_height:123px;(IE6专属)

透明

opacity:0.5

背光效果

box-shadow: 0 1vh 2vh #3887cd;

圆角

border-radius: 15px 15px 0 0;

镂空字体

-webkit-text-stroke: 2px #fff;

Div阴影

.mydiv{
width:250px;height:auto;border:#909090 1px solid;background:#fff;color:#333;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=3);/*ie*/
-moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
-webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/
box-shadow:2px 2px 10px #909090;/*opera或ie9*/
}

立体字

color: #F6F6F6;

text-shadow: 0px 0px 2px #686868, 0px 1px 1px #ddd, 0px 2px 1px #d6d6d6, 0px 3px 1px #ccc, 0px 4px 1px #c5c5c5, 0px 5px 1px #c1c1c1, 0px 6px 1px #bbb, 0px 7px 1px #777, 0px 8px 3px rgba(100, 100, 100, 0.4), 0px 9px 5px rgba(100, 100, 100, 0.1), 0px 10px 7px rgba(100, 100, 100, 0.15), 0px 11px 9px rgba(100, 100, 100, 0.2), 0px 12px 11px rgba(100, 100, 100, 0.25), 0px 13px 15px rgba(100, 100, 100, 0.3);

从上到下的线性渐变：

#grad {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}

从左到右的线性渐变：

#grad {
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 标准的语法 */
}

从左上角到右下角的线性渐变：

#grad {
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}

不可选中文字

-moz-user-select:none;/*火狐*/

-webkit-user-select:none;/*webkit浏览器*/

-ms-user-select:none;/*IE10*/

-khtml-user-select:none;/*早期浏览器*/

user-select:none;

input去焦点光环

outline: medium;

rem

响应式网页设计:rem、em设置网页字体大小自适应

「rem」是指根元素（root element，html）的字体大小，好开心的是，从遥远的 IE6 到版本帝 Chrome 他们都约好了，根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢？

IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了，我可以放肆的使用 rem 了。

em 的计算是基于父级元素的，在实际使用中给我们的计算带来了很大的不便。所以 rem 的出现解救了我这样不会算术的人，再也不用担心父级元素的 font-size 了，因为它始终是基于根元素（html） 的。

比如默认的 html font-size=16px，那么我想设置12px 的文字就是：12÷16=0.75（rem）

当然，你可以引入 CSS 预处理工具（Sass、LESS 、Stylus等）自动计算 rem 值，这里就不一一举例了。

但是像我这样的懒人或者团队开发中还没有引入 CSS 预处理工具的该肿么办呢？只能搬个计算器啪啪啪了吗？别急，你还可以变通一下。我们改变一下 html 的默认 font-size=10px 不就好计算了嘛！Like this：

html{font-size:62.5%; /* 10÷16=62.5% */} body{font-size:12px;font-size:1.2rem ; /* 12÷10=1.2 */} p{font-size:14px;font-size:1.4rem;}

需要注意的是，为了兼容不支持 rem 的浏览器，我们需要在 rem 前面写上对应的 px 值，这样不支持的浏览器可以优雅降级。其实不用太纠结是默认的 font-size:100%，还是设置为 font-size:62.5%，如果你引入了 CSS 预处理工具那么自然可以使用默认值，如果由于其他原因使用 font-size:62.5% 也无可厚非，完全可以在 body 中重置回你需要的默认 font-size。

文本超出省略

display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

判断浏览器是否支持某个css属性

IE兼容

对非A标签使用hover, ie8-不支持

JS

引入一个JS库

jQuery

引入jQuery库

开放云导航栏

$(".sidebar li").each(function(r){//遍历
$(this).click(function(){//点击
$(".sidebar li").css("color","");//清空样式
$(this).css("color","#108cee");//赋予样式
$(".content li").hide();//所有关联样式隐藏
$(".content li").eq(r).show();//赋予关联样式显示
})
});
$(".sidebar li").eq(0).trigger("click");//默认选中第一个

jQuery事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

文档就绪事件

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。

$function(){}//启动就加载

设置内容和属性text()、html() 以及 val()

我们将使用前一章中的三个相同的方法来设置内容：

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

jQuery获取并设置 CSS 类

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

设置 CSS 属性

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");

设置多个 CSS 属性

如需设置多个 CSS 属性，请使用如下语法：

css({"propertyname":"value","propertyname":"value",...});

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

例一

这是段落中的粗体文本。

显示文本

显示 HTML

例二

姓名：

显示值

例三

W3School.com.cn

显示 href 值

设置内容 - text()、html() 以及 val()

我们将使用前一章中的三个相同的方法来设置内容：

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：

实例

$("#btn1").click(function(){

$("#test1").text("Hello world!");

});

$("#btn2").click(function(){

$("#test2").html("Hello world!");

});

$("#btn3").click(function(){

$("#test3").val("Dolly Duck");

});

text()、html() 以及 val() 的回调函数

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 text() 和 html()：

设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。

下面的例子演示如何改变（设置）链接中 href 属性的值：

attr() 的回调函数

jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 attr() 方法：

实例

$("button").click(function(){

$("#w3s").attr("href", function(i,origValue){

return origValue + "/jquery";

});

});

hide() 和 show()

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

$(document).bind('click',function(){
$('#search-suggest').hide();
});

bind()

bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

unbind取消绑定

data()

向元素附加数据，然后取回该数据：

$("#btn1").click(function(){

$("div").data("greeting", "Hello World");

});

$("#btn2").click(function(){

alert($("div").data("greeting"));

});

on()方法

描述：在选定的元素上绑定一个或多个事件处理函数

events一个或多个空格分隔的事件类型，例如click keydown。

selector 一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素，如果为null，那么被选中的元素总是能触发事件。

data事件触发时，要传递给处理函数的event.data。

handler(eventObject)事件触发时，执行的函数。

val()

val() 方法返回或设置被选元素的值。

元素的值是通过 value 属性设置的。该方法大多用于 input 元素。

如果该方法未设置参数，则返回被选元素的当前值。

例子

Name:

设置文本域的值

Attr()

attr() 方法设置或返回被选元素的属性值。

根据该方法不同的参数，其工作方式也有所差异。

例一

设置图像的 width 属性

例2

减少图像的宽度 50 像素

输入框设置

鼠标获取焦点时，将值清空

$(“address”).focus(function(){

var txt_value = $(this).val();

if(txt_value==”请输入邮箱地址”){

$(this.val(“”);

}

});

地址框失去焦点时，如果地址框的值为空，则将地址框的值设置为“请输入邮箱地址”

$(“address”).blur(function(){

var txt_value = $(this).val();

if(txt_value==””){

$(this).val(“请输入邮箱地址”);

}

})

Offset()

$(".btn1").click(function(){

x=$("p").offset();

$("#span1").text(x.left);

$("#span2").text(x.top);

});

获取元素偏移位置方法offset() 方法

offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。

语法

$(selector).offset(function(index,oldoffset))

参数	描述
function(index,oldoffset)	规定返回被选元素新偏移坐标的函数。 · index - 可选。接受选择器的 index 位置 · oldvalue - 可选。接受选择器的当前坐标。

例：

鼠标滚轮事件

键盘事件

transitionend事件

闭包的作用

(function($){

//do something

})(jQuery);

作用：避免全局依赖

避免第三方破坏

兼容jQuery操作符$和jQuery

开发方式

类级别组件开发

即给jQuery命名空间下添加新的全局函数，也称为静态方法。

jQuery.myPlugin=function(){

//do something

}

例如：$.Ajax()、$.exteng()

对象级别组件开发

即挂在jQuery原型下的方法，这样通过选择器获取的jQuery对象实例也能共享该方法，也称为动态方法。

$.fn.myPlugin=function(){

//do something

};

这里的$.fn===$.prototype

例如：addClass()、attr()等，需要创建实例来调用

链式调用

$(“div”).next().addClass()….

$.fn.myPlugin=function(){

return this.each(function(){

//do something

});

};

代码说明

-return this 返回当前对象，来维护插件的链式调用

-each 循环实现每个元素的访问

单例模式

$.fn.MyPlugin=function(){

var me=$(this),

instance=me.data(“myPlugin”);

if(!instence){

me.data(“myPlugin”,(instance=new myPlugin()));

}

};

代码说明

如果实例存在则不再重新创建实例

利用data()来存放插件对象的实例

jQuery validate框架

$(document).ready(function(){
$("#from_apply").validate({
rules:{
qq:{
required:true,//必填
number: true
}
}
});
});

AJAX

Ajax发送请求的url地址与服务器地址必须是同一域名下

登陆页面操作

$(function(){

//元素绑定全局ajaxStart事件

$(“#divMsg”).ajaxStart(function(){

$(this).show().html(“正在发送登陆请求。。。”);

})

//元素绑定全局ajaxStop

$(“#divMsg”).ajaxStop(function(){

$(this).show().html(“请求处理已完成。。。”).hide();

})

$(“#Button1”).click(function(){//按钮点击事件

var $name = $(“#txtName”);//用户名

var $pass = $(“#txtPass”);//密码

if($name.val()!=””&&$pass.val!=””){

UserLogin($name.val(),$pass.val());//。。。

}else{

if($name.val()==””){}

alert(“用户名不能为空!”);

$name.focus();//获取焦点

return false;//阻止程序往下走

}else{

alert(“密码不能为空!”);

$pass.focus();

return false;

}

}

})

});

异步提交

function UserLogin(name,pass){

$.ajax({

type:”GET”,

url:”index.php”,

data:”action=Login&d=” + new Date() + “&name=”+name+”&pass”+pass,

success:function(data){

if(data==”1”){

window.location = “ChatMain.html”;

}else{

alert(“用户名或密码错误！”);

return false;

}

}

});

}

控制Div高度为滚动

css:overflow-y:scroll;

$(function(){

发送按钮功能实现

$(“#Button1”).click(function(){//按钮点击事件

var $content = $(“#txtContent”);//发送内容

if($content.val()!=””){

SendContent($content.val());

}else{

alert(“发送不能为空！”);

$content.focus();

return false;

}

});

})

发送内容函数

function SendContent(content){

$.ajax({

type:”GET”,

url:”index.php”,

data:”action=SendContent&d=” + new Date() + “&content” + content,

success:function(data){

if(data==”1”){

GetMessageLite();

$(“#txtContent”).val(“”);

}else{

alert(“发送失败！”);

return false;

}

}

});

}

//显示表情图标，并将表情图标ID号码显示在文本框。

var $a=””;

$(“#c”).html($a);

function InitFace(){

var strHTML = “”;

for (var I =1;i<=10;i++){

strHTML +=”;

}

$(“#divFace”).html(strHTML);

}

InitFace();

$(“table tr td img”).click(function(){

//表情图标单击事件

var strContent = $(“#txtContent”).val()+”<: + this.id + ”:>”;

$(“#txtContent”).val(strContent);

})

get() 方法

语法：$.get(url,callback,'json');

语法

$(selector).get(url,data,success(response,status,xhr),dataType)

参数	描述
url	必需。规定将请求发送的哪个 URL。
Data	可选。规定连同请求发送到服务器的数据。
success(response,status,xhr)	可选。规定当请求成功时运行的函数。 额外的参数： · response - 包含来自请求的结果数据 · status - 包含请求的状态 · xhr - 包含 XMLHttpRequest 对象
dataType	可选。规定预计的服务器响应的数据类型。 默认地，jQuery 将智能判断。 可能的类型： · "xml" · "html" · "text" · "script" · "json" · "jsonp"

事件绑定

事件代理

jQuery :

语法：$('document').delegate('li','click','fn');

例：$(document).delegate('li','click',function(){
var keyword =$(this).text();
location.href='http://cn.bing.com/search?q='+keyword;
});

seo

网页代码优化

1