jQuery - DOM操作

获取元素内容

可以通过三种方法获取元素内容

• html() ----设置或者返回元素的内容(包括html标签)
• text(); ----设置或者返回元素的内容
• val(); ----设置或者返回表单的内容

 

设置属性值

attr()方法同样可以设置属性值，并且也可以同时设置多个属性值。

//给a标签设置链接
$("button").click(function(){ 
  $("#a").attr("href","//www.baidu.com/"); 
});

//给a标签设置连接及title
$("button").click(function(){ 
  $("#a").attr({ 
    "href" : "//www.baidu.com", 
    "title" : "jQuery 教程" 
  }); 
});

添加元素

jq当中，可以通过下面的方法添加元素:

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

var d = $("<div>");

//尾部添加元素
// body被div插入了
$("body").append(d);
// 把div插入到body
d.appendTo($("body"));

//头部添加元素
$("body").prepend(d);
d.prependTo($("body"));

删除元素

jq当中删除元素的方法如下：

• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有元素：

$("p").remove(".italic");

css类的操作

jQuery 拥有若干进行 CSS 操作的方法。如下:

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

// 添加类
$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

// 添加多个类
$("button").click(function(){
  $("#div1").addClass("important blue");
});

 jQuery尺寸类

支持获取设置的尺寸

• height() 设置或返回匹配元素的高度。
• width() 设置或返回匹配元素的宽度。
• scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移。
• scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移。
• innerWidth() 包含内边距（padding）
• outerWidth()包含内边距和边框(padding+border)

 只能获取不能设置的尺寸

• offset() 返回第一个匹配元素相对于文档的位置。
• position() 返回第一个匹配元素相对于父元素的位置.
• offsetParent() 返回最近的定位祖先元素。

尺寸类图解:

 

 

根据元素关系获取元素

获取祖先元素

下面的方法可以获取祖先元素:

• parent() 方法返回被选元素的直接父元素。
• parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()
• parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

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

获取后代元素

下面的方法可以获取后代元素

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

//  返回属于 <div> 后代的所有 <span> 元素：
$(document).ready(function(){
  $("div").find("span");
});

// 返回 <div> 的所有后代
$(document).ready(function(){
  $("div").find("*");
});

获取兄弟元素

下面的方法可以获得兄弟元素 ：

• siblings() 方法返回被选元素的所有同胞元素。
• next() 方法返回被选元素的下一个同胞元素。
• nextAll() 方法返回被选元素的所有跟随的同胞元素。
• nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
• prev()
• prevAll()
• prevUntil()

过滤

所谓的过滤，就是查找指定的元素，常用方法有以下的几种:

• first() 返回被选元素的首个元素
• last() 返回被选元素的最后一个元素
• eq() 返回被选元素中带有指定索引号的元素
• filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
• not() 方法返回不匹配标准的所有元素