<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<input type="button" values="点击" onclick="alert('hahaha')">
<script>
alert("hello, script");
</script>
</body>
</html>
js基本语法
动态/静态类型是否在编译时确定
弱类型/强类型:类型是否需要强制转换
Java:静态强类型
javascirpt:动态弱类型语言
js:动态弱类型
let:ES6中新增的声明变量的关键字,作用域为该语句所在的代码块内
const声明常量的,声明后不能修改
var:和let应用方式差不多相同
上面都是弱类型,都可以呗强制转换。
数据类型:
number数字.不区分整数和小数,
string字符串类型,字符串字面值需要使用引号引起来,单引号双引号均可,
boolean布尔类型.true真,false假
Iundefined表示变量未初始化.只有唯一的值undefined.
let aa="llll";
console.log(typeof aa);
let bb=10;
console.log(typeof bb);
let bb;
console.log(typeof bb);
let b=20;
let c="20";
console.log(b==c);
console.log(b===c)
==比较值,不校验类型
===值和类型都相等
let arr1=new Array();
console.log(typeof arr1);
let arr2=[1,"2",true,4];
arr2["yhz"]="132"
console.log(arr2);
定义数组有以上两种形式。通过控制台就能看到数据类型为object,可以通过键值对的方式将向数组内插入相应的数据,由于js是弱类型所以他是可以一个数组有多个数据类型的。但是他不会算入length中。
let arr1=new Array();
arr1[5]=0;
console.log(arr1);
console.log(arr1[2])
如果对应的位置没有数据,那么会用undefined来替代。
对象:
let student={
"name":"zhangsan",
"age":18.,
"id":12,
"say":function () {
console.log("hello");
}
}
console.log(student);
console.log(student['say']);
<script> let arr1=[1,2,3,4];
arr1.splice(2,1);//删除
arr1[2]="更改";
console.log(arr1)
</script>
<body>
<button id="button">点击</button>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> -->
<script src="jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){//表示等待页面全部加载完成
$("#button").click(//点击
function(){//函数
$(this).hide() //隐藏
}
);
});
</script>
</body>
点击后就会自动消失。
$(selector).action
选择器 对元素的操作
<body>
<div id="test"><span>我是一个div</span></div>
<input type="text" id="username" value="nihao">
<button id="button">点击</button>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> -->
<script src="jquery-3.7.1.min.js"></script>
<script>
let text=$("#test").text();
console.log(text);
let html=$("#test").html();
console.log(html);
let inputval=$("#username").text();
console.log(inputval);
</script>
</body>
<body>
<p><a href="www.baidu.com" id="bite">百度</p>
<script src="jquery-3.7.1.min.js"></script>
<script>
$("p a").attr("href","www.dogou.com ")
</script>
</body>
网页跳转
let fontSize = $("#cssdemo").css("font-size");//取值
console.log(fontSize);$("#cssdemo").css("font-size","48px");//赋值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
<script src="jquery-3.7.1.min.js"></script>
<script>
$("o1").append("<li>append</li>");
$("ol").prepend("<1i>prepend</li>");
$("ol").after("<div>after</div>")
$("ol").before("<div>before</div>
</script>
</body>
</html>
$("ol").empty();//清空o1元素的内容//
$("ol").remove();//o1标签及子标签全部删除