您的位置:首页 > Web前端 > JQuery

js,jquery和dojo操作dom

2014-01-06 15:36 375 查看
最近想学习arcgis javascript api,拦路虎就是dojo,为了便于理解dojo,在学习dojo的同时参考原生js和jquery,下午学习了下dom操作,mark下!

一、获取元素

js(native javascript)通过id:

var dd=document.getElementByid("button1")


js通过Tag

var dd=document.getElemnetByTagName("p")      


 jquery中通过css选择器获取相关的元素

类:.类名。

id:#id名。

元素:元素名

dojo:

根据id号获取相关的元素,

var dom=dom.ById("dd")


每次通过id的形式获取元素,有点不太现实,dojo还提供了dojo.query()的方式根据方便的获取参数 

三、改变html内容

js:

document.getElementById("p1").innerHTML="New text!";


 jQuery:

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容(包括 HTML 标记)

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

四、改变属性

js:

document.getElementById("image").src="landscape.jpg";


在js中改变样式采用的是如下的样式 property 为设置的属性,可以是color,font什么的

document.getElementById(id).style.property=new style


比如更改p标签的颜色为蓝色

document.getElementByTagName("p").style.Color="blue"


jquery:

通过attr()改变相关内容和属性

dojo:

 

六、创建新的dom元素

js:

在js中创建新元素,先需要创建一个新的节点,然后向一个已经存在的元素附加该节点

//创建新的节点
var para=document.createElment("p")
//获取id1的元素
var node=document.getElmentById("id1")
//将新的节点作为id1的子节点
node.appendChild(para);


jquery:

append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容 

七、删除已有的dom元素

js:

不能够直接删除一个元素,需要通过父元素删除元素

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChid()


jquery:

remove() - 删除被选元素(及其子元素)

empty() - 从被选元素中删除子元素

八、移动元素

 

九、事件

 

                                                                   
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: