现在的位置: 首页 > 综合 > 正文

菜鸟写jquery入门教程(for web前端开发群4)(01)

2013年06月29日 ⁄ 综合 ⁄ 共 1510字 ⁄ 字号 评论关闭

呃,大概是这样,碰到一笨学生, 并鉴于群里有这么多人在学jquery,好吧。既然大家都懒得去看帮助,我来开篇写点什么吧。

JQuery 起源 ? 

这个没必要介绍了,各位可以去百度一下。谈谈个人对JQ的感受吧。强大易用。功能稍弱,不过应付一般的应用足矣,如果要做一些企业级的应用,则要考虑EXTJS或者DOJO,mootools不错,个人非常喜欢。

但是,一般的前端开发工作是足够了。况且它会有许多许多插件和扩展。当然。这是高级内容了。

呃,大概西红柿和臭鸡蛋已经在手里握得发烫了。OK,清下嗓子,开篇了!

1 您要先了解$(document).ready()了..

恩,哪么什么是$(document).ready()呢, 在理解这个之前,您大概听说过jquery强大的dom操作能力和灵活的选择器功能吧。

这个小小的$()函数,几乎是jquery里最优秀的家伙了,它支持CSS3.0的选择符,至于它的强大,留待以后再说好了。您现在要了解的就是,它其实是一个选择器,用来选择DOM里的元素(事实上它就是javascript里的getElementById..之类选择方法的超级豪华扩展白金版)

说了这么多 $(document)意思就是说咱已经得到了document这个Element?

 oh no! 请记住,jquery里的对象和javascript里的对象是不一样的。所以 $(document) != document !

$(document)是jquery对javascript里的document进行扩展和封装之后的一个object..

完蛋了。大抵已经被我绕晕了。

好吧。简单来说,我们已经通过 $(document)得到了一个 document对象好了。然后,这个document对象有个ready()方法 (不要试图在原生态的js里写document.ready()哦 , 这个ready()方法只是在jquery里才有哦)

好。大概已经理解这个了。意思就是说文档加载的时候就执行ready()里的参数 (这个参数必须是function)

有人会说js里有window.onload! 我只能说哪个太烂了。如果网页里的图片多了加载非常慢,哪么... 而JQUERY里的.ready()是在dom加载完成后就执行。所以速度是非常快的。

哪么,明白了吧。我们的第一个代码就应该这么写好了。 

 $(document).ready(

    function(){

       //好了。我们的代码写在这里了

       alert('hello world');

    }

);

别懒了,尽管是简单的代码。敲一遍跑跑看?

可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。但我建议写在一个ready()里面。

哦,我真是猪脑袋,居然忘了告诉小鸟们该如何使用jquery框架, 其实百度一下都会有。还是在这写一下吧。

ok 您不是有了一个新建的html文件了么? 没有就快去建一个吧。然后在head中间写入以下语句。

<script language="javascript" type="text/javascript" src="jquery.js"></script>

注意你的src 指向你的jquery文件。什么?没有jquery文件,去下载啊。赶紧的。 小菜鸟我写这篇教程的时候是 1.2.6版。

写完这个之后就可以开始你的js代码了。你可以用外联文件或者直接写在页面里也可以。随意了。

呃,不要让框架约束你的思想。

好了。第一部分就是如此了。 虽然写得有点晕,但至少你会踏出第一步,不是吗?

赶紧调试好你的 Hello world吧。 Follow  ME...

抱歉!评论已关闭.