JQuery基础

一，使用Jquery

<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){  //代码开始});</script>

二，语法
1,通过jQuery，您可以通过selector选取HTML元素，并对它们执行操作action。
$(selector).action()

2,对HTML元素的事件监听，并添加监听函数。
$(selector).event(function(){});

三，操作
1，DOM操作
1>基本操作

text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容（包括 HTML 标记）val() - 设置或返回表单字段的值attr() - 设置或返回所选元素的属性

2>遍历查找
向上遍历

parent() 直接父元素。parents() 所有祖先元素。parentsUntil() 返回介于两个给定元素之间的所有祖先元素。

向下遍历

children() 所有直接子元素。find() 查找指定子元素。

水平遍历

siblings() 所有同胞元素。next() 下一个同胞元素。nextAll() 后面所有的同胞元素。nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已

过滤

first() 元素集的首个元素。last() 元素集的最后一个元素。eq() 在元素集中按索引查找。filter() 匹配条件的所有元素。not() 不匹配条件的所有元素。

3>添加删除
创建元素的三种方式：

var txt1="<p>Text.</p>";               // 以 HTML 创建新元素var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素var txt3=document.createElement("p");  // 以 DOM 创建新元素txt3.innerHTML="Text.";

append() - 结尾添加子元素prepend() - 开头添加子元素after() - 结尾添加元素before() - 开头添加元素empty() - 删除自己的子元素remove() - 删除自己（及子元素）

2，css操作
1>基本操作

css() - 设置或返回样式属性addClass() - 为元素添加一个css类removeClass() - 为元素删除一个css类toggleClass() - 对元素做添加/删除一个css类的切换操作

2>元素大小

width() 设置或返回元素content的宽度。height() 设置或返回元素content的高度。innerWidth() 返回元素content+padding的宽度。innerHeight() 返回元素content+padding的高度。outerWidth() 返回元素content+padding+border的宽度。outerHeight() 返回元素content+padding+border的高度。outerWidth(true) 返回元素content+padding+border+margin的宽度。outerHeight(true) 返回元素content+padding+border+margin的高度。

3>隐藏显示
a>直接型

$(selector).hide(speed,callback);$(selector).show(speed,callback);$(selector).toggle(speed,callback);

b>渐变

$(selector).fadeIn(speed,callback);$(selector).fadeOut(speed,callback);$(selector).fadeToggle(speed,callback);$(selector).fadeTo(speed,opacity,callback);

c>滑动

$(selector).slideDown(speed,callback);$(selector).slideUp(speed,callback);$(selector).slideToggle(speed,callback);

4>自定义动画

$(selector).animate({params},speed,callback);

3，异步访问操作
1>load() 
从服务器加载数据，并把返回的数据放入被选元素中。
语法：为$(selector).load(URL,data,callback);
callback函数参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
例子：

$("button").click(function(){  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){    if(statusTxt=="success")      alert("外部内容加载成功！");    if(statusTxt=="error")      alert("Error: "+xhr.status+": "+xhr.statusText);  });});

2>get()
通过 HTTP GET 请求从服务器上请求数据。
语法：$.get(URL,callback);
callback函数参数：
date - 返回数据
status - 状态
例子：

$("button").click(function(){  $.get("demo_test.asp",function(data,status){    alert("Data: " + data + "\nStatus: " + status);  });});

3>load()
通过 HTTP POST 请求从服务器上请求数据。
语法：$.post(URL,data,callback);
例子：

$("button").click(function(){  $.post("demo_test_post.asp",  {    name:"Donald Duck",    city:"Duckburg"  },  function(data,status){    alert("Data: " + data + "\nStatus: " + status);  });});