目录：
- jQuery概念及语法
- jQuery效果
- jQuery HTML
- jQuery遍历
- jQuery AJAX
- jQuery 标识符（附）
一、jQuery概念及语法
jQuery stydy notes
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
引入jQuery
- 把 jQuery 添加到网页中
下载地址：https://jquery.com/#Download_jQuery
<script type="text/javascript" src="jquery.js"></script>-->
- 库的替代
如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。
使用 Google 的 CDN
使用 Microsoft 的 CDN<head> <script type="text/javascript" src="http://ajax.googleapis.com /ajax/libs /jquery/1.4.0/jquery.min.js"></script> </head><head> <script type="text/javascript" src="http://ajax.microsoft.com /ajax/jquery /jquery-1.4.min.js"></script> </head>
语法
基础语法是：$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素
$(“p”).hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class=“test” 的所有元素
$("#test").hide() - 隐藏所有 id=“test” 的元素
选择器
- 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 值不等于 “#” 的元素。
( " [ h r e f ("[href ("[href=’.jpg’]") 选取所有 href 值以 “.jpg” 结尾的元素。 - jQuery CSS 选择器
$("p").css("background-color","red");
事件（部分常用事件）
| Event 函数 | 绑定函数至 |
|---|---|
| $(document).ready(function) | 将函数绑定到文档的就绪事件（当文档完成加载时） |
| $(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
| $(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
| $(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
| $(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
二、jQuery效果
| 方法 | 描述 |
|---|---|
| animate() | 对被选元素应用“自定义”的动画 |
| clearQueue() | 对被选元素移除所有排队的函数（仍未运行的） |
| delay() | 对被选元素的所有排队函数（仍未运行）设置延迟 |
| dequeue() | 运行被选元素的下一个排队函数 |
| fadeIn() | 逐渐改变被选元素的不透明度，从隐藏到可见 |
| fadeOut() | 逐渐改变被选元素的不透明度，从可见到隐藏 |
| fadeTo() | 把被选元素逐渐改变至给定的不透明度 |
| hide() | 隐藏被选的元素 |
| queue() | 显示被选元素的排队函数 |
| show() | 显示被选的元素 |
| slideDown() | 通过调整高度来滑动显示被选元素 |
| slideToggle() | 对被选元素进行滑动隐藏和滑动显示的切换 |
| slideUp() | 通过调整高度来滑动隐藏被选元素 |
| stop() | 停止在被选元素上运行动画 |
| toggle() | 对被选元素进行隐藏和显示的切换 |
隐藏/显示（hide show toggle）
- 语法：
$(selector).hide(speed,callback);
$(selector).show(speed,callback); - 可选的 speed 参数规定隐藏/显示的速度，可以取以下 值：“slow”、“fast” 或毫秒。
- 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
淡入淡出（fadeIn fadeOut fadeToggle fadeTo）
- 语法：
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback); - 可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
- 可选的 callback 参数是 fading 完成后所执行的函数名称。
- opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
滑动（slideDown slideUp slideToggle）
- 语法：
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
动画
- 语法：
$(selector).animate({params},speed,callback); - 必需的 params 参数定义形成动画的 CSS 属性。
- 可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
- 可选的 callback 参数是动画完成后所执行的函数名称。
(如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！)
- 操作多个属性
- 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=。 - 使用预定义值
您甚至可以把属性的动画值设置为 “show”、“hide” 或 “toggle”。 - 使用队列功能
编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
stop（）
- 语法：
$(selector).stop(stopAll,goToEnd); - Query stop() 方法用于停止动画或效果，在它们完成之前。
- stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
- 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
- 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
Callback
- 语法：
$(selector).hide(speed,callback) - Callback 函数在当前动画 100% 完成之后执行
Chaining
- 语法：
$("#p1").css(“color”,“red”).slideUp(2000).slideDown(2000); - Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。
三、jQuery HTML
获取HTML元素
1.获得内容 - text()、html() 以及 val()
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
2.获取属性 - attr()
- attr() 方法用于获取属性值。
设置HTML元素
$("#test1").text("Hello world!");
$("#test2").html("<b>Hello world!</b>");
$("#test3").val("Dolly Duck");
$("#hermit").attr("href","http://www.babaiduom.cn/jquery");
添加HTML元素
| 方法 | 备注 |
|---|---|
| append() | 在被选元素的结尾插入内容 |
| prepend() | 在被选元素的开头插入内容 |
| after() | 在被选元素之后插入内容 |
| before() | 在被选元素之前插入内容 |
- 实例：
$("p").append("Some appended text.");
删除HTML元素
| 方法 | 备注 |
|---|---|
| remove() | 删除被选元素（及其子元素） |
| empty() | 从被选元素中删除子元素 |
- 实例：
- jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤
$("#div1").remove();
$("#div1").empty();
//过滤被删除的元素
$("p").remove(".italic");
CSS类
| 方法 | 备注 |
|---|---|
| addClass() | 向被选元素添加一个或多个类 |
| removeClass() | 从被选元素删除一个或多个类 |
| toggleClass() | 对被选元素进行添加/删除类的切换操作 |
| css() | 设置或返回样式属性（见下一小标题） |
- 语法：
$("#div1").addClass("important blue");
css（）
1.返回css属性
- 语法：
css("propertyname"); - css() 方法设置或返回被选元素的一个或多个样式属性。
- 实例
$("p").css("background-color");
2.设置cssx属性
- 语法：
css("propertyname","value"); - 实例
$("p").css("background-color","yellow");
3.设置多个css属性
- 语法：
css({"propertyname":"value","propertyname":"value",...}); - 实例
$("p").css({"background-color":"yellow","font-size":"200%"});
尺寸
- width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
- height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
- innerWidth() 方法返回元素的宽度（包括内边距）。
- innerHeight() 方法返回元素的高度（包括内边距）。
- outerWidth() 方法返回元素的宽度（包括内边距和边框）。
- outerHeight() 方法返回元素的高度（包括内边距和边框）。
四、jQuery遍历
概念：
- jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
- 通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
祖先
1.jQuery parent() 方法
-
parent() 方法返回被选元素的直接父元素。
$("span").parent();
2.jQuery parents() 方法
-
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
$("span").parents();- 过滤筛选：
$("span").parents("ul");
3.jQuery parentsUntil() 方法
- 过滤筛选：
-
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
//返回介于 <span> 与 <div> 元素之间的所有祖先元素
$("span").parentsUntil("div");
后代
1.jQuery children() 方法
- children() 方法返回被选元素的所有直接子元素。
- 过滤筛选：
$("div").children("p.1");
2.jQuery find() 方法
- find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
同胞
同胞拥有相同的父元素。
- siblings() 方法返回被选元素的所有同胞元素。 $(“h2”).siblings();
- next() 方法返回被选元素的下一个同胞元素。 该方法只返回一个元素。
- nextAll() 方法返回被选元素的所有跟随的同胞元素。
- nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
- prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反
过滤
1.first() 方法返回被选元素的首个元素。
- 选取首个
<div>元素内部的第一个<p>元素： $("div p").first();
2.last() 方法返回被选元素的最后一个元素。
3.eq() 方法返回被选元素中带有指定索引号的元素。
- 索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。
- 选取第二个
<p>元素：$(“p”).eq(1);
4.filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
$("p").filter(".intro");
5.not() 方法返回不匹配标准的所有元素。
$("p").not(".intro");
五、jQuery AJAX
ajax概念
概念
- AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。
- AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
作用
- 通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
- 编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。
- 这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。
jQuery 加载
1.load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法：$(selector).load(URL,data,callback);
- 必需的 URL 参数规定您希望加载的 URL。
- 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
- 可选的 callback 参数是 load() 方法完成后所执行的函数名称。
- 可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参
function(responseTxt,statusTxt,xhr){};
responseTxt - 包含调用成功时的结果内容 （success error）
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
function(responseTxt,statusTxt,xhr){};
URL: $("#div1").load("demo_test.txt");
Get/Post
- GET - 从指定的资源请求数据
$.get()方法通过 HTTP GET 请求从服务器上请求数据。$.get(URL,callback); - POST - 向指定的资源提交要处理的数据
$.post()方法通过 HTTP POST 请求从服务器上请求数据。$.post(URL,data,callback);
jQuery $
- 其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、
Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。 - 其中某些框架也使用 $ 符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。
- jQuery 的团队考虑到了这个问题，并实现了
noConflict()方法。
noConflict()方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。- 全名替代简写的方式来使用 jQuery 将$换成jQuery。
- 创建自己的简写
var hermit = $.noConflict();此时hermit已经替代了$。 - 如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。
这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 “jQuery”
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
