Jq笔记
上级目录

基础语法

在前面添加元素

1
$("#pageBar").before("无记录!");

判断对象是否为空

1
2
3
if(json == null|| json==undefined||json==""){
//
}

弹出选择树

https://blog.csdn.net/gg_eric/article/details/80355820

鼠标移动实现三级菜单

1

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级菜单</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
*{padding: 0;margin: 0;}
a{text-decoration: none;color: #fff;}
.first{height: 30px;line-height: 30px;background: orange;text-align: center; margin-top: 10px;padding-right:15px ;}
.first li{list-style-type: none;position: relative;float: left;}
.first li a{display: block;height: 30px;width:80px;float: left;margin-left: 15px;}
.first li ul{position: absolute;display: none;}
.second{top: 30px;}
.second li a{width: 80px;background: rgba(100,50,30,0.6);}
.second li a:hover{width: 80px;background: rgba(100,50,30,0.8);}
.third{left: 80px;}
/*.first>li:hover>ul {display: block;}
.first>li:hover>ul >li:hover >ul{display: block;}*/
.nav >div{position: relative;float: left;left: 50%;}
.nav >div>ul{position: relative;float: left;left:-50%;}
</style>
</head>
<body>
<div class="nav">
<div>
<ul class='first'>

<li><a href="#">菜单一</a>

<ul class="second">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四<span></span></a>
<ul class="third">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a></li>
</ul>
</li>
</ul>
</li>

<li><a href="#">菜单二</a>
<ul class="second">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四<span></span></a>
<ul class="third">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a></li>
</ul>
</li>
</ul>


</li>
<li><a href="#">菜单三</a>

<ul class="second">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四<span></span></a>
<ul class="third">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a></li>
</ul>
</li>
</ul>

</li>

</ul>
<script>
$('.first li') .hover(function(){
$(this).children('ul').toggle();
})
</script>
</div>
</div>

</body>
</html>

三级菜单2

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级菜单</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
*{
padding:0;
margin:0;
}
/*一级菜单*/
.navMenu {
width:570px;
margin:0 auto;
}
.navMenu ul li{
float: left;
position: relative;
}
li{
list-style: none;
background-color: #eee;
width: 140px;
height: 40px;
text-align: center;
margin-right: 2px;
margin-bottom: 2px;
}
ul li a{
line-height: 40px;
text-align: center;
font-size: 20px;
color: #000;
text-decoration: none;
display: block;
padding:0 10px;
}
/*二级菜单*/
.navMenu ul li ul {
display: none;
position:absolute;
left: 0;
top:0;
margin-top:42px;
}
.navMenu ul li ul li{
float:none;
}
/*三级菜单*/
.navMenu ul li ul li ul{
display: none;
left:140px;
top:-42px;
}
</style>
</head>
<body>
<body>
<div class="navMenu">
<ul>
<li><a href="#">首页</a>
<ul>
<li><a href="#">JavaScript+</a>
<ul>
<li><a href="#">三角函数</a></li>
<li><a href="#">矩形</a></li>
</ul>
</li>
<li><a href="#">语文</a>
<ul>
<li><a href="#">唐诗</a></li>
<li><a href="#">宋词</a></li>
</ul>
</li>
<li><a href="#">英语</a></li>
</ul>
</li>
<li><a href="#">课程大厅</a></li>
<li><a href="#">学习中心+</a>
<ul>
<li><a href="#">JavaScript+</a>
<ul>
<li><a href="#">三角函数</a></li>
<li><a href="#">矩形</a></li>
</ul>
</li>
<li><a href="#">语文</a>
<ul>
<li><a href="#">三角函数</a></li>
<li><a href="#">矩形</a></li>
</ul>
</li>
<li><a href="#">英语</a></li>
</ul>
</li>
<li><a href="#">帮助</a></li>
</ul>
</div>
</body>
<script type="text/javascript">
$(function(){
$("li").has("ul").mouseover(function(){
$(this).children("ul").css("display","block");
$(this).css("backgroundColor","#0066FF");
}).mouseout(function () {
$(this).children("ul").css("display","none");
$(this).css("backgroundColor","#eee");
})
})
</script>
</html>

css3

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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="zh-cn">
<head>
<%@include file="/common/header.jsp" %>
<link rel="stylesheet" href="${cxt}/assets/css/admin.css?v=<%=new Date().getTime()%>">
<link rel="stylesheet" href="${cxt}/assets/css/jquery-ui.min.css?v=<%=new Date().getTime()%>">
<script src="${cxt}/assets/css/jquery-ui.min.js?v=<%=new Date().getTime()%>"></script>
<script src="${cxt}/assets/js/jquery.form.js?v=<%=new Date().getTime()%>"></script>
</head>
<style>

/*menu部分*/

#menu {
margin: 0 auto;

width: 770px !important;
clear: both
}

#menu ul {
list-style: none;
}

#menu table {
position: absolute;
left: 0;
top: 0;
}

li.l1-nav {
float: left;
position: relative;
left: 0px;
top: 0px;
}

a.l1-nav {
display: block;
text-align: center;
text-decoration: none;
width: 77px;
height: 30px;
line-height: 30px;
color: #000;
background: #c9c9a7;
}

li.l1-nav:hover a.l1-nav, a.l1-nav:hover {
color: #fff;
background: #b3ab79;
}

ul.l2-nav {
visibility: hidden;
position: absolute;

top: 30px;
z-index: 1;
}

li.l2-nav {
float: left;
position: relative; /* 这里把第二级菜单项设成相对定位,以使得它包含的三级菜单相对它自己定位 */
left: -20px;
top: 0px;
}

a.l2-nav {
display: block; /* 把a设成块级显示 */
text-align: center;
text-decoration: none;
width: 77px;
height: 30px;
line-height: 30px;
color: #000;
background: #faeec7;
}

li.l2-nav:hover a.l2-nav, a.l2-nav:hover {
color: #fff;
background: #dfc184;
}

ul.l3-nav {
visibility: hidden;
position: absolute;
text-align: center;
left: 57px;
top: 0px;
}

/* 这是控制菜单显示与隐藏的重点 */
a.l1-nav:hover ul.l2-nav, li.l1-nav:hover ul.l2-nav, a.l2-nav:hover ul.l3-nav, li.l2-nav:hover ul.l3-nav {
visibility: visible;
}

a.l3-nav {
display: block;
width: 77px;
height: 30px;
line-height: 30px;
background: #dfc184;
color: #000;
text-decoration: none;
}

a.l3-nav:hover {
color: #fff;
background: #dfc184;
}

</style>
<body>

<ul class="l1-nav">

<li class="l1-nav">
<!-- IE6里面a元素可以包含其他元素,且只有a能够支持hover伪类,但ul还要放在一个table中。而chrome中,a不可以包含其他元素,但li支持hover伪类。所以这一段有些绕。 -->
<a class="l1-nav" href="">第一分类
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul class="l2-nav">

<li class="l2-nav">
<a class="l2-nav" href="">XHTML
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul class="l3-nav">
<li><a class="l3-nav" href="">XHTML1</a></li>
<li><a class="l3-nav" href="">XHTML2</a></li>
<li><a class="l3-nav" href="">XHTML3</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>

<li class="l2-nav">
<a class="l2-nav" href="">CSS
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul class="l3-nav">
<li><a class="l3-nav" href="">CSS1</a></li>
<li><a class="l3-nav" href="">CSS2</a></li>
<li><a class="l3-nav" href="">CSS3</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>


</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>


</ul>
</div>
</div>

</div>


</form>
</body>

</script>
</html>
本文原创,商业转载请联系作者获得授权,非商业转载请注明出处。

评论

发送评论 编辑评论


                        

前端技术分类热门文章

标签热门文章排行

☛免责声明 ☛本站使用教程
Theme Argon With Ry-Plus By 清欢
我的第15487位朋友,历经86867次回眸才与你相遇