javaScript 笔记(6) --- jQuery（下）

--- jQuery HTML

--- jQuery 遍历

--- jQuery Ajax

jQuery HTML：

jQuery 捕获：三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

    alert("Text: " + $("#test").text());

  });

  $("#btn2").click(function(){

    alert("HTML: " + $("#test").html());

  });

});

</script>

</head>

<body>

<p id="test">这是段落中的 <b>粗体</b> 文本。</p>

<button id="btn1">显示文本</button>

<button id="btn2">显示 HTML</button>

</body>

</html>

实例代码全

val() - 设置或返回表单字段的值

<!DOCTYPE html>

<html>

<meta charset="utf-8">

<head>

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    alert("值为: " + $("#test").val());

  });

});

</script>

</head>

<body>

<p>名称: <input type="text" id="test" value="教程"></p>

<button>显示值</button>

</body>

</html>

实例代码全

attr() - 用于获取属性值

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    alert($("#runoob").attr("href"));

  });

});

</script>

</head>

<body>

<p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>

<button>显示 href 属性的值</button>

</body>

</html>

示例代码全

jQuery 设置内容和属性：

设置内容：通过 text()、html() 以及 val() 方法来设置内容，实例：

$("#btn1").click(function(){

    $("#test1").text("Hello world!");

});

$("#btn2").click(function(){

    $("#test2").html("<b>Hello world!</b>");

});

$("#btn3").click(function(){

    $("#test3").val("RUNOOB");

});

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $("#test1").text("Hello world!");

  });

  $("#btn2").click(function(){

    $("#test2").html("<b>Hello world!</b>");

  });

  $("#btn3").click(function(){

    $("#test3").val("RUNOOB");

  });

});

</script>

</head>

<body>

<p id="test1">这是一个段落。</p>

<p id="test2">这是另外一个段落。</p>

<p>输入框: <input type="text" id="test3" value="菜鸟教程"></p>

<button id="btn1">设置文本</button>

<button id="btn2">设置 HTML</button>

<button id="btn3">设置值</button>

</body>

</html>

示例代码全

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $("#test1").text(function(i,origText){

      return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";

    });

  });

  $("#btn2").click(function(){

    $("#test2").html(function(i,origText){

      return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";

    });

  });

});

</script>

</head>

<body>

<p id="test1">这是一个有 <b>粗体</b> 字的段落。</p>

<p id="test2">这是另外一个有 <b>粗体</b> 字的段落。</p>

<button id="btn1">显示 新/旧 文本</button>

<button id="btn2">显示 新/旧 HTML</button>

</body>

</html>

示例代码全

attr() 方法也用于设置/改变属性值，也允许您同时设置多个属性。

$("button").click(function(){

    $("#runoob").attr({

        "href" : "http://www.runoob.com/jquery",

        "title" : "jQuery 教程"

    });

});

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("#runoob").attr({

      "href" : "http://www.runoob.com/jquery",

      "title" : "jQuery 教程"

    });

    // 通过修改的 title 值来修改链接名称

    title =  $("#runoob").attr('title');

    $("#runoob").html(title);

  });

});

</script>

</head>

<body>

<p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>

<button>修改 href 和 title</button>

<p>点击按钮修改后，可以查看 href 和 title 是否变化。</p>

</body>

</html>

示例代码全

attr() 回调函数类似上一条内容。

jQuery 添加元素：

append() - 在被选元素的结尾插入内容，实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $("p").append(" <b>追加文本</b>。");

  });

  $("#btn2").click(function(){

    $("ol").append("<li>追加列表项</li>");

  });

});

</script>

</head>

<body>

<p>这是一个段落。</p>

<p>这是另外一个段落。</p>

<ol>

<li>List item </li>

<li>List item </li>

<li>List item </li>

</ol>

<button id="btn1">添加文本</button>

<button id="btn2">添加列表项</button>

</body>

</html>

实例代码全

prepend() - 在被选元素的开头插入内容，用法类似 append()。

说明：append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

/*在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：*/

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

function appendText(){

    var txt1="<p>文本1。</p>";              // 使用 HTML 标签创建文本

    var txt2=$("<p></p>").text("文本2。");  // 使用 jQuery 创建文本

    var txt3=document.createElement("p");

    txt3.innerHTML="文本3。";               // 使用 DOM 创建文本 text with DOM

    $("body").append(txt1,txt2,txt3);        // 追加新元素

}

</script>

</head>

<body>

<p>这是一个段落。</p>

<button onclick="appendText()">追加文本</button>

</body>

</html>

示例代码全

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $("img").before("<b>之前</b>");

  });

  $("#btn2").click(function(){

    $("img").after("<i>之后</i>");

  });

});

</script>

</head>

<body>

<img src="/images/logo.png" >

<br><br>

<button id="btn1">之前插入</button>

<button id="btn2">之后插入</button>

</body>

</html>

after 和 before 示例代码

追加若干新元素方法类似 append 和 prepend,不再赘述。

jQuery 删除元素：通过 jQuery，可以很容易的删除已有的 HTML 元素、内容。

emove() - 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素，两者用法相同，下面以 empty() 为例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("#div1").empty();

  });

});

</script>

</head>

<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

这是 div 中的一些文本。

<p>这是在 div 中的一个段落。</p>

<p>这是在 div 中的另外一个段落。</p>

</div>

<br>

<button>清空div元素</button>

</body>

</html>

empty 实例代码

remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("p").remove(".italic");

  });

});

</script>

</head>

<body>

<p>这是一个段落。</p>

<p class="italic"><i>这是另外一个段落。</i></p>

<p class="italic"><i>这是另外一个段落。</i></p>

<button>移除所有  class="italic" 的 p 元素。</button>

</body>

</html>

过滤被删除的元素

jQuery 获取并设置 CSS类：

addClass() - 向被选元素添加一个或多个类

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("h1,h2,p").addClass("blue");

    $("div").addClass("important");

  });

});

</script>

<style type="text/css">

.important

{

    font-weight:bold;

    font-size:xx-large;

}

.blue

{

    color:blue;

}

</style>

</head>

<body>

<h1>标题 </h1>

<h2>标题 </h2>

<p>这是一个段落。</p>

<p>这是另外一个段落。</p>

<div>这是一些重要的文本!</div>

<br>

<button>为元素添加 class</button>

</body>

</html>

选取多个元素一起添加类

添加多个类

removeClass() - 从被选元素删除一个或多个类

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("h1,h2,p").removeClass("blue");

  });

});

</script>

<style type="text/css">

.important

{

    font-weight:bold;

    font-size:xx-large;

}

.blue

{

    color:blue;

}

</style>

</head>

<body>

<h1 class="blue">标题 </h1>

<h2 class="blue">标题 </h2>

<p class="blue">这是一个段落。</p>

<p>这是另外一个段落。</p>

<br>

<button>从元素中移除 class</button>

</body>

</html>

多个元素移除 class

toggleClass() - 对被选元素进行添加/删除类的切换操作

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("h1,h2,p").toggleClass("blue");

  });

});

</script>

<style type="text/css">

.blue

{

color:blue;

}

</style>

</head>

<body>

<h1 class="blue">标题 </h1>

<h2 class="blue">标题 </h2>

<p class="blue">这是一个段落。</p>

<p>这是另外一个段落。</p>

<br>

<button>切换 class</button>

</body>

</html>

切换类

css() - 设置或返回样式属性：

（1）返回首个匹配元素的 background-color 值

$("p").css("background-color");

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    alert("背景颜色 = " + $("p").css("background-color"));

  });

});

</script>

</head>

<body>

<h2>这是一个标题</h2>

<p style="background-color:#ff0000">这是一个段落。</p>

<p style="background-color:#00ff00">这是一个段落。</p>

<p style="background-color:#0000ff">这是一个段落。</p>

<button>返回 p 元素的 background-color </button>

</body>

</html>

实例代码全

（2）如需设置多个 CSS 属性，请使用如下语法：

css({"propertyname":"value","propertyname":"value",...});

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("p").css({"background-color":"yellow","font-size":"200%"});

  });

});

</script>

</head>

<body>

<h2>这是一个标题</h2>

<p style="background-color:#ff0000">这是一个段落。</p>

<p style="background-color:#00ff00">这是一个段落。</p>

<p style="background-color:#0000ff">这是一个段落。</p>

<p>这是一个段落。</p>

<button>为 p 元素设置多个样式</button>

</body>

</html>

实例代码全

jQuery 尺寸：

jQuery 提供多个处理尺寸的重要方法：

width()：设置或返回元素的宽度（不包括内边距、边框或外边距）
height()：设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth()：返回元素的宽度（包括内边距）
innerHeight()：返回元素的高度（包括内边距）
outerWidth()：返回元素的宽度（包括内边距和边框）
outerHeight()：返回元素的高度（包括内边距和边框）

用法都类似，下面以 width 和 height 为例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    var txt="";

    txt+="div 的宽度是: " + $("#div1").width() + "</br>";

    txt+="div 的高度是: " + $("#div1").height();

    $("#div1").html(txt);

  });

});

</script>

</head>

<body>

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>

<br>

<button>显示 div 元素的尺寸</button>

<p>width() - 返回元素的宽度</p>

<p>height() - 返回元素的高度</p>

</body>

</html>

返回指定的

元素的宽度和高度

jQuery 遍历：用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。如下例：一个家族树：

通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

遍历祖先，即向上遍历 DOM 树：

parent()：返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

.ancestors *

{

    display: block;

    border: 2px solid lightgrey;

    color: lightgrey;

    padding: 5px;

    margin: 15px;

}

</style>

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("span").parent().css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<body>

<div class="ancestors">

  <div style="width:500px;">div (曾祖父元素)

    <ul>ul (祖父元素)

      <li>li (父元素)

        <span>span</span>

      </li>

    </ul>

  </div>

  <div style="width:500px;">div (祖父元素)

    <p>p (父元素)

        <span>span</span>

      </p>

  </div>

</div>

</body>

</html>

查看直接父元素

parents()：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)，用法同上。也可以使用可选参数来过滤对祖先元素的搜索

<!DOCTYPE html>

<html>

<head>

<style>

.ancestors *

{

display: block;

border: 2px solid lightgrey;

color: lightgrey;

padding: 5px;

margin: 15px;

}

</style>

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("span").parents("ul").css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<body class="ancestors">body (great-great-grandparent)

  <div style="width:500px;">div (great-grandparent)

    <ul>ul (grandparent)

      <li>li (direct parent)

        <span>span</span>

      </li>

    </ul>

  </div>

</body>

</html>

筛选祖先

parentsUntil()：返回介于两个给定元素之间的所有祖先元素

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

.ancestors *

{

    display: block;

    border: 2px solid lightgrey;

    color: lightgrey;

    padding: 5px;

    margin: 15px;

}

</style>

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<body class="ancestors"> body (曾曾祖父元素)

  <div style="width:500px;">div (曾祖父元素)

    <ul>ul (祖父元素)

      <li>li (父元素)

        <span>span</span>

      </li>

    </ul>

  </div>

</body>

</html>

介于两者之间[)

遍历后代，即向下遍历 DOM 树的 jQuery 方法：

children()：返回被选元素的所有直接子元素，该方法只会向下一级对 DOM 树进行遍历。用法同parent()。也可以使用可选参数来过滤对子元素的搜索：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

.descendants *

{

    display: block;

    border: 2px solid lightgrey;

    color: lightgrey;

    padding: 5px;

    margin: 15px;

}

</style>

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("div").children("p.1").css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<body>

<div class="descendants" style="width:500px;">div (当前元素)

  <p class="">p (儿子元素)

    <span>span (孙子元素)</span>

  </p>

  <p class="">p (儿子元素)

    <span>span (孙子元素)</span>

  </p>

</div>

</body>

</html>

过滤子元素

find()：返回被选元素的后代元素，一路向下直到最后一个后代。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

.descendants *

{

    display: block;

    border: 2px solid lightgrey;

    color: lightgrey;

    padding: 5px;

    margin: 15px;

}

</style>

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("div").find("span").css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<body>

<div class="descendants" style="width:500px;">div (当前元素)

  <p>p (儿子元素)

    <span>span (孙子元素)</span>

  </p>

  <p>p (儿子元素)

    <span>span (孙子元素)</span>

  </p>

</div>

</body>

</html>

返回后代的所有

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

.descendants *

{

    display: block;

    border: 2px solid lightgrey;

    color: lightgrey;

    padding: 5px;

    margin: 15px;

}

</style>

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("div").find("*").css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<body>

<div class="descendants" style="width:500px;">div (当前元素)

  <p>p (儿子元素)

    <span>span (孙子元素)</span>

  </p>

  <p>p (儿子元素)

    <span>span (孙子元素)</span>

  </p>

</div>

</body>

</html>

返回所有后代

遍历同胞，即在 DOM 树进行水平遍历：

siblings()：返回被选元素的所有同胞元素，也可以使用可选参数来过滤对同胞元素的搜索。返回属于 <h2> 的同胞元素的所有 <p> 元素

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

.siblings *

{

    display: block;

    border: 2px solid lightgrey;

    color: lightgrey;

    padding: 5px;

    margin: 15px;

}

</style>

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("h2").siblings("p").css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<body class="siblings">

<div>div (父元素)

  <p>p</p>

  <span>span</span>

  <h2>h2</h2>

  <h3>h3</h3>

  <p>p</p>

</div>

</body>

</html>

过滤同胞

next()：返回被选元素的下一个同胞元素
nextAll()：返回被选元素的所有跟随的同胞元
nextUntil()：返回介于两个给定参数之间的所有跟随的同胞元素
prev() & prevAll() & prevUntil()：工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

遍历过滤：缩小搜索元素的范围：

三个最基本的过滤方法

它们允许您基于其在一组元素中的位置来选择一个特定的元素。

first()：返回被选元素的首个元素

$(document).ready(function(){

  $("div p").first();

});

last()：返回被选元素的最后一个元素，用法同上。

eq()：返回被选元素中带有指定索引号的元素，索引号从 0 开始。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("p").eq().css("background-color","yellow");

});

</script>

</head>

<body>

<h1>欢迎访问我的主页</h1>

<p>菜鸟教程 (index ).</p>

<p>http://www.runoob.com (index 1)。</p>

<p>google (index ).</p>

<p>http://www.google.com (index 3)。</p>

</body>

</html>

eq 实例代码

其他过滤方法：比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

ilter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

   $("p").filter(".url").css("background-color","yellow");

});

</script>

</head>

<body>

<h1>欢迎访问我的主页</h1>

<p>菜鸟教程 (index ).</p>

<p class="url">http://www.runoob.com (index 1)。</p>

<p>google (index ).</p>

<p class="url">http://www.google.com (index 3)。</p>

</body>

</html>

filter 实例

not() 方法返回不匹配标准的所有元素，与 filter() 相反。

jQuery AJAX：AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

jQuery load() 方法：是简单但强大的 AJAX 方法，它从服务器加载数据，并把返回的数据放入被选元素中。语法：

$(selector).load(URL,data,callback);

/*必需的 URL 参数规定您希望加载的 URL。

   可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

   可选的 callback 参数是 load() 方法完成后所执行的函数名称。*/

这是示例文件（"demo_test.txt"）的内容：

<h2>jQuery AJAX 是个非常棒的功能！</h2>

<p id="p1">这是段落的一些文本。</p>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("#div1").load("/try/ajax/demo_test.txt");

    });

});

</script>

</head>

<body>

<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>

<button>获取外部内容</button>

</body>

</html>

加载全部文件

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("#div1").load("/try/ajax/demo_test.txt #p1");   // 加载文件中的 #p1 的内容

  });

});

</script>

</head>

<body>

<div id="div1"><h2>使用 jQuery AJAX 修改文本</h2></div>

<button>获取外部文本</button>

</body>

</html>

加载指定内容

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){

      if(statusTxt=="success")

        alert("外部内容加载成功!");

      if(statusTxt=="error")

        alert("Error: "+xhr.status+": "+xhr.statusText);

    });

  });

});

</script>

</head>

<body>

<div id="div1"><h2>使用 jQuery AJAX 修改该文本</h2></div>

<button>获取外部内容</button>

</body>

</html>

实例 Callback

jQuery get() 和 post() 方法：用于通过 HTTP GET 或 POST 请求从服务器请求数据。

HTTP 请求：GET vs. POST (两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST)

GET - 从指定的资源请求数据

POST - 向指定的资源提交要处理的数据

/*GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

  POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。*/

$.get() 方法通过 HTTP GET 请求从服务器上请求数据，语法：

$.get(URL,callback);

/*必需的 URL 参数: 规定您希望请求的 URL。

   可选的 callback 参数: 是请求成功后所执行的回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。*/

实例：demo_test.php 文件代码:

<?php

    echo '这是个从PHP文件中读取的数据。';

?>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $.get("/try/ajax/demo_test.php",function(data,status){

            alert("数据: " + data + "\n状态: " + status);

        });

    });

});

</script>

</head>

<body>

<button>发送一个 HTTP GET 请求并获取返回结果</button>

</body>

</html>

get 请求

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。语法：

$.post(URL,data,callback);

/*必需的 URL 参数规定您希望请求的 URL。

   可选的 data 参数规定连同请求发送的数据。

   可选的 callback 参数是请求成功后所执行的。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。*/

实例：demo_test.php 文件代码:

<?php

$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';

$url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';

echo '网站名: ' . $name;

echo "\n";

echo 'URL 地址: ' .$url;

?>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $.post("/try/ajax/demo_test_post.php",{

            name:"菜鸟教程",

            url:"http://www.runoob.com"

        },

        function(data,status){

            alert("数据: \n" + data + "\n状态: " + status);

        });

    });

});

</script>

</head>

<body>

<button>发送一个 HTTP POST 请求页面并获取返回内容</button>

</body>

</html>

post 实例

jQuery - noConflict() 方法

noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。

当然，您仍然可以通过全名替代简写的方式来使用 jQuery：

$.noConflict();

jQuery(document).ready(function(){

  jQuery("button").click(function(){

    jQuery("p").text("jQuery 仍然在工作!");

  });

});

您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。请看这个例子：

var jq = $.noConflict();

jq(document).ready(function(){

  jq("button").click(function(){

    jq("p").text("jQuery 仍然在工作!");

  });

});

如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"：

$.noConflict();

jQuery(document).ready(function($){

  $("button").click(function(){

    $("p").text("jQuery 仍然在工作!");

  });

});

继续继续~

javaScript 笔记(6) --- jQuery（下）的更多相关文章

javaScript 笔记(5) --- jQuery（上）
这节整理整理 iquery.js 相关的内容... 目录 --- jQuery 语法 --- 文档就绪事件 --- jQuery 选择器 --- jQuery 事件 --- jQuery 效果 jQu ...
JavaScript大杂烩15 - 使用JQuery(下)
前面我们总结了使用各种selector拿到了jQuery对象了,下面就是对这个对象执行指定的行为了. 2. 操作对象 - 行为函数action 执行jQuery内置的行为函数的时候,JQuery自动遍 ...
[Effective JavaScript 笔记]第3章：使用函数--个人总结
前言这一章把平时会用到,但不会深究的知识点,分开细化地讲解了.里面很多内容在高3等基础内容里,也有很多讲到.但由于本身书籍的篇幅较大,很容易忽视对应的小知识点.这章里的许多小提示都很有帮助,特别是在 ...
【学习笔记】jQuery的基础学习
[学习笔记]jQuery的基础学习新建模板小书匠什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...
可控制导航下拉方向的jQuery下拉菜单代码
效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...
FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
JavaScript强化教程——jQuery AJAX 实例
什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...
python 学习笔记十三 JQuery(进阶篇)
jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. 安装jQuery 有两个版本的 jQuery 可供下载: Production versio ...
[Effective JavaScript 笔记]第28条：不要信赖函数对象的toString方法
js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+ ...

随机推荐

Nodejs：Node.js模块机制小结
今天读了<深入浅出Nodejs>的第二章:模块机制.现在做一个简单的小结. 序:模块机制大致从这几个部分来讲:JS模块机制的由来.CommonJS AMD CMD.Node模块机制和包和n ...
java算法面试题：有一个字符串，其中包含中文字符、英文字符和数字字符，请统计和打印出各个字符的个数按值的降序排序，如果值相同则按键值的字母顺序
package com.swift; import java.util.HashMap; import java.util.Map; import java.util.Map.Entry; publi ...
js display， visible 区别
注意: display:none和visible:hidden都能把网页上某个元素隐藏起来,在视觉效果上没有区别,但是在一些DOM操作中两者有区别: display:none ---不为被隐藏的对象保 ...
java中char类型转换成int类型的两种方法
方法一: char ch = '9'; if (Character.isDigit(ch)){ // 判断是否是数字 int num = Integer.parseInt(String.valueOf ...
G++ 编译多个源文件
g++ -c *.cpp g++ graph.o maxflow.o test.o -o test // 链接顺序必须写对
Python 正则表达式匹配任意字符
.(句点)匹配除了换行之外的所有一个字符, .*(点-星)匹配除了换行外的所有字符 >>> >>> r=re.compile(r'.*')>>> ...
html5支持drag的拖放排序插件sortable.js
html5支持drag的拖放排序插件sortable.js <script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.5.1/S ...
JZOJ 4738. 神在夏至祭降下了神谕 DP + 线段树优化
4738. 神在夏至祭降下了神谕 Time Limits: 1000 ms Memory Limits: 262144 KB Detailed Limits Goto ProblemSet D ...
Ecshop之ajax修改表里的状态(函数化处理)
目录功能: 效果: 思路: 页面里控制器里功能: `点击图片,修改表里的状态值` 效果: 思路: 页面里在img里点绑定onclick件事,调用js函数listTable.toggle oncl ...
学习Pytbon第七天，集合
list_1=[5,22,2,6,5,66,6,8] list_1=set(list_1)#把列表转成集合,天生不允许重复 print(list_1,type(list_1) list_2=set( ...

javaScript 笔记(6) --- jQuery（下）

jQuery - noConflict() 方法

javaScript 笔记(6) --- jQuery（下）的更多相关文章

随机推荐

热门专题