<!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标签及子标签全部删除
练习
完成上述文章
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言板</title>
<style>
.container {
width: 350px;
height: 300px;
margin: 0 auto;
/* border: 1px black solid; */
text-align: center;
}
.grey {
color: grey;
}
.container .row {
width: 350px;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.container .row input {
width: 260px;
height: 30px;
}
#submit {
width: 350px;
height: 40px;
background-color: orange;
color: white;
border: none;
margin: 10px;
border-radius: 5px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>留言板</h1>
<p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
<div class="row">
<span>谁:</span> <input type="text" name="" id="from">
</div>
<div class="row">
<span>对谁:</span> <input type="text" name="" id="to">
</div>
<div class="row">
<span>说什么:</span> <input type="text" name="" id="say">
</div>
<input type="button" value="提交" id="submit" onclick="submit()">
<!-- <div>A 对 B 说: hello</div> -->
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
function submit(){
//1. 获取留言的内容
var from = $('#from').val();
var to = $('#to').val();
var say = $('#say').val();
if(from==''||to==''|say==''){
return;
}else {
var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";
$(".container").append(divE);
$('#from').val("");
$('#to').val("");
$('#say').val("");
}
}
</script>
</body>
</html>
注意再写js的时候,记得在$()内用''来引用选择器否则会得不到值。
1.HTML是一种超文本标记语言,主要用于页面内容的显示和排版.如果需要更漂亮的样式展示和页面效果,需要搭配CSS和JavaScript来使用
2.学习HTML主要是学习标签,HTML的标签特别多,了解基本语法即可
3.CSS重点是学习CSS的选择器使用
4.JavaScript是一个脚本语言,和Java没有关系.JQuery是一个JavaScript框架,使用JQuery可以轻松地选择和操作HTML元素,提高我们的开发效率,
5.前端开发对于后端开发人员而言不是很重要,不必花费过多时间在这个上面.达到借助网络能阅读代码的水平即可