说明

一个纯后端码农的前端知识记录

html基础知识

select

select结合jekyll。 th:前缀代表调用jekyll组件

<select style="background:transparent;border:none;font-size: 20px;" onchange="location.href=this.options[this.selectedIndex].value;" name="selectCategories">
	<option th:value="@{/分类1}" th:text="分类1"></option>
	<option th:value="@{/分类2}" th:text="分类2"></option>
</select>

下拉跳转事件，跳转当前页。

onchange="location.href=this.options[this.selectedIndex].value;"

设置背景色透明、无边框、字体大小20

style="background:transparent;border:none;font-size: 20px;"

button

设置按钮背景色红色、边框色红色

<button type="button" style="width: 50%;background-color: red; border-color: red">保密</button>"

button属性

button有个type属性，属性值可为button、submit、reset。

• type="button":普通按钮，直接点击不会提交表单

• type="submit":提交按钮，点击后会提交表单

• type="reset":表单复位，重置form表单内的值

input

button按钮清空输入

按钮

<button type="button" onclick="reset()" style="width: 45%; float: left; font-size: 20px;">重置</button>

函数

<script type="text/javascript">
	function reset() {
		$("#div_id").each(function ()
		{
			$(this).find("option:selected").removeAttr("selected");
		});
		document.getElementById('input_id1').value = '';
		document.getElementById('input_id2').value = '';
	}
</script>