jQuery DOM操作详解-优快云博客

本文链接：https://blog.youkuaiyun.com/leilei573249453/article/details/51099726

一、DOM--Document Object Model（文档对象模型）

二、三个简单实用的用于 DOM 操作的 jQuery 方法：

text()--设置或者返回所选元素的文本内容
html()--设置或返回所选元素的内容（包括HTML标记）

val()--设置或者返回表单字段的值

</pre><pre name="code" class="html">

<body>
	<div class="class1">基础DOM和CSS操作</div>

	<input type="text" value="哈喽" class="type1"/>
	<form>
		账号：<input id="input1" type="text" value="leilei"/>
		密码：<input type="password">
		<input type="submit" value="登陆"/>
	</form>
	<script type="text/javascript">
	<!--
		$('.class1').click(function(){
			alert("div的文本内容为："+$('.class1').text());
			$('.class1').text('new content'); //改变文本内容
		});
		$('.class1').click(function(){
			alert("div元素内容为："+$('.class1').html());
			$('.class1').html('<h1>new content</h1>'); // 改变html标签
		});

		alert($('#input1').val());
	//-->
	</script>
</body>

三、一些常用的jQuery文档操作方法

addClass()--向匹配的元素添加指定的类名
attr()--设置或返回所选元素的属性值
empty()--从被选元素移除所有的子节点及内容
css()--为被选元素设置一个或者多个样式及属性
hasClass()--检查被选元素是否含有指定的类名称
insertAfert()--在被选元素后插入html元素
after()--在被选元素后插入内容
position()--返回元素相对于父元素的位置

offset()--返回元素相对于文档的便宜的位置

<style type="text/css">
		.color_0{
			background-color: red;
		}
		.color_1{
			background-color: green;
		}
	</style>

<body>
	<form class="form1">
		账号：<input id="input1" type="text" value="leilei"/></br>
		密码：<input type="password" id="input3"></br>
		<input type="submit" id="input2" value="登陆"/>
	</form>
	<input type="button" value="test" id="button"/>
	<script type="text/javascript">
	<!--
		// 为元素添加类名
		$('#input1').addClass("color_1"); 

		// 改变元素的类名
		$('#input1').removeClass("color_1").addClass("color_0");

		// 设置属性值
		$('#input1').attr("value","lilei");

		//移除所选元素的内容
		//$('#input1').remove(); // 移除包括自身的内容
		//$('.form1').empty(); // 仅移除子节点的内容

		//使用函数实现css属性
		$('#input1').css("width",function(i){
			return i+50+"px";
		});

		// 在被选元素插入html元素
		$('<input type="submit" value="注册"/>').insertAfter('#input2');

		//使用函数在被选元素后插入内容
		$('#button').click(function(){
			$('.form1').after(function(index){
			return "<div>The p element above has index " + index + ".</div>";
		});
		});

		// 返回元素相对于父元素的位置
		var x=$('#input3').position();
		alert("Top"+x.top+"Left"+x.left); // Right为undifind
	//-->
	</script>
</body>

四、疑问

$('#button').click(function(){
			$('.form1').after(function(index){
			return "<div>The p element above has index " + index + ".</div>";
		});
		});

此处的index为何一直为0？