Jquery的常用方法

$("button").click(function(){$("div").animate({left:'250px'});
});

默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

animate()— 操作多个属性

$("button").click(function(){$("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

animate()— 使用相对值

$("button").click(function(){$("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

animate()— 使用预定义的值

您甚至可以把属性的动画值设置为 “show”、”hide” 或 “toggle”：

$("button").click(function(){$("div").animate({height:'toggle'});
});

animate()— 使用队列功能

默认地，jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的 ” 内部 ” 队列。然后逐一运行这些 animate 调用。

$("button").click(function(){var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

$("button").click(function(){var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

停止动画

stop()-> 停止动画或效果在他们完成之前

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法:

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

下面的例子演示 stop() 方法，不带参数：

$("#stop").click(function(){$("#panel").stop();});

Callback()-> 动画执行成功之后的回调函数

许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。

例子：$(“p”).hide(“slow”)

speed 或 duration 参数可以设置许多不同的值，比如 “slow”, “fast”, “normal” 或毫秒。

以下实例在隐藏效果完全实现后回调函数:

$("button").click(function(){$("p").hide("slow",function(){alert("段落现在被隐藏了");
  });
});

$("button").click(function(){$("p").hide(1000);
  alert("段落现在被隐藏了");
});

DOM 操作

获得内容

text()-> 设置或放回所选元素的文本内容

html()-> 设置或返回所选元素的内容（包括 HTML 标签）

val()-> 设置或返回表单字段的值

attr 获取属性

$(“button”).click(function(){

alert($(“#runoob”).attr(“href”));

});

$("button").click(function(){alert($("#runoob").attr("href"));
});

$("#btn1").click(function(){$("#test1").text("Hello world!");
});
$("#btn2").click(function(){$("#test2").html("Hello world!");
});
$("#btn3").click(function(){$("#test3").val("RUNOOB");
});

text()、html()、val() 的回调函数

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 text() 和 html()：

$("#btn1").click(function(){$("#test1").text(function(i,origText){return "旧文本:" + origText + "新文本: Hello world! (index:" + i + ")"; 
    });
});
 
$("#btn2").click(function(){$("#test2").html(function(i,origText){return "旧 html:" + origText + "新 html: Hello world! (index:" + i + ")"; 
    });
});

attr() 设置属性

jQuery attr() 方法也用于设置 / 改变属性值。

下面的例子演示如何改变（设置）链接中 href 属性的值：

$("button").click(function(){$("#runoob").attr({
        "href" : "http://www.baidu.com",
        "title" : "jQuery"
    });
});

attr() 的回调函数

jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 attr() 方法：

$("button").click(function(){$("#runoob").attr("href", function(i,origValue){return origValue + "/jquery";});
});

添加元素

append()-> 在被选元素的尾部插入内容

append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）。

$(“p”).append(“ 追加文本 ”);

prepend()-> 被选元素的开头插入内容

prepend() 方法在被选元素的开头插入内容。

$(“p”).prepend(“ 在开头追加文本 ”);

通过 append() 和 prepend() 方法添加若干新元素

在上面的例子中，我们只在被选元素的开头 / 结尾插入文本 /HTML。

不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本 /HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：

function appendText(){var txt1="
 文本 -1。
";              // 使用 HTML 标签创建文本
    var txt2=$("
").text("文本 -2。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本 -3。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

after() 和 before() 方法

jQuery after() 方法是每个匹配元素之后插入内容。

jQuery before() 方法在每个匹配元素之前插入内容。

通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

function afterText()
{var txt1="I ";                    // 使用 HTML 创建元素
    var txt2=$("").text("love");     // 使用 jQuery 创建元素
    var txt3=document.createElement("big");  // 使用 DOM 创建元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
}

删除元素

remove()-> 删除被选元素及其子元素

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

注意：以上的方法都可以传递参数，允许对被删元素进行过滤

$(“p”).remove(“.italic”);

jquery 操作 css

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

• addClass() – 向被选元素添加一个或多个类
• removeClass() – 从被选元素删除一个或多个类
• toggleClass() – 对被选元素进行添加 / 删除类的切换操作
• css() – 设置或返回样式属性

addClass()-> 向不同元素添加不同的 class 属性

$(“button”).click(function(){

$(“h1,h2,p”).addClass(“blue”);

$(“div”).addClass(“important”);

});

// 也可以在 addClass()-> 方法中规定多个类

$(“button”).click(function(){

$(“body div:first”).addClass(“important blue”);

});

removeClass()-> 删除指定的 class 属性

$("button").click(function(){$("h1,h2,p").removeClass("blue");
});

toggleClass()-> 对添加 / 删除元素进行切换

$("button").click(function(){$("h1,h2,p").toggleClass("blue");
});

CSS 方法

css()-> 设置或返回被选元素的一个或多个样式属性

$(“p”).css(“background-color”);

返回第一个 p 标签的 css 背景颜色值

设置指定的 css 属性

下面的例子将为所有匹配元素设置 background-color 和 font-size：

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

尺寸

width()-> 设置或返回元素的宽度（不包括内边距、边框或外边距）。

height()-> 设置或返回元素的高度（不包括内边距、边框或外边距）

$("button").click(function(){
  var txt="";
  txt+="div 的宽度是:" + $("#div1").width() + "";
  txt+="div 的高度是:" + $("#div1").height();
  $("#div1").html(txt);
});

innerWidth()-> 返回元素的宽度 (包括内边距)

innerHeight()-> 返回元素的高度 (包括内边距)

$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距:" + $("#div1").innerWidth() + "";
    txt+="div 高度，包含内边距:" + $("#div1").innerHeight();
  $("#div1").html(txt);
});

outerWidth()-> 返回元素的宽度（包括内边距和边框）

outerHeight()-> 返回元素的高度（包括内边距和边框）

$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距和边框:" + $("#div1").outerWidth() + "";
  txt+="div 高度，包含内边距和边框:" + $("#div1").outerHeight();
  $("#div1").html(txt);
});

向上遍历 DOM 元素

parent()-> 返回被选元素的直接父元素

该方法只会向上一级对 DOM 树进行遍历。

$(document).ready(function(){$("span").parent();});

parents()-> 返回被选元素的所有祖先元素、直到 html

您也可以使用可选参数来过滤对祖先元素的搜索。

下面的例子返回所有 元素的所有祖先，并且它是

元素：

$(document).ready(function(){$("span").parents("ul");
});

parentsUntil(‘ 元素 ’)-> 返回介于俩个给定元素之间的所有祖先元素

$(document).ready(function(){$("span").parentsUntil("div");
});

向下遍历 DOM 树

children()-> 返回被选元素的所有直接子元素

该方法只会向下一级对 DOM 树进行遍历。

下面的例子返回每个

$(document).ready(function(){$("div").children();});

$(document).ready(function(){$("div").find("span");
});

$(document).ready(function(){$("h2").siblings("p");
});
// 可以传递参数，参数代表哪个兄弟元素 

$(document).ready(function(){$("h2").nextAll();});

$(document).ready(function(){$("h2").nextAll();});

$(document).ready(function(){$("h2").nextUntil("h6");
});

$(document).ready(function(){$("div p").first();});

$(document).ready(function(){$("div p").last();});

$(document).ready(function(){$("p").eq(1);
});

$(document).ready(function(){$("p").filter(".url");
});

$(document).ready(function(){$("p").not(".url");
});