jQuery
文章平均质量分 79
前端技术分享
大都督老师
爱老婆不能只停留在口头上
展开
-
jQuery弹性班
效果图:需求:根据上班时间打卡时间(2022年3月1日09时36分),上班时长(9个小时30分钟)计算出下班打卡时间为:2022-3-1 19:06html实现<!DOCTYPE html><html><head><style>input { width:77px;}select { width:77px; height: 22px;}span { margin-left: 22px;}div { margin-bot原创 2022-03-01 15:43:31 · 563 阅读 · 0 评论 -
chosen-省市区三级联动
效果图: 一、资源1.1、css资源<link href="../../css/plugins/chosen/chosen.css" rel="stylesheet">1.2、js资源<script src="../../js/plugins/chosen/chosen.jquery.js"></sc...原创 2018-08-14 19:21:31 · 1035 阅读 · 0 评论 -
webuploader-上传图片到服务器
webuploader-上传图片到服务器快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl + Q插入链接 Ctrl + L插入代码 Ctrl + K插入图片 Ctrl + G提升标题 Ctrl + H有序列表 Ctrl + O无序列表 Ctrl + U横线 Ctrl + R撤销 ...原创 2018-08-15 15:48:46 · 1977 阅读 · 6 评论 -
CSS样式-手型
手型style=&quot;cursor:pointer;&quot;&amp;lt;span style=&quot;cursor:pointer;&quot;&amp;gt;我是手型样式&amp;lt;/span&amp;gt;原创 2018-08-23 17:30:26 · 21529 阅读 · 0 评论 -
layer.open方法
layer&lt;div class="ibox-content"&gt; &lt;p&gt; &lt;button type="button" class="btn btn-w-m btn-default&原创 2018-08-24 18:56:47 · 95679 阅读 · 24 评论 -
freemarker解析json字符串
freemarker解析json字符串freemarker解析json字符串效果图片模拟后台传过来的 json 字符串text在 ftl 页面进行解析freemarker解析json字符串效果图片模拟后台传过来的 json 字符串textjava对象中的字段/** * 格式: * { "number": { "one": "111", ...原创 2018-11-21 15:52:18 · 6977 阅读 · 1 评论 -
1. 第一个简单的jQuery程序
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;&amp;lt;title&amp;gt;第一个简单的jQuery程序&a原创 2018-11-28 21:21:50 · 773 阅读 · 3 评论 -
2. jQuery控制dom对象
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;&amp;lt;title&amp;gt;控制dom对象&amp;原创 2018-11-28 21:24:44 · 100 阅读 · 0 评论 -
3. jQuery事件的链式写法
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;jQuery事件的链式写法&lt;/title&gt; &lt;link href=&原创 2018-11-28 21:27:23 · 300 阅读 · 0 评论 -
4.使用jQuery实现隔行变色
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;使用jQuery实现隔行变色&lt;/title&gt; &lt;style type="text/css"&gt; body{原创 2018-11-28 21:28:34 · 502 阅读 · 0 评论 -
5.jQuery基本选择器
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;使用jQuery基本选择器&lt;/title&gt; &lt;style type="text/css"&gt; body{原创 2018-11-28 21:30:07 · 156 阅读 · 0 评论 -
6. jQuery层次选择器
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;使用jQuery层次选择器&lt;/title&gt; &lt;style type="text/css"&gt; bod原创 2018-11-28 21:30:55 · 164 阅读 · 0 评论 -
7. jQuery基本过滤选择器
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;使用jQuery基本过滤选择器选择元素&lt;/title&gt; &lt;style type="text/css"&gt;原创 2018-11-28 21:32:00 · 246 阅读 · 2 评论 -
8. jQuery内容过滤选择器
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;使用内容过滤选择器&lt;/title&gt; &lt;style type="text/css"&gt; body{fo原创 2018-11-28 21:32:38 · 102 阅读 · 0 评论 -
9. jQuery可见性过滤选择器
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;可见性过滤选择器&lt;/title&gt; &lt;style type="text/css"&gt; body{fon原创 2018-11-28 21:33:17 · 216 阅读 · 0 评论 -
10. jQuery-属性过滤选择器
<!DOCTYPE html><html><head> <title>属性过滤选择器</title> <style type="text/css"> body{font-size:12px;text-align:center} div{float:left原创 2018-11-29 20:43:54 · 301 阅读 · 0 评论 -
11. jQuery子元素过滤选择器
<!DOCTYPE html><html><head> <title>jQuery子元素过滤选择器</title> <style type="text/css"> body{font-size:12px;text-align:center} ul{widt原创 2018-11-30 22:07:17 · 209 阅读 · 0 评论 -
12. jQuery-表单对象属性过滤选择器
<!DOCTYPE html><html><head> <title>jQuery表单对象属性过滤选择器</title> <style type="text/css"> body{font-size:12px;text-align:center} div{原创 2018-12-01 16:36:49 · 263 阅读 · 0 评论 -
13. jQuery-表单过滤选择器
<!DOCTYPE html><html><head> <title>jQuery表单过滤选择器</title> <style type="text/css"> body{font-size:12px;text-align:center} form{wi原创 2018-12-02 22:19:22 · 187 阅读 · 0 评论 -
14. jQuery-导航条
jQuery导航条1.效果图:1.1 未操作时1.2 点击“上”图标再次点击后变为1.1所示效果图1.3 点击“简化”字样1.3 点击“更多”字样2. HTML代码<!DOCTYPE html><html><head> <title>jQuery导航条</title> <style&......原创 2018-12-03 21:14:31 · 663 阅读 · 0 评论 -
15.jQuery-DOM树状文档
1.效果图:2.html代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;DOM树状文档&lt;/title&gt; &lt;style&gt; body{font-size:13px}原创 2018-12-04 20:43:58 · 203 阅读 · 0 评论 -
16. jQuery-获取元素的属性
1. 效果图2.html代码<!DOCTYPE html><html><head> <title>获取元素的属性</title> <style type="text/css"> body{font-size:12px} div{float:lef原创 2018-12-05 20:15:02 · 876 阅读 · 0 评论 -
17. jQuery-使用attr方法设置元素的属性
1. 效果图2. html代码<!DOCTYPE html><html><head> <title>使用attr方法设置元素的属性</title> <style type="text/css"> body{font-size:12px} .cls原创 2018-12-06 21:03:31 · 520 阅读 · 0 评论 -
18. jQuery-使用function()函数随机展示图片
1. 效果图2. html代码<!DOCTYPE html><html><head> <title>jQuery-使用function()函数随机展示图片</title> <style type="text/css"> body{font-size:12px}原创 2018-12-07 23:34:39 · 645 阅读 · 0 评论 -
19. jQuery-设置和获取元素的内容
1. 效果图2. html代码<!DOCTYPE html><html><head> <title>jQuery-设置和获取元素的内容</title> <style type="text/css"> body{font-size:15px;text-align:cen原创 2018-12-08 18:29:27 · 203 阅读 · 1 评论 -
20. jQuery-使用val()方法设置和获取元素的值
1. 效果图2. html代码只有亲自敲出来,你才能体会到这些方法的强大&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &amp;lt;title&amp;gt;jQuery-使用val()方法设置和获取元素的值&amp;lt;/title&原创 2018-12-09 21:41:20 · 1660 阅读 · 0 评论 -
21. 使用css()方法直接设置元素样式
1. 效果图2. html代码<!DOCTYPE html><html><head> <title>3.7 使用CSS()方法直接设置元素样式</title> <style type="text/css"> body{font-size:15px}原创 2018-12-10 20:41:51 · 291 阅读 · 0 评论 -
22. 使用addClass()方法增加元素css类别
1. 效果图2. html代码<!DOCTYPE html><html><head> <title>3.8 使用addClass()方法增加元素css类别</title> <style type="text/css"> body{font-size:15px}原创 2018-12-11 21:31:49 · 1633 阅读 · 2 评论 -
23. 使用toggleClass()方法切换元素css类别
1. 效果图2. html代码<!DOCTYPE html><html><head> <title>3.9 使用toggleClass()方法切换元素css类别</title> <style type="text/css"> .clsImg{border: soli原创 2018-12-12 22:20:41 · 1200 阅读 · 0 评论 -
24. jQuery-删除元素css类别
删除元素CSS类别1.与增加类别的addClass()方法相对应,removeClass()方法则用于删除类别,其语法格式如下:removeClass([class])其中,参数class为类别名称,该名称是可选项。当选该名称时,删除名称是class的类别,有多个类别时用空格隔开。如果不选名称,则删除元素中的所有类别。2.如果要删除p标记是cls0的类别,可以使用如下的代码:$("p"...原创 2018-12-13 23:43:31 · 376 阅读 · 0 评论 -
25.jQuery-使用$()函数动态创建节点元素
1. 效果图2. html代码<!DOCTYPE html><html><head> <title>3.10 使用$()函数动态创建节点元素</title> <style type="text/css"> body{font-size:13px}原创 2018-12-14 23:43:10 · 387 阅读 · 0 评论 -
26. jQuery-使用append()方法插入节点
1. 效果图2. html代码<!DOCTYPE html><html><head> <title>使用append()方法插入节点</title> <style type="text/css"> body{font-size:13px} <原创 2018-12-15 18:12:15 · 365 阅读 · 0 评论 -
27. jQuery-使用appendTo()方法插入节点
1.效果图2. html代码<!DOCTYPE html><html><head> <title>3.12 使用appendTo()方法插入节点</title> <style type="text/css"> body{font-size:13px}原创 2018-12-16 17:05:59 · 270 阅读 · 0 评论 -
28. jQuery-使用after()方法外部插入节点
1. 效果图2. html代码<!DOCTYPE html><html><head> <title>使用after()方法外部插入节点</title> <style type="text/css"> body{font-size:13px} <原创 2018-12-17 20:11:32 · 275 阅读 · 0 评论 -
29. 使用clone()方法复制元素节点
1. 效果图2. html代码<!DOCTYPE html><html><head> <title>使用clone()方法复制元素节点.html</title> <style type="text/css"> img{border: solid 1px #ccc;p原创 2018-12-18 23:24:24 · 800 阅读 · 0 评论 -
30. jQuery-使用replaceWith()和replaceAll()方法替换元素节点
1. 效果图2. html代码<!DOCTYPE html><html><head> <title>jQuery-使用replaceWith()和replaceAll()方法替换元素节点</title> <style type="text/css"> body{fo原创 2018-12-19 22:00:44 · 746 阅读 · 0 评论 -
31. jQuery- 使用wrap()和wrapInner()方法包裹元素节点
1. 效果图2. html代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;使用wrap()和wrapInner()方法包裹元素节点&lt;/title&gt; &lt;style type="text/css原创 2018-12-22 10:32:19 · 243 阅读 · 0 评论 -
32. jQuery-使用each()方法遍历元素获取属性
1.效果图2.html代码<!DOCTYPE html><html><head> <title>使用each()方法遍历元素获取属性</title> <style type="text/css"> body{font-size: 13px} i原创 2018-12-22 10:46:39 · 6879 阅读 · 0 评论 -
33. jQuery-使用remove()方法删除页面元素
1.效果图2. html代码<!DOCTYPE html><html><head> <title>jQuery-使用remove()方法删除页面元素</title> <style type="text/css"> body{font-size:13px} ul{widt原创 2018-12-22 11:01:09 · 1527 阅读 · 9 评论 -
34. jQuery-数据删除和图片预览再项目中的应用
1.效果图2.html代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>jQuery-数据删除和图片预览再项目中的应用</title> <style type="text/css"&原创 2018-12-22 12:08:31 · 211 阅读 · 0 评论