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);