jQuery之HTML

jQuery获取内容和属性

jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
获得内容- text()、html()以及val()
三个简单实用的用于DOM操作的jQuery方法:

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值
  实例:

  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });

$("#btn1").click(function(){
  alert("值为: " + $("#test").val());
});

获取属性 -attr()
jQuery attr() 方法用于获取属性值。
实例:

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

jQuery设置内容和属性

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值
  实例:

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

text()、html() 以及 val() 的回调函数
实例:

$("#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 <b>world!</b> (index: " + i + ")"; 
    });
});

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

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

attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置 href 和 title 属性：
实例:

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

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

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

jQuery添加元素

添加新的HTML内容

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

  $("p").append("追加文本");

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

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

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

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

jQuery after()和before()方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
实例:

$("img").after("在后面添加文本");
 
$("img").before("在前面添加文本");

通过 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：
实例:

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

jQuery删除元素

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

  $("#div1").remove();

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

$("#div1").empty();

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

元素：

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

jQuery-获取并设置CSS类

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

  .important
  {
          font-weight:bold;
          font-size:xx-large;
  }
   
  .blue
  {
          color:blue;
  }

jQuery addClass()方法
展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：

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

也可以规定多个类

$("button").click(function(){
  $("#div1").addClass("important blue");
});

jQuery removeClass()方法
演示如何在不同的元素中删除指定的 class 属性：

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

jQuery toggleClass()方法
该方法对被选元素进行添加/删除类的切换操作：

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

jQuery css()方法

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

css("propertyname");

下面的例子将返回首个匹配元素的 background-color 值：

$("p").css("background-color");

设置CSS属性
语法:

css("propertyname","value");

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

$("p").css("background-color","yellow");

设置多个CSS属性
语法:

css({"propertyname":"value","propertyname":"value",...});

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

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

jQuery 尺寸

方法:
width()、height()、innerWidth()、innerHeight()、outerWidth()、outerHeight()

jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
下面的例子返回指定的

元素的宽度和高度：

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

jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
下面的例子返回指定的

元素的 inner-width/height：

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

jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
下面的例子返回指定的

元素的 outer-width/height：

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

jQuery HTML/CSS方法

下面的方法适用于 HTML 和 XML 文档。除了：html() 方法。

方法	描述
addClass()	向被选元素添加一个或多个类名
after()	在被选元素后插入内容
append()	在被选元素的结尾插入内容
appendTo()	在被选元素的结尾插入 HTML 元素
attr()	设置或返回被选元素的属性/值
before()	在被选元素前插入内容
clone()	生成被选元素的副本
css()	为被选元素设置或返回一个或多个样式属性
detach()	移除被选元素（保留数据和事件）
empty()	从被选元素移除所有子节点和内容
hasClass()	检查被选元素是否包含指定的 class 名称
height()	设置或返回被选元素的高度
html()	设置或返回被选元素的内容
innerHeight()	返回元素的高度（包含 padding，不包含 border）
innerWidth()	返回元素的宽度（包含 padding，不包含 border）
insertAfter()	在被选元素后插入 HTML 元素
insertBefore()	在被选元素前插入 HTML 元素
offset()	设置或返回被选元素的偏移坐标（相对于文档）
offsetParent()	返回第一个定位的祖先元素
outerHeight()	返回元素的高度（包含 padding 和 border）
outerWidth()	返回元素的宽度（包含 padding 和 border）
position()	返回元素的位置（相对于父元素）
prepend()	在被选元素的开头插入内容
prependTo()	在被选元素的开头插入 HTML 元素
prop()	设置或返回被选元素的属性/值
remove()	移除被选元素（包含数据和事件）
removeAttr()	从被选元素移除一个或多个属性
removeClass()	从被选元素移除一个或多个类
removeProp()	移除通过 prop() 方法设置的属性
replaceAll()	把被选元素替换为新的 HTML 元素
replaceWith()	把被选元素替换为新的内容
scrollLeft()	设置或返回被选元素的水平滚动条位置
scrollTop()	设置或返回被选元素的垂直滚动条位置
text()	设置或返回被选元素的文本内容
toggleClass()	在被选元素中添加/移除一个或多个类之间切换
unwrap()	移除被选元素的父元素
val()	设置或返回被选元素的属性值（针对表单元素）
width()	设置或返回被选元素的宽度
wrap()	在每个被选元素的周围用 HTML 元素包裹起来
wrapAll()	在所有被选元素的周围用 HTML 元素包裹起来
wrapInner()	在每个被选元素的内容周围用 HTML 元素包裹起来
$.escapeSelector()	转义CSS选择器中有特殊意义的字符或字符串
$.cssHooks	提供了一种方法通过定义函数来获取和设置特定的CSS值