dom core,html dom,css dom,jquery 中的dom操作

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

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

js一般对于dom core和html dom都支持,只不过不同浏览器的支持程度可能不同,

从性能方面考虑

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也都有各自不同的方法

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;

}

时间: 2024-10-05 03:29:40

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

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

一.DOM的操作分类 1>DOM Core   2>HTML-DOM   3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery选择器来选中元素,获取元素节点. 2)查找属性节点 利用jQuery选择器查找到需要的元素后,用attr()方法来获取它的各种属性的值. ②创建节点 1>创建元素节点 创建节点利用$(html),加入元素用append()还可以连写. 2>创建文本节点 创建文本节点直接在创建的html元素里面直接

HTML5移动开发之路(36)——jQuery中的DOM操作

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(36)--jQuery中的DOM操作 1.查询 利用选择器查找节点 使用 html() / text() / attr() 输出节点文本和属性值. 注意:下拉列表使用 val() [html] view plain copy print? <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery

JavaScript强化教程——JQuery中的DOM编程

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 --JQuery中的DOM编程 JavaScript强化教程--JQuery中的DOM编程 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 --JQuery中的DOM编程 DOM编程 ---------------------------- js中DOM编程   创建一个标签对象     var p=document.createElement("p"

Jquerry:jquery中的DOM操作&lt;一&gt;

之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:DOM Core.HTML-DOM.CSS-DOM.我们很多情况下用到的getElementById().getElementByTagName().getAttribute()和setAttribute()等方法都是DOM Core的组成部分.而document.forms(获取表单对象).elem

jQuery中对AJAX操作的封装函数

jQuery提供了6个简化AJAX操作的函数,每个都可以代替元素AJAX中的四步代码! (1)$('xxx').load()         jQuery对象函数 (2)$.get()                   jQuery全局函数 (3)$.post()                 jQuery全局函数 (4)$.getScript()          jQuery全局函数 (5)$.getJSON()           jQuery全局函数 (6)$.ajax()     

JQuery中Ajax的操作

Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码的封装,方便我们对Java代码的编写,例如,Struts,SpringMVC对从前台到action的流程进行封装控制,使我们只需要进行一些简单配置就可以实现:而Spring进行了对各种对象的管理进行封装,提供了AOP编程的方式,大大方便了我们:而Hibernate和IBatis则是对JDBC代码进行封装,不需要我们每次都写那些重复而繁杂的JDBC代码. 前台呢,对于页面一些效果,验证等,我们都是通过JavaScript语言进行完

第三章(jQuery中的DOM操作)

3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute() ) //获取表单对象 docuement.getElementsByTagName("form"); //获取某元素的src属性 element.getAttribute("src"); ②HTML DOM 专属HTML_DOM属性,提供一些更简明的记号来描述各种H

jQuery之第3章 jQuery中的DOM操作

DOM操作分为3个方面: DOM Core(核心).HTML-DOM 和 CSS-DOM 1.查找节点: 查找元素节点: var $li = $("ul li:eq(1)"); var li_txt = $li.text(); 查找属性节点: var $p = $("p"); var p_title = $p.attr("title"); 注意: attr() 获取指定元素节点属性的值. 2.创建节点: 创建元素节点: var $li = $(&

JQuery中的Dom操作和事件

(一)JQuery中的事件 1.常规事件,把js事件中的on去掉 复合事件:hover(function(){},function(){}) ---- 相当于把鼠标移入移出事件和在一起执行 toggle(function(){},function(){},....)可以写多个,点击事件循环执行 未来元素:对象.live("事件名",function(){});   --- 对未来创建的元素进行操作 列子:点击按钮,创建元素,并给创建的元素添加点击事件 //对象.append():在什么