首頁 > 開發者 > JavaScript
都來加深印象吧，大家都知道jQuery很好使用，因為它簡化了javascript代碼，更重要的是它還相容基本上所有的瀏覽器，網頁開發最頭疼的就是這個了，所以jQuery也因此深受碼農的喜愛，不過首先你得要記住它才能更好的使用它不是嗎，過久了沒用的屬性方法也會淡忘的，下面是jQuery的DOM操作方法屬性的詳解，看看加深下印象。
例子雖醜功能還俱全呢！
複製代碼 代碼如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
body {
/*color: purple;*/
}
.a{
color:red;
}
.b {
color:purple;
}
</style>
<script src="script/jquery-1.4.1.js"></script>
</head>
<body>
<p id="div">class</p>
<div id="all" class="a" >all
<input type="text" value="text" name="text" id="text"/>
<p id="p">p</p>
<ul id="ul">
<li id="a">蘋果</li>
<li id="b">臍橙</li>
<li id="c">柚子</li>
</ul>
<div id="d">
<p>內容</p>
</div>
<input type="button" value="滑鼠懸浮效果" id="over" />
</div>
<script type="text/javascript">
$().ready(function () {
var p = $("#p");
//alert(p.attr("id"));//attr("屬性名稱")擷取屬性，attr("屬性名稱","屬性值")設定屬性
//p.attr("title","title");//設定屬性
//p.removeAttr("id");//刪除指定元素屬性名稱的元素屬性
//$("#all").attr("class", "class");//設定class屬性，如此設定屬性會替換前面的class屬性(class='class')
//$("#all").addClass("class");//設定class屬性，在原來的class屬性裡面追加一個class(class='all class')如果一個class裡面有相同的屬性(比如color),那麼後者會覆蓋前者
//$("#all").removeClass("all");//刪除指定的class屬性
//$("#all").removeClass();//移除class裡面所有的class屬性
//$("#all").toggle(//交替方法
// function () {
// $(this).css("color","red");
//}, function () {
// $(this).css("color","purple");
//});
//$("#div").click(function () { $("#all").toggle();});//用於顯示隱藏交替指定的元素
//$("#all").click(function () { $("#div").text("class屬性為："+$("#all").attr("class"));});
//$("#all").click(function () {
// $("#all").toggleClass("b")
//});
//alert($("#all").hasClass("all"));//判斷是否有此class屬性
//alert($("#all").is(".all"));//效果同上
//alert($("#all").html());//同等於InnerHTML效果
//$("#all").html("設定成功");
//alert($("#all").text());//擷取所有的常值內容
//$("#all").text("設定成功");
//alert($("[name='text']:eq(0)").val());//同等於value屬性(val("設定屬性值"))
var newP = $("<p id='newP'>newP</p>");//建立元素，建立單個元素時因(<p/>)加上/
//p.append(newP);//追加元素到p內部後面(<p id='p'>p<p id='newP'>newP</p></p>)
//newP.appendTo(p);//將newP追加到p內部後面
//p.prepend(newP);//追加元素到p內部前面(<p id='p'><p id='newP'>newP</p>p</p>)
//newP.prependTo(p);//將newp追加到p內部前面
//p.after(newP);//追加元素到p元素的後面(<p id='p'>p</p><p id='newP'>newP</p>)
//newP.insertAfter(p);//將newP追加到p元素的後面
//p.before(newP);//追加到p元素的前面
//newP.insertBefore(p);//將newP追加到p元素前面
//蘋果 臍橙 柚子 移動屬性節點
var a = $("#a");
var c = $("#c");
//c.insertBefore(a);//把c(柚子)元素移動到a(蘋果)元素的前面
//a.remove();//刪除節點(所有的後代節點也將被刪除)
//a.remove();
//c.after(a);//刪除元素在添加回去
//$("ul>li").remove("li[id='a']");//根據條件刪除指定元素
//a.empty();//清空元素裡面的所有
//a.clone().insertAfter(c);//把複製的節點a(蘋果)添加到c(柚子)的後面
//$("#d").replaceWith("<span>span</span>");//把id為#d元素裡面的所有文本元素替換成指定的內容文本
//$("<span>span</span>").replaceAll("#d");//同上,只是順序反了
//$("#ul").wrap("<b></b>");//把id為#ul的元素用<b>標籤包裹起來(如果假設有多個ul元素的話此方法會將每個ul都用一個<b>包裹起來)
//$("#ul").wrapAll("<b></b>");//把id為#ul的元素用<b>標籤包裹起來(如果假設有多個ul元素的話此方法會將所有的ul用一個<b>包裹起來)
//$("#ul").wrapInner("<b></b>")//將指定元素裡面的內容用一個<b>標籤包裹起來
//alert($("#ul").children().length);//擷取所有的子項目(next()是擷取下一個同輩節點，prev()擷取上一個同輩節點，siblings()擷取所有的同輩節點)
//$("#ul").closest("ul").css("color","red");//檢索是否與當前元素匹配，如果部匹配則返回到父元素檢索,否則返回空
//alert($("#ul").css("height"));//css方法擷取的高度可能有auto，且帶有px，與css設定相關聯，而用height()擷取的高度是元素在頁面上的實際高度，且不帶px，width也是一樣
//offset()方法
var ul = $("#ul").offset();
//alert(ul.left);//擷取元素離視窗的位移值(top)
//position()方法
var ul = $("#ul").position();
//alert(ul.left);//擷取絕對位置的位移值
//$("#ul").scrollTop() $("#ul").scrollLeft()擷取捲軸距離頂端和左側的位置距離
//$("#ul").scrollTop(300) $("#ul").scrollLeft(300)設定捲軸距離頂端和左側的位置距離
//alert(("aabaa").slice(-2));//slice()返回前兩個字串，2為返回索引開始後面的字串
$("#over").mouseover(function (e) {
var tool = $("<div id='tool'>懸浮的內容</div>");
$("body").append(tool);
tool.css("position", "absolute").css("top", e.pageY+"px").css("left", e.pageX + "px");
//tool.css({ "top": e.pageY + "px", "left": e.pageX + "px" }).show();
//alert(e.pageX+" "+e.pageY);
}).mouseout(function () {
$("#tool").remove();
});
});
</script>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
