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

「已注销」

于 2014-10-21 08:12:58 发布

阅读量687

点赞数

分类专栏： Java EE

Java EE 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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);
	}

}