本节：jquery的基础代码
jQuery
jQuery 是为事件处理特别设计的。
1.隐藏所有元素，显示元素
<script>
$(document).ready(function(){
??$("button").click(function(){
????$("*").hide();??//?$("*")是所有元素，hide()是隐藏
??});
});
?$("#show").click(function(){
????$("p").show();
??});????</script>
<button id="show">显示</button>
- 缓慢隐藏
<button>隐藏</button>
<p>这是个段落，内容比较少。</p>
<p>这是另外一个小段落</p>
<script>
$(document).ready(function(){
??$("button").click(function(){
????$("p").hide(1000);
??});
});
</script>
3.有 speed 参数的 hide() 方法，并使用回调函数：
<script>
$(document).ready(function(){
??$(".hidebtn").click(function(){
????$("div").hide(1000,"linear",function(){
??????alert("Hide() 方法已完成!");
????});
??});
});
</script>
<div>隐藏及设置回调函数</div>
<button class="hidebtn">隐藏</button>
4.通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
<script>
$(document).ready(function(){
??$("button").click(function(){
????$("p").toggle();??//toggle()就是通过点击可以不断变化的隐藏和显示的状态。
??});//一样可以toggle（1000），加时间，缓慢或者快速消失
});
</script>
<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
5.可以不断切换显示和隐藏淡入淡出的效果。 ?//fadeOut()是淡出，?fadeIn()?是淡入，fadeTo("slow",0.7);颜色慢慢变淡
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle(1000);
$("#div2").fadeToggle(2000);
$("#div3").fadeToggle(3000);
});
});
</script>
- 滑动效果：slideDown() 方法用于向下滑动元素。slideUp() 方法用于向上滑动元素，收起。
?slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。可以反复收起或者放下
<script>
$(document).ready(function(){
??$("#flip").click(function(){
????$("#panel").slideDown("slow");
??});
});
</script>
<script>
$(document).ready(function(){
??$("#flip").click(function(){
????$("#panel").slideToggle("slow");
??});
});
</script>
- animate() 方法用于创建自定义动画。自定义移动位置，或者改变div的大小之类的。您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：显示或者不显示，或者隐藏。同时编辑多个属性
<script>
$(document).ready(function(){
??$("button").click(function(){
????$("div").animate({
??????left:'250px',
??????opacity:'0.5',
??????height:'550px',
??????width:'550px'
});
//或者这样写animate({fontSize:'30em'},10000);
??});
});
</script>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
8.stop()可以停止一切的话效果
$("#stop").click(function(){
??$("#panel").stop();
});
9.点击时候隐藏，并且使用回调函数
<script>
$(document).ready(function(){
??$("button").click(function(){
????$("p").hide("slow",function(){
??????alert("段落现在被隐藏了");
????});
??});
});
</script>
10.?jQuery，可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
<script>
$(document).ready(function()
??{
??$("button").click(function(){
????$("#p1").css("color","red")
??????.slideUp(2000)
??????.slideDown(2000);//就是一直点点点，
??});
});
</script>
11.
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
$("#btn3").click(function(){ $("#test3").val("RUNOOB"); });
12.我们将学习用于添加新内容的四个 jQuery 方法：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
<script>
$(document).ready(function(){
??$("#btn1").click(function(){
????$("p").append(" <b>追加文本</b>。");
??});
??$("#btn2").click(function(){
????$("ol").append("<li>追加列表项</li>");
??});
});
</script>
<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>
13.remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
<script>
$(document).ready(function(){
??$("button").click(function(){
????$("#div1").remove();
??});
});
</script>
<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>
- ?addClass() 添加样式方法,removeClass();删除样式，toggleClass()不断变化
<script>
$(document).ready(function(){
??$("button").click(function(){
????$("h1,h2,p").addClass("blue");
$("div").addClass("important");?//添加样式
//?$("h1,h2,p").removeClass("blue");??移除样式
//?$("h1,h2,p").toggleClass("blue");??不断变化
// $("#div1").width()获取当前样式的长宽高
$("#div1").load("demo_test.txt #p1");//ajax获取外部数据，load() 方法完成后所要允许的回调函数。回调函数
//可以设置不同的参数：
??});
});
</script>
15.AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
16.
<script>
$(document).ready(function(){
??$("button").click(function(){//ajax获取外部数据，load() 方法完成后所要允许的回调函数。回调函数
????$("#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>
17.发送一个 HTTP GET 请求并获取返回结果
<script>
$(document).ready(function(){
????$("button").click(function(){
????????$.get("/try/ajax/demo_test.php",function(data,status){
????????????alert("数据: "?+ data?+ "\n状态: "?+ status);
????????});
????});
});
</script>
18.发送一个 HTTP POST 请求页面并获取返回内容
<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>
$.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.php")。
然后我们连同请求（name 和 url）一起发送数据。
"demo_test_post.php" 中的 PHP 脚本读取这些参数，对它们进行处理，然后返回结果。
第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。