54 JQUERY与DOM 添加复制移除替换包裹遍历子元素

来源：互联网发布：windows用户密码是什么编辑：程序博客网时间：2024/04/29 10:07

1 获取与设置属性

<span style="font-size:24px;">$(function(){var $v = $("p");var $li = $("ul li:eq(1)");//获取属性及获取页面值var pTitle = $v.attr("title");alert("before:"+pTitle);var title2 = $li.attr("title");var text = $li.text();//设置属性var $vA= $("p");$vA.attr("title","445");alert("after:"+$vA.attr("title"));alert(title2);alert(text);});</span>

2 利用JS新建结点

$("#button").click(function(){var num= document.getElementById("text").value;alert(num);for(var i=0;i<num;i++ ){var input=document.createElement("input");input.setAttribute("type", "text");document.getElementById("div").appendChild(input);}});

3 利用jquery操作DOM

（1）附加在后面

//在后面添加var div=$("#div");div.html="";//添加第一种方式div.append("<input type='text' value='123'>").append("<input type='text' value='123'>");//添加第二种方式$("<input type='text' value='123'>").appendTo(div)alert('22');

（2）附加在前面

//在前面添加div.prepend("<input type='text' value='before'>");

（3）结点的移动

//插入在XX的后面 让0在3的后面$("ul li:eq(0)").insertAfter($("ul li:eq(3)"));//让3在0后面的后面$("ul li:eq(0)").after($("ul li:eq(3)"));

（4）结点的移除

//移除//（1）第一种方式//删除 并返回被删除的结点对象  （可以间接实现移除）var removed=$("ul li:eq(2)").remove();$("ul li:eq(0)").append(removed);//（2）第二种方式 按照属性删除$("ul li").remove("li[title=1]");// 清空元素内容$("ul li:eq(0)").empty();

示例动态添加文件上传窗口，动态删除

<script type="text/javascript">$(function(){var div = $("#div")$("#button").click(function(){var br = $("<br>");var file = $("<input type='file' />");var btn = $("<input type='button' value='remove'/>");$("#div").append(br).append(file).append(btn);btn.click(function(){br.remove();file.remove();btn.remove();})})})</script></head><body><input type="file" id="file" /><input type="button" value="more" id="button"><div id="div"></div></body>

（5）结点的复制

<script type="text/javascript">$(function(){$("ul li").click(function(){//参数true表示克隆出来的对象与原对象拥有相同的属性 方法            $(this).clone(true).appendTo($("ul"));});});</script></head><body><p title="123">option</p><ul><li>0</li><li title="1">1</li><li>2</li><li>3</li></ul></body>

(6) 替换结点

$(function(){//后面替换前面的 //$("p").replaceWith("<a href='http://www.google.com'>Google.com</a>");//前面替换后面的$("<a href='http://www.google.com'>Google.com</a>").replaceAll("p");});

（7）元素的包裹

$(function(){//会面包裹前面的 //$("p").wrap("<a href='http://www.google.com'><b></b></a>");//前面包裹后面的$("p").wrapInner("<a href='http://www.google.com'><b></b></a>");});

(8) 操作CSS

<style type="text/css">.high{font-weight: bold;color:red}.another{font-style:italic;color:green}</style> <script type="text/javascript" src="jquery-1.4.4.js"></script><script type="text/javascript"> $(function() {$("input:eq(0)").click(function(){alert($('p').attr("class"));});    $("input:eq(1)").click(function(){$("p").attr("class", "high");});$("input:eq(2)").click(function(){$("p").addClass("high");});$("input:eq(3)").click(function(){$("p").removeClass("high");});$("input:eq(4)").click(function(){$("p").removeClass();});$("input:eq(5)").click(function(){//两种状态切换  添加与删除$("p").toggleClass("another");});$("input:eq(6)").click(function(){//判断元素是否具有制定样式//alert($('p').hasClass('another'));alert($('p').is('.another'));}); });

（10）对按钮内容的修饰

$(function() {$("input:eq(0)").click(function(){alert($("p").html());});$("input:eq(1)").click(function(){alert($("p").text());});$("input:eq(2)").click(function(){$("p").html('<a href="http://www.google.com">hello world</a>');});$("input:eq(3)").click(function(){$("p").text('<a href="http://www.google.com">hello world</a>');});$("input:eq(4)").click(function(){alert($(this).val());});$("input:eq(5)").click(function(){$(this).val('hello world');}); });

利用 focus和blur事件实现输入框默认值显隐

$("#username").focus(function(){if($(this).val()=="username"){$(this).val("");}}).blur(function(){if($(this).val()==""){$(this).val("username");}

11 对子元素进行遍历

$(function(){var v1 = $("body").children();var v2 = $("p").children();var v3 = $("ul").children();alert(v1.length);alert(v2.length);alert(v3.length);for(var i = 0; i < v3.length; i++){alert(v3[i].innerHTML);}}

0 0

54 JQUERY与DOM 添加 复制 移除 替换 包裹 遍历子元素

54 JQUERY与DOM 添加复制移除替换包裹遍历子元素