目录:
- 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”