jquery 操作DOM的基本用法分享_jquery

例子展示： jquery代码：

复制代码 代码如下: $(document).ready(function(){ alert($("ul li:eq(1)").text()); //选取第二个li的值 alert($("p").attr("title")); //选取p的title属性的值 //追加元素 $('ul').append(" 香蕉").append(" 雪梨"); //前面追加 $('ul').prepend(" 前加"); //后面追加 $('ul').after(" 后加"); //在p后面添加 $(" 你好").insertAfter("p"); //在p前面添加 $(" 你好").insertBefore("p"); //删除节点 $("ul :eq(1)").remove(); // 清空值 $("ul :eq(2)").empty(); //复制节点 $("ul li").click(function(){ $(this).clone(true).appendTo("ul");//true可有可无，有表示在复制的时候同时把绑定的事件也复制上 }); //替换节点 $("p[title=test]").replaceWith(" 你最喜欢的水果是？"); //$(" 你最喜欢的水果是？").replaceAll("P"); //包裹事件 $("strong").wrap(" ") //属性操作 $("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").append($("body").children()[i].innerHTML); } }); //next（）方法，取得紧挨p后面的同辈的所有元素 alert($("ul li").next().text()); //prev（）方法,取得紧挨匹配前面的同辈的一个元素 alert($("li[title=菠萝]").prev().text()); //siblings()方法，获取匹配元素所有的同辈元素 for(var i=0;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()); }); html代码： 复制代码 代码如下:

test

你喜欢的苹果是？

苹果 橘子 菠萝

请输入密码

选择1号 选择2号 选择3号 选择1号 选择2号 选择3号 选择4号 选择5号 多选1 多选2 多选3 多选4 单选1 单选2 单选3

jquery 操作DOM的基本用法分享_jquery

Articles Liés