《Jquery基本语法.docxVIP

一、jQuery的基本用法: 随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的有Prototype、YUI、 jQuery、mootools、Bindows以及国内的JSVM框架等，jQuery是继prototype之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006 年初创建的，它有助于简化 JavaScript 以及Ajax 编程。它具有如下一些特点： 1. 代码简练、语义易懂、学习快速、文档丰富。 2. jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。 3. jQuery支持CSS1-CSS3,以及基本的xPath。 4. jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。 5. 可以很容易的为jQuery扩展其他功能。 6. 能将JS代码和HTML代码完全分离，便于代码和维护和修改。 7. 插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。使用方法(同prototype)在需要使用JQuery的页面中引入JQuery的js文件即可。例如：script type=text/javascript src=js/jquery.js/script引入之后便可在页面的任意地方使用jQuery提供的语法。二、学习教程及参考资料请参照《jQuery中文API手册》和/visual/cn/index.xml 推荐两篇不错的jquery教程：《jQuery的起点教程》和《使用 jQuery 简化 Ajax 开发》(说明：以上文档都放在了【附件】中)三、语法总结和注意事项1、关于页面元素的引用通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。如:01.$(#msg).html();--通过ID02.$(div).html(); $(input).val(); --通过元素名(jQuery获取的是一个集合)03.$(div p); --第一行代码得到所有div标签下的p元素。 04.$(div.container) --第二行代码得到 class为container的div元素 05.$(div #msg); --第三行代码得到div标签下面id为msg的元素。 06.$(table a,context); --第四行代码得到context为上下文的table里面所有的连接元素。 2、jQuery对象与dom对象的相互转换2.1只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，普通的dom对象一般可以通过$()转换成jquery对象。如：$(document.getElementById(msg))则为jquery对象，可以使用jquery的方法。2.2由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。如：$(#msg)[0]，$(div).eq(1)[0]，$(div).get()[1]，$(td)[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。以下几种写法都是正确的：01.$(#msg).html();02.$(#msg)[0].innerHTML;03.$(#msg).eq(0)[0].innerHTML;04.$(#msg).get(0).innerHTML; 对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而 get(n)和索引返回的是dom元素对象。如要获取第三个 div元素的内容。有如下两种方法：01.$(div).eq(2).html(); //调用jquery对象的方法 02.$(div).get(2).innerHTML; //调用dom的方法属性 3、同一函数实现set和getJquery中的很多方法都是如此，主要包括如下几个：01.$(#msg).html(); //返回id为msg的元素节点的html内容。 02.$(#msg).html(bnew content/b);03.//将“bn