jquery操作dom
例子展示：?
jquery代碼：?
.代碼如下:
<script language="javascript">?
$(document).ready(function(){?
alert($("ul li:eq(1)").text()); //選取第二個li的值?
alert($("p").attr("title")); //選取p的title屬性的值?
//追加元素?
$('ul').append("<li title='香蕉'>香蕉</li>").append("<lititle='雪梨'>雪梨</li>");?
//前面追加?
$('ul').prepend("<li title='欠佳'>前加</li>");?
//后面追加?
$('ul').after("<li title='后加'>后加</li>");?
//在p后面添加?
$("<b> 你好</b>").insertAfter("p");?
//在p前面添加?
$("<b> 你好</b>").insertBefore("p");?
//刪除節點?
$("ul :eq(1)").remove();?
// 清空值?
$("ul :eq(2)").empty();?
//復制節點?
$("ul li").click(function(){?
$(this).clone(true).appendTo("ul");//true可有可無，有表示在復制的時候同時把綁定的事件也復制上?
});?
//替換節點?
$("p[title=test]").replaceWith("<strong>你最喜歡的水果是？</strong>");?
//$("<strong>你最喜歡的水果是？</strong>").replaceAll("P");?
//包裹事件?
$("strong").wrap("<b></b>")?
//屬性操作?
$("P").attr({"title":"test","name":"pName"});//添加屬性?
$("p").removeAttr("title"); //移除屬性?
//樣式的操作?
/*?
添加樣式：$("p").addClass("hight");?
已出樣式：$("p").removeClass("highr");?
切換樣式：$("p").toggleClass("another");?
是否有樣式： $("p").hasCLass("higth");?
*/?
alert($("p").html()); //獲取值 html（）類似于javascript中的innerHTML屬性?
$("p").html("change"); //改變值?
alert($("p").text()); //獲取值 text（）類似于javascript中的innerTEXT屬性?
$("p").text("again change"); //改變值?
$("#name").focus(function(){?
if($("#name").val()=="請輸入用戶名"){?
$(this).val("");?
}?
}).blur(function(){?
if($("#name").val()==""){?
$(this).val("請輸入用戶名");?
}?
});?
$("#password").focus(function(){?
$("#tip").hide();?
}).blur(function(){?
if($("#password").val()==""){?
$("#tip").show(200);?
}?
});?
$("#submit").click(function(){?
if($("#name").val()=="請輸入用戶名"||$("#password").val()==""){?
$("#name").css("background","yellow");?
$("#password").css("background","yellow");?
}?
});?
$("#single").val("選擇2");?
$("#multiple").val(["選擇2號","選擇3號"]);?
$(":checkbox").val(["check2","check3"]);?
$(":radio").val(["radio1"]);?
alert("careful！");?
$("#single :eq(2)").attr("selected",true);?
$("[value=radio2]:radio").attr("checked",true);?
//遍歷節點 children()方法?
$("#btnShow").click(function(){?
for(var i=0;i<$("body").children().length;i++){?
$("#body").append($("body").children()[i].innerHTML);?
}?
});?
//next（）方法，取得緊挨p后面的同輩的所有元素?
alert($("ul li").next().text());?
//prev（）方法,取得緊挨匹配前面的同輩的一個元素?
alert($("li[title=菠蘿]").prev().text());?
//siblings()方法，獲取匹配元素所有的同輩元素?
for(var i=0;i<$("p").siblings().length;i++){?
$("#subling").append($("p").siblings()[i].innerHTML);?
}?
//closest()方法，取得最近的匹配元素?
$(document).bind("click",function(e){?
$(e.target).closest("li").css("color","red");?
});?
//css的操作?
$("p").css({"fontSize":"40px","background":"yellow"});?
//offset()方法，獲取元素在當前視窗的相對偏移量，返回對象為top和left兩個屬性?
alert("top="+$("P").offset().top+";"+"left="+$("P").offset().left);?
//position()方法，獲取元素相對于最近的position樣式設置為relative或者absolute?
//的祖父節點的相對偏移，返回top和left兩個屬性?
alert("top="+$("P").position().top+";"+"left="+$("P").position().left);?
//scrollTop() and scrollLest()方法返回滾動條距頂端和左端的距離?
alert("scrolltop="+$("P").scrollTop()+";"+"scrollleft="+$("P").scrollLeft());?
});?
</script>?
html代碼：?
.代碼如下:
<body>?
<p >test</p>?
<p id="p" title="test">你喜歡的蘋果是？</p>?
<ul>?
<li title="蘋果">蘋果</li>?
<li title="橘子">橘子</li>?
<li title="菠蘿">菠蘿</li>?
</ul>?
<input type="button" id="show" value="show"/>?
<br/><br/><br/>?
<form id="form1" action="#">?
<div >?
<input type="text" id="name" value="請輸入用戶名"><br/>?
<input type="password" id="password"value=""> <br/>?
<div id="tip" style="display:none"><fontcolor="red">請輸入密碼</font></div><br/>?
<input type="button" id="submit" value="提交"/>?
</div>?
</form>?
<br/>?
<form id="from2" action="#">?
<select id="single">?
<option value="選擇1號">選擇1號</option>?
<option value="選擇2號">選擇2號</option>?
<option value="選擇2號">選擇3號</option>?
</select>?
<select id="multiple" multiple="multiple"style="height:120px">?
<option selected="selected">選擇1號</option>?
<option value="選擇2號">選擇2號</option>?
<option value="選擇3號">選擇3號</option>?
<option value="選擇4號">選擇4號</option>?
<option selected="selected">選擇5號</option>?
</select>?
<input type="checkbox" value="check1"/>多選1?
<input type="checkbox" value="check2"/>多選2?
<input type="checkbox" value="check3"/>多選3?
<input type="checkbox" value="check4"/>多選4?
<input type="radio" name="radio"value="radio1"/> 單選1?
<input type="radio" name="radio"value="radio2"/> 單選2?
<input type="radio" name="radio"value="radio3"/> 單選3?
<br/>?
<input type="button" id="btnShow" value="顯示body"/>?
<br/><div id="body"></div> <divid="subling"></div>?
</form>?
</script>?
</body>?
?
轉載于:https://www.cnblogs.com/baiduligang/p/4247149.html
總結
以上是生活随笔為你收集整理的jquery操作dom的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 只有程序员才有的十大烦恼
- 下一篇： Android dialog 全屏