JQuery捕获和设置
三个简单实用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
- attr() -获取属性值
$("#test").text();//获取
$("#test1").text("Hello world!");//设置
回调函数有两个参数：被选元素列表中当前元素的下标，以及原始值。然后以函数新值返回您希望使用的字符串。
$("#test1").text(function(i,old){
return "旧文本: " + old + " 新文本: Helloworld! (index: " + i + ")";
});
JQuery添加元素
用于添加新内容的四个 jQuery 方法：
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
$("p").append(" <b>追加文本</b>。");
通过三种方法创建文本并添加到<body>元素中
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); // 追加新元素
$("body").after(txt1,txt2,txt3);
}
JQuery删除元素
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
$("#div1").remove();
$("#div1").empty();
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
$("p").remove(".italic");//删除所有class="italic"的p元素
jQuery 操作CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
$("div").addClass("important");
$("div").toggleClass("important");
<style>
.important
{
font-weight:bold;
font-size:xx-large;
}
</style>
jQuery toggleClass() 方法对被选元素进行添加/删除类的切换操作
返回css属性
$("p").css("background-color");
设置css属性
$("p").css("background-color","yellow");
设置多个css属性
css({"propertyname":"value","propertyname":"value",...});
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery 尺寸方法
jQuery 提供多个处理尺寸的重要方法：
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
示例
$("#div1").width();
$("#div1").innerWidth();
获取浏览器的宽度和高度
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height()); //浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true)); //浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width()); //浏览器当前窗口文档对象宽度
alert($(document.body).width()); //浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true)); //浏览器当前窗口文档body的总宽度 包括border padding margin
