JS中关于clientWidth、offsetWidth、scrollWidth

JS中关于clientWidth offsetWidth scrollWidth 等…

网页可见区域宽：document.body.clientWidth;

网页可见区域高：document.body.clientHeight;

网页可见区域宽：document.body.offsetWidth (包括边线的宽);

网页可见区域高：document.body.offsetHeight (包括边线的宽);

网页正文全文宽：document.body.scrollWidth;

网页正文全文高：document.body.scrollHeight;

网页被卷去的高：document.body.scrollTop;

网页被卷去的左：document.body.scrollLeft;

网页正文部分上：window.screenTop;

网页正文部分左：window.screenLeft;

屏幕分辨率的高：window.screen.height;

屏幕分辨率的宽：window.screen.width;

屏幕可用工作区高度：window.screen.availHeight;

屏幕可用工作区宽度：window.screen.availWidth;

Js中的Parent对象

Js中的Parent对象文章分类:Web前端该变更永远指分割窗口最高层次的浏览器窗口。如果计划从分割窗口的最高层次开始执行命令，就可以用top变量。 parent：该变量指的是包含当前分割窗口的父窗口。如果在一个窗口内有分割窗口，而在其中一个分割窗口中又包含着分割窗口，则第2层的分割窗口可以用parent变量引用包含它的父分割窗口。 opener：指用WINDOW.OPEN等方式创建的新窗口对应的原窗口。附：Window对象、Parent对象、Frame对象、Document对象和Form对象的阶层关系：Windows对象→Parent对象→Frame对象→Document对象→Form对象，如下：parent.frame1.document.forms[0].elements[0].value; 问题：在一个页面嵌入框架，然后在框架中使用javascript脚本：parent.xx.value='xxxxx'; 在IE中可以正常看到赋值，但是在firefox中则不能完成赋值。请问在firefox中调用父框架的对象应该是哪个，是否和IE兼容？解答：window.parent.document.form名.xx.value='xxxxx'; window可省略。 parent.document.form 名.xx.value='xxxxx'; parent.document.getElementById("xx").value='xx xxx'; window.parent与window.opener的区别 javascript调用主窗口方法 1： window.parent 是iframe页面调用父页面对象举例: a.html <html> <head><title>父页面</title></head> <body> <form name="form1" id="form1"></p><h2>javaScript重点知识总结</h2><p>1、JavaScript 显示数据 JavaScript 可以通过不同的方式来输出数据：使用window.alert()弹出警告框。使用document.write()方法将内容写到HTML 文档中。使用innerHTML写入到HTML 元素。使用console.log()写入到浏览器的控制台。实例： document.getElementById("demo").innerHTML = "段落已修改。"; document.write("<h1>这是一个标题</h1>");//write可以直接写入格式！ 2、JavaScript 数据类型 var length = 16; // Number 通过数字字面量赋值var points = x * 10; // Number 通过表达式字面量赋值var lastName = "Johnson"; // String 通过字符串字面量赋值var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值 var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW"; 3、JavaScript事件</p><p>HTML 事件可以是浏览器行为，也可以是用户行为。以下是HTML 事件的实例： HTML 页面完成加载。 HTML input 字段改变时。 HTML 按钮被点击。右图是常见的事件(前面都有on) 事件有三种写法，举onclick为例： <button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button> <button onclick="this.innerHTML=Date()">现在的时间是?</button> <button onclick="displayDate()">现在的时间是?</button> //后面再写函数实现方式。 4、JavaScript 字符串 var carname = "Volvo XC60"; var character = carname[7]; //字符串的索引从0 开始 JavaScript本身对单引号还是双引号没有区别。一般都用双引号，两个都存在时，再考虑。</p><h2>js对象属性方法查询手册</h2><p>windows对象每个HTML文档的顶层对象. 属性 frames[] 子桢数组.每个子桢数组按源文档中定义的顺序存放. feames.length 子桢个数. self 当前窗口. parent 父窗口(当前窗口是中一个子窗口). top 顶层窗口(是所有可见窗口的父窗口). status 浏览器状态窗口上的消息. defaultStatus 当status无效时,出现在浏览器状态窗口上的缺省消息. name 内部名,为由window.open()方法打开的窗口定义的名字. wind ows方法 alert("message") 显示含有给定消息的"JavaScript Alert"对话框. confirm("message") 显示含有给定消息的"Confirm"对话框(有一个OK按钮和一个Cancel按钮).如果用户单击OK返回true,否则返回false. prompt("message") 显示一个"prompt"对话框,要求用户根据显示消息给予相应输入. open("URL","name") 打开一个新窗口,给予一个指定的名字. close() 关闭当前窗口. setInterval() 定时 clearInterval() 清楚定时器 document对象含有当前文档信息的对象. 属性 title 当前文档标题,如果未定义,则包含"Untitled". location 文档的全URL. lastModified 含有文档最后修改日期. bgColor 背景色(#xxxxxx) fgColor 前景文本颜色. linkColor 超链接颜色. vlinkColor 访问过的超链颜色. alinkColor 激活链颜色(鼠标按住未放时). forms[] 文档中form对象的数组,按定义次序存储. forms.length 文档中的form对象数目.</p><h2>js常用总结</h2><p>JavaScript的内部对象： (1) Object (2) String (3) Math (4) Date (5) toString JavaScript 代码放在另一个单独的文件里，然后在网页（HTML文件）中使用“SRC= 此单独文件的路径/地址（URL）”来使用此单独文件里的JavaScript 程序代码。一般将这个单独的文件保存为扩展名为.JS 的文件： <script src="mycode.js"></script> JS - 常用語句 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是: document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是: window->(navigator,screen,history,location,document) 5.得到表单中元素的名称和值: document.getElementById("表单中元素的ID号").name(或value) 6.一个小写转大写的JS: document.getElementById("output").value=document.getElementById("input").value.toUpperCa se(); 7.JS中的值类型: String,Number,Boolean,Null,Object,Function 8.JS中的字符型转换成数值型: parseInt(),parseFloat() 9.JS中的数字转换成字符型: ("" 变量) 10.JS中的取字符串长度是: (length) 11.JS中的字符与字符相连接使用号. 12.JS中的比较操作符有: == 等于,!=不等于,>,>=,<.<= 13.JS中声明变量使用: var 来进行声明 14.JS中的判断语句结构: if(condition){}else{} 15.JS中的循环结构: for([initial expression];[condition];[upadte expression]) {inside loop} 16.循环中止的命令是: break 17.JS中的函数定义:</p><h2>个人心得javascript总结模板</h2><p>个人心得javascript总结模板个人心得javascript总结模板篇一：个人心得javascript总结 1、javascript 是一种基于对象，和事件驱动的并具有安全性的脚本语言；基于对象，动态语言，无需编译，直接解释执行； 2、可以放在的地方； A、中，一对之间； B、单独文件中 C、将脚本程序代码作为属性值、javascript 3、保留字以及关键字； 4、javascript基本语法： 4.1 标识：大小写字母，数字，下划线，和美元符号：不能以数字开头； 4.2 javascript严格区分大小写 4.3 每条语句必须以分号结束；（不写，一般没事，但是可能会引起不必要的歧义） 4.4 多行注释**单行注释： 4.5 Function test(){ Var i=100;不加var 就会自动变成全局变量，这样在以后会产生冲突；</p><p>Alert(i); } Test(); 5、数据类型：(数字，boolean，String字符串；日期什么的是对象了) 特殊值：NaN，Infinity，函数isNaN（）；isFinite（）； Boolean，取值只能是true，和false 全是小写逻辑运算符 var a=100; var b=0; var c=a||b; alert(c);返回值是100：就是当两边返回值都是false时，返回第一个或最后一个不为false的值； 6、什么值在javascript中是false？逻辑运算中，0，“”，false，null，undefined，NaN均表示false 6.1想要赋个默认值：怎么办？ function test(e){ e=e||new object(); if(https://www.360docs.net/doc/0a2131592.html,!='ang'){ alert(e);}} test(3); 看这里： Var sth=test;相当于将函数赋给一个变量，这个变量之后可以传参运行</p><h2>javascript笔记总结</h2><p>DAY01 基本使用什么是javascript 发展历史 javascript组成ECMAScript+BOM+DOM 使用<script></script>标签 document.write方法注释使用引入js文件的方式 <script>标签的属性原样输出标签的内容变量的定义var （弱类型）变量命名规则(变量名应做到见名知意) alert方法的介绍变量的类型变量的计算关键字</p><p>保留字类型的转换赋值操作关系运算位运算(扩展) ?var num= 25 & 3; //1 ?var num= 25 | 3; //27 ?var num = 2<< 3; //16 ?var num = 4^3; // 代码规范问题将加法的案例改为可以做加减乘除、求余五种运算作业 ?今天课堂所有的例子代码，照敲两遍 ?入职薪水10K，每年涨幅5%，50年后工资多少？ ?为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？ ?小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。提示：摄氏度与芈氏度的转换公式为：摄氏度= 5/9.0*(华氏度-32) DAY02 基本使用逻辑运算 ?&& 与、|| 或、! 否自增、自减 ?++a, a++ ?--a, a--</p><p>十进制、八进制、十六进制(扩展) ?var num = 100; ?var num= 070; ?var num= 079; //非八进制 ?var num= 0xA;var box = 0x1f; ?var num= 0.8; ?var num = .8; //不好的习惯，不推荐此写法，虽然有不少人这样写?var num = 12.0; //这样写会自动转为整数12，为了节省内存 ?var num = 4.12e9; //科学计数法 NaN ?注意：因为NaN代表非数字，它不等于任何值，也不能做运算，即使alert(NaN == NaN); 结果也是false ?isNaN(num)函数，该函数判断num变量的值是否是NaN Number()函数，可以将任意类型尝试转换为数字 Object类型(简单了解) 程序的三大结构 ?顺序结构 ?选择结构</p><h2>js内置对象属性及方法</h2><p>1.Date 属性(1):constructor 所建立对象的函数参考 prototype 能够为对象加入的属性和方法方法(43):getDay() 返回一周中的第几天(0-6) getYear() 返回年份.2000年以前为2位,2000(包含)以后为4位 getFullYear() 返回完整的4位年份数 getMonth() 返回月份数(0-11) getDate() 返回日(1-31) getHours() 返回小时数(0-23) getMinutes() 返回分钟(0-59) getSeconds() 返回秒数(0-59) getMilliseconds() 返回毫秒(0-999) getUTCDay() 依据国际时间来得到现在是星期几(0-6) getUTCFullYear() 依据国际时间来得到完整的年份 getUTCMonth() 依据国际时间来得到月份(0-11) getUTCDate() 依据国际时间来得到日(1-31) getUTCHours() 依据国际时间来得到小时(0-23) getUTCMinutes() 依据国际时间来返回分钟(0-59) getUTCSeconds() 依据国际时间来返回秒(0-59) getUTCMilliseconds()依据国际时间来返回毫秒(0-999) getTime() 返回从1970年1月1号0:0:0到现在一共花去的毫秒数 getTimezoneoffset() 返回时区偏差值,即格林威治平均时间(GMT)与运行脚本的计算机</p><p>所处时区设置之间相差的分钟数) parse(dateString) 返回在Date字符串中自从1970年1月1日00:00:00以来的毫秒数 setYear(yearInt) 设置年份.2位数或4位数 setFullYear(yearInt)设置年份.4位数 setMonth(monthInt) 设置月份(0-11) setDate(dateInt) 设置日(1-31) setHours(hourInt) 设置小时数(0-23) setMinutes(minInt) 设置分钟数(0-59) setSeconds(secInt) 设置秒数(0-59) setMilliseconds(milliInt) 设置毫秒(0-999) setUTCFullYear(yearInt) 依据国际时间来设置年份 setUTCMonth(monthInt) 依据国际时间来设置月(0-11) setUTCDate(dateInt) 依据国际时间来设置日(1-31) setUTCHours(hourInt) 依据国际时间来设置小时 setUTCMinutes(minInt) 依据国际时间来设置分钟 setUTCSeconds(secInt) 依据国际时间来设置秒 setUTCMilliseconds(milliInt)依据国际时间来设置毫秒 setTime(timeInt)设置从1970年1月1日开始的时间.毫秒数 toGMTString()根据格林威治时间将Date对象的日期(一个数值)转变成一个GMT时间字符串,如:Weds,15 June l997 14:02:02 GMT toUTCString()根据通用时间将一个Date对象的日期转换为一个字符串 toLocaleString()把Date对象的日期(一个数值)转变成一个字符串,使用所在计算机上配置使用的特定日期格式 toSource()显示对象的源代码</p><h2>『总结』JS常用方法与片段</h2><p>『总结』JS常用方法与片段 1.javascript删除元素节点IE中有这样一个方法:removeNode()，这个方法在IE下是好使的，但是在Firefox等标准浏览器中就会报错了removeNode is not defined，但是在核心JS中有一个操作DOM节点的方法叫：removeChild()。我们可以先去找到要删除节点的父节点，然后在父节点中运用removeChild来移除我们想移除的节点。我们可以定义一个方法叫removeElement：function removeElement(_element){ var _parentElement = _element.parentNode; if(_parentElement){ _parentElement.rem oveChild(_element); }}2.js sort方法根据数组中对象的某一个属性值进行升序或者降序排列/**数组根据数组对象中的某个属性值进行排序的方法* 使用例子：newArray.sort(sortBy('number'),false) //表示根据number属性降序排列;若第二个参数不传递，默认表示升序排序* @param attr 排序的属性如number属性* @param rev true表示升序排列，false降序排序* */ sortBy: function(attr,rev){ //第二个参数没有传递默认升序排列if(rev == undefined){ rev = 1; }else{ rev = (rev) ? 1 : -1; }</p><p>return function(a,b){ a = a[attr]; b = b[attr]; if(a return rev * -1; } if(a > b){ return rev * 1; } return 0; } }3.charCodeAt()用法：charCodeAt() 方法可返回指定位置的字符的Unicode 编码。这个返回值是0 - 65535 之间的整数语法：stringObject.charCodeAt(index) index参数必填，表示字符串中某个位置的数字，即字符在字符串中的下标。注：字符串中第一个字符的下标是0。如果index 是负数，或大于等于字符串的长度，则charCodeAt() 返回NaN。例如：var str='Hello world!'document.write(str.charCodeAt(1))//结果：1014.js 页面刷新location.reload和location.replace的区别小结reload 方法，该方法强迫浏览器刷新当前页面。语法：location.reload([bForceGet]) 参数：bForceGet，可选参数，默认为false，从客户端缓存里取当前页。true, 则以GET 方式，从服务端取最新的页面, 相当于客户端点击F5(“刷新”)replace 方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来</p><h2>JavaScript面向对象简介</h2><p>JavaScript面向对象简介 JavaScript 的核心是支持面向对象的，同时它也提供了强大灵活的OOP 语言能力。本文从对面向对象编程的介绍开始，带您探索JavaScript 的对象模型，最后描述 JavaScript 当中面向对象编程的一些概念。复习JavaScript 如果您对JavaScript 的概念（如变量、类型、方法和作用域等）缺乏自信，您可以在重新介绍JavaScript这篇文章里学习这些概念。您也可以查阅这篇JavaScript 1.5 核心指南。面向对象编程面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。它使用先前建立的范例，包括模块化，多态和封装几种技术。今天，许多流行的编程语言（如Java，JavaScript，C＃，C+ +，Python，PHP，Ruby 和Objective-C）都支持面向对象编程（OOP）。面向对象编程可以看作是使用一系列对象相互协作的软件设计，相对于传统观念，一个程序只是一些函数的集合，或简单的计算机指令列表。在OOP中，每个对象能够接收邮件，处理数据和发送消息给其他对象。每个对象都可以被看作是一个独立的小机器有不同的作用和责任。面向对象程序设计的目的是促进更好的编程灵活性和可维护性，并在大型软件工程中广为流行。凭借其十分注重的模块化，面向对象的代码开发更简单，往后维护更容易理解，使其自身能更直接的分析，编码，理解复杂的情况和过程，比非模块化编程方法省事。1</p><p>术语 Namespace 命名空间允许开发人员在一个专用的名称下捆绑所有功能代码的容器。 Class 类定义对象的特征。 Object 对象类的一个实例。 Property 属性对象的特征，比如颜色。 Method 方法对象的能力，比如行走。 Constructor 构造函数实例化时调用的函数。 Inheritance 继承一个类可以继承另一个类的特征。 Encapsulation 封装类定义了对象的特征，方法只定义了方法如何执行。 Abstraction 抽象结合复杂的继承，方法，属性，一个对象能够模拟现实的模型。 Polymorphism 多态多意为‘许多’，态意为‘形态’。不同类可以定义相同的方法或属性。更多关于面向对象编程的描述，请参照维基百科的面向对象编程。原型编程</p><h2>JS中的event 对象详解</h2><p>1.JS中的event 对象详解标签：firefox文档ienullscroll浏览器 2012-09-24 15:38 368人阅读评论(0) 收藏举报分类： javascript（9） Event属性和方法： 1. type：事件的类型，如onlick中的click； 2. srcElement/target：事件源，就是发生事件的元素； 3. button：声明被按下的鼠标键，整数，1代表左键，2代表右键，4代表中键，如果按下多个键，酒把这些值加起来，所以3就代表左右键同时按下；（firefox中 0代表左键，1代表中间键，2代表右键） 4. clientX/clientY：事件发生的时候，鼠标相对于浏览器窗口可视文档区域的左上角的位置；(在DOM标准中，这两个属性值都不考虑文档的滚动情况，也就是说，无论文档滚动到哪里，只要事件发生在窗口左上角，clientX和clientY都是 0，所以在IE中，要想得到事件发生的坐标相对于文档开头的位置，要加上 document.body.scrollLeft和 document.body.scrollTop) 5. offsetX,offsetY/layerX,layerY：事件发生的时候，鼠标相对于源元素左上角的位置； 6. x,y/pageX,pageY：检索相对于父要素鼠标水平坐标的整数； 7. altKey,ctrlKey,shiftKey等：返回一个布尔值； 8. keyCode：返回keydown何keyup事件发生的时候按键的代码，以及keypress 事件的Unicode字符；(firefox2不支持 event.keycode，可以用 event.which替代 ) 9. fromElement,toElement：前者是指代mouseover事件中鼠标移动过的文档元素，后者指代mouseout事件中鼠标移动到的文档元素； 10. cancelBubble：一个布尔属性，把它设置为true的时候，将停止事件进一步起泡到包容层次的元素；(e.cancelBubble = true; 相当于 e.stopPropagation();) 11. returnValue：一个布尔属性，设置为false的时候可以组织浏览器执行默认的事件动作；(e.returnValue = false; 相当于 e.preventDefault();) 12. attachEvent(),detachEvent()/addEventListener(),removeEventListener：为制定</p><h2>js创建对象的几种方式及JSON</h2><p>js中的json对象默认分类2010-07-16 17:13:32 阅读730 评论0 字号：大中小订阅使用JSON进行数据传输一、选择的意义在异步应用程序中发送和接收信息时，可以选择以纯文本和XML 作为数据格式。为了更好的使用ajax,我们将学习一种有用的数据格式JavaScript Object Notation（JSON），以及如何使用它更轻松地在应用程序中移动数据和对象。JSON是一种简单的数据交换格式，在某些方面，它的作用与XML非常类似，但比XML更为简单，JSON的语法简化了数据交换的难度，而且提供了一种伪对象的方式。 Java的对象< - >JavaScript对象(json数据格式) 二、JSON 基础简单地说，JSON 可以将JavaScript 对象中表示的一组数据转换为字符串（伪对象），然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从Web 客户端传递给服务器端程序。这个字符串看起来有点儿古怪（稍后会看到几个示例），但是JavaScript 很容易解释它，而且JSON 可以表示比名称/值对更复杂的结构。例如，可以表示数组和复杂的对象，而不仅仅是键和值的简单列表。关于JSON对象 1、使用JavaScript语法创建对象 //定义一个函数，作为构造函数 fucntion person(name,sex) { https://www.360docs.net/doc/0a2131592.html,=name; this.sex=sex; } //创建一个实例 var p=new Person(‘张三’,’男’); //输出Person实例 alert(https://www.360docs.net/doc/0a2131592.html,); 注意：通过该方式创建的对象是一般的脚本对象 2、从JavaScript1.2开始创建对象有了一种更快捷的语法(Json的语法)，如下： var obj={name:"张三","sex":'男'}; alert(obj.sex); 关于数组 1、早期的JavaScript数组 var arr=new Array(); arr[0]=’a’; arr[1]=’bbc’ 我们也可以通过如下方式创建数组 var arr=new Array(‘a’,’bbc’); 2、使用JSON语法，则可以通过如下方式创建数组 var arr=[‘a’,’bbc’]; 简单JSON 示例按照最简单的形式，可以用下面这样的JSON 表示名称/值对：</p><h2>JS知识点总结</h2><p>JS知识点总结一、对象 1、JS的本地对象和内置对象 Array 创建Array对象的语法： new Array(); new Array(size); new Array(element0,element1,element2,...elementn); 属性： constructor length属性可设置或返回数组中元素的数目 arrayObject.length; prototype 方法： concat();方法用于连接两个或多个数组 arrayObject.concat(arrayX,arrayX,...,arrayX); join();方法用于把数组中的所有元素放入一个字符串。 arrayObject.join(separator); pop();方法用于删除并返回数组的最后一个元素 arrayObject.pop(); push();方法可向数组的末尾添加一个或多个元素，并返回新的长度 arrayObject.push(newelement1,newelement2,...,newelementn) ; reverse();方法用于颠倒数组中元素的顺序 arrayObject.reverse(); shift();方法用于把数组的第一个元素从其中删除，并返回第一个元素的值 arrayObject.shift(); slice();方法可从已有的数组中返回选定的元素 arrayObject.slice(start,end); sort();方法用于对数组的元素进行排序 arrayObject.sort(sortby); sortby规定排序顺序，必须是函数 splice();方法向/从数组中添加/删除项目，然后返回被删除的项目 arrayObject.splice(index,howmany,item1,...,itemX); toSource(); toString(); toLocaleString();将数组转为本地字符串 arrayObject.toLocaleString(); unshift();方法可向数组的开头添加一个或更多元素，并返回新的长度 arrayObject.unshift(newelement1,...newelementn);</p><h2>JAVASCRIPT常用对象参考</h2><p>JavaScript常用对象参考分类：WEB2008-08-2116:09160人阅读评论(0)收藏举报 JavaScript常用对象参考 Math document body selection window screen location history Date String Event Math对象 E返回欧拉常数e的值 LN1010的自然对数的值 LN22的自然对数的值 LOG2E基数为2的e的对数的值 LOG10E基数为10的e的对数的值 PI圆周率pai的值:3.14159265358979 SQRT1_2返回0.5的平方根 SQRT2返回2的平方根 abs(number)计算number的绝对值 cos(number)计算余弦值 acos(number)计算反余弦值 sin(number)计算正弦值 asin(number)计算反正弦值 tan(number)计算正切值 atan(number)计算反正切值 atan2(x,y)根据指定的坐标返回一个弧度值 ceil(number)返回大于或等于number的整数 floor(number)返回小于或等于number的整数 exp(value)计算以e为基数的value次方的值 log(value)是exp(value)的反方法 max(num1,num2,…)返回两个或多个参数中的最大值 min(num1,num2,…)返回两个或多个参数中的最小值 pow(m,n)计算m的n次方 random()生成0到1的随机数[0,1).生成n到m之间的随机数n+(m-n)*Math.random() round(number)取整(四舍五入) sqrt(number)开平方运算 document write() writeln() open()"打开文档以收集write或writeln方法的输出:document.open([sURL][,sName][,sFeatures][bReplace]) sName:_blank,_media,_parent,_search,_self,_top sURL:可选项,字符串表达式,用于指定打开文档或窗口的URL地址sFeatures:可选项,字符串表达式,用于指定打开窗口的属性sReplace:true or false;" sFeatures:fullscreen,height,width,left,top,location,resizable,scrollbars,status,toolbar close()关闭输出流 createElement(tag)根据指定标记创建一个HTML标签getElementById(id)获得指定id的HTML元素removeChild(e)移除一个指定的子元素e replaceChild(new,e ) 用new元素替换子元素e appendChild(e)增加一个子元素e(最后) insertBefore(new,e ) 在子元素e前面插入一个new元素</p><h2>js实训报告</h2><p>Javascript实训报告专业名称:计算机应用技术班级名称：应用班学员姓名：指导教师：_______________ 完成日期：2014年6月18日</p><p>一、简介： Web标准并不是一个单一的标准，而是一个系列的标准的集合。Web标准中具有代表性的几种语言有：XML可扩展标记语言、XHTML 可扩展超文本标记语言、CSS层叠样式表、DOM文档对象模型、JavaScript脚本程序设计语言等。本次实训主要是学习JavaScript框架，是轻量级的js库，它兼容CSS3，还兼容各种浏览器(IE6.0+,FF 1.5+, Safari 2.0+, Opera 9.0+)。使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。本次实训的目的是通过对JavaScript的学习，学会使用HTML标记语言，通过CSS对页面的布局，在HTML基础上，使用JavaScript 开发交互式动态Web网页。能够熟练使用JavaScript语言，让网页能够动态显示，美观大方。二、实训目的： 1.掌握并练习javaScript的基本语法 2.熟悉javaScript编程环境Aptana 3.练习选择结构语句的应用 4.练习显示时间的应用三、实训内容： 1、HTML</p><p>HTML文件是可以被多种网页浏览器读取，产生网页传递各类资讯的文件。从本质上来说，Internet（互联网）是一个由一系列传输协议和各类文档所组成的集合，html文件只是其中的一种。这些HTML文件存储在分布于世界各地的服务器硬盘上，通过传输协议用户可以远程获取这些文件所传达的资讯和信息。网络浏览器，例如Netscape Navigator或Microsoft Internet explorer,能够解释HTML文件来显示网页，这是网络浏览器的主要作用。当你使用浏览器在互联网上浏览网页时，浏览器软件就自动完成HTML文件到网页的转换。 2、CSS CSS是层叠样式表的简称。为了弥补HTML在显示属性上的不足，W3C协会制定了这一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式，并增加了新的概念，例如类、层等，还可以对文字进行重叠、定位等操作。它提供了更为丰富多彩的样式；同时CSS可集中进行样式管理。另外，CSS允许将样式定义单独存储于样式文件中，这样就可以进行样式管理，不仅便于样式管理，还可以在多个HTML文件共享样式定义。一个HTML文件允许引用多个不同的CSS样式文件中的样式定义。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。</p><h2>js的面向对象的三大特征</h2><p>◆js的面向对象的三大特征 1.封装性所谓封装，就是把我们抽象出的属性和对属性的操作写到类的定义中，称为封装. js 中实现封装主要有两种封装( 公开，私有) class Person(name,sal){ https://www.360docs.net/doc/0a2131592.html,=name; //公开 var sal=sal;//私有 this.showInfo=function(){ //公开 window.alert(https://www.360docs.net/doc/0a2131592.html,+””+sal); } showInfo2(){ //把函数私有化. window.alert(“你好”+https://www.360docs.net/doc/0a2131592.html,+””+sal) } } ◆通过构造函数添加成员方法和通过原型法添加成员方法的区别 1.通过原型法分配的函数是所有对象共享的. 2.通过原型法分配的属性是独立.(如果你不修改属性，他们是共享) 3.建议，如果我们希望所有的对象使用同一一个函数，最好使用原型法添加函数，这样比较节省内存. function Dog(){ this.shout=function(){ } } //原型法 Dog.prototype.shout=function (){ window.alert("小狗尖叫"+https://www.360docs.net/doc/0a2131592.html,); } //通过原型也可以给每个对象，分配属性 Dog.prototype.color="red";</p><p>var dog1=new Dog("aa"); var dog2=new Dog("bb"); if(dog1.shout==dog2.shout){ window.alert("dog1.shout==dog2.shout"); } dog1.color="黑色"; window.alert(dog1.color+" "+dog2.color); 4.请大家看一个题: function Person(){ } // 创建对象 var p1=new Person(); // p1.say(); [错误] // 这时用原型法分配 Person.prototype.say=function(){ window.alert("ok"); } p1.say(); 结论是类.prototype.函数=function (){}; 称为后置绑定. js面相对象的继承看一段代码->问题是什么? ①对象冒充代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/></p><h2>js总结</h2><p>Js学习笔记 js的数据类型:number(数字和浮点型) string 字符串 undefined 未定义的 object 对象数组 null 空字符串 boolean true和false 正则：var reg=/pattern/；两种写法 var reg=new RegExp(pattern);括号内为规则 reg.exec(str);检索字符串内是否有规则内的字符串 reg.test(str);检查该字符串是否有规则内的字符串，有为true没有为false；正则常用通配符 . 可以匹配任何字符 \d 匹配0-9的所有数字 \D 匹配非数字 \s 所有空白字符 \S 所有非空字符 \w 所有单词字符，0-9‘26个英文字母和下划线’ \W 所有非单词字符 \b 单词边界单词的开头和结尾</p><p>\B 非单词边界 [abc] 查找方括号之间的任何字符 [^abc]查找任何不在方括号之间的字符 [0-9]查找任何从0至9的数字 [a-z]查找任何从小a-z的字符 [A-Z] [A-z] (red|blue|green)查找任何指定的选项正则表达式量词 n+ 匹配任何包含至少一个n的字符串 n* 匹配任何包含零个或多个n的字符串 n? 匹配零个或一个n的字符 n{x} 匹配包含x个n的序列 n{x,y} 匹配包含x或y个n的序列字符串n{x,}匹配包含至少x个n的序列的字符串x$ 匹配任何结尾为n的字符串 ^n 匹配任何开头为n的正则表达式修饰符 i 执行对大小写不敏感的匹配</p><p>g执行全局匹配（查找所有匹配而非再找到第一个匹配后停止）m 执行多行匹配 var reg=/^[0-9a-zA-Z_-]+@[0-9a-zA-Z_-]+\.(com|cn|org)/; alert (reg.test("qwww@https://www.360docs.net/doc/0a2131592.html,")); var str="wwww"; var reg=/\bc/; alert(reg.test(str)); js 分支语句if和switch语句 switch（表达式）{ case 值：break; } 循环 while循环do while (先执行后判断)</p><h2>项目中用到的JS总结</h2><p>JS: （1）去掉标签的某个属性： $("#ZHTMC").removeAttr("placeholder"); （2）添加属性： $("#ZHTMC").attr("disabled", "disabled"); （3）控件被移除：$(“#Submint”).remove(); （4）控件被隐藏：$(“#Submit”).hide(); （5）控件显示：$(“#Submit”).show(); （2）escape()该函数对字符串进行编码，这样就可以在所有的机器上读取该字符串（例如汉字，特殊字符-）。只能用于传递文本比较短的参数例如名字，编号等，如果传递的文本过长就会超出浏览器规定的限制，报错，如果传递的文本过长就必须换方式传递，例如传递GUID，通过GUID 进行查询数据库得到要显示的参数；（3）取得Combobox的值：$(“#Name”).combobox(“getValue”); （4）得到数字文本框numberbox的文本： $(“#number”).numberbox(“getValue”); (5)取得redioButton 的值：$(“input[name=?female?]:check”).val() (6)获取DataGrid的整个列表的数据：$(“#grid”).datagrid(“getData”); （7）重新加载DataGrid： $(“#grid”).datagrid(“reload”);//(刷新列表) （8）不需要刷新Datagrid更新某个状态： Var selectedRow=$(“#grid”).datagrid(“getSelected”);//得到选</p><h2>javascript学习总结</h2><p>Javascrip基础与实践教程（电子工业出版社）一、j avascrip语言概述 1.ECMAScript是许多软件厂商对JavaScript的统一标准； 2.服务器端和客户端JavaScript共享相同的核心语言。但也有些不同，如客户端封装了额外的特性，只与在浏览器中运行JavaScript有关的预定义对象。服务器端JavaScript则封装了只与在服务器上运行JavaScript有关的预定义对象和函数； 3. 二、J avascrip程序设计基础 1.注释：html的为<!-- ;javascript为“//”和“/* */” 2.数据类型：基本数据类型（数值型、字符串型和布尔型、空值null、未定义undefined）和引用数据类型(数组、函数、对象等); 3.null一般对对象；undefined：（1）使用了一个未声明的变量（2）已经声明但还没有赋值的变量（3）使用了并不存在的对象属性时； 4.类别转换：（1）基本数据类型转换String()、Number()、Boolean()；(2)提取整数 parseInt(numString,[radix])；(3)提取浮点数的parseFloat(numString)方法；（4）计算表达式eval(codeString); 5.流程控制：for….in语句；with（对象）{ 语句组}语句； 6. 7. 8. 三、面向对象的Javascrip 目前对象编程分为面向对象（全部对象封装、继承、多态）和基于对象（以部分对象的特性使用对象）； JavaScript是基于对象的； JavaScript对象的属性和方法可以灵活的添加即创建完对象以后，可以添加和删除对象的属性和方法； 1.创建对象（1）使用new运算符和构造函数内置Oject(),Array(),Date()</p></div> <div class="rtopicdocs"> <div class="coltitle">相关主题</div> <div class="relatedtopic"> <div id="tabs-section" class="tabs"> <ul class="tab-head"> <li id="9030810"><a href="/topic/9030810/" target="_blank">js总结</a></li> <li id="1575115"><a href="/topic/1575115/" target="_blank">js中的三大对象详解</a></li> </ul> </div> </div> </div> </div> <div id="rightcol" class="viewcol"> <div class="coltitle">相关文档</div> <ul class="lista"> <li><a href="/doc/ad6498466.html" target="_blank">学习javascript总结</a></li> <li><a href="/doc/172076694.html" target="_blank">个人心得javascript总结模板</a></li> <li><a href="/doc/393397113.html" target="_blank">js总结</a></li> <li><a href="/doc/518746931.html" target="_blank">HTML,CSS,JS比较总结</a></li> <li><a href="/doc/8618543585.html" target="_blank">Javascript学习心得</a></li> <li><a href="/doc/db2291152.html" target="_blank">(报告)js实训报告总结范文</a></li> <li><a href="/doc/2d5277434.html" target="_blank">js逻辑运算总结</a></li> <li><a href="/doc/444826454.html" target="_blank">个人心得javascript总结</a></li> <li><a href="/doc/7c8389298.html" target="_blank">js学习报告</a></li> <li><a href="/doc/9213723048.html" target="_blank">个人心得JAVASCRIPT总结</a></li> <li><a href="/doc/0c18159783.html" target="_blank">js常用总结</a></li> <li><a href="/doc/f714941284.html" target="_blank">JavaScript基础知识总结(一)</a></li> <li><a href="/doc/249737247.html" target="_blank">js实训报告</a></li> <li><a href="/doc/542471372.html" target="_blank">2020年JS实训报告总结范文</a></li> <li><a href="/doc/8a12856427.html" target="_blank">来电弹屏项目JS总结</a></li> <li><a href="/doc/d3786290.html" target="_blank">javaScript知识点总结</a></li> <li><a href="/doc/272334128.html" target="_blank">『总结』JS常用方法与片段</a></li> <li><a href="/doc/3613059374.html" target="_blank">javascript学习总结</a></li> <li><a href="/doc/6f16508549.html" target="_blank">js学习心得体会</a></li> <li><a href="/doc/9c7972054.html" target="_blank">js函数总结</a></li> </ul> <div class="coltitle">最新文档</div> <ul class="lista"> <li><a href="/doc/0f19509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li> <li><a href="/doc/0119509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li> <li><a href="/doc/9b19184372.html" target="_blank">自然教育课件</a></li> <li><a href="/doc/3019258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li> <li><a href="/doc/d819211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li> <li><a href="/doc/a419240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li> <li><a href="/doc/9d19184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li> <li><a href="/doc/8a19195909.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/8519195910.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/7f19336998.html" target="_blank">高中语文基础知识点总结大全</a></li> <li><a href="/doc/7119336999.html" target="_blank">超详细的高中语文知识点归纳</a></li> <li><a href="/doc/6619035160.html" target="_blank">高考语文知识点总结高中</a></li> <li><a href="/doc/6719035161.html" target="_blank">高中语文知识点总结归纳</a></li> <li><a href="/doc/4a19232289.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/3b19258758.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/2619396978.html" target="_blank">高中语文知识点归纳(大全)</a></li> <li><a href="/doc/2b19396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li> <li><a href="/doc/1419338136.html" target="_blank">高中语文基础知识点整理</a></li> <li><a href="/doc/ed19066069.html" target="_blank">化工厂应急预案</a></li> <li><a href="/doc/bd19159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li> </ul> </div> </div> <script> var sdocid = "01b833a8fd0a79563c1e728a"; </script> <div class="clearfloat"></div> <div id="footer"> <div class="ft_info"> <a href="https://beian.miit.gov.cn">闽ICP备16038512号-3</a> <a href="/tousu.html" target="_blank">侵权投诉</a>  ©2013-2023 360文档中心,www.360docs.net | <a target="_blank" href="/sitemap.html">站点地图</a><br /> 本站资源均为网友上传分享，本站仅负责收集和整理，有任何问题请在对应网页下方投诉通道反馈 </div> <script type="text/javascript">foot()</script> </div> </body> </html>