forked from HaoZhang95/Python24
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbasic01.html
More file actions
138 lines (111 loc) · 3.68 KB
/
basic01.html
File metadata and controls
138 lines (111 loc) · 3.68 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
// <!-- 层级菜单 -->
function func1() {
$(".menu li a").click(function () {
$(this).siblings().slideDown().parent().siblings().children("ul").slideUp(500);
})
}
function func2() {
// css的值获取是通过css("left"), 控件等的值获取的使用property的方法prop("value")
$("input").prop("value")
$("input").prop("value", "新的默认值")
// 简写的写法直接调用val()方法
$("input").val()
}
// each(匿名函数(event))函数,把event传递给匿名函数
// event就是所有标签添加了一个索引值，或者说event就是索引值
function func3() {
$(".each li").each(function (event) {
console.log(event);
$(this).html(event)
});
}
// 获得焦点和失去焦点事件， focus() 和 blur()或者focusout
function func4() {
var str = $("#search").val()
$("#search").focus(function () {
if ($(this).val() == str) {
$(this).val("变空")
}
})
$("#search").focusout(function () {
if ($(this).val() == "") {
$(this).val(str)
}
})
}
// 表单的submit提交事件,获取表单元素直接调用submit方法即可
// 某些特定浏览器有默认提交行为，需要组织表单的默认行为, event.preventDefault()或者下面的直接return false
function func5() {
$("#forms").submit(function (event) {
console.log("已经提交了,老铁...");
return false;
})
}
func5()
})
</script>
<style>
ul.menu li ul {
display: none;
}
</style>
</head>
<body>
<!-- 层级菜单 -->
<ul class="menu">
<li>
<a href="#">水果</a>
<ul>
<li>水果1</li>
<li>水果2</li>
<li>水果3</li>
</ul>
</li>
<li>
<a href="#">水果</a>
<ul>
<li>水果1</li>
<li>水果2</li>
<li>水果3</li>
</ul>
</li>
<li>
<a href="#">水果</a>
<ul>
<li>水果1</li>
<li>水果2</li>
<li>水果3</li>
</ul>
</li>
</ul>
<input type="text" value="默认值">
<ul class="each">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<input id="search" type="text" value="请输入关键字">
<input type="button" value="搜索">
<form action="post" id="forms">
<input type="text" value="请输入关键字">
<input type="submit" value="提交">
</form>
</body>
</html>