代码是否需要放置到onload中
 //如果js代码需要操作页面上的元素，则将该代码放到onload里面。
        //因为当页面加载完毕之后页面上才会有相关的元素

//如果js代码中没有操作页面元素的语句，则可以将该代码直接写在<script>标签中，
        //例如：声明变量，相加求和等操作。 
        //建议将操作页面元素的代码都放到onload里面。

控制层的显示
修改style.display，例子：切换层的显示
        function togglediv() {
            var div1 = document.getElementById('div1');
            if (div1.style.display == '') {
                div1.style.display = 'none';//不显示
            }
            else {
                div1.style.display = '';//显示
            }
        }//与元素对象.enabled=true或readonly=true等不一样，这里是样式，不是元素的直接属性，不能用true或false。

动态设置元素的位置、大小
通过dom读取元素的top、left、width、height等取到的值不是数字，而是“10px”这样的字符串；为这些属性设值的时候IE可以是80、90这样的数字，FF、Chrome必须是“80px”、“90%”等这样的字符串形式，为了兼容统一用字符串形式。left/top需要设置position
易错：不要写成div1.style.width=80px，而是div1.style.width=‘80px’;

修改元素的大小（parseInt可以将“20px”这样数字开头的包含其他内容的字符串解析为20，parseInt(‘22px’,10)，也就是解析尽可能多的部分）；然后加上一个值，再加上px赋值回去。

层的操作
元素的position 样式值：static（无定位，显示在默认位置）、absolute（绝对定位）、fixed（相对于窗口的固定定位，位置不会随着浏览器的滚动而变化，IE6不支持）、relative（相对元素默认位置的定位）。如果要通过代码修改元素的坐标则一般使用absolute，然后修改元素的top（上边缘距离）、左边缘距离）两个样式值。left、top都是指的层的左上角的坐标left
===============图片跟着鼠标走=======================
<img id="img1" src="1.gif" />
function picMove(){
var x=window.event.clientX;
var y=window.event.clientY;

document.getElementById('img1').style.position='absolute';
document.getElementById('img1').style.left=x;
document.getElementById('img1').style.top=y;
document.title=x+','+y;
}

form对象
常用：click(),focus(),blur();//相当于通过程序来触发元素的单击、获得焦点以及失去焦点的事件。
form对象是表单的Dom对象。
方法：submit()提交表单，但是不会触发onsubmit事件。
实现autopost，也就是焦点离开控件以后页面立即提交，而不是只有提交submit按钮以后才提交，当光标离开的时候触发onblur事件，在onblur中调用form的submit方法。

=========================不点提交按钮如何提交===========
autopost
 <form name="form1" action="a.aspx" method="get">
        <input type="text" onblur="form1.submit()" />
        <input type="text" />        
    </form>


在点击submit后form的onsubmit事件被触发，在onsubmit中可以进行数据校验，如果数据有问题，返回false即可取消提交
    <form name="form1" action="a.aspx" method="get" onsubmit="if(document.getElementById('txtname').value.length<=0){alert('姓名必填');return false;}">

案例练习
练习1：点击【登录】按钮，弹出一个显示用户名、密码等的层。将用户名、密码等写到一个层中，层默认是隐藏的。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8"/>
    <script type="text/javascript">
        var keyWords = { "苹果播客": ["播客java视频", "播客.net视频", "播客php视频"], "中科": ["中科的视频", "中科的微博","中科的邮箱"],"杨":["杨利伟","杨振宁","杨过"],"火影忍者":["卡卡西","佐助","鼬","鸣人"] };

onload = function () {
            setInterval(function() {
                document.getElementById('txt').onchange();
            },
            1000);
            document.getElementById('txt').onchange = function () {            
                if (keyWords[this.value].length>0) {
                    //开始创建层
                    if (document.getElementById('dv')) {
                        document.body.removeChild(document.getElementById('dv'));
                    }
                    //开始创建层
                    var dvObj = document.createElement('div');
                    dvObj.id = 'dv';
                    dvObj.style.width = '300px';
                    //dvObj.style.height = '200px';//将来可以不要
                    dvObj.style.border = '1px solid red';

document.body.appendChild(dvObj);
                    //脱离文档流
                    dvObj.style.position = 'absolute';
                    dvObj.style.left = this.offsetLeft + 'px';
                    dvObj.style.top = this.offsetHeight + this.offsetTop + 'px';
                    //循环创建
                    for (var i = 0; i < keyWords[this.value].length; i++) {
                        //创建一个可以存文本的标签
                        var pObj = document.createElement('p');
                        pObj.innerText = keyWords[this.value][i];

//小手 高亮显示
                        pObj.style.cursor = 'pointer';
                        pObj.style.margin = '5px';
                        pObj.onmouseover = function() {
                            this.style.backgroundColor = 'red';
                        };
                        pObj.onmouseleave = function() {
                            this.style.backgroundColor = '';
                        };
                        dvObj.appendChild(pObj); //把p标签加到层中
                    };
                    //创建可以显示文件的标签

};
            };
        };
    </script>
</head>
<body>
请输入搜索的内容：<input type="text" name="name" value="" id="txt" style="width: 300px; height: 25px; font-size: 20px;border: 1px solid red"/>
    <input type="button" name="name" value="百度一下" id="btn"/>
</body>
</html>

Js中的一些习惯与性能问题1
1.声明变量要赋初值var n=10。
2.尽量避免直接声明全局变量，比如要声明全局变量name,但是它有可能与window.name冲突，所以全局变量一般都会声明在一个全局对象中：var itcast={name:’zxh’,num:10};使用这些全局变量的时候通过itcast.name或者itcast.num，就可以减少与系统的重名了。
3.当编写大量Js代码的时候难免会遇到命名冲突的问题，这时可以通过模拟命名空间的方式来避免命名冲突。例如：
var itcast={};
 itcast.net={};
 itcast.net.net0405={name:‘xy’,sayHi:function(){}};
4.尽量避免使用全局变量。（搜索全局变量时，会一层一层的搜索每个作用域范围，耗时，低效）
5.使用减值循环或者优化循环条件，不要在循环条件中写i<xxx.length而要用一个变量来代替，i<len。因为循环条件每次都会执行，这样的话每次都会计算xxx.length。
6.避免使用eval(“alert(10);”);或setInterval(“myFunc();”,1000);这种双重解析的代码。低效！
7.使用原生的方法，比如内置的join()、reverse()，使用这些本来浏览器就有的方法不要自己写myJoin()之类的，性能低。原生方法都是用c或者c++写的，性能高。
8.尽可能使用switch来代替多个if-else
9.尽量减少语句数量：
用var n1=10,m=‘hello’,n2=true;而不是var n1=10;var m=‘hello’;var n2=true;一句话一个分号
var arr=[1,2,’a’,true];
var p1={name:’zxh’,age:18};//创建对象
10.使用文档碎片，避免多次更新页面。
var fragment=document.createDocumentFragment();

JavaScript DOM编程基础精华03（动态设置,层的操作,性能问题）的更多相关文章

  1. JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

  2. JavaScript DOM编程基础精华02（window对象的属性，事件中的this，动态创建DOM，innerText和innerHTML）

    window对象的属性1 window.location对象: window.location.href=‘’;//重新导航到新页面,可以取值,也可以赋值. window.location.reloa ...

  3. jQuery编程基础精华03（RadioButton操作，事件，鼠标）

    RadioButton操作 取得RadioButton的选中值,被选中的radio只有一个值,所以直接用val()  $('#btn1').click(function () {           ...

  4. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  5. 《JavaScript DOM 编程艺术》 学习笔记

    目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...

  6. JavaScript DOM编程艺术（第2版）的简单总结

    介绍 JavaScript DOM编程艺术(第2版)主要讲述了 JavaScript.DOM 和 HTML5 的基础知识,着重讲述了 DOM 编程,并通过几个实例演示了具有专业水准的网页开发. 下面介 ...

  7. JavaScript DOM编程艺术第一章：JavaScript简史

    本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...

  8. javascript Dom 编程

     javascript Dom  编程 知识概要: (1)Dom是什么? (2)Dom结构模型 (3)XML DOM和 HTML DOM (4)NODE接口的特性和方法 (5)DOM结点的常用属性 ...

  9. 《JavaScript Dom 编程艺术》读书笔记-第4章

    我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...

随机推荐

  1. mysql基础三（视图、触发器、函数、存储过程、事务、防注入）

    一.视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. 1.创建视图 -格式:CREATE ...

  2. XML和HTML常用转义字符

    XML和HTML中都有一些特殊的字符,这些字符在XML和HTML中是不能直接使用的,如果必须使用这些字符,应该使用其对应的转义字符. XML常用转义字符: 字符 转义字符 描述 & & ...

  3. Ztack学习笔记(1)-初识Ztack

    一.Zigbee协议 Zigbee是IEEE 802.15.4协议的代名词,是一种短距离.低功耗的无线通信技术.这一名称来源于蜜蜂的八字舞,因为蜜蜂(bee)是靠飞翔和“嗡嗡”(zig)地抖动翅膀的“ ...

  4. [转]PLS-S-00201, identifier 'CALLDEMO.GET_EMPLOYEES' must be declared 预编译错误原因及解决办法

    $ proc sample9.pc SQLCHECK=SEMANTICS Pro*C/C++: Release 11.2.0.1.0 - Production on Tue Jan 8 15:18:4 ...

  5. 通过FTP将一个数据文件从A服务器下载到B服务器的整个过程

    现在的环境如下: 服务器A :192.168.1.104 服务器B:192.168.1.138 需要将A服务器上的某个数据文件下载到B服务器上,传输方式为:FTP 那么,要怎么去实现呢? 首先,需要添 ...

  6. 【正则】精通JS正则表达式，没消化 信息量太大，好文

    http://www.jb51.net/article/25313.htm 正则表达式可以: •测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用 ...

  7. 从零开始学ios开发（十一）：Tab Bars和Pickers

    不好意思各位,本人休息了一个礼拜,所以这次的进度延后了,而且这次的学习的内容比较多,时间用的也比较长,文章发布的时间间隔有些长了,望各位谅解,下面继续我们的ios之旅. 这次我们主要学习的内容有2个, ...

  8. NodeJS -Express 4.0 用include取代partial

    在Express 4.0 下按如下方法设置: (1)运行cmd 输入:npm install express-partials -g (2)下载成功后.在app.js 中引用此插件   var par ...

  9. 【软件工程-Teamwork 3】团队角色分配和团队贡献分分配规则

    Part 1 团队角色分配 1.人员分配概要: Project Manager:1名 / Developer:4名 / Test: 1名 2.具体人员分配及职责: Project Manager(PM ...

  10. 我今天坑了我们公司的IT程序猿。。。

    今天在在公司邮箱发现了一个很神奇的事情! 同事的邮箱下面有个微博链接的签名. 光这个当然不是神器的,如果只是个图片加链接我也会,关键是他的这个链接和他的微博是实时交互的,他在微博上的状态会在链接里动态 ...