语言特点：
- 快速获取文档元素
jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。
- 提供漂亮的页面动态效果
jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。
- 创建AJAX无刷新网页
AJAX是异步的JavaScript和XML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。
- 提供对JavaScript语言的增强
jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。
- 增强的事件处理
jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。
- 更改网页内容
jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。
1，增加淡入淡出效果
关键就是fade单词啦，意思就是褪色。fadeIn()淡出，fadeOut()淡入，fadeToggle()切换,fadeTo()指定淡入淡出程度。
$(function () {
var div = $("#d");
$("#b1").click(function () {
div.fadeIn();
});
$("#b2").click(function () {
div.fadeOut();
});
$("#b3").click(function () {
div.fadeToggle();
});
$("#b4").click(function () {
div.fadeIn(2000);
});
$("#b5").click(function () {
div.fadeOut(2000);
});
$("#b6").click(function () {
div.fadeToggle(2000);
});
$("#b7").click(function () {
$("#d1").fadeTo("slow",0.2);
$("#d2").fadeTo("slow",0.5);
$("#d3").fadeTo("slow",0.8);
});
});测试代码：
淡入淡出，指定淡入淡出程度
用于演示的div
用于演示fadeTo 20%
用于演示fadeTo 50%
用于演示fadeTo 80%
2，进行自定义动画演示
利用animate函数进行加载
$(function () {
var div = $("#d");
$("#b1").click(function () {
div.animate({left:'100px'},2000);
div.animate({left:'0px',top:'50px',height:'50px'},2000,function () {//加function()会有延迟效果
alert("动画演示结束");
});
});
});测试代码
自定义动画
向右移动100px
向左下移动50px，同时高度减小
3，事件处理（加载和点击）
- 页面记载有两种方式，
1.$(document).ready();
2. $();
第二种比较常用，也推荐使用。
- 图片加载方式
$("#img").load（）函数
$(document).ready(function () {
$("#message1").html("页面加载内容");
});
$(function () {
$("#img").load(function () {
$("#message2").html("图片加载成功");
});
});- 双击和单击事件
click() 表示单击 dblclick() 表示双击 注: 空白键和回车键也可以造成click事件，但是只有双击鼠标才能造成dblclick事件
$(function () {
$("#b").click(function () {
$("#message").html("单击按钮");
});
$("#b").dblclick(function () {
$("#message").html("双击按钮");
});
});测试代码
事件:1.加载2.点击
4，焦点展示
- 两种焦点方式
focus() 获取焦点
blur() 失去焦点
$(function () {
$("input").focus(function () {
$(this).val("获取了焦点");
});
$("input").blur(function () {
$(this).val("失去了焦点");
});
});- 内容改变方式
利用change()改变内容
对于文本框，只有当该文本失去焦点的时候，才会触发change事件。跟前面结合来看
$(function () {
$("#input1").change(function () {
var text = $(this).val();
$("#message").html("input的内容改变为："+text);
});
});测试代码
焦点展示
//只有当你在input1中不点击的时候触发
5，表单提交
使用form标签
$(function () {
$("#form").submit(function () {
alert("提交账号密码");
});
});测试代码
提交from表单
action="http://how2j.cn/study/login.jsp已经在网上实现，可直接访问
6，绑定事件和触发事件
- 通过on() 绑定事件来处理
$(function () {
$("#b").on("click",function () {
$("#message").html("单击按钮");
});
$("#b").on("dblclick",function () {
$("#message").html("双击按钮");
});
});- 触发事件，在本例中，文档加载好之后，就触发dblclick双击事件，而不是通过去手动双击
$(function () {
$("#b1").on("click",function () {
$("#message1").html("单击按钮");
});
$("#b1").on("dblclick",function () {
$("#message1").html("双击按钮");
});
$("#b1").trigger("dblclick");
});测试代码
绑定事件和触发事件
7，提交AJAX请求
- 普通的提交
$(function () {
//keyup可以实时监听到移动端input框输入，用onchange和
// onpropertychange都不行
$("#name").keyup(function () {
var page = "http://how2j.cn/study/checkName.jsp";
var value = $(this).val();
$.ajax({
url: page,//表示访问的页面
data:{"name":value},//表示提交的参数
success: function (result) {//表示服务器成功返回后对应的响应函数
$("#checkResult").html(result);
}
});
});
});- get方式提交请求
使用get方式请求ajax
$.get(
page,
{"name":value},
function(result){
$("#checkResult").html(result);
}
);- post方式提交请求
使用post请求提交ajax
$.post(
page,
{"name":value},
function(result){
$("#checkResult").html(result);
}
);- 最简单的ajax提交请求
//最简单的ajax的方式
//load比起 $.get,$.post 就更简单了
// $("#id").load(page,[data]);
$(function () {
$("#name1").keyup(function () {
var value = $(this).val();
var page = "http://how2j.cn/study/checkName.jsp?name="+value;
$("#checkResult").load(page);
});
});8，格式化form下的输入数据
//serialize()： 格式化form下的输入数据
// 有的时候form下的输入内容比较多，一个一个的取比较麻烦，就可以使用serialize() 把输入数据格式化成字符串
$(function () {
$("input").keyup(function () {
var data = $("#form").serialize();
var url ="http://how2j.cn/study/checkName.jsp";
var link=url+"?"+data;
$("a").html(link);
$("a").attr("href",link);
});
});测试代码
Title
http://how2j.cn/study/checkName.jsp
9，对数组进行操作
//遍历数组
//第一个参数是数组，第二个参数是回调函数i是下标，n是内容
var a = new Array(1,2,3);
$.each(a,function (i,n) {
document.write("元素["+i+"]"+n+"
");
});
document.write("
");
document.close();
//去掉重复的元素
//执行unique之前，要先调用sort对数组的内容进行排序。
var a1 = new Array(5,4,2,2,4,5,6,3,3,2);
a1.sort();
$.unique(a1);
$.each(a1,function (i,n) {
document.write("元素["+i+"]"+n+"
");
});
document.write("
");
document.close();
//判断元素是否在数组中存在
var a2= new Array(1,2,3,4,5,6,7,8,9);
document.write($.inArray(9,a));
document.close();10，JQuery转DOM和DOM转JQuery
var s1 = "{\"name\":\"盖伦\"";
var s2 = ",\"hp\":616}";
var s3 = s1+s2;//固定格式，美滋滋
document.write("这是一个字符串："+s3);
document.write("
");
var gareen = $.parseJSON(s3);
document.write("这是一个JSON对象："+gareen);
//JQuery转DOM
$(function () {
$("#b1").click(function () {
var div = $("#d");
var d=div[0];
var s="JQuery对象是"+div;
s+="\n对应的DOM对象是 " + d;
alert(s);
});
});
//DOM转JQuery
$(function () {
$("#b2").click(function () {
var div = document.getElementById("d2")
var d=div[0];
var s="JQuery对象是"+div;
s+="\n对应的DOM对象是 " + d;
alert(s);
});
});测试代码
字符串转化为JSON对象
Hello Jqurey
Hello JQuery
