jquery

JQuery常用方法

jQueryHTML

捕获

• text()
• html()
• val()
• attr 获取属性值

$("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");

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

添加元素

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

删除元素

• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素//可用html("")代替

css类

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

css()方法

• css() 方法设置或返回被选元素的一个或多个样式属性。

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

尺寸

• width()
• height()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()
• width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
• height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
• innerWidth() 方法返回元素的宽度（包括内边距）。
• innerHeight() 方法返回元素的高度（包括内边距）。
• outerWidth() 方法返回元素的宽度（包括内边距和边框）。
• outerHeight() 方法返回元素的高度（包括内边距和边框）。

jQuery遍历

jQuery祖先

• parent() 方法返回被选元素的直接父元素。
  该方法只会向上一级对 DOM 树进行遍历。
  下面的例子返回每个 元素的的直接父元素：

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

• parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。

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

• parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
  下面的例子返回介于 与
  元素之间的所有祖先元素：

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

jQuery后代

• children() 方法返回被选元素的所有直接子元素。
  该方法只会向下一级对 DOM 树进行遍历。
  下面的例子返回每个
  元素的所有直接子元素：

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

您也可以使用可选参数来过滤对子元素的搜索。
下面的例子返回类名为 "1" 的所有

元素，并且它们是

的直接子元素

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

• find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
  下面的例子返回属于
  后代的所有 元素：

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

jQuery 同胞

next() 方法返回被选元素的下一个同胞元素。
该方法只返回一个元素。
下面的例子返回

的下一个同胞元素：

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

jQuery 过滤

• eq() 方法返回被选元素中带有指定索引号的元素。
  索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个

  元素（索引号 1）：

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

• filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
  下面的例子返回带有类名 "url" 的所有

  元素：

$(document).ready(function(){
   $("p").filter(".url").css("background-color","yellow");
});

not() 方法与 filter() 相反。