jQuery HTML

获取

jQuery 拥有可操作 HTML元素和属性的强大方法。

获得内容 - text()、html() 以及val()：

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

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  //Text:这是段落中的 <b>粗体</b> 文本(会显示html元素)
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
}); 
  //Text:这是段落中的粗体文本

scripts:
$(document).ready(function(){
  $("button").click(function(){
    alert("值为: " + $("#test").val());
  });
});
html:
<p>名称: <input type="text" id="test" value="W3Cschool教程"></p>
<button>显示值</button>

获取属性值-attr()

$(document).ready(function(){
  $("button").click(function(){
    alert($("#runoob").attr("href"));
  });
});
html:
<p><a href="http://www.w3cschool.cn" id="runoob">W3Cschool教程</a></p>
<button>显示 href 属性的值</button>

设置内容和属性

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

arr()——改变属性值，attr("href","http://www.w3cschool.cn/jquery")

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

添加元素

• append() - 在被选元素内部的结尾插入指定内容

$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>追加文本</b>。");
  });

  $("#btn2").click(function(){
    $("ol").append("<li>追加列表项</li>");
  });
});

• prepend() - 在被选元素内部的开头插入指定内容

$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").prepend("<b>在开头追加文本</b>。 ");
  });
  $("#btn2").click(function(){
    $("ol").prepend("<li>在开头添加列表项</li>");
  });
});

通过append（）方法添加若干新元素

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);        // 追加新元素
}

• 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);          // 在图片后添加文本
}

删除元素

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

$("#div1").remove();
$("p").remove(".italic"); 
//删除class为italic的元素

• empty() - 从被选元素中删除子元素

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

CSS类

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

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

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

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

• toggleClass() - 对被选元素进行添加/删除类的切换操作
  (removeClass()与addClass()结合在一起)
  
  
• css() - 设置或返回样式属性
  css() 方法设置或返回被选元素的一个或多个样式属性。
  语法1： css(“propertyname”)
  返回propertyname的值

$("button").click(function(){
alert("背景颜色 = " +                 $("p").css("background-color"));
});

语法2：css(“propertyname”,”value”);

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

尺寸

• width() 返回元素的宽度（不包括内边距、边框或外边距）。
• height() 返回元素的高度（不包括内边距、边框或外边距）。

$("button").click(function(){
  var txt="";
  txt+="Width: " + $("#div1").width() + "</br>";
  txt+="Height: " + $("#div1").height();
  $("#div1").html(txt);
});

• innerWidth() 返回元素的宽度（包括内边距）。
• innerHeight() 返回元素的高度（包括内边距）。

$("button").click(function(){
  var txt="";
  txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
  txt+="Inner height: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

• outerWidth() 返回元素的宽度（包括内边距和边框）。
• outerHeight() 返回元素的高度（包括内边距和边框）。

$("button").click(function(){
  var txt="";
  txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
  txt+="Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});