jQuery基础

jQuery 是一个JavaScript函数库。支持HTML元素选取和操作、CSS操作、JS特效与动画、DOM处理、Ajax等。

导入jQuery就像导入一段外部js代码一样简单，可以使用MS或Google的CDN进行加载。

1 jQuery基础

jQuery采用了CSS选择器的语法来选择HTML元素，基础语法为$(selector).action()

示例 $(document).ready(function(){

//当文档加载完毕后执行...

});

选择器使用了CSS的各种选择器，如元素选择器、类选择器、ID选择器、属性选择器。

在选择到元素后设置CSS只需要使用css()方法即可。

jQuery专门为事件处理进行了封装，只需要调用选择器上定义的事件方法即可。示例

${"#id"}.click(function() {...})

除此以处，jQuery定义了一系列方法对浏览器进行抽象，对各种常用操作进行封装。

2 jQuery效果

2.1 隐藏与显示

hide(speed,callback)   隐藏一个元素，speed为slow,fast或毫秒

show(speed,callback)   显示一个元素

toggle(speed,callack)  让元素在隐藏与显示之间切换

2.2 淡入淡出

fadeIn(speed,callback)             设置隐藏元素淡入

fadeOut(speed,callback)            设置显示元素淡出

fadeToggle(speed,callback)         设置元素自动切换淡入淡出

fadeTo(speed,opacity,callback)     设置元素渐变为给定的不透明度，值在0-1间

2.3 滑入滑出

slideDown()   

slideUp()

slideToggle()

2.4 动画

animate({params},speed,callback) 设置动画，参数设置形成动画的CSS属性，其中可以设置多个属性。

jQuery提供针对动画的队列功能，对于编写的多个animate调用，jQuery会创建包含这些方法调用的内容队列，然后逐一执行。

示例1: div.animate({left:'100px'},"slow");

示例2：

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

      $("div").animate({

      height:'+=150px',

      width:'+=150px'

    });

});

stop(all,toEnd)  用于停止相应的变化。all表示清除动画队列，默认为FALSE，toEnd规定是否完成当前动画，默认为False。

2.5 杂项

如果想在变化完成后执行操作，则应该定义callback函数，而不能在执行动作之后，接着执行那个操作，这种情况下，有可能会先执行变化后的动作，而不是先执行变化。

如果对一个元素要执行多个操作，jQuery支持链式语法，可以节约每都查找元素的开销。示例：

$("#p1").css("color","red")

        .slideUp(2000)

        .slideDown(2000);

3 jQuery操作HTML

3.1 获取与设置元素相关文本与属性

text()      获取或设置选择元素的文本，会将其中的html标签删除，当无参数时为获取，有参数时为设置

html()      获取或设置选择元素的文本，可以包含html标签

val()       获取或设置表单字段的值

attr(key)   获取指定属性的值。可以一次设置多个值。放到一个json对象中即可。

上面4个函数，也可以传递一个函数来进行新值的设定，回调函数有两个参数，选定元素在当前选择集合中的索引下标，以及旧值。新值通过函数返回值返回。示例：

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

  $("#w3s").attr("href", function(i,origValue){

    return origValue + "/jquery";

  });

});

3.2 添加

append(str)  在被选中元素结尾插入内容，块内插入。

after(str)   在被选中元素后插入内容，块外插入。

prepend(str) 在被选中元素头前插入内容，块内插入。

before(str)  在被选中元素前插入内容，块外插入。

示例：$("p").append("Some appended text.");

3.3 删除

remove()   删除被选元素及子元素，允许接收一个选择器，进行过滤删除

empty()    删除被选元素的子元素

示例：$("div").remove(".italic");

3.4 操作类

addClass()     向选中元素添加类，可多个

removeClass()  从选中元素删除类，可多个

toggleClass()  对被中元素进行添加/删除类的切换操作

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

  $("h1,h2,p").toggleClass("blue");

});

3.5 css()方法

css(key)         获取选择元素的指定css属性

css(key,value)   设置选择元素指定的css属性，可多个

$("p").css({"background-color":"yellow","font-size":"200%"});

3.6 尺寸

width()         设置或返回元素的宽度，不包括内边距、边框和外边距

height()        

innerHeight()   返回元素的宽度，包含内边距

innerWidth()

outerWidth()    返回元素的宽度，包含内边距和边框

outerHeight()

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）

outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）

4 jQuery遍历DOM

最常用的遍历是利用DOM的树形结构来进行。

parent()          返回元素的直接父元素

parents()         返回元素的所有父辈元素，参数可以指定元素的标签名以过滤

parentsUntil(tag) 返回元素的父辈元素，同时是tag的后辈的元素

示例：

$(document).ready(function(){

  $("span").parents("ul");

});

children()     返回元素的所有后代元素，参数也可以指定过滤器

find(tag)      查找元素的所有后代元素，参数也可以指定过滤器

示例：

$(document).ready(function(){

  $("div").children("p.1");

});

siblings()   返回元素的所有兄弟元素，参数可使用过滤器

next()       返回元素的下一个兄弟元素

nextAll()    返回元素的所有后续兄弟元素

nextUntil()  

prev() 

prevAll()

prevUntil()  

first()    返回选中元素集中第1个

last()     返回选中元素集中第-1个

eq(n)      返回选中元素中索引位置为n的元素

filter()   对选中元素进行过滤，返回匹配的元素

$(document).ready(function(){

  $("p").filter(".intro");

});

not()       filter的反义方法，返回不匹配的元素

5 jQuery for Ajax

5.1 基本ajax

var xmlhttp;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange = function()

{

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

  {

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

  }

}

xmlhttp.open("GET","test1.txt",true);

xmlhttp.send();

准备状态有5个值，分别为 0:请求未初始化，1：服务器已经连接 2：请求已接收 3：请求处理中 4：请求已经完成响应就绪

5.2 使用jQuery的Ajax

load(url,data,callback)   用于异步加载数据，可设置回调函数，callback(resp,status,xhr)

$.get(url,callback)       用于异步发送get请求，回调函数：callback(data,status)

$.post(url,data,callback) 用于异步发送post请求，回调函数：callback(data,status)

示例：

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

  $.post("demo_test_post.asp",

  {

    name:"Donald Duck",

    city:"Duckburg"

  },

  function(data,status){

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

  });

});

6 杂项

$变量表示jQuery对象，如果遇到命名冲突，noConflict()方法用于释放对$符号的占用。

但依然可以使用jQuery全名来使用jQuery库，同时可以创建自己的简写。如var jq = $.noConflict();