develop's blog,about web&game&mobile&so on!
存档 Archives : 07月, 2010

jquery 基础总结

<Category: web> 发表评论

 $(document).ready(function(){})
//相当于onload事件

jQuery对象与dom对象的转换
$(“#msg”).html();
$(“#msg”)[0].innerHTML;
$(“#msg”).eq(0)[0].innerHTML;
$(“#msg”).get(0).innerHTML;

如何获取jQuery集合的某一项
$(“div”).eq(2).html();              //调用jquery对象的方法
$(“div”).get(2).innerHTML;       //调用dom的方法属性

同一函数实现set和get
$(“#msg”).html();              //返回id为msg的元素节点的html内容。
$(“#msg”).html(“<b>new content</b>”);
$(“#msg”).text();              //返回id为msg的元素节点的文本内容。
$(“#msg”).text(“<b>new content</b>”);

$(“#msg”).height();              //返回id为msg的元素的高度
$(“#msg”).height(“300″);       //将id为msg的元素的高度设为300
$(“#msg”).width();              //返回id为msg的元素的宽度
$(“#msg”).width(“300″);       //将id为msg的元素的宽度设为300

$(“input”).val(“);       //返回表单输入框的value值
$(“input”).val(“test”);       //将表单输入框的value值设为test

$(“#msg”).click();       //触发id为msg的元素的单击事件
$(“#msg”).click(fn);       //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法

集合处理功能
$(“p”).each(function(i){this.style.color=['#f00','#0f0','#00f']})
// 为索引分别为0,1,2的p元素分别设定不同的字体颜色。

$(“tr”).each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效果

$(“p”).click(function(){.html())})
//为每个p元素增加了click事件,单击某个p元素则弹出其内容\

操作元素的样式
$(“#msg”).css(“background”);              //返回元素的背景颜色
$(“#msg”).css(“background”,”#ccc”)       //设定元素背景为灰色
$(“#msg”).height(300); $(“#msg”).width(“200″);       //设定宽高
$(“#msg”).css({ color: “red”, background: “blue” });//以名值对的形式设定样式
$(“#msg”).addClass(“select”);       //为元素增加名称为select的class
$(“#msg”).removeClass(“select”);       //删除元素名称为select的class
$(“#msg”).toggleClass(“select”);       //如果存在(不存在)就删除(添加)名称为select的class

绑定事件
$(“p”).bind(“click”, function(){.text());});       //为每个p元素添加单击事件
$(“p”).unbind();       //删除所有p元素上的所有事件
$(“p”).unbind(“click”)       //删除所有p元素上的单击事件

本文来自: jquery 基础总结

div+css使用技巧

<Category: web> 发表评论

div+css是网页排版中不可或缺的,在这里总结了一下工作中遇到的一些这方面的问题,以及这些问题的解决方法,在这里一起与大家分享(*^__^*) 嘻嘻……
1,ul方面的问题:默认的ul的margin和padding不是0,如果在导航中用到了左浮动的li,往往会把外部

的div撑大,导致页面变形,这就需要我们在写代码的时候不要忘记 ul{margin:0px; padding:0px;}

2,img方面的问题:这里牵涉的不同浏览器的问题,ie6是一直让网页设计师最头疼的一个问题,关于图片

,这里有一个小小的问题,有时ie6里显示的图片height总是要大于准确值,这里就需要我们记住下面这

一点 img{ display:block}

3,overflow方面问题:有时我们会看到,一些公司的注册协议都是好长好长的,但又不能把页面拉的太

长,这就用到了overflow,我们可以把div的style里加上这个:overflow:auto

4,小窗口弹出的问题:当我们点击某个按钮,可能会看到一个小窗口弹出,而窗口其它的部分都变了灰

色,这是怎么实现的呢,其实很简单div+css就可以实现:
css部分:
.black_overlay
{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .80;
    filter: alpha(opacity=50);
}
.white_content
{
    display: none;
    position: absolute;
    top:20%;
    left: 30%;
    width:outo;
    background-color: white;
    z-index: 1002;
    overflow: auto;

}

.white_content2
{
    display: none;
    position: absolute;
    top: 20%;
    left: 18%;
    width:896px;
    background-color: white;
    z-index: 1002;
    overflow: auto;
    text-align: center;
}
.qpshcom
{

    background-color: #efefef;
    color: #666666;
    border-width: 1px;
    border-color: #cccccc;
    border-style: solid;
    margin: 6px;
    padding: 6px;
    font-size: 14px;
    line-height: 200%;
    float: midden;
}
div部分:

打开按钮部分:onclick=”document.getElementById

(‘light’).style.display=’block’;document.getElementById(‘fade’).style.display=’block’”
关闭按钮部分:onclick=”document.getElementById

(‘light’).style.display=’none’;document.getElementById(‘fade’).style.display=’none’”

4,关于float的问题:有时候一些div会挤到页面的上方,把页面挤破掉,这里可能就是浮动引起的,这

时候我们就用到了这个:clear:both,很不错的解决方法,不妨一试。

5,height等于1px的div,在ie6中可能并不是1px,那怎么解决呢?不妨试一下:在这个div的style里加

上font-size:1px;这样就ok了。

6,下面再说一下id和class的问题:当一个div要在页面中多次使用时,不要用id,要用class,还有就是

要用引用js的时候,样式最好不要用id,因为id要留给js使用,当程序员写后台用的是.net时,最好不用

用id,id要留给程序员用,前台我们就用class好了。

7,还是img问题,页面中最好不要用大块背景,能平铺的要平铺,否则加载起来会很慢,也不利于以后的

优化和扩展,当然也有些大的网站,现在都尽量把背景统一放到一张图片上,用background-postion来取

得背景,这样其实也好,背景虽然大了点,但只需统一加载一次,就ok了,速度也不会太慢,可以好好学

习一下。

8,img的格式问题:最好的格式就是gif格式,即确保了背景透明,在ie6中又不会有阴影,有时gif图片

会有锯齿,这就需要我们保存成web格式,设置一下matter,matter的值用背景颜色的值越相近越好。(

当然有时迫不得已png的图片也会用到,这时就需要另外想办法了,前面我也曾提到过,大家不妨一看)

9,链接问题:
.link:link{}
.link:visited{}
.link:hover{}
.link:active{}
有一点,visited与hover的顺序一定不能倒换,否则ie6中会大大的问题。

10,css编码问题:@charset “utf-8″;注意这行代码,utf-8与g把gb2312是比较常用的两种编码方式。
       

本文由 站酷网fangjing19881116 原创,转载请保留此信息,多谢合作。

本文来自: div+css使用技巧

编写Smarty遇到的编码问题

<Category: web> 1 条评论

今天在写Smarty的时候,在ie6里网页无法居中,在ff和其他浏览器都非常正常,网上查了好久发现,说去w3c验证一下,会看到是我的html里面有BOM(万国码档案签名:Byte Order Mark, U+FEFF),真晕啊!然后把要输出smarty的php的编码中的bom去掉就可以了。。。

btw:我当时用的编辑器是FlashDevelop,在文件-编码-save byte order mark选项里面。

以下引用网络:

在Dreamweaver 中写了个简单的的index.php:

<?php
include_once(“./class.config.php”);
$Smarty->display(“Index.html”);
?>

顺手在标题中输入了几个字:企业资源管理系统,index.html是使用div+css进行布局的,单独打开index.html可以看到居中显示,而调用smarty后总是居左显示.

后来用ultraedit打开index.php,发现文件内容是:

<title>企业资源管理系统</title>

<?php
include_once(“./class.config.php”);
$Smarty->display(“Index.html”);
?>

将<title>企业资源管理系统</title>去掉后显示正常.

引用原文:

发现自己总在走前人走过的路,犯前人犯过的错…

最近使用smarty+CSS模板,遇到了部分CSS无法解析的问题,尝试了很多方法,在几乎放弃的时候找到了这篇文章,一看日期,竟然是2006年11月的…

新项目完全采用UTF-8编码,这是我的夙愿,可就是这个麻烦的UTF-8编码,让我闹心了数小时!
今天下午制作好了页面的模板,当载入Smarty运行的时候,发现在Firefox下正常显示,而在IE下,原本好好居中显示的页面一下变得偏左了,而且部分CSS也无法载入,字体极其难看!查阅代码,无法找出任何破绽,而不用Smarty转而采用原始的PHP+HTML混写的时候则无此现象,因此开始怀疑Smarty有问题,上phpchina.cn求助,无人解答;自己又下载了Smarty的最新版本,依然无法解决这个故障,心灰意冷,甚至打算在项目中放弃Smarty。
根据以往的经验,我开始怀疑是当PHP输出HTML的时候向其中加入了额外的不可见代码,于是将PHP输出的内容原封不动保存为HTML,然后提交到validator.w3.org进行XHTML验证,果然,验证失败,提示文件头部被加入了BOM(万国码档案签名:Byte Order Mark, U+FEFF)标记,妈的,就是这个垃圾标记,已经不是第一次害我了!
于是,重新打开DM和UltraEdit重新对PHP页面以及模板页面进行编码转换,去除了其中的BOM标记,一切正常!
这里附上一篇写的很全面的有关BOM的文章,希望能帮助和我一样受害的人。
=================================================================

utf-8 保存文件的 bom 问题

大家都知道 utf-8 是一种在web应用中经常使用的一种 unicode 字符的编码方式,使用 utf-8 的好处在于它是一种变长的编码方式,对于 ANSII 码编码长度为1个字节,这样的话在传输大量 ASCII 字符集的网页时,可以大量节约网络带宽。不过如果大家使用 utf-8 编码来编写网页的时候, 往往会因为 bom (Byte Order Mark) 的问题,导致网页中经常出现一些不明的空行或者乱码字符。 这些都是因为 utf-8 编码方式对于 bom 不是强制的。因此 utf-8 编码在保存文件的时候,会出现不同的处理方式。

比如有的浏览器(FireFox)可以自动过滤掉所有 utf-8 bom , 有的 (IE) 只能过滤掉一次 bom (为什么是一次? 当你出现 Include 多次文件时就会碰上这个问题了:) );

对此 w3.org 标准 FAQ 中对此问题有一个专门的描述:

http://www.w3.org/International/questions/qa-utf8-bom

在此个人认为对于这个问题最好的处理方式就是在编辑(保存)文件的时候统一去除 utf-8 bom , 同时又必须使得编辑器可以正确读出 utf-8 字符集,但可惜目前 windows 系统中对于保存文件的处理方式缺省情款下都会自动加上 bom.

(通过抓包工具分析, google 中文页面统一使用 utf-8 编码方式,下载的页面中没有带有 bom 标识)

操作系统: WindowsXP Professional , 缺省字符集:中文

1) notepad : 可以自动识别出没有带 bom 的 utf-8 编码格式文件,但不可以控制保存文件时是否添加 bom , 如果保存文件,那么会统一添加 bom 。

2)editplus : 不能自动识别出没有 bom 的 utf-8 编码格式文件,保存文件为 utf-8 时会自动添加 bom

3) UltraEdit : 对于字符编码的功能最为强大, 可以自动识别带 bom 和不带 bom 的 utf-8 文件 (可以配置) ; 保存的时候可以通过配置选择是否添加 bom.

(特别需要注意的是,保存一个新建立的文件时,需要选择另存为 utf-8 no bom 格式)

后来发现 Notepad ++ 也对于 utf-8 bom 支持比较好,推荐大家使用。

本文来自: 编写Smarty遇到的编码问题