jQuery 简介
jQuery 库可以通过一行简单的标记被添加到网页中。
jQuery 库 - 特性
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
向您的页面添加 jQuery 库
jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数。
可以通过下面的标记把 jQuery 添加到网页中:
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
请注意,<script> 标签应该位于页面的 <head> 部分。
jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p.test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。
文档就绪函数
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){
--- jQuery functions go here ----
});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:
- 试图隐藏一个不存在的元素
- 获得未完全加载的图像的大小
jQuery 属性操作方法
下面列出的这些方法获得或设置元素的 DOM 属性。
这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html()。
| 方法 | 描述 |
|---|---|
| addClass() | 向匹配的元素添加指定的类名。 |
| attr() | 设置或返回匹配元素的属性和值。 |
| hasClass() | 检查匹配的元素是否拥有指定的类。 |
| html() | 设置或返回匹配的元素集合中的 HTML 内容。 |
| removeAttr() | 从所有匹配的元素中移除指定的属性。 |
| removeClass() | 从所有匹配的元素中删除全部或者指定的类。 |
| toggleClass() | 从匹配的元素中添加或删除一个类。 |
| val() | 设置或返回匹配元素的值。 |
Jquery UI
是基于 jquery 基础类库开发的开源的 javascript 网页UI代码组件库,包含底层用户交互、动画、特效和可更换主题的可视控件,我们可以直接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和 Google Chrome。
jquery ui主要包含三部分:
1.交互组件,主要包含Draggable,Droppable(拖拽组件),Resizable(可调整大小组件),Selectable(选择组件)和Sortable(排序组件)等。这些都是要与鼠标打交道的,所以属于交互组件。
2.微件,微件是组成页面的一个个小组件包括Accordion,AutoComplete,ColorPicker,Dialog,Slider,Tabs,DatePicker,Magnifier,ProgressBar,Spinner等。
3.效果库,jquery ui 的效果库提供了更加炫酷的效果,是你的动画效果与众不同更加惊艳,效果库在effect目录
参考网站:
w3school 网站Jquery学习 http://www.w3school.com.cn/jquery/jquery_syntax.asp
jquery UI home :http://jqueryui.com/
Liger UI框架 http://www.ligerui.com/
JQuery Smart UIhttp://roy77.brinkster.net/
angela UIhttp://code.google.com/p/angela/

浙公网安备 33010602011771号