JQuery捕獲和設(shè)置
三個(gè)簡(jiǎn)單實(shí)用的用于 DOM 操作的 jQuery 方法：
- text() - 設(shè)置或返回所選元素的文本內(nèi)容
- html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
- val() - 設(shè)置或返回表單字段的值
- attr() -獲取屬性值
$("#test").text();//獲取
$("#test1").text("Hello world!");//設(shè)置
回調(diào)函數(shù)有兩個(gè)參數(shù)：被選元素列表中當(dāng)前元素的下標(biāo)先蒋，以及原始值谤碳。然后以函數(shù)新值返回您希望使用的字符串诗鸭。
$("#test1").text(function(i,old){
return "舊文本: " + old + " 新文本: Helloworld! (index: " + i + ")";
});
JQuery添加元素
用于添加新內(nèi)容的四個(gè) jQuery 方法：
- append() - 在被選元素的結(jié)尾插入內(nèi)容
- prepend() - 在被選元素的開(kāi)頭插入內(nèi)容
- after() - 在被選元素之后插入內(nèi)容
- before() - 在被選元素之前插入內(nèi)容
$("p").append(" <b>追加文本</b>弓坞。");
通過(guò)三種方法創(chuàng)建文本并添加到<body>元素中
function appendText(){
var txt1="<p>文</p>"; // 使用 HTML 標(biāo)簽創(chuàng)建文本
var txt2=$("<p></p>").text("文本"); // 使用 jQuery 創(chuàng)建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 創(chuàng)建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
$("body").after(txt1,txt2,txt3);
}
JQuery刪除元素
如需刪除元素和內(nèi)容拉宗，一般可使用以下兩個(gè) jQuery 方法：
- remove() - 刪除被選元素（及其子元素）
- empty() - 從被選元素中刪除子元素
$("#div1").remove();
$("#div1").empty();
jQuery remove() 方法也可接受一個(gè)參數(shù)峦树，允許您對(duì)被刪元素進(jìn)行過(guò)濾辣辫。
$("p").remove(".italic");//刪除所有class="italic"的p元素
jQuery 操作CSS
jQuery 擁有若干進(jìn)行 CSS 操作的方法。我們將學(xué)習(xí)下面這些：
- addClass() - 向被選元素添加一個(gè)或多個(gè)類(lèi)
- removeClass() - 從被選元素刪除一個(gè)或多個(gè)類(lèi)
- toggleClass() - 對(duì)被選元素進(jìn)行添加/刪除類(lèi)的切換操作
- css() - 設(shè)置或返回樣式屬性
$("div").addClass("important");
$("div").toggleClass("important");
<style>
.important
{
font-weight:bold;
font-size:xx-large;
}
</style>
jQuery toggleClass() 方法對(duì)被選元素進(jìn)行添加/刪除類(lèi)的切換操作
返回css屬性
$("p").css("background-color");
設(shè)置css屬性
$("p").css("background-color","yellow");
設(shè)置多個(gè)css屬性
css({"propertyname":"value","propertyname":"value",...});
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery 尺寸方法
jQuery 提供多個(gè)處理尺寸的重要方法：
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
示例
$("#div1").width();
$("#div1").innerWidth();
獲取瀏覽器的寬度和高度
alert($(window).height()); //瀏覽器當(dāng)前窗口可視區(qū)域高度
alert($(document).height()); //瀏覽器當(dāng)前窗口文檔的高度
alert($(document.body).height()); //瀏覽器當(dāng)前窗口文檔body的高度
alert($(document.body).outerHeight(true)); //瀏覽器當(dāng)前窗口文檔body的總高度 包括border padding margin
alert($(window).width()); //瀏覽器當(dāng)前窗口可視區(qū)域?qū)挾?/p>
alert($(document).width()); //瀏覽器當(dāng)前窗口文檔對(duì)象寬度
alert($(document.body).width()); //瀏覽器當(dāng)前窗口文檔body的寬度
alert($(document.body).outerWidth(true)); //瀏覽器當(dāng)前窗口文檔body的總寬度 包括border padding margin
