前端编程提高之旅(十四)----jquery DOM操作

页面导航:首页 > 网络编程 > JavaScript > 前端编程提高之旅(十四)----jquery DOM操作

前端编程提高之旅(十四)----jquery DOM操作

来源: 作者: 时间:2016-02-05 11:06 【

正如乐帝在《招聘后台投递设置联动按钮迭代开发总结》提到web前端js开发分为页面间通信、页面内交互、后端接口存取数据的操作。对于一个页面开发核心在于对DOM的操作。别忘了网

正如乐帝在《招聘后台投递设置联动按钮迭代开发总结》提到web前端js开发分为页面间通信、页面内交互、后端接口存取数据的操作。对于一个页面开发核心在于对DOM的操作。别忘了网页从历史上和本质上来说都是在线的文档而已。DOM操作是对文档的操作,自然而然就成为网页js开发的核心了。

传统上来说,DOM操作分为三类:DOM core、HTML-DOM、CSS-DOM。

DOM core在任何使用DOM程序设计语言都可以使用。常见的javascript方法如getElementById()、getElementsByClassName()、getAttribute()、setAttribute()都属于此类。HTML-DOM是专门使用js为HTML编写脚本时用到的方法,常见的简明如element.src写法。写法上相对于DOM core要简洁不少。CSS-DOM主要用于获取和设置style对象各种属性。 Jquery中DOM操作,乐帝将其分两种:HTML-DOM、CSS-DOM。 整个DOM操作都可以从一句典型HTML语句展开,上帝说要有光,就有了hmtl元素,接着就有了附加的各种可预见的操作。如下图: \

一、jquery中的HTML-DOM操作 1.节点操作 (1)插入节点 对于节点的插入操作方法可以分两类,类似中国小学教育“把”字句与“被”字句用法,根据前面jquery对象的主被动划分。 \
(2)删除节点 主要涉及两个方法的区别:remove方法与detach方法。这两个方法区别在于使用remove方法删除节点后,再次添加此节点引用,原本绑定在此节点的事件、数据都会失效。而后者可以保留下来。 下面举个例子:
 

$(document).ready(function(){
	var $cr = $("#cr");  //jQuery对象
	var cr = $cr.get(0); //DOM对象,获取 $cr[0]
	$cr.click(function(){
		if(this.checked){ //DOM方式判断
			alert("感谢你的支持!你可以继续操作!");
		}
	})
});

上述代码后,分别加入以下代码:
	// var removeCr = $cr.remove();
	var removeCr =$cr.detach();
	$("body").append(removeCr);

当采用remove方法删除节点,再对其引用添加时,没有单击事件被绑定。而采用detach方法删除节点,再添加,仍然保留了单击事件。当然涉及删除再添加并需要绑定事件的场景,目前项目中还没有遇到。 (3)复制节点 复制节点采取clone方法,而clone方法参数如果为true的话,除了复制节点外,节点上绑定的事件也会一并复制。仍然延续上述例子,添加如下代码:
// var cloneCr = $cr.clone();
	var cloneCr = $cr.clone(true);
	$("body").append(cloneCr);

当有参数true时,被复制的元素的绑定方法也一并被被复制了,而没有参数则没有绑定方法被复制。 (4)替换节点 替换节点有两种方法:replaceWith方法、replaceAll方法。这两个方法也满足上述主动、被动关系。 仍然延续上述代码,使用例子:
$cr.replaceWith("

hi

");

此时替换的节点没有绑定事件,需要重新绑定事件。 (5)包裹节点 包裹节点又分为两类:外部包裹方法、内部包裹方法。区别在于是对选定元素进行包裹,还是对其内部元素包裹(wrapInner方法)。外部包裹又分为整个用一个方法包裹(wrapAll方法),还是每个选定元素都包裹(wrap方法)。 对下述例子,分别采用三种方法:
你最喜欢的水果是?
	你最喜欢的水果是?
	
  • 苹果
  • 橘子
  • 菠萝

// $("strong").wrap("");
	  // $("strong").wrapAll("");
	  $("strong").wrapInner("");

通过查看HTML结构,可知包裹的区别。 (6)遍历节点 遍历的方法可从dom结构为树形结构理解。从树的上到下,分别会用到上级元素:祖先元素获取方法(parents方法)、父级元素获取方法(parent方法);同级元素获取的三个方法:next方法、prev方法、sibling方法、closest方法;子级元素方法:children方法。 \
2.属性操作 属性操作主要用到一个attr方法,用于获取设置属性;一个removeAttr方法用于移除属性。 仍然延续上述例子,输入以下代码:<喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPgo8c3Ryb25nPjwvc3Ryb25nPjxwcmUgY2xhc3M9"brush:java;">$("li:eq(0)").attr("title","apple"); $("li:eq(0)").removeAttr("title");
可知属性操作方法的使用。 3.样式操作 这里的样式操作主要从class增删查找,连带改变class定义的css样式。 仍延续上述例子,添加一个css类:
.test{
	color: red;
}

对上述例子分别采用四种操作:
$("li:eq(0)").addClass("test");
	 var hasClass = $("li:eq(0)").hasClass("test");
	 // $("li:eq(0)").toggleClass("test");
	 $("li:eq(0)").removeClass("test");

上述操作分别代表添加类、判断类是否存在、移除或添加类的切换、移除类。 3.获取各种元素的值 这里主要涉及到val方法。无论是文本框、下拉列表还是单选框,都可以返回元素值。这个统一性使得再遇到此类情况,不用再现查。 二、-DOM操作 这里主要涉及三类方法:css方法、宽高设置的方法、定位的几个方法。 css获得高度与height获得高度区别在于,css获得的是与样式设置有关的高度,而height获得的是元素整体高度。不会受样式影响。 offset方法是获取元素相对当前视窗的相对便宜,返回对象包含两个属性,top与left,只对可见元素有效。scrollTop方法与scrollLeft方法用于获得元素的滚动条相对顶端和左侧的距离。 仍延续上例,具体使用方法:
Tags:

文章评论


<