javascript简单介绍(二)
晨读单词:
onmouseover:鼠标移入
onmouseout:鼠标移出
attribute:属性
node:节点
document:文档
element:元素
textNode:文本节点
append:追加
回顾之前已经使用过的事件:
onfocus/onblur:聚焦离焦事件,用于表单校验的时候比较合适。
onclick/ondblclick:鼠标单击和双击事件
onkeydown/onkeypress:搜索引擎使用较多
onload:页面加载事件,所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称,那么在html页面中只能写一个。
onmouseover/onmouseout/onmousemove:购物网站商品详情页。
onsubmit:表单提交事件 ,有返回值,控制表单是否提交。
onchange:当用户改变内容的时候使用这个事件(二级联动)
javascript的DOM操作:
Document:整个html文件都成为一个document文档
Element:所有的标签都是Element元素
Attribute:标签里面的属性
Text:标签中间夹着的内容为text文本
Node:document、element、attribute、text统称为节点node.
以下两个方法很重要,但是在手册中查不到!
创建文本节点:document.createTextNode()
创建元素节点:document.createElement()
使用JS完成表格的一个隔行换色
1.需求分析
我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息,显示效果如下:
2.技术分析
新标签的学习
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
确定事件(页面加载事件onload)
获取元素:获取表格(document.getElementById()),最终是为了获取表格中tbody里面的行数(长度)。
Tbody里面的行数(rows.length)
JS的遍历(for循环)
获取奇数行和偶数行(对遍历中角标对2取余)
设置背景颜色(.style.backgroundColor)
javascript简单介绍(二)的更多相关文章
- 《javascript高级程序设计》读书笔记(一)javascript简单介绍
第一章:javascript简单介绍 Netscape Navigator 开发的javascript Javascript的实现有三部分: 1.核心(ECMAScript):提供核心语言功能. ...
- angular1.x的简单介绍(二)
首先还是要强调一下DI,DI(Denpendency Injection)伸手获得,主要解决模块间的耦合关系.那么模块是又什么组成的呢?在我看来,模块的最小单位是类,多个类的组合就是模块.关于在根模块 ...
- JavaScript入门介绍(二)
JavaScript入门介绍 [函数] 函数function 是Javascript的基础模块单元,用于代码的复用.信息影藏和组合调用. function a(){} 函数对象Function Lit ...
- Linux 下UVC&V4L2技术简单介绍(二)
通过前文Linux 下UVC&V4L2技术简单介绍(一)我们了解了UVC和V4L2的简单知识. 这里是USB设备的文档描写叙述:http://www.usb.org/developers/do ...
- javascript简单介绍总结(二)
JavaScript 函数函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块.JavaScript 函数语法函数就是包裹在花括号中的代码块,前面使用了关键词 function:function ...
- 03.JavaScript简单介绍
一.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) N ...
- JavaScript 简单介绍
一.简介 JavaScript是一门面向对象的动态语言,他一般用来处理以下任务: 修饰网页 生成HTML和CSS 生成动态HTML内容 生成一些特效 提供用户交互接口 生成用户交互组件 验证用户输入 ...
- rabbitmq的简单介绍二
上一篇博客我们没有介绍完rabbitmq,今天我们接着上一篇的博客继续介绍rabbitmq 这边的博客的内容如下 1.组播,对指定的队列设置关键词,通过关键词来控制消息的分发 2.更加细致的组播 先来 ...
- javascript简单介绍总结(一)
DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准.在 HTML 中,JavaScript 语句向浏览器发出的命令.语句是用分号分隔: ...
随机推荐
- Hessian探究(一)Hessian与Spring结合
上一篇博客Hessian探究(一)Hessian入门示例我们初步简单的介绍了一下Hessian的使用入门示例,由于Spring现在使用的实在是太广泛了,接下来我们介绍一下Hessian和Spring一 ...
- Android学习之Animation(一)
3.0以前,android支持两种动画模式,Tween Animation,Frame Animation,在android3.0中又引入了一个新的动画系统:Property Animation,这三 ...
- 根据CSS的class选择DOM
// 网上参考的,自己修改了一部分 // 代码如下,纯JS,要求浏览器支持 getElementsByClassName 方法 <script type="text/javascrip ...
- JDK6和JDK7中String的substring()方法及其差异
翻译人员: 铁锚 翻译日期: 2013年11月2日 原文链接: The substring() Method in JDK 6 and JDK 7 在JDK6与JDK7这两个版本中,substri ...
- Mac 下 Chrome多个Tab之间切换
下一个Tab: Control + Tab前一个Tab: Control + Shift + Tab记录一下备忘.
- Lambda的使用与实战
简介 (下面的简介也可以自己百度,一般进来的都是想知道怎么去用,所以这里主要也是重点在用法与实战上) Lambda表达式是Java SE 8中一个重要的新特性.lambda表达式允许你通过表达式来代替 ...
- android官方技术文档翻译——switch 语句转换
本文译自androd官方技术文档<Switch Statement Conversion>,原文地址:http://tools.android.com/tips/non-constant- ...
- C语言之任意进制的转换
我们都知道转换进制是一个让人比较头疼的事情,下面我的代码不是最好的,也就仅仅是一个思路而已,至少我认为使用栈来进行进制转换是比较合适的一种方法,好了,不多叙述了. #include<stdio. ...
- php 命令空间总结
本文移到:http://www.phpgay.com/Article/detail/classid/2/id/53.html 1.命名空间的语法: <?php namespace 名称; ?&g ...
- android 优化之布局优化
布局优化的思路很简单,尽量减少布局文件的层级,看过系统源码的都知道,Android view绘制都是逐层绘制的,所以布局的层级少了,decodeview的时候绘制工作自然就少了. 那么如何进行布局的优 ...