jQuery 是一个 JavaScript 库。
BAIDU CDN引用
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
基础语法: $(selector).action()
美元符号定义 jQuery
选择符(selector)"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
文档就绪事件 防止文档在完全加载(就绪)之前运行 jQuery 代码。
$(document).ready(function(){ // 开始写 jQuery 代码... });
或
$(function(){ // 开始写 jQuery 代码... });
jQuery 选择器:元素选择器和#id 选择器
jQuery 中所有选择器都以美元符号开头:$()。
元素选择器$("p")等 #id 选择器$("#test")等
语法 描述
$("*") 选取所有元素
$("#XXX") 选取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> 元素
Query 事件
鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus焦点 scroll
mouseleave blur失焦 unload
jQuery 效果
hide() 和 show()隐藏和显示 HTML 元素: DIV P等
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
可以使用 toggle() 方法来切换 hide() 和 show() 方法。!!!!
CSS
css("color","red")
淡入淡出(div等)
fadeIn() 用于淡入已隐藏的元素。(display为none)
fadeOut() 用于淡出可见元素。
fadeToggle() 可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
fadeTo() 允许渐变为给定的不透明度(值介于 0 与 1 之间)。
滑动(DIV等)
slideDown() 用于向下滑动元素。
slideUp() 用于向上滑动元素。
slideToggle() 在 slideDown() 与 slideUp() 方法之间进行切换。
动画
$(selector).animate({params},speed,callback);
我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute才能使用ANIMATE!!!!!
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
$("button").click(function(){
$("div").animate({
left:'250px', 右移
opacity:'0.5', 透明度
height:'+=150px', 高度
width:'+=150px' 宽度 在值的前面加上 += 或 -=是比较初始的相对值
});
});
甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"
使用队列功能:
$("button").click(function(){
var div=$("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");
});
stop() 方法用于停止动画或效果,在它们完成之前。
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
Callback 方法
speed 后面duration 参数可以是回调函数
Chaining 链接
Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)。
jQuery 捕获
jQuery DOM 操作
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
$("#test").text()和$("#test").html() 返回的不一样,HTML还返回元素标志
attr() 方法用于获取属性值。href 属性等
attr() 方法也允许您同时设置多个属性。 "href" "title" 等
attr() 的回调函数
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
三种方法设定新元素
var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
删除元素
remove() 方法删除被选元素及其子元素。
empty() 方法删除被选元素的子元素。
$("p").remove(".italic"); remove() 方法也可接受一个参数,允许您对被删元素进行过滤。例子删除 class="italic" 的所有 <p> 元素:
CSS 类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
$("#div1").addClass("important blue"); 添加两个类
css() 方法
返回 CSS 属性 css("propertyname");
设置 CSS 属性 css("propertyname","value"); css({"propertyname":"value","propertyname":"value",...});
尺寸
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
innerWidth() 方法返回元素的宽度(包括内边距)。
innerHeight() 方法返回元素的高度(包括内边距)。
outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerHeight() 方法返回元素的高度(包括内边距和边框)。
jQuery 遍历
jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素。
向上遍历 DOM 树
parent() 方法返回被选元素的直接父元素。
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
也可以使用可选参数来过滤对祖先元素的搜索。
$("span").parents("ul"); 返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素:
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
$("span").parentsUntil("div");
向下遍历 DOM 树
children() 方法返回被选元素的所有直接子元素。也可以使用可选参数来过滤对子元素的搜索。
find("") 方法返回被选元素的后代元素,一路向下直到最后一个后代。搜索全部用"*"
在 DOM 树中水平遍历
siblings() 方法返回被选元素的所有同胞元素。
next() 方法返回被选元素的下一个同胞元素。
nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:
它们返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。
过滤
first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
$("p").eq(1).css("background-color","yellow"); 索引号为(index 1)
noConflict() 方法
在页面上同时使用 jQuery 和其他框架
noConflict() 方法会释放会 $ 标识符的控制,这样其他脚本就可以使用它了。
var jq=$.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍然在工作!");
});
});
或
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery is still working!");
});
}); 在函数外,依旧不得不使用 "jQuery":
BAIDU CDN引用
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
基础语法: $(selector).action()
美元符号定义 jQuery
选择符(selector)"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
文档就绪事件 防止文档在完全加载(就绪)之前运行 jQuery 代码。
$(document).ready(function(){ // 开始写 jQuery 代码... });
或
$(function(){ // 开始写 jQuery 代码... });
jQuery 选择器:元素选择器和#id 选择器
jQuery 中所有选择器都以美元符号开头:$()。
元素选择器$("p")等 #id 选择器$("#test")等
语法 描述
$("*") 选取所有元素
$("#XXX") 选取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> 元素
Query 事件
鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus焦点 scroll
mouseleave blur失焦 unload
jQuery 效果
hide() 和 show()隐藏和显示 HTML 元素: DIV P等
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
可以使用 toggle() 方法来切换 hide() 和 show() 方法。!!!!
CSS
css("color","red")
淡入淡出(div等)
fadeIn() 用于淡入已隐藏的元素。(display为none)
fadeOut() 用于淡出可见元素。
fadeToggle() 可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
fadeTo() 允许渐变为给定的不透明度(值介于 0 与 1 之间)。
滑动(DIV等)
slideDown() 用于向下滑动元素。
slideUp() 用于向上滑动元素。
slideToggle() 在 slideDown() 与 slideUp() 方法之间进行切换。
动画
$(selector).animate({params},speed,callback);
我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute才能使用ANIMATE!!!!!
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
$("button").click(function(){
$("div").animate({
left:'250px', 右移
opacity:'0.5', 透明度
height:'+=150px', 高度
width:'+=150px' 宽度 在值的前面加上 += 或 -=是比较初始的相对值
});
});
甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"
使用队列功能:
$("button").click(function(){
var div=$("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");
});
stop() 方法用于停止动画或效果,在它们完成之前。
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
Callback 方法
speed 后面duration 参数可以是回调函数
Chaining 链接
Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)。
jQuery 捕获
jQuery DOM 操作
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
$("#test").text()和$("#test").html() 返回的不一样,HTML还返回元素标志
attr() 方法用于获取属性值。href 属性等
attr() 方法也允许您同时设置多个属性。 "href" "title" 等
attr() 的回调函数
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
三种方法设定新元素
var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
删除元素
remove() 方法删除被选元素及其子元素。
empty() 方法删除被选元素的子元素。
$("p").remove(".italic"); remove() 方法也可接受一个参数,允许您对被删元素进行过滤。例子删除 class="italic" 的所有 <p> 元素:
CSS 类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
$("#div1").addClass("important blue"); 添加两个类
css() 方法
返回 CSS 属性 css("propertyname");
设置 CSS 属性 css("propertyname","value"); css({"propertyname":"value","propertyname":"value",...});
尺寸
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
innerWidth() 方法返回元素的宽度(包括内边距)。
innerHeight() 方法返回元素的高度(包括内边距)。
outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerHeight() 方法返回元素的高度(包括内边距和边框)。
jQuery 遍历
jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素。
向上遍历 DOM 树
parent() 方法返回被选元素的直接父元素。
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
也可以使用可选参数来过滤对祖先元素的搜索。
$("span").parents("ul"); 返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素:
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
$("span").parentsUntil("div");
向下遍历 DOM 树
children() 方法返回被选元素的所有直接子元素。也可以使用可选参数来过滤对子元素的搜索。
find("") 方法返回被选元素的后代元素,一路向下直到最后一个后代。搜索全部用"*"
在 DOM 树中水平遍历
siblings() 方法返回被选元素的所有同胞元素。
next() 方法返回被选元素的下一个同胞元素。
nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:
它们返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。
过滤
first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
$("p").eq(1).css("background-color","yellow"); 索引号为(index 1)
noConflict() 方法
在页面上同时使用 jQuery 和其他框架
noConflict() 方法会释放会 $ 标识符的控制,这样其他脚本就可以使用它了。
var jq=$.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍然在工作!");
});
});
或
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery is still working!");
});
}); 在函数外,依旧不得不使用 "jQuery":