浙江铃声推荐联盟

JavaScript and jQuery

掘安技术小组研究室2018-11-08 14:13:02

今天给大家介绍的是JavaScript和jQuery的简单认识,只是初步了解,后面会发布JavaScript的教程和jQuery的教程,本章是让你初步了解JavaScript和jQuery是何物。



教程链接

http://www.vkxx.top/content/uploadfile/201805/43341525187906.zip




认识JavaScript



 JavaScript 是网景(Netscape)公司开发的一种基于客户端浏览器、基于面向对象、事件驱动式的网页脚本语言。

 JavaScript语言的前身叫作Livescript,于1995年11月末与sun公司联合宣布吧其名改名为JavaScript

 JavaScript是属于web的语言,它适用于PC、笔记本电脑、平板电脑和移动电话。

 JavaScript的正式名称是“ECMAScripe”。这个标准由ECMA组织发展和维护。ECMA-262是正式的JavaScript标准。这个标准基于JavaScript(Netscape)和JScript(Microsoft)。


1.0  JavaScript特点

1.JavaScript是一种解释性脚本编写语言

2.JavaScript是基于对象的脚本编程语言

3.简单性

4.安全性

5.动态性

6.跨平台性


1.0.1  JavaScript作用

主要作用体现在:交互式操作、表单验证、网页特效、web游戏、服务器脚本开发(少)、客户端脚本开发(多)等。

 

1.1  JavaScript架构

HTML中使用JavaScript的语法很简单,将<script>标签嵌入到JavaScript的程序当中即可。

基本架构如下:

<script type=”text/javascript”>
   <!-- JavaScript代码 -->
</script>

JavaScript代码一般用于放在HTML的<head> </head>中。

想要网页按照一定的顺序进行显示,可以将JavaScript写在<body></body>里面。

通过在<head>中指明JavaScript的文件链接也是可以的(跟css文件指明链接一样)。


1.2 JavaScript对象与函数

JavaScript和HTML的整合是通过事件处理过程(event handle)完成的,也就是先对对象设置事件的函数,当事件发生时,指定的函数就会被调用运行。

每个对象都有属于自己的事件(event)、方法(method)以及属性(property)


1.2.1 对象

JavaScript是基于对象(object-based)的语言。

W3c发布了一个api,为HTML与xml文件使用的,称为文档对象模型(document object model,DOM)。

其中定义了网页文件架构,此架构以window为顶层,window包含了许许多多的对象。

Id、name属性或一些对象的集合就能获取对象,并且使用对应的属性。


1.2.2 属性

属性(property)的表示方法:

对象名称.属性


1.2.3 函数

函数为程序一段代码,用函数名将其包括起来,可以被不同的对象或者事件重复调用。

而使用函数则必须知道定义函数的方法与输入自变量,以及返回何种结果。

操作函数:定义函数  调用函数。

定义函数的方法如下:

Function 函数名 (输入自变量){
  程序代码
  Return (返回值)//可省略
}

定义函数后,可以调用函数根据情况输入自变量,方法如下:

<button onclick=”
函数名(自变量);”>

以事件(event)来调用函数,当事件被触发时,对应的函数就会被调用运行。

Onclick为单击事件,以上的代码意思为当button按钮被点击时,会调用对应函数。


1.3 javaScript事件

人们在网页上的动作JavaScript都可以检测到,而这种动作在JavaScript的定义中称为事件。

事件(event)是用户的操作或者系统发出的信号。

特定动作会产生特定事件,就可以使用特定的程序进行处理,这种模式称为事件处理(event handling),而处理其事件的过程称为事件处理过程(event handler)。

以下是JavaScript常用的事件处理过程


常用的鼠标事件:

onclick单击鼠标左键触发
ondbclick双击鼠标左键触发
onmousedown单击任意一个鼠标按键是触发
onmouseout鼠标指针移出一个元素边界时触发
onmousemove鼠标在某个元素上移动是持续触发
onmouseup松开鼠标任意一个按键时触发
onmouseover鼠标指针移到一个元素上时触发


常用的键盘事件:

onkeydown按下键盘上某个按键时触发,一直按会持续触发
onkeyup释放某个按键时触发
onkeypress按下某个按键并产生字符时触发,忽略shift等功能键


HTML事件:

onload页面完全加载后在window对象上触发
onunload页面完全卸载后在window对象上触发
onselect选择了文本框的一个或多个字符时触发
onchange文本框失去焦点时,并且在它获取焦点后内容发生过改变时触发
onsubmit单击“提交”按钮时在表单form上触发
onfocus任何元素或窗口获得焦点是触发
onblur任何元素或窗口失去焦点时触发


小小提醒

当网页程序代码多时,每个组件要加入事件控制,需要回到script编写事件函数,就会特别麻烦,为此有一个函数addEventListener() 注册事件的处理函数,语法如下:

id
名.addEventListener(“事件名”,函数名)

希望addEventListener()在网页加载时就执行,只要将函数指定在window的onload事件中触发即可,语法如下:

<script type=”text/javascript”>
  window.onload=function(){
id名.addEventListener(“事件名”,函数名);
Function 函数名(){
  <!-- 函数事件的代码 -->
}
}


认识jQuery


jQuery是一套开放原始代码的JavaScript函数库,可以说是当前最受欢迎的JS函数库,在2018的编程语言排行版上的地位也是靠前地位。

jQuery简化了DOM文件的操作,可以轻松选择对象以及制定CSS属性值,简介的程序完成想做的事情。


2.0  引用jQuery的方式有两种

1.调用已下载的JS文件

2.使用CDN(content delivery network)来加载链接库

jQuery的JS文件点击下载:http://www.vkxx.top/content/uploadfile/201805/43341525187906.zip


第二种则将jQuery的cdn链接加入到网页HTML的<head>之间即可,语法如下:

<script src=”http://code.jquery.com/jquery-1.10.2.min.js”> </script>


2.1  jQuery的基本结构

jQuery必须等到浏览器加载HTML的DOM对象之后才能执行,可以通过ready()方法来确认DOM是否已经全部加载。

这也是为了防止在完全加载(就绪)之前就运行jQuery代码/函数,导致可能操作失败。

所以,jQuery函数要位于ready函数中。

简单的写法为:

$(function(){
  //jQuery代码编写...
}


1.1.1  jQuery的基本语法

$
(选择器). 操作();


2.2  jQuery选择器

jQuery选择器用来选择HTML组件,通过HTML标签名、id名和class名等来取得组件。

接下来是三种常用选择器的语法:


2.2.1  标签选择器

标签选择器通过html的标签名来取得组件,语法如下:

$
(“标签名”)


2.2.2  ID选择器

ID选择器通过组件的id属性来取得组件,语法如下:

$
(“#id名”)


2.2.3  class选择器

Class选择器通过组件的class属性来取得组件,语法如下:

$
(“.class名”)

通过选择器来进行对组件的事件调用



作者白芈奈,学习过程中有什么不懂可以联系作者QQ:1076091215.

网络安全方面的知识会在后面的学习完成后写成教程。请注意,这里的教程只是你学习过程的一个阻力,一个热爱学习的人,永远都不可以只极限于一个教程或者一个书或者一个笔记。



  • 本篇文章的编号是 :16,在公众号聊天窗口输入编号直达本文

  • 输入m获取文章目录

  • 获取更多资源加入信息安全技术交流QQ群:551711121,有小姐姐和小哥哥等你来撩哦!(加入本群可以获得免费新手入门指导以及将来想从事信息安全的工作指导)