2016/1/4--jquery-优快云博客

本文介绍jQuery的基础用法，包括如何使用not()方法筛选元素、利用load()和get()等方法加载外部内容，以及通过post()方法发送数据。通过实例展示了jQuery简化DOM操作及AJAX交互的方法。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src = "/jquery/jquery.1.11.1.min.js"></script>
<script type="text/javascript">
// jQuery not() 方法返回不匹配标准的所有元素。
$(document).ready(function(){
$("p").not("intro").css({"background-color":"red"});
});
//jQuery AJAX 实例
$(document).ready(function{
$("#btn1").click(function(){
$("#test").load('/jquery/jquery.js');
});
});
//jQuery load() 方法'
$(document).ready(function(){
$("#btn2").click(function(){
$("#test1").load('/jquery/jquery.js');
});
});
// jQuery 选择器添加到 URL 参数。
$(document).ready(function(){
$("#btn2").click(function(){
$("#test1").load("/example/jquery.load");
});
});
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/example/jquery/demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt = "success"){
alert("外部加载成功！");
}
if(statusTxt = "error"){
alert("Error: "+xhr.status+": "+xhr.statusText);
}
}
});
//jQuery $.get() 方法
$(document).ready(function(){
$("button").click(function(){
$.get("/example/jquery/demo_test.asp",function(data,status){
alert("数据：" + data + "\n状态：" + status);
});
//jQuery $.post() 方法
$(document).ready(function(){
$("button").click(function(){
$.post("/example/jquery/demo_test_post.asp"){
name:"Donald Duck",
city:"Duckburg"
}
function(data.status){
alert("数据：" + data + "\n状态：" + status);
}
}
}
});
});
});
</script>
</head>
<body>

<h1>欢迎来到我的主页</h1>
<p class="intro">我是唐老鸭。</p>
<p class="intro">我住在 Duckburg。</p>
<p class="intro">我爱 Duckburg。</p>
<p>我最好的朋友是 Mickey。</p>
<br><br>

<h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获得外部的内容</button>
<br>

<h3 id="test1">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn2" type="button">获得外部的内容</button>
<br>

<div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div>
<button>获得外部内容</button>

<button>向页面发送 HTTP GET 请求，然后获得返回的结果</button>

<button>向页面发送HTTP POST请求，然后获得返回的结果。</button>
</body>
</html>