JQuery学习篇--JQquery HTML

内容包括

JQuery 获取
JQuery 设置
JQuery 添加
JQuery 删除
JQuery CSS类
JQuery CSS()
JQuery 尺寸

---

JQuery 获取

//获取文本内容值
$("#test").text();
//获得带html样式的text
$("#test").html();
//获得输入字段的值
$("#test").val();
//获取属性值
$("#test").attr();
//获得href属性
$("#test").attr("href")

JQuery设置

//设置文本内容值
$("#test").text("需要设置的值");
//设置带html样式的text
$("#test").html("需要设置的值");
//设置输入字段的值
$("#test").val("需要设置的值");
//设置属性值
$("#test").("需要设置的属性","需要设置的值");
//设置href属性
$("#test").attr("href","需要设置的值");

jQuery 添加

//在被选元素的结尾插入内容
$("p").append("Some appended text.");
//在被选元素的开头插入内容
$("p").prepend("Some prepended text.");
//在被选元素之后插入内容。
$("img").after("Some text after");
//在被选元素之前插入内容。
$("img").before("Some text before");

JQuery删除

//删除被选元素及其子元素
$("#div1").remove();
//删除被选元素的子元素，也就是将该元素置空。
$("#div1").empty();
//移除指定元素
$("p").remove(".italic");

JQuery CSS类

//为元素增加一个CSS样式
$("h1,h2,p").addClass("blue");
//为元素增加多个CSS样式
$("#div1").addClass("important blue");
//为元素移除一个CSS样式
$("h1,h2,p").removeClass("blue");
//切换增加或移除CSS样式
$("h1,h2,p").toggleClass("blue");

JQuery css()

//返回首个匹配元素的 background-color 值
$("p").css("background-color");
//将为所有匹配元素设置 background-color 值
$("p").css("background-color","yellow");
//为所有匹配元素设置 background-color 和 font-size(多个值)
$("p").css({"background-color":"yellow","font-size":"200%"});

JQuery 尺寸

//返回元素的宽度（不包括内边距、边框或外边距）
$("#div1").width()
//返回元素的高度（不包括内边距、边框或外边距）
$("#div1").height()
//返回元素的宽度（包括内边距）
 $("#div1").innerWidth()
//返回元素的高度（包括内边距）
$("#div1").innerHeight()
//返回元素的宽度（包括内边距和边框）
$("#div1").outerWidth()
//返回元素的高度（包括内边距和边框）
$("#div1").outerHeight()
//返回元素的宽度（包括内边距、边框和外边距）
$("#div1").outerWidth(true)
//返回元素的高度（包括内边距、边框和外边距）
$("#div1").outerHeight(true)
//返回文档（HTML 文档）的高度和宽度
$(document).width()
$(document).height()
//返回窗口（浏览器视口）的宽度和高度
$(window).width()
$(window).height()
//指定的 <div> 元素的宽度和高度
$("#div1").width(500).height(500);