jQuery
- JQuery主要是做优化HTML文档操作、事件处理、动画设计和Ajax交互。
- jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。
- 它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式。
- jQuery 库包含以下功能:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
语法
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
基础语法: $(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询"和"查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
文档就绪事件
所有 jQuery 函数位于一个 document ready 函数中
$(document).ready(function(){
// 开始写 jQuery 代码...
});
为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作
简洁写法
$(function(){
// 开始写 jQuery 代码...
});
选择器
-
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
-
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
-
jQuery 中所有选择器都以美元符号开头:$()。
-
在页面中选取所有 < p> 元素:
$(“p”)
-
通过 id 选取元素语法如下:
$("#test")
-
类选择器可以通过指定的 class 查找元素:
$(".test")
-
语法 | 描述 |
---|---|
$("*") | 选取所有元素 |
$(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> 元素 |
事件
- 常见 DOM 事件:
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload | |
hover] |
-
在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法
$("p").click(function(){ // 动作触发后执行的代码!! });
效果
$(selector).hide(speed,callback);//隐藏
$(selector).show(speed,callback);//显示,从小变大
$(selector).toggle(speed,callback);//切换hidden
$(selector).fadeIn(speed,callback);//淡入已隐藏的元素,透明度从0到1
$(selector).fadeOut(speed,callback);//淡出
$(selector).fadeToggle(speed,callback);//
$(selector).fadeTo(speed,opacity,callback);//jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间),必需,必需,可选
$(selector).slideDown(speed,callback);//用于向下滑出元素
$(selector).slideUp(speed,callback);//向下划出
$(selector).slideToggle(speed,callback);//
$(selector).animate({params},speed,callback);//创建自定义动画,必需的 params 参数定义形成动画的 CSS 属性,也可以定义相对值(该值相对于元素的当前值),需要在值的前面加上 += 或 -=。甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"。
$(selector).stop(stopAll,goToEnd);
//jQuery stop() 方法用于停止动画或效果,在它们完成之前
//stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画
//可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
//链接(chaining),允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。
//这样的话,浏览器就不必多次查找相同的元素。如需链接一个动作,您只需简单地把该动作追加到之前的动作上
-
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:“slow”、“fast” 或毫秒。
-
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
-
默认情况下,所有 HTML 元素都有一个静态位置,且无法移动。
如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute! -
当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right!!
HTML
-
text() - 设置或返回所选元素的文本内容
-
html() - 设置或返回所选元素的内容(包括 HTML 标记)
-
val() - 设置或返回表单字段的值
-
attr() - 设置或获取属性值
-
append() - 在被选元素的结尾插入内容
-
prepend() - 在被选元素的开头插入内容
-
after() - 在被选元素之后插入内容
-
before() - 在被选元素之前插入内容
append/prepend 是在选择元素内部嵌入,after/before 是在元素外面追加
-
remove() - 删除被选元素(及其子元素)
-
empty() - 从被选元素中删除子元素
-
addClass() - 向被选元素添加一个或多个类
-
removeClass() - 从被选元素删除一个或多个类
-
toggleClass() - 对被选元素进行添加/删除类的切换操作
-
css() - 设置或返回样式属性
-
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
-
innerWidth() 方法返回元素的宽度(包括内边距)。
innerHeight() 方法返回元素的高度(包括内边距)。
-
outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerHeight() 方法返回元素的高度(包括内边距和边框)。
遍历
jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。
- parent() 方法返回被选元素的直接父元素
- parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (< html>),也可以使用可选参数来过滤对祖先元素的搜索
- parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
- children() 方法返回被选元素的所有直接子元素,也可以使用可选参数来过滤对子元素的搜索
- find() 方法返回被选元素的后代元素,一路向下直到最后一个后代,*所有后代
- siblings() 方法返回被选元素的所有同胞元素,也可以使用可选参数来过滤对同胞元素的搜索
- next() 方法返回被选元素的下一个同胞元素
- nextAll() 方法返回被选元素的所有跟随的同胞元素
- nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
- prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已
- first() 方法返回被选元素的首个元素
- last() 方法返回被选元素的最后一个元素
- eq() 方法返回被选元素中带有指定索引号的元素
- filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回
- not() 方法返回不匹配标准的所有元素
Ajax
AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。
jQuery load() 方法
- jQuery load() 方法是简单但强大的 AJAX 方法
- load() 方法从服务器加载数据,并把返回的数据放入被选元素中
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。可以把 jQuery 选择器添加到 URL 参数
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
回调函数可以设置不同的参数:
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态(seccuss/error)
- xhr - 包含 XMLHttpRequest 对象
AJAX get() 和 post() 方法
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
$.get(URL,callback);
$.post(URL,data,callback);
//只有URL是必需
noConflict() 方法
- $.noConflict();——noConflict() 方法会释放对 $ 标识符的控制,这样其他脚本就可以使用它
- 也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用,您可以把它存入变量,以供稍后使用