jQuery的基本操作2

jQuery的DOM 操作

Query 中非常重要的部分，就是操作 DOM 的能力。jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

获取或设置HTML的内容和属性 

三个简单实用的用于 DOM 操作的 jQuery 方法：

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

    

//获取id="text"的text内容
$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
//设置id="text"的text内容为hello
$("#btn1").click(function(){
  alert("Text: " + $("#test").text("hello"));
});

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

//获取id="text"的html内容
$("#btn2").click(function(){
  alert("Text: " + $("#test").html());
});
//设置id="text"的text内容为hello
$("#btn2").click(function(){
  alert("Html: " + $("#test").html("hello"));
});

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

//获取id="text"的值
$("#btn1").click(function(){
  alert("值: " + $("#test").val());
});
//设置id="text"的值为hello
$("#btn1").click(function(){
  alert("值: " + $("#test").val("hello"));
});

 添加新的 HTML 内容

通过 jQuery，可以很容易地添加新元素/内容。添加分为内部添加和外部添加。

内部添加

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

$("div").append("追加文本或要添加的元素");//将元素和文本添加到div的内部结尾

• prepend() - 在被选元素的开头插入内容（仍然在该元素的内部）

$("div").prepend("在开头追加文本或元素");//将文本或元素添加在div内部的开头

外部添加 

• after() - 在被选元素之后插入内容

$("img").after("在后面添加的文本或元素");//在img的后面添加文本或元素，产生兄弟节点

• before() - 在被选元素之前插入内容

$("img").before("在前面添加的文本或元素");//在img之前添加文本或元素，产生兄弟节点

 删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

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

但一般可以细分为删除，清空和过滤。

删除

remove() 方法删除被选元素及其子元素。

$("#div1").remove();//删除id="div1"的元素及其子元素

清空

empty() 方法删除被选元素的子元素。

$("#div1").empty();//删除id="div1"的元素的子元素（清空子元素）

过滤

在remove()里接收参数，该参数可以是任何 jQuery 选择器的语法。

$("p").remove(".italic");//删除 class="italic" 的所有 <p> 元素

获取并设置 CSS 类

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

• addClass() - 向被选元素添加一个或多个类

$("button").click(function(){
  $("div").addClass("important blue");//给div添加类名为important和blue的类
});

• removeClass() - 从被选元素删除一个或多个类

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");//删除h1,h2,p里面类名为blue的类
});

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

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");//在删除blue和添加blue中切换
});

• css() - 设置或返回样式属性

语法格式：css("属性名","属性值")

   只填属性名是获取该元素的实现值，加属性值是设置属性值，键值对可以设置多个，用“,”分割

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