jQuery-5（HTML DOM）

1、获取和设置

//text()	//获取元素的纯文本内容，不识别html标签（非表单元素）
//text("内容")  //设置元素的纯文本内容，不识别html标签（非表单元素）
console.log( "id为test1的元素的内容是:" + $("#text1").text() );
$("#text2").text("信科院");

//html()	//获取元素的内容，包含html标签（非表单元素）
//html("内容")	//设置元素的内容，包含html标签（非表单元素）
console.log( "id为html1的内容是:" + $("#html1").html() );
$("#html1").html("<h2>湖南</h2>");

//val()	//获取元素的值（表单元素）
//val("值")	//设置元素的值（表单元素）
console.log( "id为op的元素的内容是:" + $("#op").val() );
$("#op").val("today!");

//attr()   //获取或设置选定元素的属性值
console.log( "id为aa的name属性值是:" + $("#aa").attr("name") );
$("a").attr("href","http://www.baidu.com");

//css()  //获取或设置选定元素的css属性值  addClass()为某个元素添加样式,removeClass()删除样式,toggleClass()删除添加轮流
console.log("段落的背景颜色是：" + $("p").css("background-color") );
$("p").css("background-color","red");
$("p").css("background-color":"red" , "font-size":"25px");

$("button").click(function(){
	$("div#remove").toggleClass("bule");
})

2、添加

append()  //选定元素内部结尾处插入内容

prepend()  //选定元素内部开头插入内容

after()  //选定元素之后出入内容

before()  //选定元素之前插入内容

//用法一样
$("p#test").append("这是一段测试内容");

appendTo()  //将内容插入到选定元素之前
$("<span>Hello World!</span>").appendTo("p");  //将Hello World!插入到p标签之前

3、删除

remove()  //删除选定元素及其子元素
$("p#test").remove();  //删除id为test的段落

empty()  //清空元素，文本内容
$("h1").empty();

removeAttr()  //删除元素的指定属性
$("div").removeAttr("id");

4、尺寸

width()  //获取或设置宽度（不包括内外边距和边框宽度）

height()  //获取或设置高度（不包括内外边距和边框宽度）

innerWidth()  //获取或设置宽度（包括内边距）

innerHeight()  //获取或设置高度（包括内边距）

outerWidth()  //获取或设置宽度（包括内边距和边框宽度）

outerHeight()  //获取或设置高度（包括内边距和边框宽度）