javascript 学习笔记(一)DOM基本操作
html部分代码:
当点击show按钮时,触发showValue函数,将input value的值动态添加到id="text"的元素节点中!
代码如下:
<p>
<input type="text" value="" name="user_name" id="user_name" />
<span style="padding-left:10px;"><input type="button" value="show" onclick="showValue()" /></span>
</p>
<p id="text"></p>
javascript 部分代码:
页面加载时,使input自动获得焦点,引导用户输入内容。(细节加强用户体验)
代码如下:
window.onload = function() {
var user_name = document.getElementById("user_name");
user_name.focus();
}
如果没有输入任何内容,给出错误提示,同时又让input获得输入焦点
代码如下:
function showValue() {
var user_name = document.getElementById("user_name");
var text = document.getElementById("text");
if(user_name.value == "") {
alert("Please input some words");
user_name.focus();
} else {
text.innerHTML = user_name.value;
text.setAttribute("class", "text");
}
}
HTML代码中的<div id="test"></div>完全可以不用,我们可以利用DOM动态创建,并添加到文档中!
代码如下:
//创建div元素
var text = document.createElement("div");
//把user_name.value的值添加到div元素中来
text.appendChild(user_name.value);
//最后将div元素添加到body中来
document.body.appendChild(text);
相关推荐
-
javascript 学习笔记(六)浏览器类型及版本信息检测代码
下面的checkBrowser()函数主要检测了三种浏览器(IE, firefox, chrome),其它的浏览器的检测有兴趣的朋友可以自行添加检测代码! HTML部分代码: (页面加载时执行检测函数) 复制代码 代码如下: <body onload="checkBrowser()"> <p id="userAgent"></p> <p id="browser"></p> </bo
-
javascript学习笔记(二) 鼠标经过时,改变div块的背景色的代码
HTML部分代码: 复制代码 代码如下: <ul> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> </ul> javascript部分代码: 当鼠标经过时,给li添加class="current"类,鼠标离开时,去除该类,达到改变背景色的目的 复制代码 代
-
javascript学习笔记(五)正则表达式
常用到的元字符有: •. 查找单个字符,除了换行和行结束符: •\w 匹配字母.汉字.数字.下划线等符号: •\s 匹配空白符(包含空格.制表符等): •\d 匹配数字: •\b 匹配位于单词的开头或结尾的匹配: 常用的量词有: •^n 匹配任何开头为 n 的字符串: •n$ 匹配任何结尾为 n 的字符串: •n+ 匹配任何包含至少一个 n 的字符串: •n* 匹配任何包含零个或多个 n 的字符串: •n? 匹配任何包含零个或一个 n 的字符串: •n{X} 匹配包含 X 个 n 的序列的字符串
-
javascript学习笔记(七)利用javascript来创建和存储cookie
首先看一下基础知识: 1.什么是cookie cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值 2.有关cookie的例子: •名字 cookie 当访问者首次访问页面时,他或她也许会填写他/她们的名字.名字会存储于 cookie 中.当访问者再次访问网站时,他们会收到类似 "Welcome John Doe!" 的欢迎词.而名字则是从 cookie 中
-
javascript学习笔记(三)显示当时时间的代码
html代码如下: 复制代码 代码如下: <div id="showTime"></div> javascript 代码如下:时间显示格式为:2011-04-04 星期二 12:09:34 复制代码 代码如下: function startTime() { try{ var today = new Date(); var year = today.getFullYear(); var month = checkNum(today.getMonth()+1); v
-
javascript 学习笔记(四) 倒计时程序代码
首先看全部完整代码: countDown test function countDown(endDate) { var now = new Date(); var deadtime = document.getElementById(endDate); var deadline = new Date(deadtime.value); //本地时间与格林威治标准时间 (GMT) 的分钟差 var timeDiff = now.getTimezoneOffset(); //此处有些不解,如果把分钟差
-
JavaScript学习笔记之DOM操作实例分析
本文实例讲述了JavaScript学习笔记之DOM操作.分享给大家供大家参考,具体如下: 一.DOM概念 1. "D":Docment,指的是文档 2. "O":Object,指的是对象,在javascript有三种对象:用户定义对象.内建对象(JavaScript语言对象.如Math,Array).宿主对象(浏览器对象) 3. "M":Model,值得是Model,某种事物的表现形式 二.节点 1. 元素节点 :<body> <
-
JavaScript学习笔记之数组基本操作示例
本文实例讲述了JavaScript学习笔记之数组基本操作.分享给大家供大家参考,具体如下: 一.数组定义 1.定义 vara=[1,2,3] vara=newArray(1,2,3); 2.长度 返回长度 <script> vara=[1,2,3,4,5,6]; alert(a.length); </script> 设置长度 <script> vara=[1,2,3,4,5,6]; a.length=2; alert(a); </script> 二.数组连接
-
JavaScript学习笔记之DOM基础 2.4
DOM的发展,与WEB标准化的大趋势相关甚密.只有基于正确的语义逻辑,DOM才能正确地发挥其功用.如今,正确的语义结构.表现与内容分离等要求,都已经成为网页设计中的基本要求.因此,在网页前端开发中,DOM的存在,无疑是为表现层.行为层甚至内容层面的连接提供了一个绝佳的API,成为热门的Ajax应用中不可或缺的组成部分. 一.平稳退化 1.概念 早期,在未使用JavaScript之前,网页中的内容可以正常显示出来,用户可以通过外设(如鼠标)操控浏览到相关内容,这种浏览体验对用户而言可能并不理想.
-
JavaScript学习笔记之DOM基础操作实例小结
本文实例讲述了JavaScript DOM基础操作.分享给大家供大家参考,具体如下: 一.子节点 1.元素节点.文本节点 实例01 html <body> <ulid="ul1"> 文本节点1 <li></li> 文本节点2<li></li> 文本节点3<li></li> 文本节点4<li></li> 文本节点5<li></li> 文本节点6&
-
Javascript学习笔记之 对象篇(四) : for in 循环
先上范例: // Poisoning Object.prototype Object.prototype.bar = 1; var foo = {moo: 2}; for(var i in foo) { console.log(i); // prints both bar and moo } 这里我们要注意两点,一是 for in 循环会忽略 enumerable 设置为 false 的属性.例如一个数组的 length 属性.第二是,由于 for in 会遍历整个原型链,所以当原型链过长时,会
-
JavaScript学习笔记之创建对象
JavaScript 有Date.Array.String等这样的内置对象,功能强大使用简单,人见人爱,但在处理一些复杂的逻辑的时候,内置对象就很无力了,往往需要开发者自定义对象. 从JavaScript定义上讲对象是无序属性的集合,其属性可以包含基本值.对象或函数.也就是说对象是一组没有特定顺序的属性,每个属性会映射到一个值上,是一组键值对,值可以是数据或对象. 对象是JavaScript的基本数据类型.在JavaScript中除了字符串.数字.true.false.null和undefine
-
JavaScript学习笔记之ES6数组方法
ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了).上一次标准的制订还是2009年出台的ES5.目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本.但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中. ES6给数组添加了一些新特性,而这些新特性到目前为止完全可以运用到自己的业务层.在这一节中将总结有关于ES6给数组提供一些新特性的使用方法. ES6提供
-
JavaScript学习笔记之数组去重
推荐阅读:JavaScript学习笔记之数组的增.删.改.查 JavaScript学习笔记之数组求和方法 JavaScript学习笔记之数组随机排序 话说面试常会碰到面试官会问JavaScript实现数组去重的问题,最近刚好在学习有关于JavaScript数组相关的知识,趁此机会整理了一些有关于JavaScript数组去重的方法. 下面这些数组去重的方法是自己收集和整理的,如有不对希望指正文中不对之处. 双重循环去重 这个方法使用了两个for循环做遍历.整个思路是: 构建一个空数组用来存放去重后
-
JavaScript学习笔记整理_setTimeout的应用
setTimeou的t应用 var ids = []; function foo1(i) { this.i = i; console.log('i = '+i); ids[0] = setTimeout((function () { foo1(i); }),1000); } function foo2(j) { this.j = j; console.log('j = '+j); ids[1] = setTimeout((function () { foo2(j); }),1000); } fo
-
JavaScript学习笔记(三):JavaScript也有入口Main函数
在C和Java中,都有一个程序的入口函数或方法,即main函数或main方法.而在JavaScript中,程序是从JS源文件的头部开始运行的.但是某种意义上,我们仍然可以虚构出一个main函数来作为程序的起点,这样一来不仅可以跟其他语言统一了,而且说不定你会对JS有更深的理解. 1. 实际的入口 当把一个JavaScript文件交给JS引擎执行时,JS引擎就是从上到下逐条执行每条语句的,直到执行完所有代码. 2. 作用域链.全局作用域和全局对象 我们知道,JS中的每个函数在执行时都会产生一个新的
随机推荐
- 利用java、js或mysql计算高德地图中两坐标之间的距离
- IOS React Native FlexBox详解及实例
- SQL Server 2016 Alwayson新增功能图文详解
- JavaScript学习小结(一)——JavaScript入门基础
- 自动写入文件上传到指定服务器SoftwareMeteringCLS.vbs源码
- windows server 2008 服务器安全设置初级配置
- 将数据插入到MySQL表中的详细教程
- javaScript+turn.js实现图书翻页效果实例代码
- SVG动画vivus.js库使用小结(实例代码)
- javascript实现 在光标处插入指定内容
- ASP.NET 应用程序级 验证用户是否登录 一般处理程序
- php 删除指定文件夹的实例讲解
- 用Python编写脚本使IE实现代理上网的教程
- 信息页文内画中画广告js实现代码(文中加载广告方式)
- CentOS Linux服务器安全设置
- php基于PDO实现功能强大的MYSQL封装类实例
- Jquery截取中文字符串的实现代码
- 基于jquery的3d效果实现代码
- JQUBar 基于JQUERY的柱状图插件
- JavaScript实现汉字转换为拼音的库文件示例