|
Jasonye 2011-06-12
综述：jQuery是JavaScript类库，它提供一些功能，让程序员更加简洁地编写 JavaScript程序。可以通过一行简单的标记被添加到网页中。
jQuery 库包含以下特性： HTML 元素选取（选择器） JavaScript 特效和动画 HTML 事件函数 HTML 元素操作、CSS 操作（文档操作） HTML DOM 遍历和修改 AJAX Utilities
0：添加jQuery库 方法一、本地方法 <head> <script type="text/javascript" src="jquery.js"> </script> </head>
方法二、Google的CDN <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js"></script> </head>
文档就绪函数： $(document).ready(function(){ ---jQuery functions go here.--- }); 这是为了防止文档没有完全加载前运行函数，而产生操作失败。 比如试图：访问一个不存在的元素、获得未加载的图像的大小等
由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护： 把所有 jQuery 代码置于事件处理函数中 把所有事件处理函数置于文档就绪事件处理器中 把 jQuery 代码置于单独的 .js 文件中 如果存在名称冲突，则重命名 jQuery 库，解决名称冲突： var jq = jQuery.noConflict() 使用自己的名称比如jq来代替$符号
1、元素选取 jQuery定义了各种元素选择器，让我们更加方便、简洁地选取各种元素。 jQuery选择器分为元素选择器和属性选择器， 用来选择需要操作的HTML元素。 选择器运行对DOM元素组或者单个DOM节点进行操作。 基本语法是：$(selector).action() 示例： $(this).hide() 隐藏当前元素 $("p").hide() 隐藏所有段落 $(.test).hide() 隐藏class=test的元素 $("#test").hide() 隐藏id=test的元素。
元素选择器：使用CSS选择器来选取HTML元素 $("p") 选取<p>元素 $("p.intro") 选取所有class="intro"的<p>元素 $("p#demo") 选取id="demo"的第一个<p>元素
属性选择器：使用XPath表达式来选择带给定属性的元素 $("[href]") 选取所有带href属性的元素 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。 $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。 $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
2、jQuery事件 为特定事件编写相应的处理函数。 事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。
常见的事件： ready click dblclick focus mouseover 鼠标悬停 bind() 附加一个或者多个事件处理器 delegate() 向匹配元素的当前或者未来的子元素附加一个或者多个事件处理器 更多事件见参考库。
3、效果 jQuery可以创建隐藏、显示、切换、滑动以及自定义的动画效果，让我们更加简单地编写各种动画效果， 常用来制作菜单栏等效果。 hide(),show() 隐藏与显示函数，这两个函数可以设置参数speed和callback。 slideToggle() 滑动面板 fadeTo() 淡入淡出 animate() 动画
隐藏与显示： $(selector).hide(speed,callback) $(selector).show(speed,callback) speed 参数规定显示或隐藏的速度。可以设置这些值："slow", "fast", "normal" 或毫秒。 callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。
切换函数： $(selector).toggle(speed, callback) 用来实现元素的切换（隐藏的显示，显示的隐藏）。
滑动函数： $(selector).slideDown(speed,callback) $(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback)
Fade函数： $(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opacity,callback) fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。
动画： $(selector).animate({params},[duration],[easing],[callback]) params：定义产生动画的 CSS 属性。可以同时设置多个此类属性：例如： animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"}); duration：定义用来应用到动画的时间。它设置的值是："slow", "fast", "normal" 或毫秒。 Callback函数在当前动画100%完成后执行。
注意：HTML 元素默认是静态定位，且无法移动。如需使元素可以移动，请把 CSS 的 position 设置为 relative 或 absolute。
4、jQuery文档操作函数 文档操作函数用来改变文档的DOM数。 HTML 操作函数 描述 $(selector).html(content) 改变被选元素的（内部）HTML $(selector).append(content) 向被选元素的（内部）HTML 追加内容 $(selector).prepend(content)向被选元素的（内部）HTML “预置”（Prepend）内容 $(selector).after(content) 在被选元素之后添加 HTML $(selector).before(content) 在被选元素之前添加 HTML
CSS 操作函数 jQuery拥有三种用于CSS操作的重要函数： $(selector).css(name,value) 为所有匹配元素的给定 CSS 属性设置值： $(selector).css({properties}) 为所有匹配元素的一系列 CSS 属性设置值： $(selector).css(name) 返回指定的 CSS 属性的值： $(selector).height(value) $(selector).width(value) 函数 width(value) 设置所有匹配元素的宽度：
例子：$("p").css({"background-color":"red","font-size":"200%"});
5、Ajax操作函数 jQuery为长远用的AJAX请求封装了各种函数。让我们更方便地进行AJAX请求。 jQuery 的 load 函数是一种简单的（但很强大的）AJAX 函数。它的语法如下： $(selector).load(url,data,callback) 请使用 selector 来定义要改变的 HTML 元素， 使用 url 参数来指定数据的 web 地址。 只有当您希望向服务器发送数据时，才需要使用 data 参数。
还有更低级的：Low Level AJAX ，。 $.ajax(options) 是低层级 AJAX 函数的语法。 option 参数设置的是 name|value 对，定义 url 数据、密码、数据类型、过滤器、字符集、超时以及错误函数。 $.ajax 提供了比高层级函数更多的功能，但是同时也更难使用 jQuery AJAX请求 $(selector).load(url,data,callback) 把远程数据加载到被选的元素中 $.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中 $.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据 $.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据 $.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据 $.getScript(url,callback) 加载并执行远程的 JavaScript 文件
(data) 发送到服务器的数据的键/值对象 (type) 被返回的数据的类型 (html,xml,json,jasonp,script,text) (options) 完整 AJAX 请求的所有键/值对选项
jQuery参考手册 一、选择器 二、事件 三、效果 四、文档操作：对XML、HTML文档进行相关的操作，除了:html() 五、CSS操作 ：CSS相关操作函数，css()、height()等 六、AJAX操作 七、遍历函数 ：用于筛选、查找和串联元素的方法 八、数据存储 九、队列控制 十、核心 | 
免费注册
发表于 2011-12-21 08:44