码迷,mamicode.com
首页 > Web开发 > 详细

复习DOM、JQuery

时间:2018-02-11 21:26:19      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:bsp   处理   nodelist   创建   子节点   创建元素   修改   radio   idt   

document对象

document对象是window对象的一个属性,表示整个HTML页面。它是DOM的编程入口。

document获取元素的方法

方法名 返回值 描述
getElementById(string) Element 根据元素的id属性获取元素
getElementsByTagName(string) NodeList 根据元素的标签名获取元素
getElementsByName(string) NodeList 根据元素的name获取元素

 

 

 

 

NodeList操作

获取个数:nodeList.length;获取指定索引位置的元素nodeList.item(index)

Document操作元素

创建元素、添加元素:ducument.createElement(tagName) ,appendChild(node)

<script type="text/javascript">
    window.onload=function(){
        var div01Element=document.getElementById("div01");
        var newDivElement=document.createElement("div");
        newDivElement.innerHTML="刚添加的节点";
       div01Element.appendChild(newDivElement);
}
</script>

Element操作元素属性

直接使用element.attrName的方式操作属性值

<!--这种方式只能操作HTML标准规定的属性,不能操作自定义属性-->
var attrValue = element.attrName;//获取属性值
element.attrName = attrValue;//给属性赋值
element.className ;//获取元素的class属性的值。因为class是关键字,所以操作class属性时使用className代替

在js中,操作checkbbox,radio的checked属性,selected属性时,使用true或false,表单元素的disable属性也是如此

 

通过方法操作属性(可操作自定义属性)

String getAtrribute(String attrName)获取属性值

void removeAttribute(String attrName)删除指定属性

void setAttribute(String attrName,String attrValue)修改/添加属性

 

Element操作元素的字节点

子节点包括子元素和元素文本内容

element.getElementByTagName()根据子元素的标签名子元素

element.innerHTML以字符串形式操作子节点

element.insertBefore(newNode,node)在指定子节点前插入新子节点

element.appendChild(newNode)在最后追加子节点

element.parentNode获取元素的父元素

操作元素样式

element.style.proName的方式可以直接操作某个样式属性。如:element.style.backgroundColor="grey";

删除元素内容

element.removeChild(node);删除子节点

element.attrName = null;删除属性

element.innerHTML = null;删除文本内容和子元素

事件冒泡

事件冒泡:当若干嵌套的元素"同时"被触发某个事件时,最内层元素的事件最先被触发,事件依次往外传递。

JQuery

$对象是JQuery的编程入口,它是JQuery的核心对象。$对象也是一个函数对象,可用$()的形式调用。$函数可以把若干个DOM对象包装进一个对象,这个对象称为jQuery对象,jQuery对象可以看成数组对象。JQuery对象不能再调用DOM对象的方法,DOM对象也不能调用jQuery对象的方法。

jQuery事件处理

文档加载完成事件

$(document).ready(function(){alert("xx")});或者$(function(){});

 

复习DOM、JQuery

标签:bsp   处理   nodelist   创建   子节点   创建元素   修改   radio   idt   

原文地址:https://www.cnblogs.com/HuShaoyi/p/8443051.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!