Javascript
javascript 在前端网页中占有非常重要的地位,可以用于验证表单,制作特效等功能,它是一种描述语言,也是一种基于对象(Object)和事件驱动并具有安全性的脚本语言 ,语法同java类似,是一种解释性语言,边执行边解释。
JavaScript的组成:
- ECMAScipt 用于描述: 语法,变量和数据类型,运算符,逻辑控制语句,关键字保留字,对象。
- 浏览器对象模型(Browser Object Model,BOM)用于同HTML的交互,如弹出一个警示框,询问框,输入框…
- 文档对象模型(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.
艰苦的把它整理完了 ,不容易!
标注: 本文多数转载于其他作者资料,在此感谢此文章中转载的这些原创作者!