jQuery 遍历
什么是遍历？
jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。
下图展示了一个家族树。
通过 jQuery 遍历，您能够从被选（当前的）元素开始，
轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞兄弟）。
这种移动被称为对 DOM 进行遍历。
图示解析：(绕口令时间)
- <div> 元素是 <ul> 的父元素，同时是其中所有元素的祖先。
- <ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
- 左边的 <li> 元素是 <span> 的父元素，是<ul> 的子元素，同时还是 <div> 的后代(孙)。
- 左边的<span> 元素是 <li> 的子元素，同时也是 <ul> 的孙 和 <div> 的曾孙。
- 两个 <li> 元素是同胞兄弟（拥有相同的父元素ul）。
- 右边的 <li> 元素是 <b> 的父元素，同时也是<ul> 的子元素，同时还是 <div> 的后代(孙)。
- 右边的<b> 元素是右边的 <li> 的子元素，同时还是 <ul>的孙 和 <div> 的曾孙。
 | 祖先是 父、祖父、曾祖父等等。 后代是子、孙、曾孙等等。 同胞兄弟 拥有 相同的父。 |
|---|
遍历 DOM
jQuery 提供了多种遍历 DOM 的方法。
遍历方法中最大的种类是 树遍历（tree-traversal）。
下面我们讲解一下下,如何在 DOM 树中向上、向下以及同级 间移动。
jQuery 遍历 - 祖先
祖先 是父、祖父或曾祖父等等。
通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先ancestor。
向上遍历 DOM 树
这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
- parent()
- parents()
- parentsUntil() 介绍两者之间(但不包括两者,开区间)
jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
下面的例子返回每个 <span> 元素的的直接父元素：
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyondの心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
<style type="text/css">
.class_div_container *{
display: block;
border:2px solid lightgray;
color:lightgray;
padding:5px;
margin:10px;
}
</style>
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div class="class_div_container">
<div style="width:400px;">
div(曾祖父)
<ul>ul(祖父)
<li>li(父parent)
<span>我是span</span>
</li>
</ul>
</div>
<div style="width:400px;">div(祖父)
<p class="class_p_parent">p(父parent)
<span>我是span2</span>
</p>
</div>
</div>
<button class="class_btn class_btn_green" type="button" >span元素のparent</button>
<script type="text/javascript">
$(document).ready(
function () {
// 绑定事件
$(".class_btn_green").click(
function() {
$("span").parent().css({
"color" : "red",
"border" : "2px solid red"
});
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>显示span的父元素
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html> 效果如下:
实例
$(document).ready(function(){
$("span").parent();
});
$("span").parent();
});
jQuery parents() 方法
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
下面的例子返回所有 <span> 元素的所有祖先：
代码如下:
代码和上面一个完全类似,除了parent改成parents
效果如下:
核心代码:
$(document).ready(function(){
$("span").parents();
});
$("span").parents();
});
您也可以使用可选参数来 过滤 对祖先元素的搜索。
下面的例子返回所有 <span> 元素的所有祖先，并且它必须是 <div> 元素：
代码如下:
代码和上面一个完全类似,除了parents()改成parents("div")
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyondの心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
<style type="text/css">
.class_div_container,.class_div_container *{
display: block;
border:2px solid lightgray;
color:lightgray;
padding:5px;
margin:10px;
}
</style>
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div class="class_div_container">div容器
<div style="width:400px;">
div(曾祖父)
<ul>ul(祖父)
<li>li(父parent)
<span>我是span</span>
</li>
</ul>
</div>
<div style="width:400px;">div(祖父)
<p class="class_p_parent">p(父parent)
<span>我是span2</span>
</p>
</div>
</div>
<button class="class_btn class_btn_green" type="button" >span元素のparents("div")</button>
<script type="text/javascript">
$(document).ready(
function () {
// 绑定事件
$(".class_btn_green").click(
function() {
$("span").parents("div").css({
"color" : "red",
"border" : "2px solid red"
});
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>显示span的parents("div")
<br/>
该parents必须是div才可以
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html> 效果如下:
核心代码
$(document).ready(function(){
$("span").parents("div");
});
$("span").parents("div");
});
jQuery parentsUntil() 方法 开区间,不包括起始和结束
parentsUntil() 方法返回 介于两个给定元素之间 的所有祖先元素。
下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：
代码如下:
代码和上面的完全一样,除了parents("div")变成parentsUntil("div");
效果如下:
核心代码:
$(document).ready(function(){
$("span").parentsUntil("div");
});
$("span").parentsUntil("div");
});
jQuery 遍历 - 后代
后代是子、孙、曾孙等等。
通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。
向下遍历 DOM 树
下面是两个用于向下遍历 DOM 树的 jQuery 方法：
- children() 所有直接子元素
- find() 参数为*时,可以查找所有的后代元素
jQuery children() 方法
children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。
下面的例子返回每个 <div> 元素的所有直接子元素：
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyond心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
<style type="text/css">
div *{
display: block;
border:2px solid lightgray;
color:lightgray;
padding:5px;
margin:10px;
}
</style>
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div style="width:400px;">
div(曾祖父)
<ul>ul(祖父)
<li>li(父parent)
<span>我是span</span>
</li>
</ul>
</div>
<div style="width:400px;">div(祖父)
<p class="class_p_parent">p(父parent)
<span>我是span2</span>
</p>
</div>
<button class="class_btn class_btn_green" type="button" >div元素のchildren()直接子元素</button>
<script type="text/javascript">
$(document).ready(
function () {
// 绑定事件
$(".class_btn_green").click(
function() {
$("div").children().css({
"color" : "red",
"border" : "2px solid red"
});
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$("div").children();只是全部直接子元素
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html> 效果如下:
核心代码:
$(document).ready(function(){
$("div").children();
});
$("div").children();
});
您也可以使用可选参数来 过滤 对子元素的搜索。
下面的例子返回类名为 "class_p_parent" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyond心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
<style type="text/css">
div *{
display: block;
border:2px solid lightgray;
color:lightgray;
padding:5px;
margin:10px;
}
</style>
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div style="width:400px;">
div(曾祖父)
<ul>ul(祖父)
<li>li(父parent)
<span>我是span</span>
</li>
</ul>
</div>
<div style="width:400px;">div(祖父)
<p class="class_p">p(父parent)
<span>我是span2</span>
</p>
</div>
<button class="class_btn class_btn_green" type="button" >div元素のchildren("p.class_p")<br/>即直接子元素中指定class的p元素</button>
<script type="text/javascript">
$(document).ready(
function () {
// 绑定事件
$(".class_btn_green").click(
function() {
$("div").children("p.class_p").css({
"color" : "red",
"border" : "2px solid red"
});
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$("div").children("p.class_p");<br/>直接子元素中class为class_p的p元素
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html> 效果如下:
核心代码:
$(document).ready(function(){
$("div").children("p.class_p_parent");
});
$("div").children("p.class_p_parent");
});
jQuery find() 方法
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
下面的例子返回属于 <div> 后代的所有 <span> 元素：
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyond心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
<style type="text/css">
div *{
display: block;
border:2px solid lightgray;
color:lightgray;
padding:5px;
margin:10px;
}
</style>
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div style="width:400px;">
div(曾祖父)
<ul>ul(祖父)
<li>li(父parent)
<span>我是span</span>
</li>
</ul>
</div>
<div style="width:400px;">div(祖父)
<p class="class_p">p(父parent)
<span>我是span2</span>
</p>
</div>
<button class="class_btn class_btn_green" type="button" >$("div").find("span");<br/>所有作为div后代的span元素</button>
<script type="text/javascript">
$(document).ready(
function () {
// 绑定事件
$(".class_btn_green").click(
function() {
$("div").find("span").css({
"color" : "red",
"border" : "2px solid red"
});
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$("div").find("span");<br/>所有作为div后代的span元素
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html> 效果如下:
核心代码:
$(document).ready(function(){
$("div").find("span");
});
$("div").find("span");
});
下面的例子参数是 * , 即返回 <div> 的所有后代：
代码如下:
代码同前一个html_571.html一样,除了参数改成了"*"
效果如下:
核心代码:
$(document).ready(function(){
$("div").find("*");
});
$("div").find("*");
});
jQuery 遍历 - 同胞兄弟(siblings)
同胞兄弟 拥有相同的父元素。
通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。
在 DOM 树中水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历：
- siblings() 所有的兄弟元素
- next() 下一个直接相邻的兄弟
- nextAll() 排在后面的所有的兄弟
- nextUntil() 开区间,排在后面,且介于xxx之间的兄弟
- prev() 上一个直接相邻的兄弟
- prevAll() 排在前面的所有的兄弟
- prevUntil() 开区间,排在前面,且介于xxx之间的兄弟
jQuery siblings() 方法
siblings() 方法 返回被选元素的 所有同胞兄妹元素。
下面的例子返回 <span> 的所有同胞兄妹元素：
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyond心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
<style type="text/css">
div *{
display: block;
border:2px solid lightgray;
color:lightgray;
padding:5px;
margin:10px;
}
</style>
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div style="width:400px;">
div(曾祖父)
<ul>ul(祖父)
<li>li(父parent)
<h3>我是h3</h3>
<h5>我是h5</h5>
<span>我是span</span>
<h6>我是h6</h6>
</li>
</ul>
</div>
<button class="class_btn class_btn_green" type="button" >$("span").siblings();<br/>所有作为span的兄弟元素</button>
<script type="text/javascript">
$(document).ready(
function () {
// 绑定事件
$(".class_btn_green").click(
function() {
$("span").siblings().css({
"color" : "red",
"border" : "2px solid red"
});
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$("span").siblings();<br/>所有作为span的兄弟元素
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html> 效果如下:
核心代码:
$(document).ready(function(){
$("span").siblings();
});
$("span").siblings();
});
您也可以使用可选 参数来过滤 对同胞兄妹元素的搜索。
下面的例子返回属于 <span> 的同胞元素的所有 <p> 元素：
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyond心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
<style type="text/css">
div *{
display: block;
border:2px solid lightgray;
color:lightgray;
padding:5px;
margin:10px;
}
</style>
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div style="width:400px;">
div(曾祖父)
<ul>ul(祖父)
<li>li(父parent)
<p>我是p</p>
<h5>我是h5</h5>
<span>我是span</span>
<h6>我是h6</h6>
<p>我是p</p>
</li>
</ul>
</div>
<button class="class_btn class_btn_green" type="button" >$("span").siblings("p");<br/>所有作为span的兄弟p元素</button>
<script type="text/javascript">
$(document).ready(
function () {
// 绑定事件
$(".class_btn_green").click(
function() {
$("span").siblings("p").css({
"color" : "red",
"border" : "2px solid red"
});
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$("span").siblings("p");<br/>所有作为span的兄弟元素,并且是p元素
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html> 效果如下:
核心代码:
$(document).ready(function(){
$("span").siblings("p");
});
$("span").siblings("p");
});
jQuery next() 方法
next() 方法返回被选元素的下一个直接相邻的同胞兄妹元素。
该方法 只返回一个直接相邻的兄妹元素。
下面的例子返回 <span> 的下一个直接相邻的同胞兄妹元素：
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyond心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
<style type="text/css">
div *{
display: block;
border:2px solid lightgray;
color:lightgray;
padding:5px;
margin:10px;
}
</style>
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div style="width:400px;">
div(曾祖父)
<ul>ul(祖父)
<li>li(父parent)
<p>我是p</p>
<h5>我是h5</h5>
<span>我是span</span>
<h6>我是h6</h6>
<p>我是p</p>
</li>
</ul>
</div>
<button class="class_btn class_btn_green" type="button" >$("span").next();<br/>span的下一个直接相邻的同胞兄妹元素</button>
<script type="text/javascript">
$(document).ready(
function () {
// 绑定事件
$(".class_btn_green").click(
function() {
$("span").next().css({
"color" : "red",
"border" : "2px solid red"
});
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$("span").next();<br/>span的下一个直接相邻的同胞兄妹元素
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html> 效果如下:
核心代码:
$(document).ready(function(){
$("span").next();
});
$("span").next();
});
jQuery nextAll() 方法
nextAll() 方法返回被选元素的后面所有的同胞兄妹元素。
下面的例子返回 <span> 的后面所有的同胞兄妹元素：
代码如下:
代码只要把上一个的函数改成nextAll()即可
效果如下:
核心代码:
$(document).ready(function(){
$("span").nextAll();
});
$("span").nextAll();
});
jQuery nextUntil() 方法
nextUntil() 方法返回介于两个给定参数之间的 后面所有的跟随的同胞兄妹元素。
下面的例子返回位于span之后的,且介于 <span> 与 <p> 元素之间的所有同胞兄弟元素：
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="未闻花名-免费零基础教程-beyond">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyond心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
<style type="text/css">
div *{
display: block;
border:2px solid lightgray;
color:lightgray;
padding:5px;
margin:10px;
}
</style>
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div style="width:300px;margin:auto;">
div(曾祖父)
<ul>ul(祖父)
<li>li(父parent)
<p>我是p</p>
<h5>我是h5</h5>
<span>我是span</span>
<h6>我是h6</h6>
<p>我是p</p>
</li>
</ul>
</div>
<button class="class_btn class_btn_green" type="button" style="display:block;margin:auto;">$("span").nextUntil("p");<br/>开区间,后面的且介于两者之前的兄妹元素</button>
<script type="text/javascript">
$(document).ready(
function () {
// 绑定事件
$(".class_btn_green").click(
function() {
$("span").nextUntil("p").css({
"color" : "red",
"border" : "2px solid red"
});
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$("span").nextUntil("p");<br/>开区间,后面的且介于两者之前的兄妹元素
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html> 效果如下:
核心代码:
$(document).ready(function(){
$("span").nextUntil("p");
});
$("span").nextUntil("p");
});
jQuery prev(), prevAll() & prevUntil() 方法
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，
只不过方向相反而已：它们返回的是前面的同胞元素。
jQuery 遍历- 过滤
缩小搜索元素的范围
三个最基本的过滤方法是：
1. first() 选择出来的元素中 第1个
2. last() 选择出来的元素中 最后1个
3. eq(n) 选择出来的元素中 第n个
它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，
比如 filter() 和 not() 允许您选取 匹配或不匹配 某项指定标准的元素。
jQuery first() 方法
first() 方法返回 被选元素 的首个元素。
下面的例子:
选取首个 <div> 元素内部的第一个 <p> 元素：
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="未闻花名-免费零基础教程-beyond">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyond心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
<style type="text/css">
div *{
display: block;
border:2px solid lightgray;
color:lightgray;
padding:5px;
margin:10px;
}
</style>
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div style="width:300px;margin:auto;">
div(曾祖父)
<ul>ul(祖父)
<li>li(父parent)
<p>我是p</p>
<h5>我是h5</h5>
<span>我是span</span>
<h6>我是h6</h6>
<p>我是p</p>
</li>
</ul>
</div>
<button class="class_btn class_btn_green" type="button" style="display:block;margin:auto;">$("div p").first();<br/>div内部的p元素,且是第1个</button>
<script type="text/javascript">
$(document).ready(
function () {
// 绑定事件
$(".class_btn_green").click(
function() {
$("div p").first().css({
"color" : "red",
"border" : "2px solid red"
});
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$("div p").first();<br/>div内部的p元素,且是第1个
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html> 效果如下:
核心代码:
$(document).ready(function(){
$("div p").first();
});
$("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）：
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="未闻花名-免费零基础教程-beyond">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyond心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
<style type="text/css">
div *{
display: block;
border:2px solid lightgray;
color:lightgray;
padding:5px;
margin:10px;
}
</style>
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div style="width:300px;margin:auto;">
div(曾祖父)
<ul>ul(祖父)
<li>li(父parent)
<p>我是p</p>
<h5>我是h5</h5>
<span>我是span</span>
<h6>我是h6</h6>
<p>我是p</p>
</li>
</ul>
</div>
<button class="class_btn class_btn_green" type="button" style="display:block;margin:auto;">$("p").eq(1);<br/>选取p元素,且是第2个</button>
<script type="text/javascript">
$(document).ready(
function () {
// 绑定事件
$(".class_btn_green").click(
function() {
$("p").eq(1).css({
"color" : "red",
"border" : "2px solid red"
});
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$("p").eq(1);<br/>选取p元素,且是第2个
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html> 效果如下:
核心代码:
$(document).ready(function(){
$("p").eq(1); //选取p元素,且是第2个
});
$("p").eq(1); //选取p元素,且是第2个
});
jQuery filter() 方法 过滤出符合要求的元素
filter() 方法允许您规定一个标准。
匹配的元素会被返回。
不匹配这个标准的元素会被从集合中删除，
下面的例子返回带有类名 "class_p_indigo" 的所有 <p> 元素：
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="未闻花名-免费零基础教程-beyond">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyond心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
<style type="text/css">
div *{
display: block;
border:2px solid lightgray;
color:lightgray;
padding:5px;
margin:10px;
}
</style>
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div style="width:300px;margin:auto;">
div(曾祖父)
<ul>ul(祖父)
<li>li(父parent)
<p class="class_p_teal" style="color:teal;">我是p,class是teal~</p>
<h5>我是h5</h5>
<span>我是span</span>
<h6>我是h6</h6>
<p class="class_p_indigo" style="color:indigo;">我是p,class是indigo~</p>
</li>
</ul>
</div>
<button class="class_btn class_btn_green" type="button" style="display:block;margin:auto;">$("p").filter(".class_p_indigo");<br/>选取p元素,且class为indigo</button>
<script type="text/javascript">
$(document).ready(
function () {
// 绑定事件
$(".class_btn_green").click(
function() {
$("p").filter(".class_p_indigo").css({
"color" : "red",
"border" : "2px solid red"
});
}
);
}
);
</script>
<!-- <p class="sgcenter">
<b>注意:</b>$("p").filter(".class_p_indigo");<br/>选取p元素,且class为indigo
</p> -->
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html> 效果如下:
核心代码:
$(document).ready(function(){
$("p").filter(".class_p_indigo");
});
$("p").filter(".class_p_indigo");
});
jQuery not() 方法 除了xxx之外的所有元素
not() 方法返回 不匹配标准的所有元素。
提示：not() 方法与 filter() 相反。
下面的例子返回不带有类名 "class_p_indigo" 的所有 <p> 元素：
代码如下:
代码与上一个类似,只是将函数filter改成完全相反的not
效果如下:
核心代码:
$(document).ready(function(){
$("p").not(".class_p_indigo");
});
$("p").not(".class_p_indigo");
});
jQuery - AJAX 简介
Ajax 全称: Asynchronous JavaScript And XML(异步的 JavaScript 和 XML)
AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
注意:chrome如果是本地文件而非服务器环境的话,会提示跨域错误(firefox则不存在)
欲异步请求的文件内容如下:
在我们走过的季节里<br/>
路旁盛开的花朵也在不断变化<br/>
那个季节盛开的花是叫什么来着?<br/>
轻轻摇曳着,一碰会微微刺痛<br/>
靠近一闻,隐约有股青涩的阳光的气息<br/>
那气息渐渐地淡去,我们也在慢慢长大<br/>
可是,<span style="color:red;">那朵花</span>一定还在某个地方盛开着……<br/>
对,我们永远都会继续实现<span style="color:red;">那朵花</span>的愿望.代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="未闻花名-免费零基础教程-beyond">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyond心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor ">
未闻花名
</h1>
<div id="id_div_hana" style="color:#666;padding-left:10px;">
</div>
<button class="class_btn class_btn_green" type="button" style="margin-top:10px;">jQueryのAjaxのload方法</button>
<script type="text/javascript">
$(document).ready(
function () {
// 绑定事件
$(".class_btn_green").click(
function() {
// load一个txt,显示到div
var fileName = "hana.txt";
fileName = fileName + "?time=" + new Date().getTime();
$("#id_div_hana").load("hana.txt" );
}
);
}
);
</script>
<p class="">
<b>注意:</b>使用jQuery的load方法
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:left;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html> 效果如下:
为了每次取最新的内容,可以在文件名后加上时间戳
什么是 AJAX？
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
关于 jQuery 与 AJAX
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON
同时您能够把这些外部数据 直接载入 网页的被选元素中。
| 如果没有 jQuery，AJAX 编程还是有些难度的。 编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。 这意味着您必须编写额外的代码对浏览器进行测试。 不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。 |
|---|
jQuery - AJAX load() 方法
jQuery load() 方法
jQuery load() 方法是 简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法:
$(
selector).load(
URL,postdata,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的 查询 字符串 键/值对 集合。
可选的 callback 参数是 load() 方法完成后,填充元素之前,所执行的函数名称。
这是示例文件（"anohana.txt"）的内容：
在我们走过的季节里<br/>
路旁盛开的花朵也在不断变化<br/>
那个季节盛开的花是叫什么来着?<br/>
轻轻摇曳着,一碰会微微刺痛<br/>
靠近一闻,隐约有股青涩的阳光的气息<br/>
那气息渐渐地淡去,我们也在慢慢长大<br/>
可是,<span style="color:red;">那朵花</span>一定还在某个地方盛开着……<br/>
对,我们永远都会继续实现<span style="color:red;">那朵花</span>的愿望.下面的例子会把文件 "anohana.txt" 的内容加载到指定的 <div> 元素中：
核心代码:
$("#div1").load("anohana.txt");
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="未闻花名-免费零基础教程-beyond">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyond心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div id="id_div_hana" style="color:#666;padding:10px 10px;border:1px solid Cadetblue;margin:4px;border-radius:8px;">
div
</div>
<button class="class_btn class_btn_green" type="button" style="display:block;margin:auto;margin-top:10px;">jQueryのAjaxのload方法</button>
<script type="text/javascript">
$(document).ready(
function () {
// 绑定事件
$(".class_btn_green").click(
function() {
// load一个txt,显示到div
var fileName = "hana.txt";
fileName = fileName + "?time=" + new Date().getTime();
$("#id_div_hana").load("hana.txt" );
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>使用jQuery的load方法
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html> 效果如下:
为了每次取最新的内容,可以在文件名后加上时间戳
也可以把 jQuery 选择器添加到 URL 参数中,用空格隔开。
下面的例子把 "anohana.txt" 文件中 id="id_span_hana" 的元素的内容，
加载到指定的 <div> 元素中：
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="未闻花名-免费零基础教程-beyond">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyond心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div id="id_div_hana" style="color:#666;padding:10px 10px;border:1px solid Cadetblue;margin:4px;border-radius:8px;">
div
</div>
<button class="class_btn class_btn_green" type="button" style="display:block;margin:auto;margin-top:10px;">jQueryのAjaxのload方法</button>
<script type="text/javascript">
$(document).ready(
function () {
// 绑定事件
$(".class_btn_green").click(
function() {
// load一个txt,显示到div
var fileName = "anohana.txt";
fileName = fileName + "?time=" + new Date().getTime();
$("#id_div_hana").load(fileName + " #id_span_hana" );
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$("#id_div_hana").load("hana.txt #id_span_hana" )<br/>使用jQuery的load方法<br>参数中还可加选择器,与文件名用空格隔开<br/>为了每次取最新的,可以在文件名后加上时间戳
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html> 在我们走过的季节里<br/>
路旁盛开的花朵也在不断变化<br/>
那个季节盛开的花是叫什么来着?<br/>
轻轻摇曳着,一碰会微微刺痛<br/>
靠近一闻,隐约有股青涩的阳光的气息<br/>
那气息渐渐地淡去,我们也在慢慢长大<br/>
可是,<span style="color:red;">那朵花</span>一定还在某个地方盛开着……<br/>
对,我们永远都会继续实现<span id="id_span_hana" style="color:red;">那朵花</span>的愿望.效果如下:
核心代码:
$("#div1").load("anohana.txt #id_span_hana");
可选的 callback 参数规定当 load("path",callback) 方法完成后,内容填充之前,所要执行的回调函数。
回调函数可以设置不同的参数：
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。
如果 load() 方法已成功，则显示"外部内容加载成功！"，
而如果失败，则显示错误消息：
anohana2.txt内容如下:
<span style="color:#BB0A1E;">面码</span>:"最喜欢仁太了,对仁太的这种喜欢是想要成为仁太<span style="color:#BB0A1E;">新娘子</span>的喜欢~"
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond2.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="未闻花名-免费零基础教程-beyond">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyond心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div id="id_div_hana" style="color:#666;padding:10px 10px;border:1px solid Cadetblue;margin:4px;border-radius:8px;">
div
</div>
<button class="class_btn class_btn_green" type="button" style="display:block;margin:auto;margin-top:10px;">jQueryのAjaxのload方法</button>
<script type="text/javascript">
$(document).ready(
function () {
// 绑定事件
$(".class_btn_green").click(
function() {
// load一个txt,显示到div
var fileName = "anohana2.txt";
fileName = fileName + "?time=" + new Date().getTime();
$("#id_div_hana").load(fileName,callbackFunction);
// 定义函数
function callbackFunction(responseText,statusText,xmlHttpRequest) {
// body...
NSLog("response: \n" + responseText);
NSLog("status: " + statusText);
NSLog("XMLHttpRequest: \n" + xmlHttpRequest.constructor);
}
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$("#id_div").load("hana.txt",callback)<br/>为了每次取最新的,可以在文件名后加上时间戳<br/>参数2:回调函数(responseText,statusText,XHR);
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html> 效果如下:
核心代码:
$("button").click(function(){
$("#div1").load("anohana.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("External content loaded successfully!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
$("#div1").load("anohana.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("External content loaded successfully!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
提示：在jQuery的load()方法中，无论AJAX请求是否成功，
一旦请求完成（complete）后，回调函数（callback）立即被触发。
最后,才是填充内容!
jQuery - AJAX get() 和 post() 方法
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
HTTP 请求：GET vs. POST
两种在客户端和服务器端进行请求-
响应的常用方法是：GET 和 POST。
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
jQuery $.get("url",callback) 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：
$.get(
URL,
callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：
cgi-bin/ruby_24.rb文件内容如下(记得要修改ruby_24.rb文件权限为755)
#!/usr/bin/ruby
# -*- coding: UTF-8 -*-
#coding=utf-8
require 'cgi'
cgi = CGI.new("html4")
anime = cgi['anime']
cgi.out{
cgi.html{
cgi.head{ "\n" +'<meta http-equiv=Content-Type content="text/html;charset=utf-8">' + cgi.title{"Ruby CGI"}}+
cgi.body{ "<p style='text-align:center'>最爱の动漫 : <span style='color:#BB0A1E'>#{anime}</span></p>\n"
}
}
} html_587.html代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond2.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="未闻花名-免费零基础教程-beyond">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyond心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div id="id_div_hana" style="color:#666;padding:10px 10px;border:1px solid Cadetblue;margin:4px;border-radius:8px;">
div
</div>
<button class="class_btn class_btn_green" type="button" style="display:block;margin:auto;margin-top:10px;">jQueryのAjaxのget方法</button>
<script type="text/javascript">
$(document).ready(
function () {
// 绑定事件
$(".class_btn_green").click(
function() {
// load一个txt,显示到div
var fileName = "/cgi-bin/ruby_24.rb";
fileName = fileName + "?time=" + new Date().getTime();
fileName = fileName + "&anime=那朵花"
$.get(fileName,callbackFunction);
function callbackFunction(responseData,status) {
$("#id_div_hana").html("responseData: " + responseData + "<br/>status: " + status);
NSLog("responseData: " + responseData);
NSLog("status: " + status);
}
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$.get("filepath",callback)<br/>get方法可能会有缓存<br/>为了每次取最新的,可以在文件名后加上时间戳<br/>参数2:回调函数(responseData,status);
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html> 效果如下:
核心代码:
$("button").click(function(){
$.get("cgi-bin/ruby_24.rb",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
$.get("cgi-bin/ruby_24.rb",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
$.get() 的第一个参数是我们希望请求的 URL（"cgi-bin/ruby_24.rb"）。
第二个参数是回调函数。
参数1: 被请求页面的内容，
参数2: 请求的结果状态。
jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法:
$.post(
URL,dataObj,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 dataObj 参数规定连同请求发送的数据,类型是对象。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据：
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond2.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="未闻花名-免费零基础教程-beyond">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyond心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div id="id_div_hana" style="color:#666;padding:10px 10px;border:1px solid Cadetblue;margin:4px;border-radius:8px;">
div
</div>
<button class="class_btn class_btn_green" type="button" style="display:block;margin:auto;margin-top:10px;">jQueryのAjaxのpost方法</button>
<script type="text/javascript">
$(document).ready(
function () {
// 绑定事件
$(".class_btn_green").click(
function() {
// load一个txt,显示到div
var fileName = "/cgi-bin/ruby_24.rb";
$.post(fileName,{"anime" : "那朵花"},callbackFunction);
function callbackFunction(responseData,status) {
$("#id_div_hana").html("responseData: " + responseData + "<br/>status: " + status);
NSLog("responseData: " + responseData);
NSLog("status: " + status);
}
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$.post("filepath",dataObj,callback)<br/>参数2:类型是对象<br/>参数3:回调函数(responseData,status);
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html> 效果如下:
核心代码:
$("button").click(function(){
$.post("cgi-bin/ruby_24.rb",
{
anime: "那朵花",
actress: "面码"
},
function(data,status){
alert("Data: " + data + "nStatus: " + status);
});
});
$.post("cgi-bin/ruby_24.rb",
{
anime: "那朵花",
actress: "面码"
},
function(data,status){
alert("Data: " + data + "nStatus: " + status);
});
});
$.post() 的第一个参数是我们希望请求的 URL ("cgi-bin/ruby_24.rb")。
然后我们连同请求（anime 和 actress）一起发送数据。
"ruby_24.rb" 中的 Ruby的CGI 脚本读取这些参数，对它们进行处理，然后返回结果。
第三个参数是回调函数。
第一个回调参数:存有被请求页面的内容，
而第二个参数:存有请求的状态。
提示： 这个 cgi-bin/ruby_24.rb 文件 ("ruby_24.rb") 类似这样：
#!/usr/bin/ruby
# -*- coding: UTF-8 -*-
#coding=utf-8
require 'cgi'
cgi = CGI.new("html4")
anime = cgi['anime']
cgi.out{
cgi.html{
cgi.head{ "\n" +'<meta http-equiv=Content-Type content="text/html;charset=utf-8">' + cgi.title{"Ruby CGI"}}+
cgi.body{ "<p style='text-align:center'>最爱の动漫 : <span style='color:#BB0A1E'>#{anime}</span></p>\n"
}
}
} 提示：在jQuery中，$.ajax()方法能够实现与load()、$.get()和$.post()方法相同的功能，并且具有更多的作用！
jQuery ajax() 方法
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond2.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="未闻花名-免费零基础教程-beyond">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyond心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div id="id_div_hana" style="color:#666;padding:10px 10px;border:1px solid Cadetblue;margin:4px;border-radius:8px;">
div
</div>
<button class="class_btn class_btn_green" type="button" style="display:block;margin:auto;margin-top:10px;">jQueryのAjaxのajax方法</button>
<script type="text/javascript">
$(document).ready(
function () {
// 绑定事件
$(".class_btn_green").click(
function() {
// load一个txt,显示到div
var fileName = "/cgi-bin/ruby_24.rb";
// 参数类型:对象(共有24个键值对)
// contentType 发送的类型
// dataType 服务器返回的类型
// success(result,status,xhr)
// error(xhr,status,error),complete(xhr,status)
var obj = {url:fileName,data:{"anime":"那朵花"},type : "post",timeout:8000,cache:false,async:true,success:callbackFunction,contentType:"application/x-www-form-urlencoded",dataType:"html"};
$.ajax(obj);
function callbackFunction(responseData,status) {
$("#id_div_hana").html("responseData: " + responseData + "<br/>status: " + status);
NSLog("responseData: " + responseData);
NSLog("status: " + status);
}
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$.ajax(obj)<br/>参数类型:对象(共有24个键值对)
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html> 效果如下:
核心代码:
使用 AJAX 请求改变 <div> 元素的文本：
$("button").click(function(){
$.ajax({url:"demo_test.txt",success:function(result){
$("#div1").html(result);
}});
});
$.ajax({url:"demo_test.txt",success:function(result){
$("#div1").html(result);
}});
});
定义和用法
ajax() 方法用于执行 AJAX（异步 HTTP）请求。
所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
语法
$.ajax(
{name:value, name:value, ... })
该参数规定 AJAX 请求的一个或多个名称/值对。 共24个
下面的表格中列出了可能的名称/值：共24个
| 名称 | 值/描述 |
|---|---|
| async | 布尔值，表示请求是否异步处理。默认是 true。 |
| beforeSend(xhr) | 发送请求前运行的函数。 |
| cache | 布尔值，表示浏览器是否缓存被请求页面。默认是 true。 |
| complete(xhr,status) | 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。 |
| contentType | 发送数据到服务器时 所使用的内容类型。 默认是："application/x-www-form-urlencoded"。 |
| context | 为所有 AJAX 相关的回调函数规定 "this" 值。 |
| data | 规定要发送到服务器的数据。类型是对象 |
| dataFilter(data,type) | 用于处理 XMLHttpRequest 原始响应数据的函数。 |
| dataType | 预期的服务器响应的数据类型。 |
| error(xhr,status,error) | 如果请求失败要运行的函数。 |
| global | 布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 |
| ifModified | 布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 |
| jsonp | 在一个 jsonp 中重写回调函数的字符串。 |
| jsonpCallback | 在一个 jsonp 中规定回调函数的名称。 |
| password | 规定在 HTTP 访问认证请求中使用的密码。 |
| processData | 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。 |
| scriptCharset | 规定请求的字符集。 |
| success(result,status,xhr) | 当请求成功时运行的函数。 |
| timeout | 设置本地的请求超时时间（以毫秒计）。 |
| traditional | 布尔值，规定是否使用参数序列化的传统样式。 |
| type | 规定请求的类型（GET 或 POST）。 |
| url | 规定发送请求的 URL。默认是当前页面。 |
| username | 规定在 HTTP 访问认证请求中使用的用户名。 |
| xhr | 用于创建 XMLHttpRequest 对象的函数。 |
更多实例
生成带有指定数据类型的 AJAX 请求
如何使用 dataType 设置来规定请求的数据类型。如script
js代码如下:
$("body").css("background-color","ivory");
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond2.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="未闻花名-免费零基础教程-beyond">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
">
<title>beyond心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div id="id_div_hana" style="color:#666;padding:10px 10px;border:1px solid Cadetblue;margin:4px;border-radius:8px;">
div
</div>
<button class="class_btn class_btn_green" type="button" style="display:block;margin:auto;margin-top:10px;">jQueryのAjaxのajax方法<br/>请求一个js,dataType是script</button>
<script type="text/javascript">
$(document).ready(
function () {
// 绑定事件
$(".class_btn_green").click(
function() {
// load一个txt,显示到div
var fileName = "js590.js";
// 参数类型:对象(共有24个键值对)
// contentType 发送的类型
// dataType 服务器返回的类型
// success(result,status,xhr)
// error(xhr,status,error),complete(xhr,status)
var obj = {url:fileName,data:{"anime":"那朵花"},type : "post",timeout:8000,cache:false,async:true,success:callbackSuccessFunction,error:callbackErrorFunction,contentType:"application/x-www-form-urlencoded",dataType:"script"};
// 发送ajax请求
$.ajax(obj);
// 请求成功的函数
function callbackSuccessFunction(responseData,status) {
$("#id_div_hana").html("responseData: <br/>" + responseData + "<br/>status: " + status);
NSLog("responseData: " + responseData);
NSLog("status: " + status);
}
// 请求失败的函数
function callbackErrorFunction (xhr,status,error) {
// body...
alert("xhr.status: " + xhr.status + "\nxhr.statusText: + " + xhr.statusText + "\nstatus: " + status + "\nerror: " + error);
}
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$.ajax(obj)<br/>参数类型:对象(共有24个键值对)<br/>
设置服务器返回的dataType是script
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html> 效果如下:
生成带有错误的 AJAX 请求
如何使用错误设置来处理 AJAX 请求中的错误。
jQuery - noConflict() 方法
如何在页面上 同时使用 jQuery 和其他框架？
要解决这个问题，只需要使用jQuery中的noConflict()方法，
它允许你在同一个页面加载多个jQuery实例，尤其是不同版本的jQuery。
jQuery 和其他 JavaScript 框架
正如您已经了解到的，jQuery 使用 $ 符号作为 jQuery 的简写。
如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？
其他一些 JavaScript 框架包括：
MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、
Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
其中某些框架也使用 $ 符号作为简写（就像 jQuery），
如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。
jQuery 的团队考虑到了这个问题，创造性 跨时代地 并实现了 noConflict() 方法。
jQuery noConflict() 方法
noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。
当然，您仍然可以通过 全名 替代 简写 的方式来使用 jQuery：
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond2.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="未闻花名-免费零基础教程-beyond">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyond心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div id="id_div_hana" style="color:#666;padding:10px 10px;border:1px solid Cadetblue;margin:4px;border-radius:8px;">
div
</div>
<button class="class_btn class_btn_green" type="button" style="display:block;margin:auto;margin-top:10px;">jQueryの$.noConflict()方法</button>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(
function () {
jQuery(".class_btn_green").click(
function() {
jQuery("#id_div_hana").text("我们仍未知道那年夏天所见到的花的名字");
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>执行$.noConflict()方法之后<br/>使用jQuery代替$
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html> 效果如下:
核心代码:
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery is still working!");
});
});
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery is still working!");
});
});
您也可以创建自己的简写。
noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。
请看这个例子：
代码如下:
<script type="text/javascript">
var jq = $.noConflict();
jq(document).ready(
function () {
jq(".class_btn_green").click(
function() {
jq("#id_div_hana").text("我们仍未知道那年夏天所见到的花的名字");
}
);
}
);
</script>效果如下:
核心代码:
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery is still working!");
});
});
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery is still working!");
});
});
如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，
那么您可以把 $ 符号作为变量传递给 ready 方法。
这样就可以在函数内使用 $ 符号了 -
而在函数外，依旧不得不使用 "jQuery"：
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond2.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="未闻花名-免费零基础教程-beyond">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyond心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div id="id_div_hana" style="color:#666;padding:10px 10px;border:1px solid Cadetblue;margin:4px;border-radius:8px;">
div
</div>
<button class="class_btn class_btn_green" type="button" style="display:block;margin:auto;margin-top:10px;">jQueryの$.noConflict()方法</button>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(
function ($) {
$(".class_btn_green").click(
function() {
$("#id_div_hana").text("我们仍未知道那年夏天所见到的花的名字");
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>执行$.noConflict()方法之后<br/>可使用jQuery代替$,并且<br/>
可设置ready()方法的参数中的那个匿名函数的参数为$<br/>这样ready方法内部依然可以使用$<br/>
但在ready()方法外,不得不使用jQuery
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html> 效果如下:
核心代码:
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery is still working!");
});
});
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery is still working!");
});
});
附录:ajax方法的参数的24个键值对详解
参数
-
options
-
类型：Object
可选。AJAX 请求设置。所有选项都是可选的。
async
-
类型：Boolean
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend(XHR)
-
类型：Function
发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。
XMLHttpRequest 对象是唯一的参数。
这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。
cache
-
类型：Boolean
默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
jQuery 1.2 新功能。
complete(XHR, TS)
-
类型：Function
请求完成后回调函数 (请求成功或失败之后均调用)。
参数： XMLHttpRequest 对象和一个描述请求类型的字符串。
这是一个 Ajax 事件。
contentType
-
类型：String
默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
默认值适合大多数情况。
-
如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。
context
-
类型：Object
这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。
就像这样：
$.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done"); }});
data
-
类型：String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
dataFilter
-
类型：Function
给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。
dataType
-
类型：String
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
- "xml": 返回 XML 文档，可用 jQuery 处理。
- "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
- "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
- "json": 返回 JSON 数据 。
- "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
- "text": 返回纯文本字符串
error
-
类型：Function
默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 "timeout", "error", "notmodified" 和 "parsererror"。
这是一个 Ajax 事件。
global
-
类型：Boolean
是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
ifModified
-
类型：Boolean
仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中，它也会检查服务器指定的 'etag' 来确定数据没有被修改过。
jsonp
-
类型：String
在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分，比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。
jsonpCallback
-
类型：String
为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。
password
-
类型：String
用于响应 HTTP 访问认证请求的密码
processData
-
类型：Boolean
默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
scriptCharset
-
类型：String
只有当请求时 dataType 为 "jsonp" 或 "script"，并且 type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。
success
-
类型：Function
请求成功后的回调函数。
参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
这是一个 Ajax 事件。
traditional
-
类型：Boolean
如果你想要用传统的方式来序列化数据，那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。
timeout
-
类型：Number
设置请求超时时间（毫秒）。此设置将覆盖全局设置。
type
-
类型：String
默认值: "GET")。请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
url
-
类型：String
默认值: 当前页地址。发送请求的地址。
username
-
类型：String
用于响应 HTTP 访问认证请求的用户名。
xhr
-
类型：Function
需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。
回调函数
如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。
beforeSend
在发送请求之前调用，并且传入一个 XMLHttpRequest 作为参数。
error
在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象（如果有的话）
dataFilter
在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。并且必须返回新的数据（可能是处理过的）传递给 success 回调函数。
success
当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete
当请求完成之后调用这个函数，无论成功或失败。传入 XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串。
数据类型
$.ajax() 函数依赖服务器提供的信息来处理返回的数据。
如果服务器报告说返回的数据是 XML，那么返回的结果就可以用普通的 XML 方法或者 jQuery 的选择器来遍历。
如果见得到其他类型，比如 HTML，则数据就以文本形式来对待。
通过 dataType 选项还可以指定其他不同数据处理方式。除了单纯的 XML，还可以指定 html、json、jsonp、script 或者 text。
其中，text 和 xml 类型返回的数据不会经过处理。
数据仅仅简单的将 XMLHttpRequest 的 responseText 或 responseHTML 属性传递给 success 回调函数。
注意：我们必须确保网页服务器报告的 MIME 类型与我们选择的 dataType 所匹配。比如说，XML的话，服务器端就必须声明 text/xml 或者 application/xml 来获得一致的结果。
如果指定为 html 类型，任何内嵌的 JavaScript 都会在 HTML 作为一个字符串返回之前执行。
类似地，指定 script 类型的话，也会先执行服务器端生成 JavaScript，然后再把脚本作为一个文本数据返回。
如果指定为 json 类型，则会把获取到的数据作为一个 JavaScript 对象来解析，并且把构建好的对象作为结果返回。为了实现这个目的，它首先尝试使用 JSON.parse()。如果浏览器不支持，则使用一个函数来构建。
JSON 数据是一种能很方便通过 JavaScript 解析的结构化数据。如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用 jsonp 类型。
使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的 URL 后面。服务器端应当在 JSON 数据前加上回调函数名，以便完成一个有效的 JSONP 请求。
如果要指定回调函数的参数名来取代默认的 callback，可以通过设置 $.ajax() 的 jsonp 参数。
注意：JSONP 是 JSON 格式的扩展。它要求一些服务器端的代码来检测并处理查询字符串参数。
如果指定了 script 或者 jsonp 类型，那么当从服务器接收到数据时，实际上是用了 <script> 标签而不是 XMLHttpRequest 对象。这种情况下，$.ajax() 不再返回一个 XMLHttpRequest 对象，并且也不会传递事件处理函数，比如 beforeSend。
发送数据到服务器
默认情况下，Ajax 请求使用 GET 方法。
如果要使用 POST 方法，可以设定 type 参数值。这个选项也会影响 data 选项中的内容如何发送到服务器。
data 选项既可以包含一个查询字符串，比如 key1=value1&key2=value2 ，也可以是一个映射，比如 {key1: 'value1', key2: 'value2'} 。
如果使用了后者的形式，则数据再发送器会被转换成查询字符串。
这个处理过程也可以通过设置 processData 选项为 false 来回避。
如果我们希望发送一个 XML 对象给服务器时，这种处理可能并不合适。
并且在这种情况下，我们也应当改变 contentType 选项的值，
用其他合适的 MIME 类型来取代默认的 application/x-www-form-urlencoded 。
高级选项
global 选项用于阻止响应注册的回调函数，比如 .ajaxSend，或者 ajaxError，以及类似的方法。
这在有些时候很有用，比如发送的请求非常频繁且简短的时候，就可以在 ajaxSend 里禁用这个。
如果服务器需要 HTTP 认证，可以使用用户名和密码可以通过 username 和 password 选项来设置。
Ajax 请求是限时的，所以错误警告被捕获并处理后，可以用来提升用户体验。
请求超时这个参数通常就保留其默认值，要不就通过 jQuery.ajaxSetup 来全局设定，很少为特定的请求重新设置 timeout 选项。
默认情况下，请求总会被发出去，但浏览器有可能从它的缓存中调取数据。
要禁止使用缓存的结果，可以设置 cache 参数为 false。
如果希望判断数据自从上次请求后没有更改过就报告出错的话，可以设置 ifModified 为 true。
scriptCharset 允许给 <script> 标签的请求设定一个特定的字符集，用于 script 或者 jsonp 类似的数据。当脚本和页面字符集不同时，这特别好用。
Ajax 的第一个字母是 asynchronous 的开头字母，这意味着所有的操作都是并行的，完成的顺序没有前后关系。$.ajax() 的 async 参数总是设置成true，这标志着在请求开始后，其他代码依然能够执行。强烈不建议把这个选项设置成 false，这意味着所有的请求都不再是异步的了，这也会导致浏览器被锁死。
$.ajax 函数返回它创建的 XMLHttpRequest 对象。
通常 jQuery 只在内部处理并创建这个对象，
但用户也可以通过 xhr 选项来传递一个自己创建的 xhr 对象。
返回的对象通常已经被丢弃了，但依然提供一个底层接口来观察和操控请求。
比如说，调用对象上的 .abort() 可以在请求完成前挂起请求。
附录:
jQuery DOM 过滤方法
下表列出了有用的方法，你可以用它来从 DOM 元素列表中过滤掉各种元素 ——
| 序号 | 方法 & 描述 |
|---|---|
| 1 | eq( index ) 将一个匹配的元素集合减小为一个单个的元素。 |
| 2 | filter( selector ) 从匹配的元素集合中删除与指定的选择器不匹配的元素。 |
| 3 | filter( fn ) 从匹配的元素集合中删除与指定的函数不匹配的元素。 |
| 4 | is( selector ) 检查表达式的当前选择，如果选项中至少有一个元素符合给定的选择器，那么返回 true。 |
| 5 | map( callback ) 将 jQuery 对象中的一组元素转换成 jQuery 数组中的另一组值(该数组可能包含也可能不包含元素)。 |
| 6 | not( selector ) 从可匹配元素的集合中删除与指定的选择器相匹配的元素。 |
| 7 | slice( start, [end] ) 选取可匹配元素的子集。 |
JQuery DOM 遍历方法
下表列出了其他有用的方法，你可以在 DOM 中使用，用于定位各种元素 ——
| 序号 | 方法 & 描述 |
|---|---|
| 1 | add( selector ) 在匹配的元素集合中添加更多的与给定的选择器相匹配的元素。 |
| 2 | andSelf( ) 将先前的选择添加到当前的选择中。 |
| 3 | children( [selector]) 获取一个元素集合，包含每个可匹配元素集合的唯一的直接的全部孩子元素。 |
| 4 | closest( selector ) 获取一个元素集合，包含与指定的选择器相匹配的最近的父亲元素，包括起始元素。 |
| 5 | contents( ) 在匹配的元素(包括文本节点)中找到所有的孩子节点，如果元素是一个 iframe，那么在内容文档中找到所有的孩子节点。 |
| 6 | end( ) 恢复最近的'破坏性'操作，将匹配的元素集合设置为它之前的状态。 |
| 7 | find( selector ) 搜索与指定的选择器匹配的后代元素。 |
| 8 | next( [selector] ) 获取一个元素集合，包含给定元素集合的唯一的下一个兄弟元素。 |
| 9 | nextAll( [selector] ) 找到当前元素之后的所有兄弟元素。 |
| 10 | offsetParent( ) 返回一个 jQuery 集合以及第一个匹配元素的父亲的定位。 |
| 11 | parent( [selector] ) 获取一个元素的直接父亲。如果在一组元素中调用，父元素会返回一组它们唯一直接父亲元素的集合。 |
| 12 | parents( [selector] ) 得到一个元素集合，包含匹配元素集合的唯一的祖先元素(根元素除外)。 |
| 13 | prev( [selector] ) 得到一个元素集合，包含匹配元素集合的唯一的先前的兄弟元素。 |
| 14 | prevAll( [selector] ) 找到当前元素之前的所有兄弟元素。 |
| 15 | siblings( [selector] ) 获取一个元素集合，包含每个可匹配元素集合的全部唯一的兄弟元素。 |
jQuery 遍历方法
下面的表格列出了所有的jQuery遍历方法。
| 方法 | 描述 |
|---|---|
| add() | 把元素添加到匹配元素的集合中 |
| addBack() | 把之前的元素集添加到当前集合中 |
| andSelf() | 在版本 1.8 中被废弃。addBack() 的别名 |
| children() | 返回被选元素的所有直接子元素 |
| closest() | 返回被选元素的第一个祖先元素 |
| contents() | 返回被选元素的所有直接子元素（包含文本和注释节点） |
| each() | 为每个匹配元素执行函数 |
| end() | 结束当前链中最近的一次筛选操作，并把匹配元素集合返回到前一次的状态 |
| eq() | 返回带有被选元素的指定索引号的元素 |
| filter() | 把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素 |
| find() | 返回被选元素的后代元素 |
| first() | 返回被选元素的第一个元素 |
| has() | 返回拥有一个或多个元素在其内的所有元素 |
| is() | 根据选择器/元素/jQuery 对象检查匹配元素集合，如果存在至少一个匹配元素，则返回 true |
| last() | 返回被选元素的最后一个元素 |
| map() | 把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象 |
| next() | 返回被选元素的后一个同级元素 |
| nextAll() | 返回被选元素之后的所有同级元素 |
| nextUntil() | 返回介于两个给定参数之间的每个元素之后的所有同级元素 |
| not() | 从匹配元素集合中移除元素 |
| offsetParent() | 返回第一个定位的父元素 |
| parent() | 返回被选元素的直接父元素 |
| parents() | 返回被选元素的所有祖先元素 |
| parentsUntil() | 返回介于两个给定参数之间的所有祖先元素 |
| prev() | 返回被选元素的前一个同级元素 |
| prevAll() | 返回被选元素之前的所有同级元素 |
| prevUntil() | 返回介于两个给定参数之间的每个元素之前的所有同级元素 |
| siblings() | 返回被选元素的所有同级元素 Returns all sibling elements of the selected element |
| slice() | 把匹配元素集合缩减为指定范围的子集 |
jQuery AJAX 方法
AJAX 是一种与服务器交换数据的技术，可以在补充在整个页面的情况下更新网页的一部分。
下面的表格列出了所有的 jQuery AJAX 方法：
| 方法 | 描述 |
|---|---|
| $.ajax() | 执行异步 AJAX 请求 |
| $.ajaxPrefilter() | 在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项 |
| $.ajaxSetup() | 为将来的 AJAX 请求设置默认值 |
| $.ajaxTransport() | 创建处理 Ajax 数据实际传送的对象 |
| $.get() | 使用 AJAX 的 HTTP GET 请求从服务器加载数据 |
| $.getJSON() | 使用 HTTP GET 请求从服务器加载 JSON 编码的数据 |
| $.getScript() | 使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript |
| $.param() | 创建数组或对象的序列化表示形式（可用于 AJAX 请求的 URL 查询字符串） |
| $.post() | 使用 AJAX 的 HTTP POST 请求从服务器加载数据 |
| ajaxComplete() | 规定 AJAX 请求完成时运行的函数 |
| ajaxError() | 规定 AJAX 请求失败时运行的函数 |
| ajaxSend() | 规定 AJAX 请求发送之前运行的函数 |
| ajaxStart() | 规定第一个 AJAX 请求开始时运行的函数 |
| ajaxStop() | 规定所有的 AJAX 请求完成时运行的函数 |
| ajaxSuccess() | 规定 AJAX 请求成功完成时运行的函数 |
| load() | 从服务器加载数据，并把返回的数据放置到指定的元素中 |
| serialize() | 编码表单元素集为字符串以便提交 |
| serializeArray() | 编码表单元素集为 names 和 values 的数组 |
相关教程
AJAX 教程
jQuery 杂项方法
| 方法 | 描述 |
|---|---|
| data() | 向被选元素附加数据，或者从被选元素获取数据 |
| each() | 为每个匹配元素执行函数 |
| get() | 获取由选择器指定的 DOM 元素 |
| index() | 从匹配元素中搜索给定元素 |
| $.noConflict() | 释放变量 $ 的 jQuery 控制权 |
| $.param() | 创建数组或对象的序列化表示形式（可在生成 AJAX 请求时用于 URL 查询字符串中） |
| removeData() | 移除之前存放的数据 |
| size() | 在版本 1.8 中被废弃。返回被 jQuery 选择器匹配的 DOM 元素的数量 |
| toArray() | 以数组的形式检索所有包含在 jQuery 集合中的所有 DOM 元素 |
jQuery 属性
在下面表格中列出的方法用来设置或返回元素的 CSS 相关属性。
| 方法 | 描述 |
|---|---|
| context | 在版本 1.10 中被废弃。包含被传递到 jQuery 的原始上下文 |
| jquery | 包含 jQuery 的版本号 |
| jQuery.fx.interval | 改变以毫秒计的动画运行速率 |
| jQuery.fx.off | 对所有动画进行全局禁用或启用 |
| jQuery.support | 包含表示不同浏览器特性或漏洞的属性集（主要用于 jQuery 的内部使用） |
| length | 包含 jQuery 对象中元素的数目 |
未完待续,下一章节,つづく
561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
