来源:自学PHP网 时间:2015-04-14 14:51 作者: 阅读:次
[导读] JavaScript语句向浏览器发出命令。语句的作用是告诉浏览器该做什么其中分号,语句之间的分割是分号,注意:分号是可选项,有时候看到不以分号隔开的。JavaScript是按照编程顺序执行的...
JavaScript语句向浏览器发出命令。语句的作用是告诉浏览器该做什么其中分号,语句之间的分割是分号,注意:分号是可选项,有时候看到不以分号隔开的。
JavaScript是按照编程顺序执行的
标识符: JavaScript标识符必须以字母、下划线或美元符号开始JavaScript的关键字是不能使用的 JavaScript对大小写非常敏感 JavaScript会忽略多个空格的情况 JavaScript的变量: 变量是存储信息的“容器”如:var x=10; 数据类型 string、number、boolean、array、object、null和未定义 可以通过赋值为null的方式清除变量 var string=“fdjkaf” var flag=true; var arr=[]; var arr=new Array(); 运算符号: 算数:+,-,*,%,/++,-- 赋值运算符:=,+=,-=,*=,/=,%= 字符串操作 比较运算符:==,===(必须满足类型是相同的),!=,!==(必须满足类型是不相同的),>,<,>=,<= 逻辑运算符:&&、||、! 条件运算符:a与b的关系 ? 条件1 : 条件2; 例子-> i=100,j=10;i+j=? <script> function mysum(){ var i=100; var j=10; var m=i+j document.getElementById("sumid").innerHTML=m; } </script> 条件语句if...else和switch和C语言一样,其中switch语句不要忘了写break;来进行判断中断 for循环: for(var i=0;i<7;i++){ } 还有其他形式: var i=[1,2,3,4,5,6]; var j; for(j in i){ 遍历i中的元素 } while和do...while循环和C语言一样,跳转语句:break、continue、return,JavaScript的函数部分与C也一样 JavaScript的异常捕获: try{ 异常代码块 }catch(err){ 对异常的处理 } throw可以创建自定义的错误,通过throw直接抛出异常,不用catch处理 JavaScript的事件监听: onClick 单击事件 onMouseOver 鼠标经过事件 onMouseOut 鼠标移出事件 onChange 文本内容改变事件 onSelect 文本框选中事件 onFocus 光标聚集事件 onBlur 移开光标 onLoad 网页加载事件 onUnload 关闭网页事件 JavaScript DOM对象 HTML DOM:当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model) DOM操作HTML: 改变页面中所有的HTML元素、属性、CSS样式和页面中的所有事件作出反应->改变HTML输出流:绝对不要在文档加载完成之后使用document.write().这会覆盖前面书写的文档 寻找元素:可以通过id找到HTML元素,或者通过标签名找到HTML元素 改变HTML内容:使用属性->innerHTML 改变HTML属性:使用属性attribute->document.getelementbyid.属性 = 新的属性 DOM EventListener: 方法-> addEventListener();指定元素添加事件句柄 removeEventListener();移出方法添加的事件句柄
事件流->描述的是在页面中接收事件的顺序 事件冒泡->由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档)事件的捕获->最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 事件处理: HTML事件处理->直接添加到HTML结构中 DOM0级事件处理->把一个函数赋值给一个事件处理程序属性 DOM2级事件处理->addEventListener(“事件名”,“事件处理函数”,“布尔值”); 其中布尔值的取值有着不同的含义:true事件捕获,false事件冒泡 removerEventListener();则是一处事件的监听如果是IE浏览器,则IE事件处理程序:attachEvent detachEvent 事件对象:在出发DOM事件的时候都会产生一个对象 事件对象event(常用)属性及常用方法 1、type获取事件类型 2、target获取事件目标 3、stopProgragation()阻止事件冒泡 4、preventDefault()阻止事件默认行为 JavaScript对象: JavaScript中的所有事物都是对象:字符串,数值,数组,函数等等 每个对象带有属性和方法,JavaScript允许自定义对象 自定义对象-> 1定义并创建对象实例 2使用函数来定义对象,然后创建新的对象实例 e.g.1 people = new Object(); people.name = ""; people.age =""; e.g.2 people = { name:""; age:"";}; e.g.3 function people(name,age){ this.name = name; this.age = age; } temp = new people("xxx",30); JavaScript的字符串对象,有很多对字符串操作的方法:如:length(),indexOf(),match(),repelace("原来参数","要修改的内容") 大小写转换toUpperCase(),toLowerCase() 字符串转换为数组 e.g. var str2 = "hello,shuai,ge"; var s = str2.split(",");//将str2通过逗号将其分割成为数组 Date对象:日期对象用于处理日期和时间 获得当日的日期 Array对象也有很多的方法:contact()合并数组 sort()排序 push()末尾追加元素 reverse()数组元素翻转 a.sort()默认升序排序 a.sort(function(a,b){ return a-b;//升序排列 }) a.sort(function(a,b){ return b-a;//降序排列 }) Math对象abs(),round(),max(),min() DOM对象控制HTML 常用方法-> getElementById() getElementByName()获取name getElementByTagName()获取元素 **(byName和ByTagName获取的是一个相同名称标签的一个数组集合) getAttribute()获取元素属性setAttribute()设置元素属性 childNodes()访问子节点 parentNode()访问父节点 createElement()创建元素节点 createTextNode()创建文本节点 insertBefore()插入节点 removeChild()删除节点 offsetHeight网页尺寸不包含滚动条,其次除了高度还有宽度的相应的设置 scrollHeight网页尺寸
例子 1.动态的插入元素function addElement(){ var body = document.body; var input = document.createElement("input"); input.type = "button"; input.value = "按钮"; body.appendChild(input); } 2.获取网页的尺寸 var w = document.body.offsetWidth|| document.documentElementWidth; 3.创建节点与插入节点 fuction insertNode(){ var div = document.getElementById("div"); var node = document.getElementById("pid"); var newnode = document.createElement("p"); newnode.innerHTML = "动态创建一个P元素"; div.insertBefore(newnode,node); } JavaScript的浏览器对象: window对象是BOM的核心,window对象指当前的浏览器窗口 所有JavaScript全局对象、函数以及变量均自动成为window对象的成员 全局变量是window对象的属性 全局函数是window对象的方法 甚至HTML DOM的document也是window对象的属性之一 window对象尺寸->window.innerHeight浏览器的内部高度/宽度,innerWidth window方法open(),close()打开/关闭窗口 JS浏览对象-计时器 计时事件->通过使用JavaScript,可以在一个设定的时间间隔之后来执行代码,而不是在函数被调用之后立即执行,这个称之为计时事件。 计时的方法-> setInterval()间隔指定的毫秒数不停地执行指定的代码 clearInterval()方法用于停止上述的方法
setTimeout()暂停指定的毫秒数后执行指定的代码 clearTimeout()方法用于停止上述的方法
var mytime = setInterval(function(){ time(); },delay的时间毫秒级) function time(){ var d = new Date(); var t = d.toLocalTimeString(); document.getElementById("ptime").innerHTML = t } JS浏览器对象-History对象 window.history对象包含浏览器的历史url的集合 Histroy方法 back()与在浏览器点击后退按钮相同 forward()与在浏览器中点击按钮向前相同 go()进入历史中的某个页面 Location对象 window.location对象用于获取当前页面的地址url,并把浏览器重定向到新的页面 Location对象的属性 location-> hostname返回web主机的域名 pathname返回当前页面的路径和文件名 port返回web主机的端口 protocol返回所使用的web协议 href属性返回当前页面的url assign()方法加载新的文档 Screen对象-> window.screen对象包含有关用户屏幕的信息 screen.availWidth可用的屏幕宽度 screen.availHeight可用的屏幕高度 screen.Height屏幕高度 screen.Width屏幕宽度 通过以上的属性可以进行很好的屏幕适配的工作 详解JS的面向对象 e.g. 如何创建类-》 function People(){ } People.prototype.say = fucntion(){ } 如何继承-》 fucntion Student(){} Student.prototype = new People(); JS类的封装 (fucntion(){ fucntiuon People(){ } window.People = People;//这样外界通过window的顶 层来访问到People对象 }()) function Person(){ var _this = {}; _this.say = fucntion(){ alert("nihao"); } return _this; } 上述代码的含义:通过方法Person,在其内部首先创建了一个空的_this对象,然后通过fucntion的来定义其对象中的一个方法,最后将创建好的_this对象返回,这样一个对象就创建好了。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com