Javascript从零开始学习第三天(1)

Javascript从零开始学习第一天

Javascript从零开始学习第二天(1)

Javascript从零开始学习第二天(2)

Javascript从零开始学习第三天(1)

Javascript从零开始学习第三天(2)

Javascript从零开始学习第四天(1)

Javascript从零开始学习第四天(2)

一、DOM基础

Javascript从零开始学习第三天(1)

1、DOM 就是document对象 document object model

浏览器支持情况

IE 10%

chrom 60%

FF 99%

2、Dom节点

子节点 父节点 文本节点 元素节点概念

<父节点>

abc 这是文本节点

<子节点>

这是元素节点

</子节点>

</父节点>

3、节点操作

得到节点

div.childNodes得到所有节点(包括空节点文本节点) 高级浏览器不好使

div.childNodes.length 得到节点个数 在Chrome和FF中不支持

一种解决方式是使用div.childNodes[i].nodeType属性去判断节点类型

节点类型为1表示元素节点 为3表示文本节点 但是这个方式也很麻烦

Javascript从零开始学习第三天(1)

所以使用div.children就能直接得到正确的元素节点了

Javascript从零开始学习第三天(1)

查找父节点:

div.parentNode 得到父节点

offsetParent 得到定位parent

4、节点操作2

Javascript从零开始学习第三天(1)

获得首尾子节点:

Javascript从零开始学习第三天(1)

存在兼容性问题 需要使用if else 判断浏览器后选择相应的执行函数

Javascript从零开始学习第三天(1)

得到兄弟节点,存在兼容性问题 需要使用if else 判断浏览器

Javascript从零开始学习第三天(1)

二、DOM方式操作节点元素属性

Javascript从零开始学习第三天(1)

1、设置、获得、删除元素节点属性值

三种方式设置元素属性值。

Javascript从零开始学习第三天(1)

同样有set也有get

var value=oTxt.getAttribute("value");

删除属性

oTxt.removeAttribute("value");

2、DOM元素灵活查找

Javascript从零开始学习第三天(1)

通过元素的className查找元素可以快速得到相同css class属性的元素为其添加统一的处理

Javascript从零开始学习第三天(1)

Javascript从零开始学习第三天(1)

三、DOM元素动态创建、插入

Javascript从零开始学习第三天(1)

1、创建元素

document.createElement("tagName");

Javascript从零开始学习第三天(1)

Javascript从零开始学习第三天(1)

插入节点

appendChild(元素节点)

2、插入元素节点

父节点.insertBefore(要加入的子节点,在谁之前);

微博效果:新消息在最前面显示

oul.insertBefore(oLi,lis[0]);

3、删除元素节点

使用父节点.removeChild(node);的方式删除一个节点

Javascript从零开始学习第三天(1)

4、文档碎片

插入节点很多的情况下可以使用文档碎片

Javascript从零开始学习第三天(1)

Javascript从零开始学习第三天(1)

现将节点放在文档碎片中,然后一次性添加到document中。

在IE6中可以显著提高性能,但是在现在的高级浏览器中几乎对性能没有影响 有时还会降低。

四、表格应用

Javascript从零开始学习第三天(1)

1、一个表格可以有多个tbody

得到一个tbody 最原始的方法是

table.getElementsByTagName("tbody")[0]

js提供的简易办法是

table.tBodies[0]

得到tbody中的行

table.tBodies[0].rows

得到一行的单元格列

table.tBodies[0].rows[0].cells

2、表格tbody隔行变色实现

使用tbody中rows循环遍历添加事件 记录原始style用户鼠标移开时恢复样式

Javascript从零开始学习第三天(1)

Javascript从零开始学习第三天(1)

3、表格高级应用

Javascript从零开始学习第三天(1)

搜素 字符串比较

这样必须完全一样才能匹配

需要全部最小化后比较 toLowerCase()

模糊搜索 使用字符串search

var str="ccabcdr";

str.search('abc');结果是2 意思是搜索到了位置从2开始

高级模糊搜索 搜索关键词类似于 “a b”

这样应该把字符串转换成数组 使用 split

var arr=str.split(' ');

得到关键字数组后 循环 然后使用str.search去模糊搜索。

筛选 可以根据模糊搜索的结果动态显示和隐藏相应的数据。

分类:JavaScript 时间:2014-12-27 人气:4
本文关键词:
分享到:

相关文章

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 闽ICP备15018612号

processed in 0.038 (s). 10 q(s)