lovingshu's Forever

~ 蝎子^有 du......请℡勿靠近......™

JQuery Chapter3 JQuery中对DOM对象的操作

JQuery Chapter3 JQuery中DOM对象的操作
<!--
Goal:让我们使用JQuery来操作HTML中的DOM(Document Object Model)模型,
	对DOM的操作无外乎增删改查,所以我们就以这个入手!
-->
<-- 示例代码
	<div id="main_div">
		<ul>
			<li>I'm the first</li>
			<li>I'm the second</li>
			<li>I'm the third</li>
			-------------------------
			<li>I'm the fourth</li>
			-------------------------
		</ul>
	</div>
-->
一,增加DOM模型
	其实在增加方面呢,我们以前其实也做过,但是使用JQuery做起来更加的简单和方便!

A)增加主要有以下方法:	
	1-1)对象.append("参数");
		这个就是就是把参数中的东西追加到对象中,参数可以是html代码!
	eg:
		$("#main_div>ul").append("<li>I'm the fifth</li>");
		
	1-2)("参数").appendTo(对象);
		这个就是把参数内容追加到后面指定的对象中!
	eg:
		var jqObj=$("<li>I'm the fifth</li>");
		jqObj.appendTo("#main_div>ul");
		这段代码就会把jqObj添加到main_div中的ul中!
		
	2-1)对象.perpend("参数");
		这个与1-1中的append是一样的功能和用法,不同的地方是这个是把给定的参数追加到前面!
	eg:
		$("#main_div>ul").prepend("I'm the real first!");
		
	2-2)("参数").prependTo(对象);
		这个与1-2中的一样,不同的也是把元素追加到前面!
	eg:
		var jqObj=$("<li>I'm the fifth</li>");
		jqObj.prependTo($("#main_div>ul"));
		
	3-1)对象.after("参数");
		这个会把参数追加到对象的后面,这个与append的区别是有的!
	eg:
		$("#main_div>ul>li:last").after("<li>Where am I?</li>");
		这个得出的结果如下:
		-------------------------- 
		I'm the fourth
		How is it?
		-------------------------- 
	而:$("#main_div>ul>li:last").append("<li>Where am I?</li>");
		这个得出的结果就为下:
		-------------------------- 
		I'm the fourth
		-------------------------- 
		How is it?
		通过这样一对比区别自然就出来了!
		
	3-2)("参数").insertAfter(对象);
		这个与前面的功能相同,但是只是把位置调了一下
		
	4-1)对象.before("参数")
		同3-1,但是这个是把元素插入到前面!
		
	4-2)("参数").insertBefore(对象);
		同3-2,但是把位置调了一下

B)删除主要有一下方法:
	1)remove(对象);
		通过remove方法就会把与之相对应的对象进行删除,注意:是连带标签一起删除!
	eg:
		$("#main_div>ul>li:odd").remove();
		这样就只剩下second 和 fourth了!
		
	2)empty(对象)
		这个方法是把对象里面清空,但是不删除对象,也就是不会连带主标签一同删除!
	eg:
		$("#main_div>ul>li:even").empty();
		这个就会把first和third里面清空(如果里面有子标签,会连带子标签一同清空),但是会保留属于自己的li标签!
		
C)复制
	这个复制方法只有一个
	对象名.clone();
	这个方法会返回所复制的对象,可以用变量接收!
	eg:
		$("#main_div>ul").clone().append("#main_div>ul>li:last");
		这样就会把整个ul的信息复制到最后一个li里面去,li里面就多了个ul
		
D)替换
	1)对象名.replaceWith("参数")
		这个就会把对象的内容替换成参数中的内容,注意:会连同对象的标签一同替换掉!
	eg:
		$("#main_div>ul>li:first").replaceWith("<b>First</b>");
		这个就会吧第一个li元素换成参数中的First,并且li被换成了b
		
	2)("参数").replaceAll(对象);
		这个与1的功能相同,只是把位置调了一下!
	eg:
		("<b>First</b>").replaceAll("#main_div>ul>li:last");
		
E)包裹
	1)对象.wrap(成对标签名),与 对象.wrapAll(成对标签名);
		这两个都是把对象用参数中的成对标签名包裹起来,两个都是这个功能,但是也有不同!
	eg:
		$("#main_div li").wrap("<a href='#'></a>");
		得到结果如下:
		<DIV id=main_div>
		<UL><A href="#">
		<LI>I'm the first</LI></A><A href="#">
		<LI>I'm the second</LI></A><A href="#">
		<LI>I'm the third</LI></A>-------------------------- <A href="#">
		<LI>I'm the fourth</LI></A>-------------------------- </UL></DIV>
		
		$("#main_div li").wrapAll("<a href='#'></a>");
		得到的结果如下:
		<DIV id=main_div>
		<UL><A href="#">
		<LI>I'm the first</LI>
		<LI>I'm the second</LI>
		<LI>I'm the third</LI>
		<LI>I'm the fourth</LI></A>-------------------------- -------------------------- </UL></DIV>
		
		通过以上对比说明还是有区别的!
		
	2)对象.warpInner(成对标签名);
		在对象里面用参数中的标签包裹起来
	eg:$("#main_div li").wrapInner("<a href='#'></a>");
		得到的结果:
		<DIV id=main_div>
		<UL>
		<LI><A href="#">I'm the first</A></LI>
		<LI><A href="#">I'm the second</A></LI>
		<LI><A href="#">I'm the third</A></LI>-------------------------- 
		<LI><A href="#">I'm the fourth</A></LI>-------------------------- </UL></DIV>
		效果显而易见~

F)对样式的操作:
	1)获取对象的样式
		对象名.css("样式属性名");
	eg:
		$("#main_div>ul")
		.css("border")--获取ul的边框样式
		.css("height")--获取高度
		.......
	
	2-1)设置样式1
		对象
		.attr("class","样式名称")--设置class样式
		.attr("id","样式名称")--设置id样式(这种是用的最少的)
		.....
		注意:这种方法有替换的意思,不会在原有的基础上追加样式!
		
	2-2)设置样式2
		对象
		.addClass("样式名称");
		这种就是追加样式,不会盖掉原来的样式!
		
	3)移除样式
		对象
		.removeClass("样式名")---移除指定样式
		.removeClass()----移除全部样式
		
	4)样式切换(牛X)
		对象名
		.toggleClass("样式名称")
		注意,样式名称没有"#"或"."
	
	5)查看样式是否存在
		对象.hasClass("样式名称")
		注:样式名称前没有"#"或"."
		或者是:
		对象名.is(".样式名")	
		注:这里有"."

G)设置HTML,text,value的值
	由于这个太base了~就列出来详细讲解了
	对象名
	.html()--获取html代码
	.html("参数")--设置html代码
	.text()--获取文本
	.text("参数")--设置text文本
	.val()--获取 表 单 对象的值
	.val("参数")--设置表单对象的值
	
H)节点的遍历
	对象
	.children()--获取所有子节点<!--想起今天老师读这个我都忍不住笑O(∩_∩)O~-->
	.next()下一个同级节点(相当于选择符中的"+")
	.nextAll()以后所有同级节点(相当于"~")
	.prev()获取上一个同级节点
	.prevAll()获取以前同级节点
	.parent()获取最近的一个父级节点
	.parents()获取所有父级节点
	.find("参数")根据参数找对象,是所有满足条件的对象
	.siblings()获取前后所有同级节点
	.closest()获取最近节点
	.filter()查找

I)CSS的DOM操作
	常用的不多,所以就简单回顾一下啦
	对象名
	.css("样式属性")--这个很常用,获取对象样式的,获取样式属性的值
		eg:.css("backgroundColor")--获取背景颜色
	.css("属性","值")--用来设置属性值的
		eg:.css("border","solid 1px lightBlue")--设置边框
	注1:Json写法:
	.css({"width":"100px","border":"solid 1px red","....."});]
	
	注2:opacity不透明度属性(取值是:0~1)
		XXX.css("opacity","0.5")设置不透明度为0.5	
	
	.height()----获取对象高度
	.width()----获取对象宽度
	.offset()----获取对象在视窗中的偏移量
		eg: $("#main_div").offset().letf.top;
	.position()----获取对象的位置
		eg: $("#main_div").position().left.top;
	.scrollTop()--获取该元素滚动条距离顶端的距离
	.scrollTop(整形参数)--设置该元素滚动条距离顶端的距离
	.scorllLeft()--获取该元素滚动条距离左端的距离
	.scrollLeft(整形参数)--设置该元素滚动条距离左端的距离

J)这里我来回忆一下鼠标拖动事件的写法:
	假设我们需要拖动的元素的ID为"moveObj"
	eg:
//------------------Codes Start-------------------------
	$(function(){
			//设置拖动效果必备的参数
			var allowMove=false;
			var posX;
			var posY;
			$("#moveObj").mousedown(function(e){
				//设置状态为可拖动
				allowMove=true;
				//算出鼠标在整个组件中的位置
				posX=e.pageX-parseInt($(this).css("left"));
				posY=e.pageY-parseInt($(this).css("top"));
			}).mouseup(function(){
				//设置状态为不可拖动
				allowMove=false;
			});
			
			//鼠标移动事件
			$(document).mousemove(function(e){
				if(allowMove){
					$("#moveObj")
					.css("left",e.pageX-posX)
					.css("top",e.pageY-posY);
					;
				}
			});
	});
//------------------Codes Finish-------------------------

<!--
Author:Lovingshu's Forever
Date:2011-10-12 22:19
remark:Wow~It is amazing~How wonderful it is!
-->
阅读更多
想对作者说点什么? 我来说一句

jQuery基础入门

2014年09月02日 5.36MB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭