javaScript
1.JavaScript入门
1.快速入门，引入
1.内部标签
<script>
alert("helloworld");
</script>
2.外部引入
<script src="js/qj.js"></script>
2.浏览器控制台
<script>
// 定义变量 变量类型 变量名 =变量值；
var num =1;
var name="赖敏";
alert(num);
alert(name);
2.条件控制
var score=1;
if(score>1){
if(2>2){
}
alert(true)
}
</script>
3.数据类型
number 不区分小数和整数
字符串
布尔值
逻辑运算
比较运算符
nan与所有的数值都不相等包括自己
浮点数的问题，存在精度问题
<script>
console.log((1/3)===(1-2/3))
</script>
null undefined未定义
数组：一系列相同的数据数据对象，js不需要
var arr=[1,2,3,4,5,hello,null]
4.严格检查模式
<script>
//全局变量
"use strict"
var i=1;
</script>
2.数据类型
1.字符串
1.正常的字符串我们使用单引号护着双引号包裹。
2.注意转义字符
console.log('a\nb');
console.log("a");
3.多行字符串编写
var msg=`cdf fghnh
rebrbtyn
vgtrbnmnb
bnhj`
4.模板字符串。
5.字符长长度,可变性不可变
console.log(str.length)
2.数组
数据可以包含任意的数据类型
var arr=[1,2,3,4,5,6]
undefined
console.log(arr)
Array(6) [ 1, 2, 3, 4, 5, 6 ]
3.对象
var person={
属性名：属性值，
属性名：属性值，
属性名：属性值
}
var person={
name:"laimin",
age:3,
qq:181
}
1.对象赋值
person.name="赖敏"
"赖敏"
2.动态的删减属性
delete person.name
true
person.name
undefined
3.动态的添加,直接给新的属性赋值即可。
person.HH="AHAHHAH"
"AHAHHAH"
person.HH
"AHAHHAH"
3.流程控制
1.if判断
var age=3;
if(age>3){
alert("ahha");
}else {
alert("kuwa")
}
2.循环while
while (age<1000){
age=age+1;
console.log(age)
}
3.for循环
for (let i = 0; i <= 1000; i++) {
console.log(i)
}
4.数组循环
var age=[1,2,3,4,5,6,7,8,8,9];
age.forEach(function (value) {
console.log(value)
4.函数
1.定义函数
绝对值函数
function abs(x) {
if(x>=0){
return x;
}else {
return -x;
}
}
执行return代表方法结束，返回结果！
2.变量的作用域
在js中，var定义的变量是有作用域的、在函数体中声明，则在函数外不可以使用。
'use strict'
function qj() {
var x=1;
x=x+1;
}
x=x+2;
不同函数使用相同的变量名字，不冲突。互相隔离。
function qj() {
var x=1;
x=x+1;
}
function qj2() {
var x=1;
x=x+2;
}
3.方法
var kuangshen={
name:'laimin',
birth:2020,
age:function () {
var now=new Date().getFullYear();
return now-this.birth;
}
}
5.内部对象
1.date
基本使用
<script>
var now=new Date();
now.getFullYear();
now.getMonth();
now.getDate();
now.getDate();
now.getHours();
now.getMinutes();
now.getSeconds();
</script>
2.JSON
在js中一切皆为对象，任何js支持的类型都可以用json来表示。
格式
对象{}
数组[]
var user={
name:"laimin",
age:9,
sex:"男"
}
var jsonUser=JSON.stringify(user)
6.面向对象编程
1.什么是面向对象
js ，java，c#，面向对象
类：模板
对象，具体的实例·
7.操作BOM对象(重点)
BOM：浏览器对象模型
1.location 代表当前页面的URL信息
location
Location http://localhost:63342/JavaScript/lesson02/6.JSON.html?_ijt=4tcfk0o4c4l3el65jo02tr5c27
2.document代表当前的页面
获取cookie
document.cookie
"Hm_lvt_dd4738b5fb302cb062ef19107df5d2e4=1657178140,1657181691,1657185416,1657245955; Hm_lpvt_dd4738b5fb302cb062ef19107df5d2e4=1657245955"
8.操作DOM对象
DOM文档对象模型
-
更新：更新dom节点
-
遍历dom节点：得到dom节点
-
删除：删除一个dom节点、
-
添加：添加一个新的节点
要操作一个dom节点，就必须要获得这个dom节点
追加
<p id="js">javaScript</p>
<div id="list">
<p id="se">javaee</p>
<p id="ee">javase</p>
<p id="me">javaMe</p>
</div>
<script>
var js =document.getElementById('js');
var list =document.getElementById('list');
9.操作表单
文本框，下拉框，单选框，多选框，隐藏域，密码框
表单得目的：用来提交信息。
<form action="post">
<span>用户名：</span><input type="text" id="username">
</form>
<script>
var input=document.getElementById('username')
</script>
10.jQuery
Java和jQurey得关系
cdn引入引入jQuery
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script></head>
<body>
<a href=""id="test-jquery">点我</a>
<script>
$('#test-jquery').click(function () {
alert('hello,jquery');
})
</script>
</body>
</html>
jQurey选择器
事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script></head>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
mouse:<span id="mouseMove"></span>
<div id="divMove">
在这里移动试一试
</div>
<script>
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:'+e.pageX+'y'+e.pageY)
})
});
</script>
</body>
</html>
版权声明：本文为我是秃头小宝贝！！！原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。