jQuery学习简要笔记
浏览数：17 /
时间：2015年06月09日
前言：熟悉jQuery的代码是了解jQuery整个应用的核心与基础，jQuery是一款优秀的js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便！下面来重温一下整个jQuery的知识，大家如果有javascript 开发基础，对于学习jQuery是非常有帮助的。
1. 熟悉JQuery的基础用例，如果对Javascript的示例代码比较熟悉的话，可以采用如下的函数代码：
// 页面加载完毕后的响应事件代码列表如下：
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
2. jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
美元符号定义 jQuery，选择符（selector）“查询”和“查找”HTML 元素，jQuery 的 action() 执行对元素的操作，示例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
3. 选择器式jQuery操作运算的核心, 下面列出所有的选择器种类：
jQuery 元素选择器：
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器:
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href=‘#‘]") 选取所有带有 href 值等于 "#" 的元素。
$("[href!=‘#‘]") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$=‘.jpg‘]") 选取所有 href 值以 ".jpg" 结尾的元素。
其他更多的选择器与语法规则请参见jQuery语法规则书： http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
4. 事件是jQuery中的核心问题，如下是整个事件的关键：
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
5. 解决jQuery 名称冲突问题，jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。
6. jQuery的动作函数：(speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。)
6.1-显示与隐藏函数：
$(selector).hide(speed,callback); --隐藏函数;
$(selector).show(speed,callback); --显示函数;
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
6.2-显示与隐藏两个动作的切换函数：
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
6.3-淡入、淡出、以及淡入、淡出的切换函数；
$(selector).fadeIn(speed,callback); -- 淡入函数
$(selector).fadeOut(speed,callback); --淡出函数
$(selector).fadeToggle(speed,callback); --淡入、淡出的切换函数
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
6.4-jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法：$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
6.5-上下滑动函数：
$(selector).slideDown(speed,callback); -- 往下滑动；
$(selector).slideUp(speed,callback); -- 往上滑动；
$(selector).slideToggle(speed,callback); -- slideDown与slideUp之间进行切换；
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
6.6-动画功能：
jQuery animate() 方法用于创建自定义动画。
语法： $(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
6.7-停止动画功能：
jQuery stop() 方法，jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法: $(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
7. jQuery方法链接调用：
$("#p1").css("color","red").slideUp(2000).slideDown(2000); --先变红然后朝上滑动，之后朝下滑动；
8.jQuery操作DOM的能力，而DOM其实是jQuery的基础核心，
jQuery 中非常重要的部分，就是操作 DOM 的能力， jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得非常容易。获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
8.设置属性值：设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变（设置）链接中 href 属性的值：
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
9.jQuery的四个防范用于添加元素： (添加新内容的四个 jQuery 方法)
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
譬如如下的代码段：
var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p"); // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // 追加新元素
10. 删除元素/内容，如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
例如： $("p").remove(".italic")
11. jQuery 操作 CSS
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
例如： $("p").css({"background-color":"yellow","font-size":"200%"});
12. jQuery 提供多个处理尺寸的重要方法：
width()；
height()；
innerWidth()；
innerHeight()；
outerWidth()；
outerHeight()；
13. jQuery元素遍历：
向上遍历 DOM 树: 这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
parent()
parents()
parentsUntil()
向下遍历 DOM 树: 下面是两个用于向下遍历 DOM 树的 jQuery 方法：
children()
find()
水平遍历树：有许多有用的方法让我们在 DOM 树进行水平遍历：
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
过滤算法：缩写搜索元素的范围，最简单与最基本的过滤算法；
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
14. Ajax方法支持：
14.1 jQuery load() 方法是简单但强大的 AJAX 方法，load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法：$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
14.2 jQuery $.get() 方法；
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：
实例：
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
14.3 jQuery $.post() 方法，$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法：$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据：
1. 熟悉JQuery的基础用例，如果对Javascript的示例代码比较熟悉的话，可以采用如下的函数代码：
// 页面加载完毕后的响应事件代码列表如下：
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
2. jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
美元符号定义 jQuery，选择符（selector）“查询”和“查找”HTML 元素，jQuery 的 action() 执行对元素的操作，示例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
3. 选择器式jQuery操作运算的核心, 下面列出所有的选择器种类：
jQuery 元素选择器：
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器:
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href=‘#‘]") 选取所有带有 href 值等于 "#" 的元素。
$("[href!=‘#‘]") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$=‘.jpg‘]") 选取所有 href 值以 ".jpg" 结尾的元素。
其他更多的选择器与语法规则请参见jQuery语法规则书： http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
4. 事件是jQuery中的核心问题，如下是整个事件的关键：
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
5. 解决jQuery 名称冲突问题，jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。
6. jQuery的动作函数：(speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。)
6.1-显示与隐藏函数：
$(selector).hide(speed,callback); --隐藏函数;
$(selector).show(speed,callback); --显示函数;
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
6.2-显示与隐藏两个动作的切换函数：
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
6.3-淡入、淡出、以及淡入、淡出的切换函数；
$(selector).fadeIn(speed,callback); -- 淡入函数
$(selector).fadeOut(speed,callback); --淡出函数
$(selector).fadeToggle(speed,callback); --淡入、淡出的切换函数
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
6.4-jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法：$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
6.5-上下滑动函数：
$(selector).slideDown(speed,callback); -- 往下滑动；
$(selector).slideUp(speed,callback); -- 往上滑动；
$(selector).slideToggle(speed,callback); -- slideDown与slideUp之间进行切换；
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
6.6-动画功能：
jQuery animate() 方法用于创建自定义动画。
语法： $(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
6.7-停止动画功能：
jQuery stop() 方法，jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法: $(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
7. jQuery方法链接调用：
$("#p1").css("color","red").slideUp(2000).slideDown(2000); --先变红然后朝上滑动，之后朝下滑动；
8.jQuery操作DOM的能力，而DOM其实是jQuery的基础核心，
jQuery 中非常重要的部分，就是操作 DOM 的能力， jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得非常容易。获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
8.设置属性值：设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变（设置）链接中 href 属性的值：
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
9.jQuery的四个防范用于添加元素： (添加新内容的四个 jQuery 方法)
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
譬如如下的代码段：
var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p"); // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // 追加新元素
10. 删除元素/内容，如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
例如： $("p").remove(".italic")
11. jQuery 操作 CSS
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
例如： $("p").css({"background-color":"yellow","font-size":"200%"});
12. jQuery 提供多个处理尺寸的重要方法：
width()；
height()；
innerWidth()；
innerHeight()；
outerWidth()；
outerHeight()；
13. jQuery元素遍历：
向上遍历 DOM 树: 这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
parent()
parents()
parentsUntil()
向下遍历 DOM 树: 下面是两个用于向下遍历 DOM 树的 jQuery 方法：
children()
find()
水平遍历树：有许多有用的方法让我们在 DOM 树进行水平遍历：
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
过滤算法：缩写搜索元素的范围，最简单与最基本的过滤算法；
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
14. Ajax方法支持：
14.1 jQuery load() 方法是简单但强大的 AJAX 方法，load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法：$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
14.2 jQuery $.get() 方法；
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：
实例：
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
14.3 jQuery $.post() 方法，$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法：$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据：
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
