前端框架

前端框架

Dom Ready和Dom Load

1、Dom Ready

真不知道这个标题该怎么取,暂时就先凑活着用了。

用jQ的人很多人都是这么开始写脚本的:


$(function(){

// do something

});

其实这个就是jq ready()的简写,他等价于:


$(document).ready(function(){
//do something
})
//或者下面这个方法,jQuer的默认参数是:“document”;
$().ready(function(){
//do something
})

这个就是jq ready()的方法就是Dom Ready,他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。

一般情况先一个页面响应加载的顺序是,域名解析-加载html-加载js和css-加载图片等其他信息。

那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间,就可以操作Dom了。

2、Dom Load

用原生的js的时候我们通常用onload时间来做一些事情,比如:


window.onload=function(){
//do something
}
//或者经常用到的图片,假设这个
document.getElementById("imgID").onload=function(){
//do something
}
这种就是Dom Load,他的作用或者意义就是:在document文档加载完成后就可以可以对DOM进行操作,document文档包括了加载图片等其他信息。 Read More »

推荐一个js框架——Como JS

como1

  • 对原生对象如String扩展常用函数
  • 支持类的声明与继承,简易Ajax
  • 简约而快速的CSS选择器
  • 高效、易操作的动画执行
  • 强大的JS包扩展机制,支持CSS按需加载
  • 非侵入式切换调用,与第三方框架并存
  • Como是一款代码简易而功能强大的Javascript框架,这也是开发者在工作过程中的经验总结,实用性强;通过它,能够简化Javascript代码开发,增强代码重用性,能够异步按需加载js和css文件,增强page的加载速度; Read More »

    MTJS DOM部分封装基本结束

    MTJS从开始到现在差不多一个月了,DOM部分封装基本结束,接下来就要封装事件了。

    http://code.google.com/p/mtjs/source/browse/trunk/MT.core.js

    文档页面是:

    http://mtjs.googlecode.com/svn/trunk/MT.core_docs/index.html

    欢迎大家提出宝贵的意见和建议!

    MTJS中的元素显示和隐藏的封装

    页面元素的显示和隐藏在前端开发中经常用到的,原来我是这样写的,

    
    hide: function(el) {
           el.style.display = "none";
    }
    show: function(el) {
            el.style.display = "block";
        }
    

    这里在show函数上就有个问题,如果元素是display:inline话就有问题了,然后我又改成了:

    
    hide: function(el) {
            el.style.display = "none";
    }
    show: function(el) {
            el.style.display = " ";
        }
    

    Read More »

    像写css选择器一样写jQuery选择器(三)【jQuery入门六】

    接《像写css选择器一样写jQuery选择器(二)

    五、Jquery的子元素选择器

    1. :first-child :匹配每个父元素的第一个子元素,相当于E:nth-child(0),例如:$(“ul li:first-child”);
    2. :last-child :匹配每个父元素的最后一个子元素,例如:$(“ul li: last -child”);
    3. :nth-child(index/even/odd/equation):匹配每一个父元素的第N个子或奇偶元素,例如:$(“ul li:nth-child(2)”);
    4. :o nly-child :如果某个元素是父元素中唯一的子元素,那将会被匹配$(“ul li:only-child”);

    六、子元素选择器和过滤性选择器的一些区别

    :first-child和:first:

    :first只匹配一个元素,而:first-child将为每个父元素匹配一个子元素,所以:first-child匹配出来的是一个集合当然也有可能只匹配一个元素,而:first永远只能匹配到一个元素。

    :last-child和:last的区别道理也是一样的; Read More »

    像写css选择器一样写jQuery选择器(二)【jQuery入门五】

    接《像写css选择器一样写jQuery选择器(一)

    四:简单的过滤选择器

    1. :animated:匹配所有正在执行动画效果的元素集合;
    2. :eq(index):匹配索引为 index 的一个元素,例如:$(“div:eq(0)”)//第一个div;
    3. :even:匹配索引为偶数(双数)的元素集合,例如:$(“div:even”);
    4. :o dd:匹配索引为奇数(单数)的元素集合,例如:$(“div:odd”);
    5. :first:匹配找到的第一个元素,等价于:eq(0),例如:$(“div:first”);
    6. :gt(index) :匹配索引大于 index 的 元素集合,例如:$(“div:gt(0)”)//除了第一个div外的所以div;
    7. :lt(index):匹配索引小于于 index 的 元素集合,例如:$(“div:lt(0)”);
    8. :header:匹配h1-h6的所有 元素集合;
    9. :last:匹配找到的最后一个元素,例如:$(“div:last”)//最后一个div;
    10. :not(selector):去除所有与给定选择器匹配的元素,例如:$(“input:not(:checked)”)//除了被选中的所有input;

    示例代码:

    提示:你可以先修改部分代码再运行。

    像写css选择器一样写jQuery选择器(一)【jQuery入门四】

    jQuery选择器有很大一部分的写法和css选择器的写法非常相识,

    我们先来看看css选择器的写法;这些对于你应该不是很陌生,呵呵。那么我们开始学习jQuery选择器。

    一、简单的jQuery选择器

    首先看看最简单的jQuery选择器,再次说明jQuery选择器获取的DOM元素返回的是一个数组,及时他只返回一个元素:

    查看上一篇jQuery选择器入门【jQuery入门三】中的$(”div”):标签名,$(”#nickName”):ID属性,$(”.user”):样式名及例子,

    1. $(”div”):标签名,取得DOM文档中所有div标签的元素,返回的是一个元素集合,$(”.user”):样式名:
    2. $(”#nickName”):ID属性,取得DOM文档中ID为nickName的一个元素(ps:一个文档中ID是唯一的),返回的是一个元素;
    3. $(”.user”):样式名,取得DOM文档中class为user的所有元素,返回的是一个元素集合;

    这里再补充1个通配符,即*:

    $(“*”):通配符,取得DOM文档中所有节点元素;例如:$(“*”).css(“color”,”#FF3300″);则整个文档的文字颜色都会显示红色。至于.css(“color”,”#FF3300″)给元素加上color:#FF3300的css样式,我们会在后面再给大家详细解释。

    大家可以看看这个我们写的css选择器非常的相似,下面的例子也是一样,这样我们就非常容易理解jQuery选择器的含义了

    二、jQuery的组合选择器: Read More »

    jQuery选择器入门【jQuery入门三】

    jQuery选择器是我们学jQuery的真正的开始也是我们必须做的第一件事情,jQuery选择能让我们取得我们想要的几乎所有的页面DOM对象(如果你不知道什么是DOM元素,google一下“什么是DOM”)。确切的说我们获取的应该是jQuery对象,这在上面的章节中我已经说过两者的区别和转换。

    大家知道javascript变成中很大一块是对DOM的操作,当我们获取了DOM元素后,我们就可以对改元素绑定事件,增删属性等操作,通过这些操作可以实现很多绚丽的页面效果和富因特网的应用,但是我们在做这些事情之前首相要通过DOM元素的钩子找到该DOM元素,javascript是非常灵活的语言,查找DOM元素和DOM元素的钩子方法非常多,再者由于各个浏览器对js dom属性解析的少许区别,也给我们带来了不少麻烦。jQuery的选择器就解决了这些问题,而且功能非常强大。

    jQuery选择器函数–$()

    大家可以去很多jQuery程序,绝大部分的函数都是从$()开始的,$()函数简化了javascript获取DOM元素的复杂性,消除了使用for循环获取一组DOM元素,所以$()函数获取的DOM元素其实是一个DOM元素组成的数组。

    简单的$()

    这些是最常用的几个例子:

    1. $(“div”):标签名,取得DOM文档中所有div标签的元素,返回的是一个元素集合;
    2. $(“#nickName”):ID属性,取得DOM文档中ID为nickName的一个元素(ps:一个文档中ID是唯一的),返回的是一个元素;
    3. $(“.user”):样式名,取得DOM文档中class为user的所有元素,返回的是一个元素集合;

    我们来看一个简单的例子:

    Read More »

    jQuery对象和DOM对象【jQuery入门二】

    jQuery对象和DOM对象;这是我第一个碰到的问题。

    jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法,但是不能使用DOM的方法;例如:

    $(“#img”).attr(“src”,”test.jpg”); 这里的$(“#img”)就是获取jQuery对象;

    DOM对象就是Javascript固有的一些对象操作。DOM对象能使用Javascript固有的方法,但是不能使用jQuery里的方法。例如:

    document.getElementById(“img”).src=”test.jpg”;这里的document.getElementById(“img”)就是DOM对象;

    $(“#img”).attr(“src”,”test.jpg”); 和document.getElementById(“img”).src=”test.jpg”;是等价的,是正确的但是$(“#img”).src=”test.jpg”;或者document.getElementById(“img”).attr(“src”,”test.jpg”); 都是错误的

    再说一个例子:就是this,我在写jQuery的时候经常这样写:

    this.attr(“src”,”test.jpg”);

    可是就是出错。其实this是DOM对象,而

    .attr(“src”,”test.jpg”)

    是jQuery方法,所以出错了。要解决这个问题就要将DOM对象转换成jQuery对象,例如:

    $(this).attr(“src”,”test.jpg”);

    1.DOM对象转成jQuery对象:

    对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象) Read More »

    学jQuery前的准备【jQuery入门一】

    昨天收到了cssrain的赠书《锋利的jQuery》,看了一个章节,非常不错,这里先推荐一下!

    今天开始我将博客的重点放在jQuery上了,重新开始学习jQuery,并将重新学到的东西和大家分享,有不对或不妥的地方希望大家能毫无保留的留言指出,大家一起学习,一起进步。

    至于什么是jQuery,jQuery的优缺点,jQuery和其他javascript库的对比我就不说了,网上已经有很多了,我这里只说一些可能更关心的一些东西。

    我没js基础,能学jQuery吗?

    能!很多人说jQuery非常容易上手,不懂js也能学的很好,是的,但是我相信如果你懂得js能更好的学习jQuery;

    有没有支持jQuery语法和语法提示的编辑器或工具呢?

    有,而且很多。这里推荐最常用的几款:

    1.aptana

    官方下载:http://www.aptana.com/

    aptana最强大的就是支持js及各个有名的js框架的语法提示,当然包括jQuery,看一些关于aptana的使用,

    Aptana使用入门一(中文)

    web开发利器Aptana studio 1.2(下载,破解,汉化)

    aptana要支持jQuery语法提示只要在References窗口下的Global References下勾选jQuery就可以了,如图:

    2009-07-04_084613 Read More »