web前端javascript+jquery知识点总结

Javascript

javascript 在前端网页中占有非常重要的地位，可以用于验证表单，制作特效等功能，它是一种描述语言，也是一种基于对象（Object）和事件驱动并具有安全性的脚本语言 ，语法同java类似，是一种解释性语言，边执行边解释。

JavaScript的组成：

1. ECMAScipt 用于描述: 语法，变量和数据类型，运算符，逻辑控制语句，关键字保留字，对象。
2. 浏览器对象模型（Browser Object Model,BOM）用于同HTML的交互，如弹出一个警示框，询问框，输入框…
3. 文档对象模型（Document Object Model,DOM）用于操作HTML的文档节点如鼠标，键盘，的移动按下的触发事件。

基本语法

<script type="text/javascript">

//Jacascript 语句  <!-- 可将script语句写入此处，忽略浏览器差异！ -->

document.write("初学JavaScript");
document.write("<h1>Hello,Javascript</h1>");

<script>

type=“text/javascript” 在HTML5中可以省略

执行原理

解析HTML标签和JavaScript然后浏览器向服务器发送请求包含js的请求页面，服务器解析完成后返回包含js的响应页面给客户端。
优点：客户端只需下载一次包含js的页面，减少不必要的网络通信，由浏览器客户端执行，减轻服务器的压力。

引用方式

1.内部js文件

<script>  js语句  </script>	

2 外部引入js文件

<script src='文件路径'></script> //通常放入body中页面内容后面

3 直接写入到HTML标签中

<input name="btn" type="button" οnclick="javascript:alert("你好！")">

核心语法

//变量声明 变量名命名规则同理java可以有 下划线和美元符号 开头不能是数字
//js是弱类型语言但区分大小写，没有具体的数据类型，由所赋值判断类型
//不支持不声明变量直接使用，可以同时声明多个变量之间用逗号隔开

var 变量名；  或 var 变量名=值；

数据类型

undefined (未定义类型)
null (空类型)
number (数值类型)
String (字符串类型)
boolean (布尔类型)

typeof(变量名或值)； //返回数据类型

数组

javascript中数组也是具有相同数据类型的一个或多个值的集合，使用下标区分数组张的每一个值，下标从0开始。

var 数组名=new Array(size);
数组名[0]=2020; ...[1][2][..size]
var 数组名=new Array(2020,1213,...);
var 数组名=[2020,1213...];

javascript中的运算符，逻辑控制，循环结构 同理java的使用方式。

注释

单行注释： // 注释内容
多行注释：/* 注释内容 */

资料

javascript的关键字保留字汇总：点我查看.

javascript的语法,命名规则,数据类型,常用对象详解:点我查看.

javscript程序调试语法排错：点我查看.

javascript常用函数及方法使用：点我查看.

函数

javascript常用系统函数：

将原始值转成数字的函数：
parseInt(“以数字开头的字符串”); 返回一个整数或NaN
parseFloat(“以数字开头的字符串”); 返回一个保留两位浮点数或NaN
isNaN(a); 判断a是否为数值类型 是数值为false 不是为true

<script>
	//定义一个javascript函数 也可以加参数函数名（参数1，...）
	function 函数名(){
	//javascript语句
	}
	
	//调用函数
	事件名=函数名();
	
</script>

JavaScript中的变量作用域也分级别，同理java就近原则，局部变量>全局变量

javascript常用的事件使用方法：点我查看.

javascript的Window对象:点我查看.

javascript的Localtion对象：点我查看.

javscript的History对象: 点我查看.

javscript的Document对象: 点我查看.

javascript的定时函数：点我查看.

javscript的DOM操作: 点我查看.

javascript的面向对象知识汇总：点我查看.

其他知识：查看API.

---

jQuery

jQuery时JavaScript的程序库之一，是JavaScript对象和实用函数的封装，它
极大的简化了代码量编写简单且跨浏览器的兼容性。

Jquery的用途

1 访问和操作DOM元素
2 控制页面样式
3 对页面事件的处理
4 方便使用JQuer插件
5 与Ajax技术的完美结合

Jquery的优势

1 轻量级
2 强大的选择器
3 出色的DOM封装
4 可靠的事件处理机制
5 出色的浏览器兼容
6 隐式迭代
7 丰富的插件支持

jQuery语法结构

工厂函数： $(); 美元符号等价于jQuery();
选择器 selector $(); 使用标签，id,类，后代选择器选择一个页面元素
方法 action(); 比如 click()，mouseover(),mouseout()…

直接上资料---------↓

jQuery的DOM对象和jQuery对象转换：点我查看.

jQuery选择器汇总：点我查看.

jQuery的事件函数用法：点我查看.

jQuery的动画(扩展)：点我查看.

使用jQuery操作DOM知识点: 点我查看.

使用jQuery操作DOM案例：点我查看.

表单校验部分基于Javascript校验方式：点我查看.

表单校验部分基于HTML5新特性校验方式：点我查看.

正则表达式内容大全：点我查看.

常见的表单校验正则表达式大全：点我查看.

其他资料：查看API.

艰苦的把它整理完了 ，不容易！
标注： 本文多数转载于其他作者资料，在此感谢此文章中转载的这些原创作者！

---