针对开发新人的小mode

最新推荐文章于 2024-05-06 18:26:11 发布

七咲丶愛

最新推荐文章于 2024-05-06 18:26:11 发布

阅读量85

点赞数

文章标签： javascript 前端 html css

本文链接：https://blog.csdn.net/qq_37942894/article/details/126985804

版权

包含有$(document).ready和window.onload的区别，css的优先级，onclick和click的区别，基础css和js的认知

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:s="http://alfa2.io/thymeleaf"
  xml:lang="ja" lang="ja">
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body {
	background-color:#d0e4fe !important;
}
h1 {
	color:orange;
	text-align:center;
}
p {
	font-family:"Times New Roman";
	font-size:20px ;
}
.p1 {
	color:#7DBAE5;
	font-size:22px;
}
.wd150 {
  width: 150px;
}
</style>
	<link rel="stylesheet" media="all" type="text/css" href='https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css' />
</head>
<body>
	<p id="demo" class="p1" style="font-size:25px" >这是一个段落</p>
	input1:<input id="input1" style="font-size:25px"/><br/>
	input2:<input id="input2" style="font-size:25px"/><br/>
	<img src="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&hs=0&pn=4&spn=0&di=7117150749552803841&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=1945464906%2C1635022113&os=784249295%2C168466126&simid=4065346618%2C644183129&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E5%9B%BE%E7%89%87&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg%26refer%3Dhttp%3A%2F%2Fwww.2008php.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Dauto%3Fsec%3D1666341869%26t%3D05351c5605f3cf0149b11da0ed4a50e9&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bdaabrir_z%26e3Bv54AzdH3Fp7h7AzdH3Fcclbm_z%26e3Bip4s&gsm=500000000000005&islist=&querylist=&dyTabStr=MCwzLDYsMSw0LDUsMiw3LDgsOQ%3D%3D" alt="Smiley face" border="5"><br/>
	<button type="button" onclick="displayDate()">显示日期</button>
	
	<table>
		<tr>
			<td><input id="tr1td1"/><td/>
			<td><input id="tr1td2"/><td/>
			<td><input id="tr1td3"/><td/>
		<tr/>
		<tr>
			<td><input id="tr2td1"/><td/>
			<td><input id="tr2td2"/><td/>
			<td><input id="tr2td3"/><td/>
		<tr/>
	<table/>
		<button id="test_btn" onclick="textOnclick()"  >textOnclick</button>
		<button id="test_btn" onclick="submit()"  >submit</button>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$('#test_btn').click(function(){
    alert("click执行");
})
$('#test_btn').submit(function(){
    alert("click执行");
})
function textOnclick(){
    alert("onclick执行");
}
	$(document).ready(
	function(){
		document.getElementById("input1").value = "aaa";
		$("#input2").val("bbb");
	});
	window.onload=function(){
		document.getElementById("input1").value = "cccc";
		$("#input2").val("dddd");
	};
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
</html>