一个简单的例子：
<html>
<head>
<script type="text/javascript" src="../bin/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<h1>
<p>if you click Hello Wolrd, i will disapper.</p>
</h1>
</body>
</html>
备注：
1、代码中的函数：
1) hide：隐藏对象。
2) click：点击事件。
- ready: 文档就绪函数(为了防止文档在完全加载（就绪）之前运行 jQuery 代码)。
举例：
a> 试图隐藏一个不存在的元素
b> 获得未完全加载的图像的大小
2、其它：
1）jquery内库引入:
// 引入Jquery内库，需要注意<script>标签必须是一对，不能单独出现，不然引入内库文件失败。
<script type="text/javascript" src="../bin/jquery.js"></script>
2)关键字：
this:用于代表此函数对象。
Jquery特性：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
选择器：
元素选择其：
$("p.intro") 选取所有 class="intro" 的 p元素。
$("p#demo") 选取所有 id="demo" 的 p元素。
属性选择器：
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
CSS选择器：
$("p").css("background-color","red");
总结：jquery中目前包含三种选择器
1.元素选择器。2.属性选择器。3.CSS选择器。
事件：
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
show/hide函数使用：
语法：
// 1.speed用来设置隐藏或显示的速度（毫秒），callback：回调函数,默认不需要填写参数。
//2.toggle介于hide和show之间，如果目前对象是隐藏执行toggle函数可以显示对象，相反目前对象是显示执行toggle函数可以隐藏对象。
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
代码：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="../bin/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button.hide").click(function(){
$("p").hide(10,function(){
alert("hide success!");
});
});
$("button.show").click(function(){
$("p").show(10,function(){
alert("show success!");
});
});
$("button.toggle").click(function(){
$("p").toggle(10,function(){
alert("toggle success!");
});
});
});
</script>
</head>
<body>
<h1>
<p>if you click Hello Wolrd, i will disapper.</p>
<button class="hide" type="button">hide</button>
<button class="show" type="button">show</button>
<button class="toggle" type="button">toggle</button>
</h1>
</body>
</html>
获取内容和属性：
- 获取内容：
1> text():设置或返回所选元素的文本内容。
2> html()：设置或返回所选元素的内容（包括 HTML 标记）。
3> val():设置或返回表单字段的值。
2.获取属性：
attr():用于获取属性值
代码：
<html>
<head>
<script type="text/javascript" src="../bin/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button.text").click(function(){
alert($("p.char").text());
});
$("button.html").click(function(){
alert($("p.char").html());
});
$("button.val").click(function(){
alert($("input.text").val());
});
$("button.attr").click(function(){
alert($("#w3s").attr("href"));
});
});
</script>
</head>
<body>
<h1>
<p class="char">这是一段操作的<b>粗体</b>字符串.</p>
</br>
<input class="text" type="text" value="这是一段操作的<b>粗体</b>字符串.">
</br>
<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
</h1>
<button class="text" type="button">Text</button>
<button class="html" type="button">html</button>
<button class="val" type="button">val</button>
<button class="attr" type="button">attr</button>
</body>
</html>
修改内容和属性：
<html>
<head>
<script type="text/javascript" src="../bin/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button.text").click(function(){
$("p.text").text("修改内容为TEXT");
});
$("button.html").click(function(){
$("p.html").html("修改内容为HTML");
});
$("button.val").click(function(){
$("input.text").val("修改内容VAL");
});
$("button.attr").click(function(){
//单属性操作
//$("#w3s").attr("href","http://www.baidu.com");
//多属性操作
$("#w3s").attr({
"href" : "http://www.baidu.com",
"title" : "www.baidu.com"
});
});
});
</script>
</head>
<body>
<h1>
<p class="text">这是一段操作的<b>粗体</b>字符串.</p>
</br>
<p class="html">这是一段操作的<b>粗体</b>字符串.</p>
</br>
<input class="text" type="text" value="这是一段操作的<b>粗体</b>字符串.">
</br>
<p><a href="http://www.hao123.com" id="w3s">W3School.com</a></p>
</h1>
<button class="text" type="button">Text</button>
<button class="html" type="button">html</button>
<button class="val" type="button">Text</button>
<button class="attr" type="button">attr</button>
</body>
</html>
添加内容和属性：
1、append() - 在被选元素的结尾插入内容。
2、prepend() - 在被选元素的开头插入内容。
3、after() - 在被选元素之后插入内容。
4、before() - 在被选元素之前插入内容。
<html>
<head>
<script type="text/javascript" src="../bin/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 在内容后面添加新的元素
$("button.append").click(function(){
$("p").append("<b>end Appended text</b></br>");
});
// 在内容前面添加新的元素
$("button.prepend").click(function(){
$("p").prepend("<b>start Appended text</b></br>");
});
// 在内容后面添加新的元素
$("button.after").click(function(){
$("p").after("<b>end Appended text</b></br>");
});
// 在内容前面添加新的元素
$("button.before").click(function(){
$("p").before("<b>start Appended text</b></br>");
});
// 创建新元素添加
$("button.password").click(function(){
// 通过HTML方式创建元素
var text1="<p>Text.</p>";
// 以jquery方式创建元素
var text2=$("<p></p>").text("Text.");
var field=$("<input type='password'></input>");
// 通过 DOM 来创建元素
var text3=document.createElement("p");
text3.innerHTML="Text.";
$("body").append(text1,text2,text3,field);
});
});
</script>
</head>
<body>
<h1>
<p>if you click Hello Wolrd, i will disapper.</p>
<button type="button" class="append">append</button>
<button type="button" class="prepend">prepend</button>
<button type="button" class="password">password</button>
<button type="button" class="after">after</button>
<button type="button" class="before">before</button>
</h1>
</body>
</html>
删除内容和属性：
1、remove() - 删除被选元素（及其子元素）
2、empty() - 从被选元素中删除子元素
代码:
<html>
<head>
<script type="text/javascript" src="../bin/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 清空子元素
$("button.remove").click(function(){
$("div.remove").remove();
});
// 清空所有元素
$("button.empty").click(function(){
$("div.empty").empty();
});
});
</script>
</head>
<body>
<h1>
<div class="remove" style="height:100px;width:300px;border:1px solid black ;background-color:yellow;">
<p>This is some text in the div.</p>
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div></br>
<div class="empty" style="height:100px;width:300px;border:1px solid black ;background-color:yellow;">
<p>This is some text in the div.</p>
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<button type="button" class="remove">remove</button>
<button type="button" class="empty">empty</button>
</h1>
</body>
</html>
CSS操作：
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
代码：
<html>
<head>
<script type="text/javascript" src="../bin/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button.addCssStyle").click(function(){
// 1. 选择器选择多个元素，通过逗号隔离。
// 2. 通过addClass属性为元素附加css属性。
$("H1,H4,p").addClass("blue");
$("div").addClass("important");
});
$("button.removeCssStyle").click(function(){
// 1. 通过removeClass属性删除css属性。
$("H1,H4,p").removeClass("blue");
$("div").removeClass("important");
});
$("button.toggleCssStyle").click(function(){
// 1.通过toggleClass切换状态。
$("H1,H4,p").toggleClass("blue");
$("div").toggleClass("important");
});
$("button.getCssStyle").click(function(){
// 1.通过css属性名获取对象使用css的值
alert($("div").css("propertyname","value"));
alert($("p").css("background-color"));
// 一次性设置css多个属性(格式css.({...more attribute value...}))
$("p").css({
"background-color":"red",
"font-size":"20px"
});
});
});
</script>
<style type="text/css">
.important{
font-weight: bold;
font-size: xx-large;
}
.blue{
color: blue;
}
</style>
</head>
<body>
<H1>标题1</H1>
<H4>标题2<H4>
<p>这是一个段落</p>
<p>另一个段落</p>
<div>
重要的段落
</div>
<button class="addCssStyle" type="button">addCssStyle</button>
<button class="removeCssStyle" type="button">removeCssStyle</button>
<button class="toggleCssStyle" type="button">toggleCssStyle</button>
<button class="getCssStyle" type="button">getCssStyle</button>
</body>
</html>
Ajax操作：
<html>
<head>
<script type="text/javascript" src="../bin/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var path = "http://store.ceair.com/mas/gk/public/gkstqMas/GetXXBMonthDuty";
$.ajax({
url:path,
dataType:"json",
success:function(data){
$.each(data,function(k,v){
var text = $("<input type='text'></input></br></br>").val(v.Leadername);
$("body").append(text);
});
},
});
// 通过jquery框架提供的json数据解析
$.getJSON(
path, // 请求地址
function(data){ // 回调函数获取返回值
$.each(data,function(k,v){
//var text = $("<input type='text'></input></br></br>").val(v.Leadername);
//$("body").append(text);
});
})
// 执行完之后操作
.done(function(){
do thing ...
})
// 执行失败操作
.fail(function(){
do thing ...
});
});
</script>
</head>
<body>
</body>
</html>
