jquery学习笔记4

jQuery - 添加元素
添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

jQuery append() 方法
jQuery append() 方法在被选元素的结尾插入内容。
$("p").append("Some appended text.");

jQuery prepend() 方法
jQuery prepend() 方法在被选元素的开头插入内容。
$("p").prepend("Some prepended text.");

jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
$("img").after("Some text after");
$("img").before("Some text before");

--------------------------------------
jQuery - 删除元素
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

jQuery remove() 方法
jQuery remove() 方法删除被选元素及其子元素。
$("#div1").remove();

jQuery empty() 方法
jQuery empty() 方法删除被选元素的子元素。
$("#div1").empty();

过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p> 元素：
$("p").remove(".italic");

-------------------------------------------
jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

jQuery addClass() 方法
下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素
$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});
您也可以在 addClass() 方法中规定多个类：
$("button").click(function(){
  $("#div1").addClass("important blue");
});

jQuery removeClass() 方法
下面的例子演示如何不同的元素中删除指定的 class 属性：
$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

jQuery toggleClass() 方法
下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：
$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

--------------------------------
jQuery css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。
返回 CSS 属性
如需返回指定的 CSS 属性的值，请使用如下语法：
css("propertyname");
下面的例子将返回首个匹配元素的 background-color 值：
$("p").css("background-color");

设置 CSS 属性
如需设置指定的 CSS 属性，请使用如下语法：
css("propertyname","value");
下面的例子将为所有匹配元素设置 background-color 值：
$("p").css("background-color","yellow");

设置多个 CSS 属性
如需设置多个 CSS 属性，请使用如下语法：
css({"propertyname":"value","propertyname":"value",...});
实例
$("p").css({"background-color":"yellow","font-size":"200%"});