JQuery基础

JQuery帮助我们更方便的选取HTML DOM元素，提供更方便的方法绑定相应的事件

一，使用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(){});

三，选择器​​​​​​​

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

四，事件

jQuery 是为事件处理特别设计的。

​​​​​​​

五，操作
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);
  });
});