jQuery入门

jQuery简介：

         jQuery是一个javaScript库。

         jQuery极大地简化了javaScript编程

jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。

特点：jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他Javascript库的根本特点。

jQuery准备：

         jquery-2.1.1.js  下载： jQuery.com 

选择网页元素：

1、可以是CSS选择器，如：

$(document) //选择整个文档对象

$('#myId') //选择ID为myId的网页元素

$('div.myClass')// 选择class为myClass的div元素

$('input[name=first]')// 选择name属性等于first的input元素

2、  可以是jQuery特有的表达式，如：

$('a:first') //选择网页中第一个a元素

$('tr:odd') //选择表格的奇数行

$('#myForm :input') // 选择表单中的input元素

$('div:visible') //选择可见的div元素

$('div:gt(2)') // 选择所有的div元素，除了前三个

$('div:animated') // 选择当前处于动画状态的div元素

改变结果集：

1、  提供了强大的过滤器，对结果集进行筛选，缩小选择结果，如：

$('div').has('p'); // 选择包含p元素的div元素

$('div').not('.myClass'); //选择class不等于myClass的div元素

$('div').filter('.myClass'); //选择class等于myClass的div元素

$('div').first(); //选择第1个div元素

$('div').eq(5); //选择第6个div元素

2、  有时候，也需要从结果集出发，移动到附近相关元素，如：

$('div').next('p'); //选择div元素后面的第一个p元素

$('div').parent(); //选择div元素的父元素

$('div').closest('form'); //选择离div最近的那个form父元素

$('div').children(); //选择div的所有子元素

$('div').siblings(); //选择div的同级元素

链式操作：

1、选中网页元素后，可以对他进行一系列操作，并且可以连在一起，如：

$('div').find('h3').eq(2).html('Hello');

2、也可以分解开，如：

$('div') //找到div元素

.find('h3') //选择其中的h3元素

.eq(2) //选择第3个h3元素

.html('Hello');//将它的内容改为Hello

原理是每一步返回的都是jQuery对象

元素的操作：取值和赋值

1、  jQuery把取值和赋值的函数合一，根据参数来确定实际操作：

$('h1').html(); //html()没有参数，表示取出h1的值

$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值

2、常见的函数如下：

.html() 取出或设置html内容

.text() 取出或设置text内容

.attr() 取出或设置某个属性的值

.width() 取出或设置某个元素的宽度

.height() 取出或设置某个元素的高度

.val() 取出某个表单元素的值

事件操作：

1、  jQuery把事件操作直接绑定到网页元素上面，如:

$('p').click(function(){

alert('Hello');

});

2、  常见的一些事件：

.blur() 表单元素失去焦点。

.change() 表单元素的值发生变化

.click() 鼠标单击

.dblclick() 鼠标双击

.focus() 表单元素获得焦点

.focusin() 子元素获得焦点

.focusout() 子元素失去焦点

.hover() 同时为mouseenter和mouseleave事件指定处理函数

.keydown() 按下键盘（长时间按键，只返回一个事件）

.keypress() 按下键盘（长时间按键，将返回多个事件）

.keyup() 松开键盘

.load() 元素加载完毕

.mousedown() 按下鼠标

Ajax：

1、  load()方法：

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);

必需的url参数规定您希望加载的 URL。

可选的data参数规定与请求一同发送的查询字符串键/值对集合。

可选的callback参数是 load() 方法完成后所执行的函数名称。

如下：

$("#div1").load("/example/jquery/demo_test.txt",function(responseTxt,statusTxt,xhr){

if(statusTxt=="success")

alert("外部内容加载成功！");

if(statusTxt=="error")

alert("Error:"+xhr.status+": "+xhr.statusText);

});

2、  get()方法：

$.get() 方法通过 HTTPGET 请求从服务器上请求数据。

$.get(URL,callback);

必需的url参数规定您希望请求的 URL。

可选的callback参数是请求成功后所执行的函数名。

如下：

$("button").click(function(){

$.get("demo_test.asp",function(data,status){

alert("Data: " + data + "\nStatus: " + status);

});

});

3、  post()方法：

$.post() 方法通过 HTTPPOST 请求从服务器上请求数据。

$.post(URL,data,callback);

必需的url参数规定您希望请求的 URL。

可选的data参数规定连同请求发送的数据。

可选的callback参数是请求成功后所执行的函数名。

如下：

$("button").click(function(){

$.post("demo_test_post.asp",

{

name:"DonaldDuck",

city:"Duckburg"

},

function(data,status){

alert("Data:" + data + "\nStatus: " + status);

});

});