JavaScript
1、在HTML中加入JavaScript的方式
①内联
例:
<script type="text/javascript">
alert("事例");
</script>
运行结果:
②外部
例:
//HTML代码
<script src="js/asd.js" type="text/javascript" charset="utf-8"></script>
//css代码
alert("事例");
运行结果同上
2、变量
与java中不同的是不需要声明具体类型,并且都是使用var声明不需要每个类型用不同的声明方法
3、数据类型
Number 数字类型
var a = 123;
BigInt 数字类型可以很大的数字
var a = 11111111111111111; ``
String 字符串
var a = "我是字符串";
Boolean 布尔
var a = true;
Object 对象
Array 数组
Function 方法
RegExp 正则
Date 时间
JSON json字符串
Undefined 空
Null 空
4、程序控制语句
1.分支语句
与java中一样的swith,if语句
var a = 2;
switch(a){
case 1:
alert("你好")
break;
case 2:
alert("我不好")
break;
case 3:
alert("我很好")
break;
default:
alert("套你猴子")
break;
}
if(a < 5){
alert("你赢了")
}else{
alert("你输了")
}
运行结果:
2.循环语句
与java中不一样的是for each
var a = ["a","s","d","f","g","h"];
for ( m in a){
alert(a[m]);
}
运行结果:
5、对象
①自定义对象
定义function,使用new关键字创建对象
//定义function相当于在java中创建一个类
function person = (name, age, sex){
this.name = name,
this.age = age,
this.sex = sex
}
//new一个对象和java中一样但不需要用类名声明对象类型
var oneperson = new person("赵丽颖", 25,"女");
//在控制台打印对象与java中system.out.printly
console.log(oneperson);
运行结果
{}定义
var otherperson = {
"name" : "许嵩",
"职业" : "歌手",
"兴趣爱好" : "创作",
"age" : 28
}
console.log(otherperson);
运行结果
②内置对象
window
document
cookie
dody
screen
location
history
6、函数
①获取函数参数
常规方法
和在java中一样在函数内直接使用即可
通过内置对象arguments获取
x = findMax(1, 123, 500, 115, 44, 88);
//通过arguments获取参数求参数中的最大值
function findMax() {
var i,
//获取下标为0的参数
max = arguments[0];
if(arguments.length < 2) return max;
for (i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
console.log(x);
运行结果
②自调用函数
函数表达式可以 “自调用”。自调用表达式会自动调用。如果表达式后面紧跟 () ,则会自动调用。不能自调用声明的函数。通过添加括号,来说明它是一个函数表达式:
(function myfunction(a,b,c){
console.log(a + b + c);
})(1,2,3);
运行结果:
7、事件,定时器
事件:
onchange HTML元素改变
onclick 用户点击 HTML 元素
onblur 元素失去焦点时触发
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onload 浏览器已完成页面的加载
onkeydown 用户按下键盘按键
定时器:
setInterval
setTimeout
8、jQuery
① jQuery的引入方式
通过添加script scr引入
<script type="text/javascript" src="js/jquery.js"></script>
②基础语法
$(selector).action()
$定义jQuery
selector选择索要操作的HTML元素(选择器的用法和css的用法基本一致)
$("#container") id选择器
$(".container") 类选择器
$(“image”) 标签选择器
action()对选中元素所要进行的操作
③事件
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload | |
hover |
④遍历
祖先遍历
parentsUntil() 方法
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
$(document).ready(function(){
$("span").parentsUntil("div");
});
jQuery parents() 方法
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 ()。
$(document).ready(function(){
$("span").parents();
});
jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
$(document).ready(function(){
$("span").parent();
});
后代遍历
jQuery children() 方法
children() 方法返回被选元素的所有直接子元素。
//返回每个 <div> 元素的所有直接子元素:
$(document).ready(function(){
$("div").children();
});
find() 方法
find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
//返回属于 <div> 后代的所有 <span> 元素:
$(document).ready(function(){
$("div").find("span");
});
同胞遍历
siblings方法:返回所有同胞元素
next方法:返回被选元素的下一个元素
nextAll方法:返回被选元素后的所有同胞元素
nextUntil方法:返回两个元素之间的所有同胞元素
⑤AJAX方法
AJAX 是一种与服务器交换数据的技术,可以在不重新载入整个页面的情况下更新网页的一部分。
下面连接列出了所有的 jQuery AJAX 方法:AJAX
9、EasyUI
EasyUI是一套前端框架。 它封装jQuery、Vue等前端JS框架,另外它还提供了一套完善的UI组件,比如窗体、表单、表格、树、进度条、手风琴菜单…主要用来做一些公司内部使用的管理系统, 因为它提供了丰富的组件,可以直接拿来使用, 降低了后台系统开发的时间。但是它的UI不是特别美观,不建议用来做和客户交互的系统界面。
使用步骤
-
下载 EasyUI
-
引入EasyUI相关的JS、CSS
<head>
<link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="css/themes/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script src="js/locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"> </script>
</head>
-
需要有个标签
如
//使用datagrid组件需要添加: <table id="xxx"></table> //或者指定样式 <table id="xxx" class="easyui-datagrid"></table>
10、LayUI
使用步骤:
-
引入LayUI相关的JS、CSS
<head> <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/> <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script> </ head>
-
添加样式或者引入JS模块
主要组件和详情:LayUI