jQuery能夠有效率地操作頁面元素。
關於DOM和CSS的頁面元素選擇:
# $("span"); //全部span元素
$( "#elem"); //id為elem的元素
$(".classname"); //類別為classname的元素
$("div#elem"); /id為elem的
$("ul li a.menu"); //類別為」menu」的標籤
# $("p> ;span"); //p的直接子元素span
$("input[type=password]"); //指定型別的input元素
$("p:first "); //頁的第一個段落
$("p:even"); //全部偶數段落
$(":header") ; //標題元素(h1到h6)
$(":button"); //全部按鈕元素
$(":radio");
」 $ (":checkbox");
$(":checked"); //選中狀態的選擇框或段選框
html() 獲取元素或一組元素的HTML內容,類似與JavaScript的innerHTML,會獲得全部的HTML(包括文字)。
var htmlContent=$("#elem").html();
$("#elem").html("<p>Here is some new content.</p>");/*修改内容*/
# text() 僅取得元素的文字內容,取得及修改內容如下:
var textContent=$("#elem").text(); $("#elem").text("new content"); //修改内容 $("#elem").append("<p>Here is some new content.</p>") //添加文本内容
attr() 傳回一個元素特定的屬性值,當用於一組時,傳回第一個元素的值。
var title=$("#elem").attr("title"); //返回属性值 $("#elem").attr("title","new title"); //修改属性值
show() //顯示元素 $("div").show();
hide() // 隱藏元素 ,slow的值大約是600毫秒
$("#elem").hide("slow",function(){
//隱藏後的操作
});
元素動畫
1.淡入淡出,如:
$("#elem").fadeOut("slow",funtion(){
//淡出後的操作
## //出後的操作 } } ); $("#elem").fadeIn(500,function(){ ////淡入後的操作# ///淡入後的操作
) ;
$("#elem").fadeTo(3000,0.5,function(){
//淡入或
# //淡入或# 透明度,表示最終不透明度淡入或淡出為0.5
});
2.滑動,類似淡入淡出
slideDown();
slideUp();
slideToggle();
animate()可以套用於很多的CSS樣式。如把元素高度寬度改變後再淡出隱藏。 指令鏈 jQuery指令鏈的長度沒有什麼限制,可以對同一組元素連續進行很多的操作:$("#elem").animate(
{
width:400px;
height:400px;
},1500,function(){
$(this).fadeOut("slow");
}
);
$("#elem").text("Hello from jQuery"). fadeOut().fadeIn();######### ####
以上是jQuery高效能操作頁面元素的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!