Jqery入门.doc

引用 JQuery入门到精通系列第一篇：Hello JQuery 2010-06-22 07:01:43| 分类： Jquery | 标签：|字号大中小 订阅本文引用自嶶凉昜祥。JQuery入门到精通系列第一篇：Hello JQuery 引用嶶凉昜祥。的 JQuery入门到精通系列第一篇：Hello JQuery本文为什么要介绍精心整理Jquery系列文章呢？而不是整理其它JS类库，因为JQuery是最流行，全球最多人使用，最丰富插件，功能最强大的JavaScript库。所以精心整理Jquery入门到精通系列文章给大家，多多支持哦。一、JQuery特点：1.轻量级：只有几十K大，压缩后一般只有18K。2.强大选择器：拥有类似于CSS的选择器，可以对任意DOM对象进行操作3.动画操作不再复杂：可以使用很简单的语句实现复杂的动画效果4.Ajax支持：$.ajax()从底层封装了ajax的细节问题。5.浏览器兼容性高：不用再担心客户端浏览器兼容性问题。6.连式操作：同一个JQuery对象上的多个操作可以连写，无需分开写。7.隐式迭代：自动对获取到的JQuery对象迭代操作，不需要再编写循环代码。8.丰富的插件：大量的稳定实用的插件可以大大提高我们开发效率。9.开源：自由使用，集全世界程序员的智慧，有更广阔的发展前景。二、JQuery配置：首先：去下载最新的JQuery库；：完整，无压缩版，可供学习、开发。jquery-1.3.x.min.js ： 压缩后的版本，主要用于项目的发布。在这里我们主要使用jquery-1.3.x.js来开发如果你使用的是VS2010 Beta2，在新建网站的时候会自动导入JQuery1.3.2库，并放在Scripts文件夹中。这里我都使用VS2010 Beta2为开发工具。图1然后：在使用的时候需要在页面的中导入jquery-1.3.x.js文件，在VS2010中我们可以从“解决方案管理器”中拖动js文件到页面中就可以生成脚本导入语句。图2一般来说JQuery的导入语句应当写在比较靠前的地方。即：在我们使用JQuery对象之前导入JQuery库，否则会找不到JQuery对象。三、第一个JQuery程序： $(document).ready( function () alert(hello world); ); .首先要导入jquery库文件在JQuery中$代表的是JQuery，$(document)等价于JQuery(document)。$(document).ready(function()/*.*/);上面这段代码会在以后的JQuery代码中经常用到。它类似于JavaScript的window.onload();在文档加载完成后会执行function()中的内容。但它们之间又有细微的不同之处：a.执行时机不同：window.onload()是等待页面所有内容加载完成后被触发。而$(document).ready();是等待页面中DOM元素绘制完成后被触发。如果页面中有大量图片，window.onload()是等待所有图片都显示完成后再被触发；而$(document).ready();是页面中HTML生成完成后就被触发，可以此时图片还没来得及显示出来。b.编写个数不同：如果页面中有多个$(document).ready()，那这些代码都能被执行。如：$(document).ready( function () alert(hello world); ); $(document).ready( function () alert(hello again); ); 执行结果：会依次弹出两个提示框。如果页面中有多个window.onload()，那只有最后一个的代码会被执行如： window.onload=function() alert(hello world); ; window.onload=function() alert(hello again); 执行结果：只会弹出一个提示框“hello again”。四、稍微复杂的点JQuery程序 $(document).ready( /页面加载执行 function () $(#btn).click( /绑定按钮点击事件，$(#btn)代表id是btn的DOM对象。 function () $(#dd).html($(#txt).val(); /将文本框中的内容写入id=dd的div中去。 ); ); 执行的效果是：当点击按钮的时候会在div中显示文本框中的内容（原创：灰灰虫的家/grayworm）五、JQuery的主要知识点：JQuery看似复杂，实际它就是一种客户端的脚本。我们只有接受JQuery这种语法格式才能学好。学习JQuery不要被它纷繁复杂的表现特效所迷惑，特效你是学不完的，但“万变不离其宗”，我们需要学习的是JQuery中“根本的东西”和“相对稳定的东西”，并熟练应用，然后“以不变应万变”，达到掌握JQuery的目的。在JQuery学习中要学习哪些东西呢？学习JQuery必须的基础是CSS样式表，如果对样式表一无所知，是学不懂JQuery的。1.JQuery选择器与DOM操作选择器是JQuery中非常强大的功能，也是它比JavaScript表现更方便的一种功能，它是学习JQuery 的基础。DOM操作是所有编程语言的必备功能，通过它我们能够解析DOM树，能够对HTML页面进行全面操控。2.JQuery的事件与动画通过JQuery的事件与动画我们可以用很简单的代码实现很华丽的动画效果。3.JQuery实现Ajax过去在JavaScript中实现Ajax有两个难点：1.考虑客户端代码与浏览器的兼容性；2.对XMLHttpRequest对象的操作很多，消息我们很多的精力。而JQuery可以很好地解决这两个问题，当然还是免不了要写一些JQuery代码的。4.插件的使用我们学习JQuery的目的是用它来简化开发过程中复杂应用的，插件可以为我们提供高效健壮的解决问题的方法，好多功能没有必要我们用JQuery 一一实现，我们应当知道要实现这个功能应当使用什么样的插件，以及如何使用这个插件。所以插件的使用应当是JQuery的学习重点。六、本系列的示例页面：页面： id为one,class为one的div class为mini id为two,class为one,title为test的div. class为mini,title为other class为mini,title为test class为mini class为mini class为mini class为mini class为mini class为mini class为mini,title为tesst style的display为none的div class为hide的div 包含input的type为hidden的div 正在执行动画的span元素.标式表style.css：div,span,p width:140px; height:140px; margin:5px; background:#aaa; border:#000 1px solid; float:left; font-size:17px; font-family:Verdana; div.mini width