JavaScirpt之JQuery库入门篇
JQuery是一个JavaScript库，极大地简化了JavaScript编程。
jQuery 库 - 特性
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
JQuery语法
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
文档就绪函数
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：
$(document).ready(function(){
--- jQuery functions go here ----
});这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
1、 试图隐藏一个不存在的元素
2、 获得未完全加载的图像的大小
下面给出一个实例：
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
script>
head>
<body>
<p>如果您点击我，我会消失。p>
<p>点击我，我会消失。p>
<p>也要点击我哦。p>
body>
html>jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。基本上，您将学习到如何选取 HTML 元素，以及如何对它们执行类似隐藏、移动以及操作其内容等任务
在学习JQuery之前，需要对HTML/CSS/JavaScript有基本的了解，好在这些基础花了一个星期已经了解的差不多啦！
通过实例增进 jQuery 技能！
1、$(this).hide()
演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js">script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
script>
head>
<body>
<button type="button">Click mebutton>
body>
html>2、$(“p”).hide()
演示 jQuery 的 hide() 函数，隐藏所有《p》 元素。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js">script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
script>
head>
<body>
<h2>This is a headingh2>
<p>This is a paragraph.p>
<p>This is another paragraph.p>
<button type="button">Click mebutton>
body>
html> 3、$(“.test”).hide()
演示 jQuery 的 hide() 函数，隐藏所有 class=”test” 的元素。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js">script>
<script type="text/javascript">
$(document).ready(function()
{
$("button").click(function()
{
$(".test").hide();
});
});
script>
head>
<body>
<h2 class="test">This is a headingh2>
<p class="test">This is a paragraph.p>
<p>This is another paragraph.p>
<button type="button">Click mebutton>
body>
html>4、$(“#test”).hide()
演示 jQuery 的 hide() 函数，隐藏 id=”test” 的元素。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js">script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
script>
head>
<body>
<h2>This is a headingh2>
<p>This is a paragraph.p>
<p id="test">This is another paragraph.p>
<button type="button">Click mebutton>
body>
html>5、jQuery fadeOut()
演示简单的 jQuery fadeout() 函数。
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
script>
head>
<body>
<p>演示带有不同参数的 fadeOut() 方法。p>
<button>点击这里，使三个矩形淡出button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;">div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;">div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;">div>
body>
html>
6、Slide panel
演示简单的 Slide Panel 效果。
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
style>
head>
<body>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。p>
div>
<p class="flip">请点击这里p>
body>
html>
7、Hide explanations
演示如何隐藏部分文本。
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">script>
<script type="text/javascript">
$(document).ready(function(){
$(".ex .hide").click(function(){
$(this).parents(".ex").hide("slow");
});
});
script>
<style type="text/css">
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
style>
head>
<body>
<h3>中国办事处h3>
<div class="ex">
<button class="hide" type="button">隐藏button>
<p>联系人：张先生<br />
北三环中路 100 号<br />
北京p>
div>
<h3>美国办事处h3>
<div class="ex">
<button class="hide" type="button">隐藏button>
<p>联系人：David<br />
第五大街 200 号<br />
纽约p>
div>
body>
html>
8、jQuery animate()
演示简单的 jQuery animate() 函数。
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
script>
head>
<body>
<button>开始动画button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
div>
body>
html>
HTML元素操作
1、改变HTML元素内容
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js">script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").html("W3School");
});
});
script>
head>
<body>
<h2>This is a headingh2>
<p>This is a paragraph.p>
<p>This is another paragraph.p>
<button type="button">请点击这里button>
body>
html>
2、向HTML元素追加内容
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" Appended text.");
});
$("#btn2").click(function(){
$("ol").append("Appended item ");
});
});
script>
head>
<body>
<p>This is a paragraph.p>
<p>This is another paragraph.p>
<ol>
<li>List item 1li>
<li>List item 2li>
<li>List item 3li>
ol>
<button id="btn1">追加文本button>
<button id="btn2">追加列表项button>
body>
html>
3、在HTML元素之后追加内容
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("Before");
});
$("#btn2").click(function(){
$("img").after("After");
});
});
script>
head>
<body>
<img src="/i/eg_w3school.gif" alt="W3School Logo" />
<br><br>
<button id="btn1">在图片前面添加文本button>
<button id="btn2">在图片后面添加文本button>
body>
html>CSS操作
1、改变HTML的CSS属性
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js">script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","red");
});
});
script>
head>
<body>
<h2>This is a headingh2>
<p>This is a paragraph.p>
<p>This is another paragraph.p>
<button type="button">Click mebutton>
body>
html>
2、改变多个CSS属性
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js">script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"red","font-size":"200%"});
});
});
script>
head>
<body>
<h2>This is a headingh2>
<p>This is a paragraph.p>
<p>This is another paragraph.p>
<button type="button">Click mebutton>
body>
html>3、获得元素的CSS属性
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Background color = " + $("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 元素的背景色button>
body>
html>AJAX 和 jQuery
1、使用 $(selector).load(url) 来改变 HTML 内容
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js">script>
<script type="text/javascript">
$(document).ready(function(){
$("#b01").click(function(){
$('#myDiv').load('/jquery/test1.txt');
});
});
script>
head>
<body>
<div id="myDiv"><h2>通过 AJAX 改变文本h2>div>
<button id="b01" type="button">改变内容button>
body>
html>2、使用 $.ajax(options) 来改变 HTML 内容
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js">script>
<script type="text/javascript">
$(document).ready(function(){
$("#b01").click(function(){
htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
$("#myDiv").html(htmlobj.responseText);
});
});
script>
head>
<body>
<div id="myDiv"><h2>通过 AJAX 改变文本h2>div>
<button id="b01" type="button">改变内容button>
body>
html>