Web前端开发JavaScript提高(4)

标签：function   处理   网络   lock   名称   stat   利用   tle   match   

JavaScript 一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,并且是被广泛用于客户端的脚本语言,JavaScript最早是在HTML网页上使用,它是属于网络的脚本语言,现在已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果,通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的,现在随着node.js引擎的出现,使得JavaScript逐步成为了一种全栈开发语言了.

JavaScript 面向对象

JS是基于对象的(Object-Based)脚本语言,而不是面向对象(Object-Oriented)中所使用的那个对象,之所以说JS是一门基于对象的编程语言,是因为它没有提供抽象,继承,封装等面向对象语言的很多功能,而是把其他语言所创建的复杂对象统一起来,从而形成一个非常强大的对象系统.

对象是编程语言中很重要的特征之一,JS是基于对象的编程语言,所以支持面向对象的所有特性,灵活使用这些对象能够实现丰富而强大的功能,下面我们首先来看如何创建一个自定义类,代码如下:

上述代码执行后会打印出姓名和年龄,但是这种写法在实例化对象时,系统会为每个对象中均保存了一个相同的print()函数,从而浪费内存,使用原型写法可以解决该问题,改进代码如下:

◆Date 对象◆

Date对象用于处理日期和时间,提供了很多高级的处理方法,可以用来帮助网站制作人员读取和设置日期和时间以及定义日期和时间的显示格式等,在JS中使用Date对象前需要先创建对象实例,然后才可以使用.

读取日期方法: 下面是几个常用的日期获取方法和说明信息,设置日期一般不会用到.

data对象转换: 将获取到的日期时间戳,通过不同的方式展示出来.

◆Math 对象◆

Math对象的方法是编程过程中经常使用的数学函数,如三角函数、平方根、四舍五入等,对象的方法同Math对象的属性一样,属于Math对象本身,在引用这些方法时,直接使用Math而不用使用Math对象的实例名称.

Math常用方法: 一些常用的Math数值计算方法.

◆RegExp 对象◆

正则表达式并非一门专用语言,但也可以看作是一种语言,它可以让用户通过使用一系列普通字符和特殊字符构建能明确描述文本字符串的匹配模式.除了简单描述这些模式之外,正则表达式解释引擎通常可用于遍历匹配,并使用模式作为分隔符来将字符串解析为子字符串,或以智能方式替换文本或重新设置文本格式.正则表达式为解决与文本处理有关的许多常见任务提供了有效而简捷的方式.

正则匹配: 一些常用的正则匹配函数,正则表达式是通用的,请自行百度.

◆Window 对象◆

Window 对象称之为窗口对象,位于浏览器对象模型的最顶层,代表整个浏览器窗口,是Web浏览所有内容的主容器,只要打开一个浏览器窗口,就创建了一个Window对象,即使没有在窗口上显示任何内容.

打开关闭窗口: 利用window.open()打开网页,window.close()关闭打开的网页.

msg.html


    

 网页通知
                
 这是一个通知信息,您可以忽略掉
            
        

index.html


    

弹出提示框: 点击按钮自动弹出Window.alert()提示消息框.

弹出选择框: Window.confirm()弹出一条信息让用户确认,包括确认和取消按钮.

弹出输入框: window.prompt()用于弹出一个输入框,可以让用户输入一些信息.

设置单次定时器: 以下案例,实现当点击删除按钮时,屏幕提示删除成功,在5秒后自动的隐藏标签.

设置循环定时器: setIntercal()设置定时器,clearInterval()清除定时器,定时器用于周期性执行.

JavaScript DOM编程

文档对象模型 (Document Object Model,DOM) 是一种W3C标准所有的现代浏览器都支持DOM,DOM用于HTML和XML文档的编程接口,它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来,DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容.Dom+JavaScript就能使网页动起来,一般使用JQuery来做这事,JQuery封装了JavaScript+Dom变得更为简单,这里我们只需要了解一些基本内容.

◆DOM 查找元素◆

GetElementById: 根据ID号获取一个标签,这种方式是最常用的.

    
 hello world 

    

getElementsByName: 根据自定义标签alex=MyDiv属性获取标签集合.

    
  hello lyshark  

    

getElementsByClassName: 根据class类名称属性获取标签集合.

    
  hello lyshark  

    

getElementsByTagName: 根据标签名name="MyDiv"来获取标签集合.

    
  hello lyshark  

    

◆DOM 标签操作◆

innerText: 该方式只能对单纯的标签进行操作,如果标签中嵌入了其他标签,那么该方式会自动过滤掉标签格式.

    
hello world

    

innerHTML: 该方式不但可以修改文本,还可以同时修改HTML的嵌套标签,修改时应加上标签格式.

    
  hello lyshark  

    

inner 循环修改: 通过使用数组的形式,可以实现循环修改元素,比如以下循环修改name="MyDiv"的所有标签内容.

    
  hello lyshark  
    
  hello lyshark  
    
  hello lyshark  
    
  hello lyshark  

    

CreateElement 创建标签: 使用最原始的方式创建标签,实现在父容器div id=tags中,动态的添加a标签.

◆DOM 属性操作◆

修改类属性: 分别新建两个CSS属性,并通过className方法,实现后期对类属性的修改.

    
 hello world 
   
    

修改标签属性: 修改DIV标签id=MyDiv的标签属性,将name=lyshark修改为name=hello.

    
 hello world 
                

    

修改标签样式: 修改标签的CSS代码的格式,可以修改多个,但是标签中必须存在该字段,否则无法修改.

    
 hello world 

    

伪造表单提交: 自己实现一个submit的表单提交功能,自己定义提交按钮的功能.

    

        
        自定义提交
    
    
    

JavaScript 事件绑定

JavaScript 的事件和事件驱动为网页增添了丰富的交互性,事件是用户在操作浏览器的过程中,由用户触发或由浏览器自身触发的动作,浏览器捕获这些动作,并根据用户编程时设置的对应这些动作的事件处理程序,触发相应的处理过程,从而实现交互过程,浏览器在程序运行的大部分时间都等待交互事件的发生,并在发生时,自动的调用事件处理函数,完成整个处理过程.

◆键盘事件◆

keyDown: 当键盘按下某个键时会触发KeyDown事件,用于浏览器窗体,图像,超链接,文本区域.

keyUp: 当键盘松开某个键时会触发Keyup事件,用于浏览器窗体,图像,超链接,文本区域.

KeyPress: 当键盘上同时按下一个键并且同时弹出,则执行指定的函数.

Resize: 当浏览器窗口或帧的大小发生变化时触发Resize事件.

keycode: 用户在body区域中按下空格键,触发弹出信息框.

◆鼠标事件◆

Click: 鼠标在一个对象上左键点击触发Click事件,对象包括button,document,checkbox,link,radio,submit.

MouseDown&MouseUP: 当我们按下鼠标,系统触发MouseDown事件,释放鼠标时自动触发MouseUP事件.

MouseOver&MouseOut: 鼠标指针到达一个对象之上时,触发MouseOver事件,鼠标离开时触发MouseOut事件.

◆其他事件◆

OnClick: 通用事件,可以绑定到任何可以操作的标签中,当事件触发后,执行对应的函数体.

Focus&Blur: 当屏幕上的光标进入对象区域内时触发focus事件,反之当光标离开时触发blur事件.

Submit(1): 通常和form标记配合使用,其作用是用于送出数据,用户在form中输入数据后,点击Sumbit触发自定义函数.

Submit(2): 通常和form标记配合使用,其作用是用于送出数据,用户在form中输入数据后,点击Sumbit触发自定义函数.

Reset: 通常情况下和form标记配合使用,其起到的作用是,当用户完成信息输入后,按下按钮自动清空已经输入的数据.

Change: 当文本区域中的鼠标指针移离该对象时,若对象内容与原来内容不同,则就会触发Change事件.

Select: 当一个文本框,文本区域对象中的文本被选中时就会触发Select事件,未被选择则不会出现提示框.

Error: 当网页因为某种原因出现错误时就会触发,在错误处理程序中可以绑定操作,该标签常用与,配合.

Web前端开发JavaScript提高(4)

标签：function   处理   网络   lock   名称   stat   利用   tle   match   

原文地址：https://www.cnblogs.com/LyShark/p/11136276.html