前端ui_jquery

1. 什么是jquery？

jQuery是一个强大的JavaScript库。无论你具有什么编程背景，都可以通过它来增强自己的网站。

由John Resig创建的jQuery是一个开源项目，其核心团队由富有献身精神的顶尖JavaScript开发人员组成。它在一个紧凑的文件中提供了丰富多样的特性、简单易学的语法和稳健的跨平台兼容性。此外，百余种扩展jQuery功能而开发的插件，更使得它几乎成为适用于各类客户端脚本编程的必备工具。 2. jQuery能做什么？

它为web脚本编程提供了通用的抽象层，使得它几乎适用于任何脚本编程的情形。它可以做到以下几点：

（1） 取得页面中的元素。如果不使用JavaScript库，遍历DOM（Document Object

Model,文档对象模型）树，以及查找HTML文档结构中某个特殊的部分，必须编写很多行代码。jQuery为准确地获取需要检查或操纵的文档元素，提供了可靠而富有效率的选择符机制。

（2） 修改页面的外观。CSS虽然为影响文档呈现的方式提供了一种强大的手段，但

当所有浏览器不完全支持相同的标准时，单纯使用CSS就会显得力不从心。jQuery可以弥补这点。

（3） 改变页面的内容。jQuery能够影响的范围并不局限于简单的外观变化，使用少

量的代码，jQuery就能改变文档的内容。可以改变文本、插入或翻转图像、对列表重新排序，甚至，对HTML文档的整个结构都能重写和扩充。想做到这些，只需要查看API文档即可轻松的实现。

（4） 响应用户的页面操作。即使是最强大和最精心设计的行为，如果我们无法控制

它何时发生，那它也毫无用处。jQuery提供了截取形形色色的页面事件（如单击一个链接）的适当方式，而不需要使用事件处理程序搞乱HTML代码。此外，它的事件处理API也消除了经常困扰WEB开发人员的浏览器不一致性。

（5） 为页面添加动态效果。为了实现某种交互式行为，设计者也必须向用户提供视

觉上的反馈。jQuery中内置的一批淡入、擦出之类的效果，以及制作新效果的工具包，为此提供便利。

（6） 无需刷新页面即可从服务器获取信息。这种编程模式就是众所周知的AJAX

（Asynchronous JavaScript and XML，异步JavaScript和XML，它能辅助WEB开发人员创建出反应灵敏、功能丰富的网站。jQuery通过消除这一过程的浏览器特定性的复杂性，使开发人员得以关注服务器端的功能设计。

（7） 简化常见的JavaScript任务。除了这些完全针对文档的特性之外，jQuery也提

供了对基本的JavaScript结构（例如迭代和数组操作等）的增强。

3. 如何搭建一个jQuery开发环境？

使用jQuery开发项目不用安装什么软件，只需要把jQuery官方网站(http://jquery.com/)上的jquery.js包放在项目中即可。如：这样就可以把jquery的库引入到当前页面来了。 4. 编写jquery代码，引入jquery作用区域有两种方式： (1)第一种

$(document).ready(function(){

//你自己的代码

});

(2) $(function(){

//你自己的代码 });

5. 选择符

Jquery支持CSS规范1到规范3中的大多数选择符，具体内容可以参考W3C（World Wide Web Consortium，万维网联盟）网站http://www.w3org/Style/CSS/#specs。这种对CSS选择符的支持使得开发者在增强自己的网站时，不必为哪种浏览器（特别是IE6及更低版本）可能不理解高级的选择符而担心，只要该浏览器启用了JavaScript就没有问题。 请看示例程序。 6. 选择器的使用

选择器的使用 有参考文档

属性：

1. attr(name) 取得第一个匹配元素的属性值

2. attr(properties) 将一个”名/值”v 形式的对象设置为所有匹配元素的属性 3. attr(key,value) 为所有匹配的元素设置一个属性值

Class:

1. addClass(class) 为每个匹配的原色添加指定的class

2. removeClass(class) 从所有匹配的元素中删除全部或者指定的class\\

HTML:

1.html() 获取第一个匹配元素的html文档 2.html(val) 设置每一个匹配元素的html内容 文本

1.text() 获取第一个匹配元素的text文 档 2.text(val) 设置每一个匹配元素的text内容 值

1.val() 获取第一个匹配元素的当前值 2.val(val) 设置每一个匹配元素的值

Dom的文档处理 1. 内部插入

Append(context) AppendTo(context) prepend(context) prependTo(context) 2. 外部插入

After(context) before(context) insertAfter(context); insertBefore(context)

CSS

1. css(properties) 把一个“名/值”对象设置为所有匹配元素的样式属性

属性名包含“-” 必须使用 引号

2. css(name,value)在所有匹配元素中，设置一个样式属性的值

事件 事件处理

Bind one trigger triggerHandle unbind 交互事件 Hover toggle 事件

Click, mouse evnet , keyboardevent

效果：

1.Show() 显示隐藏的匹配元素

2.Show(speed,[callback]) 以优雅的动画现实所有匹配的元素，并在显示完成后可选的触发

一个回调函数

3.hidden() 现实隐藏的元素

4.hide(speed,[callback]) 以优雅的动画隐藏所有匹配的元素，并在显示后可选的调用一个回

调函数

{先往左面缩放，然后颜色逐渐变弱}

5.toggle() 切换元素的可见状态 Ajax

$.aiax(options)

$.get(“search.do”,{id:1},rend); Function rend(xml){

alert(xml); }

$(“#msg”).ajaxStart( function(){

this.html(“正在载入。。。。”); }; );