javascript代码实例教程-一周一话题之四(JavaScript、Dom、jQuery全面复习总结<Dom篇>)

发布时间:2019-02-07 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-一周一话题之四(JavaScript、Dom、jQuery全面复习总结<Dom篇>)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 -->目录导航

&nbsp;

一、 初探Dom

 

    1. Dom介绍

 

二、 Dom基础

 

    1. window顶级对象

 

    2. body、document对象事件

 

    3. 通用的HTML元素的事件

 

    4. 冒泡事件

 

    5. this与event.srcElement

 

三、 Dom操作

 

    1. 动态创建Dom

 

    2. innerText、innerHTML

 

    4. Form对象

 

    5. JS中的正则表达式

 

    6. 火狐浏览器(FF)不兼容性:

 

    7. 性能优化

 

四、 实力检测

 

一、 初探Dom

 

JavaScript—>Dom,C#—> .Net Framework;JavaScript和C#都是一些基本语法,没有Dom和.Net类库,JavaScript和C#也就发挥不出来它的威力来。本文就带你来回顾一下Dom操作。

 

1. Dom介绍

 

Dom(文档标签当作对象来处理)

 

(1)DOM就是html页面模型,将每个标签都作为一个对象,javascript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。

 

(2)DOM就是一些让JavaScript能操作Html页面控件的类、函数

 

(3)DHtml= CSS+JavaScript+Dom

 

动态设置事件

 

<script tyPE="text/javascript">

        function F1() { alert('In F1'); }

   </script>

   <input type="button" value="关联F1" onclick="document.onclick=F1;" />

<input type="button" value="关联F1" onclick="F1()"

带()表示调用函数,直接写函数名表示将其设置为事件的处理函数。

 

二、 Dom基础

 

1. window顶级对象

 

(1) window方法

 

①调用window的方法时,可以省略window

 

②方法

 

alert:弹出警告对话

 

confirm:确定、取消对话框

 

setInterval(code,delay):启动计时器,每隔一段时间执行指定的代码

 

        code推荐使用匿名函数

 

clearInterval(intervalId):停止计时器

 

setTimeOut():定时执行,只执行一次

 

clearTimeOut():清除定时

 

(2) window的属性

 

① window.location

 

属性:

 

location.PRotocol:该属性保存了URL的协议部分。

 

location.hostname:该属性保存了URL的主机名部分。

 

location.port:该属性保存了URL中的端口号部分。

 

location.pathname:该属性保存了URL中的文件名部分。

 

location.seArch:保存了URL的查询部分(如果有的话)。

 

location.hash:保存了URL中的anchor名称(如果有的话)。

 

方法:

 

window.location.href:获取当前地址

 

window.location.reload():刷新当前页

 

② window.event

 

     ->按下键,复合键

 

altKey、shiftKey、ctrlKey

 

if (window.event.altKey) {

                alert("按下了Alt键");

   }

 

        具体按下的什么按键(与ASCII值不同)keyCode

 

     ->鼠标坐标

 

clientX、clientY  获取鼠标坐标,相对于页面来说的坐标

 

offsetX、offsetY  相对于当前元素自己左上角的偏移坐标

 

screenX、screenY  相对于整个屏幕的偏移坐标

 

    ->停止事件继续执行

 

window.event.return = false;(标准)不兼容火狐

 

也可以使用return false;来设置当前事件处理程序返回值为false

 

③ window.screen

 

window.screen.width   获取用户屏幕分辨率

 

window.screen.height  获取用户屏幕分辨率高

 

④ clipboardData

 

setData()  设置剪切板的值

 

getData()  读取粘贴板的值

 

clearData()  清空粘贴板的值

 

function SeTclipboard() {

            window.clipboardData.setData('Text', window.clipboardData.getData('Text') + '霹雳烈火版权所有');

        }

⑤ history(操作历史记录

 

    window.history.back() 后退

 

    window.history.go(-1) 后退

 

    window.history.forward() 前进

 

    window.history.go(1)  前进

 

⑥ document

 

-->wrITe与writeln

 

    document.write就是动态创建内容、元素的

 

    document.writeln 也是动态创建内容,代码中会换行

 

补充:以上两个只有在与页面加载的时候同时使用才会保证页面上的内容

 

应用:广告链接,服务器端js代码一改,其它引用它的地方全改

 

-->获得dom对象

 

getElementById() 根据元素Id获得对象

 

getElementsByName() 根据元素name获得对象

 

getelementsbytagname 根据指定标签获得对象

 

复制代码

function GetDomObject() {

            alert('getElementById:' + document.getElementById('txtElementById').value);

            VAR arrobjs = document.getElementsByName('abc');

            for (var i = 0; i < arrobjs.length; i++) {

                alert('getElementsByName元素值:' + arrobjs[i].value);

            }

            var tagNameObjs = document.getElementsByTagName('p');

            for (var j = 0; j < tagNameObjs.length; j++) {

                alert('getElementsByTagName元素值:' + tagNameObjs[j].innerHTML);

            }

        }

复制代码

注: 不能用for in(键值对)循环

 

⑦ 其它属性

 

close  返回true或者false,表示window对象对对应的窗口是否关闭。

 

opener  表示打开当前窗口的那个window对象。

 

defaultstatus  设置和返回窗口状态栏中默认显示的文本内容。

 

status  设置和返回窗口状态栏中当前正显示的内容。

 

screenTop  返回窗口左上角顶点在屏幕上的垂直距离

 

srceenLeft  返回窗口左上角顶点在屏幕上的水平距离。

 

回到导航

 

2. body、document对象事件

 

onload 页面加载后触发:页面加载后就可以document.getElementById(“控件Id”)来获取dom元素ID了

 

onunload 页面卸载后触发

 

onbeforeunload 页面卸载前触发

 

注:要为整个页面注册事件就用document,不要用body

 

回到导航

 

3. 通用的HTML元素的事件

 

onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeyPress(点击按键)、onkeyup(按键释放)、onmousedown(鼠标按下)、onmouSEMove(鼠标移动)、onmouseout(鼠标离开元素范围)、onmouseover(鼠标移动到元素范围)、onmouseup(鼠标按键释放)、oncontextmenu(在浏览器中单击鼠标右键显示”右键菜单”时触发)

 

回到导航

 

4. 冒泡事件

 

事件冒泡:如果元素A嵌套在元素B中,那么A被点击不仅A的onclick事件会被触发,B的onclick也会被触发。触发的顺序是“由内而外” 。

 

<table onclick="alert('table onclick');">

        <tr onclick="alert('tr onclick');">

            <td onclick="alert('td onclick');"><p onclick="alert('p onclick');">aaaa</p></td>

            <td>bbb</td>

        </tr>

   </table>

取消事件冒泡: window.event.cancelBubble = true; //IE下

 

回到导航

 

5. this与event.srcElement

 

this:表示发生事件的控件。只有在事件响应函数才能使用this获得发生事件的控件,在事件响应函数调用的函数中不能使用

 

window.event.srcElement:指最初引发事件的事件源对象 

 

fuction method(){

      alert(this.value);

   }

   <input type="text" onblur=";method()"/>

这样是不正确的,可以采用

 

fuction method(BTn){

      alert(btn.value);

   }

   <input type="text" onblur="method(this)"/>

补充:this表示当前触发事件的对象,表示当前谁在执行事件,发生事件的控件;

 

event.srcElement是引发事件的对象:事件冒泡。

 

如果要直接使用this.属性,此时的函数不能是被调用的而必须是响应函数,而window.event.srcElement则无此限制。

 

三、 Dom操作

 

1. 动态创建Dom

 

createElement(‘element’)  创建指定标签dom对象

 

appendChild(node)  将创建元素添加到相应的元素下

 

removeChild(node)  删除元素

 

replaceChild(new,old)  替换元素

 

insertBefore(new,参照)  插入元素

 

回到导航

 

2. innerText、innerHTML

 

(1) 几乎所有DOM元素都有innerText、innerHTML属性(注意大小写),分别是元素标签内内容的文本表示形式和HTML源代码,这两个属性是可读可写的。

 

(2) FF不支持innerText,使用textContent

 

(3) innerHTML可以代替createElement,属于简单、粗放型、后果自负的创建

 

① 大量进行节点操作时,使用innerHTML的性能要好于频繁的Dom操作

 

② 使用innerTHML=‘’来删除节点可能会造成内存问题

 

innerText  :只能设置纯文本,即便写了html代码,也会对html代码进行编码,

 

innerHTML:可以设置html代码和纯文本。

 

3.  操作样式

 

(1)通过操作style属性来修改元素的样式

 

css中属性名在JavaScript中操作的时候属性名可能不一样,比如:font-size→style.fontSize;margin-top→style.marginTop //驼峰命名法

 

改边框:dvoObj.style.width

 

改背景:dvoObj.style.backgroundColor

 

改宽高:dvoObj.style.width|height--需要加px

 

注:不要写成p1.style.width=80px,而是p1.style.width=‘80px’

 

(2)设置元素样式

 

修改元素的样式不是设置class属性,而是classname属性

 

复制代码

<style type="text/css">

        .emptyfield

        {

            background-color:red;

        }

        .normal

        {

            background-color:inherit;

        }

    </style>

    <script type="text/javascript">

        function check(txt) {

            var s = txt.value;

            if (s.length <= 0) {

                txt.className = "emptyfield";

                alert('这个字段必填!');                

            }

            else {

                txt.className = "normal";

            }

        }

    </script>

<input type="text" onblur="check(this)" />

<input type="text" onblur="check(this)" />

<input type="text" onblur="check(this)" />

复制代码

visibility设置隐藏后,隐藏部分仍然占位

 

回到导航

 

4. Form对象

 

click(),focus(),blur();//相当于通过程序来触发元素的单击、获得焦点以及失去焦点的事件。

 

回到导航

 

5. JS中的正则表达式

 

(1) 创建正则表达式类的方法

 

var regex = new RegExp(“//d{5}”);

 

var regex = //d{5}/; -->推荐写法

 

/表达式/是JavaScript中专门为简化正则表达式编写而提供的语法,写在//中的正则表达式就不用管转义符了。

 

(2) RegExp对象的方法

 

① 匹配

 

test(str)判断字符串str是否匹配正则表达式,相当于C#中的IsMatch

 

② 提取

 

exec(str)进行搜索匹配,返回值为匹配结果(*),是一个对象,该对象包含所提取到的第一个字符串的“完成匹配结果”,以及所有的“提取组”;相当于c#中match()和matches()

 

③ 替换

 

replace()

 

回到导航

 

6. 火狐浏览器(FF)不兼容性:

 

能力检测:

 

if (typeof td1.innerText == 'string') {

     td1.innerText = txt;

   }

   else {

     td1.textContent = txt;

   }

(1)取消事件:window.event.returnValue不兼容FF

 

解决:用火狐特有 e. preventDefault()或者return false

 

(2)window.event.altKey:if(event.altKey)不兼容FF

 

解决:

 

复制代码

function BodyClickHandlerOnFF(e) {

            if (e.altKey) {

                alert('按下alt键');

            } else {

                alert('普通点击!');

            }

        }

<body onclick="BodyClickHandlerOnFF(event);">

复制代码

(3) 获取位置:window.event.ClientX、ScreenX、OffsetX不兼容FF

 

解决:arguments[0].clientX…

 

(4) 获得事件源对象:window.event.srcElement 不兼容FF

 

function MyClickHandlerOnFF(e) {

            var obj = e.target;

            alert(obj.value);

        }

    <input type="button" value="FF下事件源对象" onclick="MyClickHandlerOnFF(event);"/>

(5) innerText:不兼容FF

 

解决:textContent

 

(6) 扩展《FF与IE对JavaScript和CSS的区别》

 

回到导航

 

7. 性能优化

 

(1) 声明变量赋初值

 

(2) 尽量避免直接声明全局变量,比如要声明全局变量name,但是它有可能与window.name冲突,所以全局变量一般都会声明在一个全局对象中:var itcast={name:’zxh’,num:10};使用这些全局变量的时候通过itcast.name或者itcast.num,就可以减少与系统的重名了。

 

(3) 当编写大量Js代码的时候难免会遇到命名冲突的问题,这时可以通过模拟命名空间的方式来避免命名冲突。例如:

 

var itcast={};

   var itcast.net={};

   var itcast.net.net0405={name:’zxh’,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 arr=[1,2,’a’,true];

   var p1={name:’zxh’,age:18};//创建对象

(10) 当大量操作dom元素时使用文档碎片,避免多次更新页面。

 

var fragment=document.createDocumentFragment();

四、 实力检测

 

以下是一些练习题(试题来源--传智播客),看你能做出来几个呢

 

(1) 标题栏走马灯效果-->浏览器标题文字向左右滚动

 

(2) 点击一个按钮,被点击的按钮显示“呜呜”,其他按钮显示“哈哈”

 

(3) 十秒钟后协议文本框下的注册按钮才能点击,时钟倒数。

 

(4) 加法计算器。两个文本框中输入数字,点击【=】按钮将相加的结果放到第三个文本框中

 

(5) 点击按钮动态增加网站列表,分两列,第一列为网站的名字,第二列为带网站超链接的网站名。增加三行常见网站。

 

(6) 实现无刷新评论

 

(7) 创建三个输入文本框,当光标离开文本框的时候如果文本框为空,则将文本框背景色设置为红色,如果不为空则为白色

 

(8) 评分控件V1,用一个单行5列的Table做评分控件,监听td的click事件,点击一个td的时候,将这个td及之前的td背景变为红色,之后的td背景变为白色

 

(9) 超链接的单选效果-->页面上若干个超链接,点击一个超链接s的时候被点击的超链接变为红色背景,其他超链接背景没有变

 

(10) 点击按钮,表格隔行变色:偶数行为黄色背景,奇数行为默认颜色

 

(11) 放若干文本框,获得焦点的文本框黄色背景,其他控件背景颜色是白色

 

(12) 点击表格行,被点击的行高亮显示(背景是黄色),其他行白色背景

 

(13) 跟着鼠标飞的图片效果

 

(14) 点击【登录】按钮,弹出一个显示用户名、密码等的层

 

(15) 一幅图片。点击小图,弹出一个层在点击的位置显示小图对应的大图,并且显示姓名、身高等信息,点击层中的关闭按钮关闭层

 

(16) 界面上有几个球队名字的列表,将鼠标放到球队名字上就变为红色背景,其他球队背景颜色为白色,点击一个球队的时候就将点击的球队变为fontSize=30字体

 

(17) 显示数字时钟,时间显示到一个p

 

(18) 有一个搜索文本框,焦点不在文本框中的时候,如果文本框没有值,则文本框中显示灰色文本(Gray)的“输入搜索关键词”,否则显示用户输入的值;焦点在文本框中时如果之前显示“输入搜索关键词”则清空文本框的值,并且将文本修改为黑色

 

(19) 密码的安全级别,密码强度显示

 

(20) 歌曲列表 (CheckBox+Label)全选、全不选、反选

 

(21) 实现省市选择界面。请选择省的处理,从后向前删

 

(22) 权限选择页面,选择、撤回、全部选择、全部撤回

 

(23) 百度搜索时的自动完成功能

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-一周一话题之四(JavaScript、Dom、jQuery全面复习总结<Dom篇>)全部内容,希望文章能够帮你解决javascript代码实例教程-一周一话题之四(JavaScript、Dom、jQuery全面复习总结<Dom篇>)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。