jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
1、JQuery教程:
---JQuery语法:
语法示例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
文档就绪函数: 目的是为了防止文档在完全加载之前运行JQuery代码
$(document).ready(function(){
--- jQuery functions go here ----
});
---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 CSS 选择器
-----jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色:
实例
$("p").css("background-color","red");
---Jquery事件:
jQuery 事件函数
jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。
通常会把 jQuery 代码放到 <head>部分的事件处理方法中:
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
单独文件中的函数
如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中
2、JQuery效果:
--隐藏和显示
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称
--jQuery toggle()-----切换显示和隐藏
通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素,并隐藏已显示的元素:
$("button").click(function(){
$("p").toggle();
});
- --Jquery的淡入淡出效果
通过 jQuery,您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法:
-
-
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
-
- --Jquery的滑动效果:
jQuery 拥有以下滑动方法:
-
-
- slideDown()
- slideUp()
- slideToggle()
-
- --Jquery的动画效果:
jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。
语法:
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
---Jquery停止动画:
jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果,在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
语法
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画。
---Jquery Callback函数:
jQuery Callback 函数
当动画 100% 完成后,即调用 Callback 函数。
典型的语法:
$(selector).hide(speed,callback)
callback 参数是一个在 hide 操作完成后被执行的函数。
---Jquery Chaining:
通过 jQuery,您可以把动作/方法链接起来。
Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上)。
举例:
下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色,然后向上滑动,然后向下滑动:
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
3、JQuery HTML:
---JQuery获取内容和属性:
Jquery Dom操作:
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法:
-
-
-
-
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
-
-
-
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
alert("Value: " + $("#test").val());
});
获取属性 - attr():
$("button").click(function(){
alert($("#w3s").attr("href"));
alert($("#w3s").attr("href"));
});
---Jquery 设置内容和属性:
设置内容 - text()、html() 以及 val()
我们将使用前一章中的三个相同的方法来设置内容:
-
-
-
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
-
-
下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容:
实例
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变(设置)链接中 href 属性的值:
实例
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置 href 和 title 属性:
实例
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
---Jquery 添加元素:
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法:
-
-
-
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
-
-
$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");
jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
实例
$("img").after("Some text after");
$("img").before("Some text before");
---Jquery删除元素:
删除元素/内容
如需删除元素和内容,一般可使用以下两个 jQuery 方法:
-
-
-
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
-
-
$("#div1").remove();
$("#div1").empty();
过滤被删除的元素
jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p> 元素:
实例
$("p").remove(".italic");
---- Jquery 获取并设置css类:
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:
-
-
-
-
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回被选元素的一个或多个样式属性
-
-
-
$("button").click(function(){
$("#div1").addClass("important blue");
$("#div1").addClass("important blue");
});
$("button").click(function(){
$("h1,h2,p"). removeClass("blue");
});
$("h1,h2,p"). removeClass("blue");
});
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
$("h1,h2,p").toggleClass("blue");
});
css("propertyname"); //返回css属性
css("propertyname","value"); //设置css属性
----Jquery 尺寸
jQuery 尺寸 方法
jQuery 提供多个处理尺寸的重要方法:
-
-
-
-
- width()方法设置或返回元素的宽度(不包括内边距、边框或外边距
- height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)
- innerWidth()方法返回元素的宽度(包括内边距)
- innerHeight()方法返回元素的高度(包括内边距)
- outerWidth()方法返回元素的宽度(包括内边距和边框)
- outerHeight()方法返回元素的高度(包括内边距和边框
outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。
-
-
-
$("button").click(function(){
var txt="";
txt+="Width: " + $("#div1").width() + "</br>";
txt+="Height: " + $("#div1").height();
$("#div1").html(txt);
});
$("button").click(function(){
var txt="";
txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
txt+="Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
$("button").click(function(){
var txt="";
txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
txt+="Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
var txt="";
txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
txt+="Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
$("button").click(function(){
var txt="";
txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt+="Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
4、Jquery遍历
jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。
---遍历-祖先
通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先
向上遍历 DOM 树
这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:
-
-
-
- parent()··parent() 方法返回被选元素的直接父元素。
- parents()··parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
- parents("ul")··下面的例子返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素
- parentsUntil()··parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
-
-
$(document).ready(function(){
$("span").parent();
});
$("span").parent();
});
$(document).ready(function(){
$("span").parents();
});
$("span").parents();
});
$(document).ready(function(){
$("span").parents("ul");
});
$("span").parents("ul");
});
$(document).ready(function(){
$("span").parentsUntil("div");
});
$("span").parentsUntil("div");
});
----Jquery遍历-后代
向下遍历 DOM 树
下面是两个用于向下遍历 DOM 树的 jQuery 方法:
-
-
-
- children()--children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
-
find()-- find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
-
-
$(document).ready(function(){
$("div").children();
});
$("div").children();
});
$(document).ready(function(){
$("div").find("span");
});
$("div").find("span");
});
----遍历-同胞
在 DOM 树中水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历:
-
-
- siblings()--返回被选元素的所有同胞元素
- next()--方法返回被选元素的下一个同胞元素
- nextAll()-- 方法返回被选元素的所有跟随的同胞元素。
- nextUntil()--返回介于两个给定参数之间的所有跟随的同胞元素
- prev()
- prevAll()
- prevUntil()
-
$(document).ready(function(){
$("h2").siblings();
});
$("h2").siblings();
});
$(document).ready(function(){
返回属于 <h2> 的同胞元素的所有 <p> 元素
$("h2").siblings("p");});
$(document).ready(function(){
$("h2").next();
});
$("h2").next();
});
$(document).ready(function(){
$("h2").nextAll();
$("h2").nextAll();
});
$(document).ready(function(){
返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
$("h2").nextUntil("h6");
});
---遍历-过滤:
jQuery first() 方法
first() 方法返回被选元素的首个元素。
下面的例子选取首个 <div> 元素内部的第一个 <p> 元素:
实例
$(document).ready(function(){
$("div p").first();
});
jQuery last() 方法
last() 方法返回被选元素的最后一个元素。
下面的例子选择最后一个 <div> 元素中的最后一个 <p> 元素:
实例
$(document).ready(function(){
$("div p").last();
});
$("div p").last();
});
jQuery eq() 方法
eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素(索引号 1):
实例
$(document).ready(function(){
$("p").eq(1);
});
jQuery filter() 方法
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
下面的例子返回带有类名 "intro" 的所有 <p> 元素:
实例
$(document).ready(function(){
$("p").filter(".intro");
});
jQuery not() 方法
not() 方法返回不匹配标准的所有元素。
提示:not() 方法与 filter() 相反。
下面的例子返回不带有类名 "intro" 的所有 <p> 元素:
实例
$(document).ready(function(){
$("p").not(".intro");
});
$("p").not(".intro");
});
5、Jquery-Ajax:
AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新。
----Jquery-Ajax加载:
jQuery load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
语法:
$(
selector).load(
URL,
data,
callback);
必需的
URL 参数规定您希望加载的 URL。
可选的
data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的
callback 参数是 load() 方法完成后所执行的函数名称。
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。
-
-
-
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
-
-
$.get(
URL,
callback);
必需的
URL 参数规定您希望请求的 URL。
可选的
callback 参数是请求成功后所执行的函数名。
$.post(
URL,
data,
callback);
必需的
URL 参数规定您希望请求的 URL。
可选的
data 参数规定连同请求发送的数据。
可选的
callback 参数是请求成功后所执行的函数名。