Posted in Javascript onApril 05, 2012
例子展示:
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("<li title='雪梨'>雪梨</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"><font color="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> <div id="subling"></div> </form> </script> </body>
jquery 操作DOM的基本用法分享
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@