JQ 是一个JavaScript库
基础
语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
如：
- $(this).hide() - 隐藏当前元素
- $("p").hide() - 隐藏所有段落
- $("p .test").hide() - 隐藏所有 class="test" 的段落
- $("#test").hide() - 隐藏所有 id="test" 的元素
jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。
XPath 是一门在 XML 文档中查找信息的语言。
# 文档就绪后执行方法
$(document).ready(function(){
// 开始写 jQuery 代码...
});
// 等同于
$(function(){
})l
选择器
// 元素选择器
$("p")
// ID 选择器
$(".id")
| 语法 | 描述 |
|---|---|
| 语法 | 描述 |
| --- | --- |
| $("*") | 选取所有元素 |
| $(this) | 选取当前 HTML 元素 |
| $("p.intro") | 选取 class 为 intro 的 <p> 元素 |
| $("p:first") | 选取第一个 <p> 元素 |
| $("ul li:first") | 选取第一个 <ul> 元素的第一个 <li> 元素 |
| $("ul li:first-child") | 选取每个 <ul> 元素的第一个 <li> 元素 |
| $("[href]") | 选取带有 href 属性的元素 |
| $("a[target='_blank']") | 选取所有 target 属性值等于 "_blank" 的 <a> 元素 |
| $("a[target!='_blank']") | 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 |
| $(":button") | 选取所有 type="button" 的 <input> 元素 和 <button> 元素 |
| $("tr:even") | 选取偶数位置的 <tr> 元素 |
| $("tr:odd") | 选取奇数位置的 <tr> 元素 |
事件
常见 DOM 事件：
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
效果
通过 stop(); 停止效果
隐藏、显示
在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素，以及使用 toggle() 方法能够切换 hide() 和 show() 方法。
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
$("button").click(function(){
$("p").hide(1000);
});
淡入淡出
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
$(selector).fadeIn(speed,callback);
滑动
slideDown()
slideUp()
slideToggle()
$(selector).slideDown(speed,callback);
动画
默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'+=150px'
});
});
width: +=150px 为相对值，即 加大150px
// 队列
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
jQuery 与html
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr() - 设置或返回特定属性
DOM遍历
- parent()
- parents()
- parentsUntil() 返回介于两个给定元素之间的所有祖先元素。
- children() 返回被选元素的所有直接子元素。
- find() 返回被选元素的后代元素，一路向下直到最后一个后代。
水平遍历
siblings() 返回被选元素的所有同胞元素。
next() 返回被选元素的下一个同胞元素。
nextAll()
nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。
prev()
prevAll()
prevUntil()
过滤
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
// 返回带有类名 "intro" 的所有 <p> 元素：
$(document).ready(function(){
$("p").filter(".intro");
});
not() 方法返回不匹配标准的所有元素。
提示：not() 方法与 filter() 相反。
操作元素
- append() - 在被选元素内部的结尾插入指定内容
- prepend() - 在被选元素内部的开头插入指定内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
# jQuery 与 css
-
addClass() - 向被选元素添加一个或多个类
-
removeClass() - 从被选元素删除一个或多个类
-
toggleClass() - 对被选元素进行添加/删除类的切换操作
-
css() - 设置或返回样式属性
尺寸
image
AJax
load
在jQuery的load()方法中，无论AJAX请求是否成功，一旦请求完成（complete）后，回调函数（callback）立即被触发。
$(selector).load(URL,data,callback);
get post
.post(URL,data,callback);
jQuery Validate
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。
网友评论