JavaScript-DOM(2)】的更多相关文章

8.5 HTML和JavaScript的DOM(三) 一.DOM 是Document Object Model( 文档对象模型 )的缩写. DOM把所有的html都转换为节点 .整个文档 是一个节点 .元素 是节点 元素属性 是节点 .元素内容 是节点 .注释 也是节点 <html> <body> <div id="d1">hello HTML DOM</div> </body> <script> function…
深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 2011-12-28 23:00 by 汤姆大叔, 139489 阅读, 119 评论, 收藏, 编辑 才华横溢的Stoyan Stefanov,在他写的由O'Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会是件很美妙的事情.具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存…
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应某个事件的函数就叫事件处理程序(也叫事件处理函数.事件句柄).事件处理程序的名字以"on"开头,因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload. 为事件指定事件处理程序的方法主要有3种. 1.html事件处理程序 首先,这种方法已经过时了.因…
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaScript事件(三)事件对象 六.事件对象的公共成员 1.DOM中的event的公共成员 event对象包含与创建它的特定事件有关的属性和方法.触发的事件类型不一样,可用的属性和方法不一样.但是,DOM中所有事件都有以下公共成员. 属性/方法 类型 读/写 说明 bubbles Boolean 只读…
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 1.认识事件对象 事件在浏览器中是以对象的形式存在的,即event.触发一个事件,就会产生一个事件对象event,该对象包含着所有与事件有关的信息.包括导致事件的元素.事件的类型以及其他与特定事件相关的信息. 例如:鼠标操作产生的event中会包含鼠标位置的信息:键盘操作产生的event中会包含与按下的键有关的信息.…
在了解DOM(文本对象模型)的框架和节点后,最重要的是使用这些节点处理html网页 对于一个DOM节点node,都有一系列的属性和方法可以使用.常用的有下表. 完善:http://www.w3school.com.cn/xmldom/dom_element.asp 1.访问节点 BOM提供了一些边界的方法访问节点,常用的就是getElementsByTagName(),和getElementById() <script type="text/javascript"> fun…
第18天    ajax技术和javascript加强(json) 复习: B/S架构实现文件上传的思路? 使用a标签实现文件下载功能,有什么问题? 使用Servlet实现文件下载的思路? 今日任务 Ajax技术 javaScript加强(json) 课堂笔记 1.ajax介绍 1.1.什么是ajax 全称:Asynchronous JavaScript And XML(异步 JavaScript 及 XML)     Ajax的作用:实现异步请求的技术.     什么是同步请求? 场景:页面上…
滚轮事件其实就是一个mousewheel事件,这个事件跟踪鼠标滚轮,类似Mac的触屏版. 一.客户区坐标位置 鼠标事件都是在浏览器视口的特定位置上发生的.这个位置信息保存在事件对象的clientX和clientY属性中.所有浏览器都支持者两个属性.clientX和clientY表示事件发生时鼠标指针在视口中的水平和垂直坐标. document.addEventListener('click',function(event){ document.title=event.clientX+' , '+…
一.触摸事件 touchstart:当手指触摸屏幕时触发:即使已经有一个手指放在了屏幕上也会触发. touchmove:当手指在屏幕上滑动时连续地触发.在这个世界发生期间,调用preventDefault()可以阻止滚动. touchend:当手指在屏幕上移开时触发. touchcancel:当系统停止跟踪触摸时触发.关于此事件的确切触发时间,文档中没有明确说明. 上面这几个事件都会冒泡,也都可以取消.虽然这些触摸事件没有在DOM规范中定义,但它们却是以兼容DOM的方式实现的.因此,每个触摸事件…
DOM2级的变动(mutation)事件能在DOM中某一部分发送变化时给出提示.变动事件为XML或HTML DOM设计的,并不特定于某种语言.DOM2级定义了如下变动事件. DOMSubtreeModifined:在DOM结构发生任何变化的时候.这个事件在其他事件触发后都会触发. DOMNodeInserted:当一个节点作为子节点被插入到另一个节点中时触发. DOMNodeRemoved:在节点从其父节点中移除时触发. DOMNodeInsertedIntoDocument:在一个节点被直接插…
介绍 本篇主要是介绍创建对象方面的模式,利用各种技巧可以极大地避免了错误或者可以编写出非常精简的代码. 模式1:命名空间(namespace) 命名空间可以减少全局命名所需的数量,避免命名冲突或过度.一般我们在进行对象层级定义的时候,经常是这样的: var app = app || {}; app.moduleA = app.moduleA || {}; app.moduleA.subModule = app.moduleA.subModule || {}; app.moduleA.subMod…
介绍 昨天发的<大叔手记(19):你真懂JavaScript吗?>里面的5个题目,有很多回答,发现强人还是很多的,很多人都全部答对了. 今天我们来对这5个题目详细分析一下,希望对大家有所帮助. 注: 问题来自大名鼎鼎的前端架构师Baranovskiy的帖子<So, you think you know JavaScript?>. 答案也是来自大名鼎鼎的JS牛人Nicholas C. Zakas的帖子<Answering Baranovskiy’s JavaScript qui…
javascript框架(库)高级JavaScript编程,尤其是复杂的浏览器差异处理,通常是困难和耗时的.为了响应这些调整,出现了许多javascript(helper)库.这些JavaScript库通常被称为JavaScript框架.介绍一些常见的javascript框架:JQuery原型框架所有这些框架都为常见的JavaScript任务提供了功能,包括动画.DOM操作和Ajax处理.JQueryjquery是当前最流行的javascript框架.它使用CSS选择器访问和操作网页上的HTML…
目录 Javascript认识(1) JavaScript 常见事宜 JavaScript介绍 Javascript内容 Javascript书写位置 变量 变量是什么 变量的命名规则 变量提升 数据类型 原始数据类型 引用数据类型/对象定义 数据类型转换 运算符 数学运算符 赋值运算符 关系运算符 逻辑运算符 三元运算符 if,switch条件判断语句 if条件判断 switch 判断语句 if与switch的区别 循环 for循环 for in 循环 while循环 do...while循环…
任务目的 实践JavaScript数组.字符串相关操作 任务描述 基于任务四进行升级 将新元素输入框从input改为textarea 允许一次批量输入多个内容,格式可以为数字.中文.英文等,可以通过用回车,逗号(全角半角均可),顿号,空格(全角半角.Tab等均可)等符号作为不同内容的间隔 增加一个查询文本输入框,和一个查询按钮,当点击查询时,将查询词在各个元素内容中做模糊匹配,将匹配到的内容进行特殊标识,如文字颜色等.举例,内容中有abcd,查询词为ab或bc,则该内容需要标识 任务注意事项 实…
任务目的 学习与实践JavaScript的基本语法.语言特性 练习使用JavaScript实现简单的排序算法 任务描述 基于上一任务 限制输入的数字在10-100 队列元素数量最多限制为60个,当超过60个时,添加元素时alert出提示 队列展现方式变化如图,直接用高度表示数字大小 实现一个简单的排序功能,如冒泡排序(不限制具体算法),用可视化的方法表达出来,参考见下方参考资料 任务注意事项 实现简单功能的同时,请仔细学习JavaScript基本语法.事件.DOM相关的知识 请注意代码风格的整齐…
任务目的 在上一任务基础上继续JavaScript的体验 接触一下JavaScript中的高级选择器 学习JavaScript中的数组对象遍历.读写.排序等操作 学习简单的字符串处理操作 任务描述 参考以下示例代码,读取页面上已有的source列表,从中提取出城市以及对应的空气质量 将数据按照某种顺序排序后,在resort列表中按照顺序显示出来 <!DOCTYPE> <html> <head> <meta charset="utf-8">…
任务目的 在上一任务基础上继续JavaScript的体验 接触一下JavaScript中的高级选择器 学习JavaScript中的数组对象遍历.读写.排序等操作 学习简单的字符串处理操作 任务描述 参考以下示例代码,读取页面上已有的source列表,从中提取出城市以及对应的空气质量 将数据按照某种顺序排序后,在resort列表中按照顺序显示出来 <!DOCTYPE> <html> <head> <meta charset="utf-8">…
任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM中的内容 任务描述 参考以下示例代码,页面加载后,将提供的空气质量数据数组,按照某种逻辑(比如空气质量大于60)进行过滤筛选,最后将符合条件的数据按照一定的格式要求显示在网页上 <!DOCTYPE html> <html> <head> <meta charset=&…
任务目的 JavaScript初体验 初步明白JavaScript的简单基本语法,如变量.函数 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 参考以下示例代码,补充其中的JavaScript功能,完成一个JavaScript代码的编写 本任务完成的功能为:用户可以在输入框中输入任何内容,点击“确认填写”按钮后,用户输入的内容会显示在“您输入的值是”文字的右边 <!DOCTYPE html> <html> <head>…
本文来自汤姆大叔 前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行. 在详细了解这个之前,我们来谈了解一下“自执行”这个叫法,本文对这个功能的叫法也不一定完全对,主要是看个人如何理解,因为有的人说立即调用,有的人说自动执行,所以你完全可以按照你自己的理解来取一个名字,不过我听很多人都叫它为“自执行”,但作者后面说了很多,来说服大家称呼为“立即调用的函数表达式”. 本文英文原文地址:http://benalman.com/news/2010/1…
一.延迟调用 当在一段代码中使用 setTimeout 时,要将一个函数的引用作为它的第一个参数,而将以毫秒表示的时间值作为第二个参数. 但是,传递函数引用的同时无法为计划执行的函数提供参数.可以在代码中调用另外一个函数,由它返回一个对内部函数的引用,再把这个对内部函数对象的引用传递给 setTimeout 函数.执行这个内部函数时要使用的参数在调用返回它的外部函数时传递. var outer = 'in outter'; setTimeout(function () { echo(pclosu…
在这篇文章里,我们讨论函数式编程. 什么是函数式编程?根据百度百科的描述,“函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus).而且λ演算的函数可以接受函数当作输入(参数)和输出(返回值).和指令式编程相比,函数式编程强调函数的计算比指令的执行重要.和过程化编程相比,函数式编程里,函数的计算可随时调用.” 可以看出,在函数式编程中,函数被看做是“一等公民”.JavaScript可以通过巧妙地函数组合来构建抽象,通过内嵌函数的…
在这篇文章里,我们讨论一下JavaScript中的对象.数组以及错误处理. 1. 对象 对象是JavaScript中的一种基本类型,它内部包含一些属性,我们可以对这些属性进行增删操作. 1.1 属性 JavaScript中的值,有时会包括一些与其相关联的值,这些相关联的值,我们称之为属性. 访问属性 下面是一个非常简单的示例: var a = "this is test"; print("type of a:" + typeof a); print(a["…
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaScript事件(三)事件对象 六.事件对象的公共成员 以上内容见javaScript事件(四)event的公共成员(属性和方法) 七.鼠标事件 DOM3级事件中定义了9个鼠标事件. mousedown:鼠标按钮被按下(左键或者右键)时触发.不能通过键盘触发. mouseup:鼠标按钮被释放弹起时触发…
转自:汤姆大叔的博客 前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行.在详细了解这个之前,我们来谈了解一下"自执行"这个叫法,本文对这个功能的叫法也不一定完全对,主要是看个人如何理解,因为有的人说立即调用,有的人说自动执行,所以你完全可以按照你自己的理解来取一个名字,不过我听很多人都叫它为"自执行",但作者后面说了很多,来说服大家称呼为"立即调用的函数表达式". 本文英文原文地址:http:…
JavaScript 字符串(String) 对象 String 对象用于处理已有的字符块. JavaScript 字符串 一个字符串用于存储一系列字符就像 "John Doe". 一个字符串可以使用单引号或双引号: 实例 var carname="Volvo XC60";var carname='Volvo XC60'; 你使用位置(索引)可以访问字符串中任何的字符: 实例 var character=carname[7]; 字符串的索引从零开始, 所以字符串第一…
javascript——处理(获取)浏览器版本.操作系统 /** * Created by Administrator on 15-1-12. */ function BroswerUtil() { } BroswerUtil = { //检测浏览器版本 getBrowserVersion: function () { var agent = navigator.userAgent.toLowerCase(); var arr = []; var Browser = ""; var B…
前两次总结了JavaScript中的基本数据类型(值类型<引用类型>,引用类型<复杂值>)以及他们在内存中的存储,对内存空间有了一个简单的了解,以及第二次总结了this深入浅出的用法,我们知道了this的用法取决于函数四种调用的方式. 这一次我们来对JavaScript中原型以及原型链做一个深入浅出的理解. JavaScript深入浅出系列 1)复杂值vs原始值&&内存空间 - JavaScript深入浅出(一) 2)this的用法 – JavaScript深入浅出…
前两次总结了JavaScript中的基本数据类型(值类型<引用类型>,引用类型<复杂值>)以及他们在内存中的存储,对内存空间有了一个简单的了解,以及第二次总结了this深入浅出的用法,我们知道了this的用法取决于函数四种调用的方式. 这一次我们来对JavaScript中原型以及原型链做一个深入浅出的理解. JavaScript深入浅出系列 1)复杂值vs原始值&&内存空间 - JavaScript深入浅出(一) 2)this的用法 – JavaScript深入浅出…