JavaScript的基础用法

最新推荐文章于 2021-01-14 08:29:01 发布

TangSongYMQ

最新推荐文章于 2021-01-14 08:29:01 发布

阅读量229

点赞数

本文链接：https://blog.csdn.net/TangSongYMQ/article/details/100602358

版权

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>

主要组件和详情:
Easyui英文
 Easyui中文

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

TangSongYMQ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的基础用法

JavaScript1、在HTML中加入JavaScript的方式①内联例：<script type="text/javascript"> alert("事例");</script>运行结果：②外部例：//HTML代码<script src="js/asd.js" type="text/javascript" charset="utf-8"&g...
复制链接

扫一扫