js

<!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.前端开发对于后端开发人员而言不是很重要，不必花费过多时间在这个上面.达到借助网络能阅读代码的水平即可