最近好啰嗦

最近在一间小公司实习,写一些小东西。小公司嘛,人们都说在小公司要什么都写的。果真是。

前端,后台,无论是HTML,CSS,JavaScript还是XML,Java,都要自己全包了。还好前台的要求不高。写一些芝麻豆腐的东西还是不在话下的。但是整个项目下来估计还不止这些要写。而且我的经验当中,都没怎么关心过前端的东西,一直认为这是和我无关的东西,这次估计要悲剧了。所以找了一本书来看——《Ajax实战》。临时抱佛脚,临阵磨枪,也不能说是完全没有用处的。相比没怎么写过Java的人,我还是觉得写一些简单的Javascript对后台的帮助比我去写Java要快。而且交互上来说,Ajax也是必须的。我本人也讨厌老是要刷新整个页面,这太影响体验了。

Ajax,至于叫什么,大家随意吧。是人也好,是足球队也罢。。。

Ajax不是单一的技术,大家都知道,好吧,我啰嗦了。

Ajax设计的技术:Javascript,CSS,DOM,XMLHttpRequest对象。

Javascript和CSS,这两种技术,之前也写过,所以有所了解。一直觉得DOM很难理解,主要还是自己懒一直没有自己去看。XMLHttpRequest嘛,无非就是跟服务器打交道的东西。Request,请求嘛。

用Javascript改善用户体验。用CSS定义应用的外观。用DOM组织视图。使用XML技术异步加载数据。简单来说,Ajax就做了这些事情吧。

暂时只想说个Javascript操作CSS和DOM的例子,XML的事情以后再说吧。一步一步来。

一个简单的例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Hello Ajax</title>
<style type="text/css">

.news{

color:#FF0000;

font-family:"微软雅黑";

font-size:14px;

font-weight:normal;
}

.more{

color:#0000FF;

font-family:"宋体";

font-size:150px;

font-weight:bold;

height:200px;

width:200px;

line-height:200px;

text-align:center;

border:solid green 2px;

float:left;

margin:10px;
}
</style>
<script type="text/javascript">
// JavaScript Document

var data="屌丝们4月1日节日快乐啊";

window.onload=function(){
var hello=document.getElementById('hello');

hello.className='news';

}

function more(){
var empty=document.getElementById('empty');
for(var i=0;i<data.length;i++){

addNode(empty,data[i]);

}
var children=empty.childNodes;
for(var i=0;i<children.length;i++){

children[i].className='more';

}

}

function addNode(el,text){
var childEl=document.createElement("div");

el.appendChild(childEl);
var txtNode=document.createTextNode(text);

childEl.appendChild(txtNode);

}
</script>
</head>

<body>
<p id="hello">新闻消息:博客园收购了CSDN</p>
<a href="javascript:;" onclick="more()">更多内容</a>
<div id="empty"></div>
</body>
</html>

javascript蛮好玩的嘛。

实例:愚人节版

这是一个用javascript操作Document和CSS的例子。

DOM能够为javascript引擎公开网页。通过DOM,可以采用编程的方式操作文档的结构。Web页面的DOM表示是一个树状结构,由元素或点组成。节点可以包含很多子节点。javascript通过全局变量document公开当前Web叶梦得根节点,这个变量是所有DOM操作的起点。DOM使用容器的属性来做索引,而不是使用数字做索引。DOM中元素的关系可以看作是HTML清单的镜像。这种关系可以是双向的,修改DOM将改变HTML标记,随之会反映在页面的现实上。

譬如(方法1)

var node=document.form1.hello;

就可以在javascript中访问到

<p id="hello">新闻消息:博客园收购了CSDN</p>

这个节点。

此外javascript访问节点还有另外一种方法。

var node=document.getElementById('hello');

这种方式同样能够访问到节点

<p id="hello">新闻消息:博客园收购了CSDN</p>

其实还有方法的,就是用这种的比较少。

var node=document.getElementByTagName('a');

这种方法会在DOM中搜寻所有的<a>标签。在批量操作的时候就很有用了。

标题有点大,但却是在看。。。

本文转自 Ron Ngai 博客园博客,原文链接: http://www.cnblogs.com/rond/archive/2012/04/01/ajaxone.html ,如需转载请自行联系原作者

初见Ajax——javascript访问DOM的三种访问方式的更多相关文章

  1. javascript获取DOM对象三种方法

    1. getElementByID() getElementByID()方法可返回对拥有指定ID的第一个对象的引用 2. getElementByTagName() getElementByTagNa ...

  2. JavaScript实现接口的三种经典方式

    /* 接口:提供一种说明一个对象应该有哪些方法的手段 js中有三种方式实现接口: 1 注释描述接口 2 属性检测接口 3 鸭式辨型接口 */ /* 1 注释描述接口: 不推荐 优点: 利用注解,给出参 ...

  3. 【转】SVG与HTML、JavaScript的三种调用方式

    原文:https://www.cnblogs.com/guohu/p/5085045.html SVG与HTML.JavaScript的三种调用方式 一.在HTMl中访问SVG的DOM 1 2 3 4 ...

  4. 2019年6月14日 Web框架之Django_07 进阶操作(MTV与MVC、多对多表三种创建方式、前后端传输数据编码格式contentType、ajax、自定义分页器)

    摘要 MTV与MVC 多对多表三种创建方式 ajax ,前后端传输数据编码格式contentType 批量插入数据和自定义分页器 一.MVC与MTV MVC(Model View Controller ...

  5. AJAX实现跨域的三种方法

    由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只能访问本地的资源,而不能跨域访问. 比如说你的网站域名是aaa.com,想要通过AJAX请 ...

  6. JavaScript 闭包的详细分享(三种创建方式)(附小实例)

    JavaScript闭包的详细理解 一.原理:闭包函数--指有权访问私有函数里面的变量和对象还有方法等:通俗的讲就是突破私有函数的作用域,让函数外面能够使用函数里面的变量及方法. 1.第一种创建方式 ...

  7. JavaScript声明全局变量的三种方式

    JavaScript声明全局变量的三种方式   JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为 ...

  8. [转]Javascript定义类的三种方法

    作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html 将近2 ...

  9. [转]SharePoint 2010/2013 使用Javascript来判断权限的三种方法

    本文讲述SharePoint 2010/2013 使用Javascript来判断权限的三种方法的实现方式及其优缺点. 1. 根据用户所在的SharePoint组(比如用户在Leader 组才可以使用审 ...

随机推荐

  1. Haystack+ES解决搜索服务

    最近项目组需要对老的搜索项目进行迁移和改造,刚入职2个星期的我光荣的接受了这份工作,这也是我第一次接触Haystack和Elasticsearch,以下是记录下工作中的一些需求解决,具体haystac ...

  2. 基于 HTML5 WebGL 的 水泥工厂可视化系统

    前言 如今的制造行业,基于数据进行生产策略制定与管理已经成为一种趋势,特别是 工业4.0 的浪潮下,数据战略已经成为很多制造企业的优先战略,而数据可视化以更直观的方式,帮助指导决策,成为数据分析传递信 ...

  3. Vulnhub homeless靶机渗透

    信息搜集 nmap -sP 192.168.146.6 nmap -A -Pn 192.168.146.151 直接访问web服务. 大概浏览一下没发现什么,直接扫描下目录把dirb+bp. BP具体 ...

  4. 给listview添加长时间点击事件(完成删除操作)

    出现的问题是:当长时间点击listview的时候,触发长时间点击事件的同时也会触发点击事件,处理的办法是在长时间点击事件中加上return true:这样就可以很好的解决了. 给listview天机长 ...

  5. javascript 入门 select2

    要说这select2,还真是我......,也不是难,反正就对不了!!! 我博客看了一下牛,愣是对不了,后来硬着头看着官方文档,终于出来了. 注意: 1.调用的jquery库一定要能用,网上很多不能用 ...

  6. 7.3 java 成员变量和局部变量区别

    /* * 成员变量和局部变量的区别: * A:在类中的位置不同 * 成员变量:类中,方法外 * 局部变量:方法中或者方法声明上(形式参数) * B:在内存中的位置不同 * 成员变量:堆内存 * 局部变 ...

  7. hadoop(四)centos7克隆|静态ip|机器名|映射关系|别名配置(完全分布式准备一)|6

    hadoop完全分布式准备工作 克隆默认基础虚拟机三台102/103/104目标:在win10主机上能连上这三台机器,三台机器之间可以互相ping通,用机器名也可ping通.基础虚拟机:创建了文件op ...

  8. windows上jmeter目录结构功能

    1.bin :存储了jmeter的可执行程序,如启动 2.lib:存储了jmeter的整合的功能(如.jar文件程序) 3.启动jmeter:双击bin\apachejmeter.jar jmeter ...

  9. ajax按楼层加载数据

    代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...

  10. Daily Scrum 12/18/2015

    Process: Zhaoyang: Some IOS UI upgrade to increase the users' experience. Minlong: Build a restful s ...