前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名")/attr("属性名"))获取属性值, html dom一般利用属性的形式(element.属性名)获取对应属性值,形式相对简洁。此外,针对于css相关的对象,还有css dom

前端开发中的节点有三种:元素节点;文本节点和属性节点

js一般对于dom core和html dom都支持;html dom仅适用于html这类特殊的xml文档,dom core则对于任何xml文档都适用。

从性能方面考虑

1,尽量使用js原生方法

2,dom core, html dom 优先于 jquery

3,css相关的get和set操作,尽量采用css dom 如 element.style.color="#fffffff";

js原生方法性能高于jquery中的方法,因此,在可能条件下,尽量使用jquery原生方法

this.value /this.getAttribute("value") 取代$(this).val()

this.checked/this.getAttribute("checked")取代$(this).attr("checked",true)/$(this).prop("checked",true)

jquery中的dom操作

1,节点查找

元素节点查找:利用选择器

文本节点查找:使用对应元素的text()函数调用

属性节点查找:jquery使用attr("属性名"),html dom采用.属性名的方法, dom core采用getAttribute("属性名")

2,节点创建

无论哪种节点,只是使用一段html代码

$nodeName=$("html代码")即可

3,节点插入

append();appendTo()(可以用于元素移动);prepend();以上方法,新加入的元素成为原来元素的子元素

insertAfter();insertBefore();以上方法,新加入的元素成为原来元素的同辈元素

4,节点删除

remove():所有绑定的事件,数据等都会删除

detach():绑定的事件,数据被保留

empty();非删除元素,而是元素内容清空

5,节点复制

clone();复制元素,不复制绑定事件

clone(true):复制元素,同时复制原来元素上绑定的事件

6,节点替换

replaceWith(),replaceAll()二者互为逆操作

7,节点包裹

wrap();wrapAll();wrapInner();

8,属性操作(获取,设置,删除)

dom core中getAttribute,setAttribute,removeAttribute

html core对于特定属性,有.src, .checked, .seleced,.value等简洁写法

jquery中 attr("属性名"),attr("属性名",属性值),removeAttr()

9,类操作

element.attr("class");$element.addClass();$element.removeClass();$element.hasClass();

10,状态判断

element.is("selector"),如is(:visible);is(".className")等

11,获取节点html,文本和值

element.html()类似于js中的element.innerHTML

element.text()类似于js中的element.innerTEXT

element.val()类似于js中的element.value

12,样式操作

css dom :element.style.样式名=样式值

jquery中的样式操作

element.css()

element.css("background":"#fff","width":"400px")

13,位置操作

js中获取元素位置

element.offsetTop,element.offsetLeft;

这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其最近一个样式属性为absolute或者relative的父元素位置的相对位置,也就是说这两个数值得到的是以其 父元素左上角为(0,0)点从而计算出的数值。

jquery中获取元素位置

1)获取相对于其最近一个样式属性为absolute或者relative的父元素位置的相对位置

var position=element.position();

var left=position.left;

var top=position.top;

2)获取相对于当前视窗的位置

var offset=element.offset();

var left=offset.position;

var top=offset.position;

3)获取相对于滚动条顶部和左端的位置

scrollTop(),scrollLeft();

4)获取事件发生位置

function(e){

var x=e.pageX;

var y=e.pageY;

}

dom core,html dom,css dom,jquery 中的dom操作的更多相关文章

  1. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

  2. 锋利的jQuery ——jQuery中的DOM操作(三)

    一.DOM的操作分类 1>DOM Core   2>HTML-DOM   3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...

  3. Jquery:jquery中的DOM操作<一>

    之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...

  4. jQuery中的DOM操作《思维导图》

    首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...

  5. jQuery中的DOM操作<思维导图>

    DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...

  6. JavaWeb学习笔记——jquery中的dom操作

     jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...

  7. jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...

  8. 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】

    一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...

  9. jquery中链式操作的this指向

    jquery中链式操作是如何实现? 例如:$(obj).children().css('color','red').next().css('color','red').siblings().css(' ...

随机推荐

  1. Angular:手动脏检查/$apply/$digest和监控对象/$watch

    声明:借鉴好多chm资料.视频.PDF总结如下: 一.$apply的引入 View <div ng-app=""> <div ng-controller=&quo ...

  2. Shader Model 3.0:Using Vertex Textures SM3:使用顶点纹理 (NVIDIA spec, 6800支持使用D3DFMT_R32F and D3DFMT_A32B32G32R32F的纹理格式实现Vertex Texture。)

    翻译者 周波 zhoubo22@hotmail.com 版权所有 Philipp Gerasimov Randima (Randy) Fernando Simon Green NVIDIA Corpo ...

  3. Web 在线文件管理器学习笔记与总结(15)剪切文件夹 (16)删除文件夹

    (15)剪切文件夹 ① 通过rename($oldname,$newname) 函数实现剪切文件夹的操作 ② 需要检测目标文件夹是否存在,如果存在还要检测目标目录中是否存在同名文件夹,如果不存在则剪切 ...

  4. rgb转灰度 RGB To Gray php Adobe RGB (1998) [gamma=2.20]

    <?php /** * Date: 2016/10/24 * Time: 0:52 */ // Gray = (R^2.2 * 0.2973 + G^2.2 * 0.6274 + B^2.2 * ...

  5. P1003 铺地毯

    水题 #include <bits/stdc++.h> using namespace std; const int maxn = 10005; int n; int x, y, i; s ...

  6. Web工程与RMI工程进行联调

    1.首先导出RMI工程中的Service和entity类 到web工程中,以jar包的形式 public class ServiceManagerImpl { private static Servi ...

  7. java CyclicBarrier

    import java.io.IOException; import java.util.Random; import java.util.concurrent.BrokenBarrierExcept ...

  8. FTS抓包看AVDTP

    1.概述   测试过程为打开Audio连接,没有听音乐,人后断开Audio连接,主要目的是为了测试AVDTP的工作流程.   2.Frame分析    首先贴出抓取的关于AVDTP的包: 在L2CAP ...

  9. git中应用在vs中使用gitignore (转)

    在进行协作开发代码管理的过程中,常常会遇到某些临时文件.配置文件.或者生成文件等,这些文件由于不同的开发端会不一样,如果使用git add . 将所有文件纳入git库中,那么会出现频繁的改动和push ...

  10. GIT 在本地保存账户和密码

    原文链接:http://www.jianshu.com/p/908591004f3b 解决方法,在本地的工程文件夹的.git下打开config文件 添加: [credential] helper = ...