develop's blog,about web&game&mobile&so on!
标签 Tag : web

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使用技巧

3e-etage

<Category: web> 发表评论

本文来自: 3e-etage

Revive Africa

<Category: web> 发表评论

We want our vision to be clear, but more than that, we want to be clear that our vision is BIG! We want to provide and do things for the children in Sierra Leone that we cannot possibly do in our own power.

本文来自: Revive Africa

3P Interactive

<Category: web> 发表评论

3P Interactive is an award winning digital marketing agency that creates digital strategies and website marketing solutions. 3P Interactive partners with your brand and drives online visibility to increase ROI through internet marketing, creative services, digital strategy, and development.

本文来自: 3P Interactive

一套WEB UI 的psd图标

<Category: web> 2 条评论

WEB UI Treasure Chest v 1.0

WEB_UI_TreasureChest_v1

Chest contains:

  1. Cursors
  2. Checkboxes
  3. Radio Buttons
  4. Buttons
  5. Forms
  6. Ribbons
  7. Page Corners
  8. Calendar (I hate to make it every f****ng time)
  9. Scrollbars
  10. Signs
  11. Tooltips bubbles
  12. Small elements like bullets, arrows, paypal logo, visa etc

 

downloadbutton

本文来自: 一套WEB UI 的psd图标