jQuery
关注
分享
扫一扫
M_SSY
菜鸟一个，平常会写一些小例子，我真是一个小可爱啊
展开
-
点击div之外的元素隐藏div（一）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.9.1.min.js" type="text/javascript"原创 2018-05-09 11:21:04 · 731 阅读 · 0 评论 -
根据性别选择不同的年龄（男和女对应不同的年龄阶段的选择）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <span><input type=原创 2018-05-24 18:23:50 · 1188 阅读 · 0 评论 -
跨域Ajax实例
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type=原创 2018-05-30 09:39:55 · 244 阅读 · 0 评论 -
自己写一个json文件，实现ajax
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .item-box li { width: 300px;原创 2018-05-30 09:42:47 · 6507 阅读 · 0 评论 -
input上传图片
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .file { width: 75px; heig原创 2018-05-30 09:43:54 · 432 阅读 · 0 评论 -
按钮点击效果（点击变颜色不点恢复颜色）模拟hover效果
在点击的过程中按钮变颜色，可以方便看到是否触发了按钮的点击事件function changeColor(id,class1,class2) { $("#instbtn").on("touchstart",function () { $(this).attr("class",class1) }) ...原创 2018-06-14 11:32:11 · 5513 阅读 · 0 评论 -
根据身份证号算出生日期
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title> </head> &a原创 2018-06-07 18:07:41 · 855 阅读 · 0 评论 -
根据出生日期算生肖，星座
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="div1" style=&qu原创 2018-06-07 18:08:54 · 1756 阅读 · 0 评论 -
根据身份证算年龄
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body></html>原创 2018-06-07 18:09:50 · 389 阅读 · 0 评论 -
计算器
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>在线计算器</title> <style> * { margin: 0; padding: 0; color: #fff;原创 2018-06-07 18:10:58 · 238 阅读 · 0 评论 -
两个日期相差天数
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body></html>原创 2018-06-07 18:13:49 · 269 阅读 · 0 评论 -
时间戳与时间之间的转化
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body></html>原创 2018-06-07 18:14:45 · 449 阅读 · 0 评论 -
两个日期相差多少年
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body></html&原创 2018-06-07 18:15:34 · 1196 阅读 · 0 评论 -
点击按钮定位锚点
html代码：<div class="Btn4" id="Btn1_Buy">点击定位</div><div class="vnSixBox clearfix" id="vnSixBox"> 定位到的位置 <img src="http://www.jq22.com/img/cs/500x500-1.原创 2018-07-19 10:08:10 · 1689 阅读 · 0 评论 -
图片跟随鼠标移动
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> body { font-family: "宋体";} li { float: l原创 2018-07-20 15:33:05 · 353 阅读 · 0 评论 -
输入框获得焦点边框变颜色，失去焦点变颜色，输入框内有值变颜色
$('.pcblogin-inp') .focus(function() { $(this).css({ 'border': '1px solid #14C58E', 'background': '#fff' }); }) .blur(function() { $(this).css('border', '1px solid #CDCDCD...原创 2018-09-26 11:15:57 · 7350 阅读 · 0 评论 -
前端搜索功能（五）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> table tr th,table tr td{ paddin原创 2018-05-29 10:08:20 · 1370 阅读 · 0 评论 -
获取验证码
<span class="obtain-code">获取验证码</span>js：//获取验证码 $(".obtain-code").click(function() { $(this).css('color', '#757575'); settime(this); }); var countdo...原创 2018-05-09 11:23:09 · 358 阅读 · 0 评论 -
错误弹窗一秒后消失
//错误弹窗1秒后消失 $('.pcbtel-pop').delay(1000).hide(0);原创 2018-05-09 11:24:24 · 521 阅读 · 0 评论 -
正则表达式
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input typ原创 2018-05-09 11:25:44 · 158 阅读 · 0 评论 -
点击div之外的元素隐藏div（二）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> #test{ widt原创 2018-05-09 14:45:47 · 234 阅读 · 0 评论 -
拖拽交换位置
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>拖拽交换位置</title> <style type="text/css"> ul { list-style-type原创 2018-05-09 14:49:39 · 1351 阅读 · 0 评论 -
移动端日历选择插件
html部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>手势拖动选择日期-移动端</title> <meta name="viewport&quo原创 2018-06-04 16:44:01 · 3063 阅读 · 2 评论 -
全选反选加编辑功能
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title>全选反选编辑框</title> <style> .edit-mode { background-color:原创 2018-05-29 09:44:35 · 169 阅读 · 0 评论 -
点击返回顶部
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box { width: 200px; heigh原创 2018-05-29 09:45:34 · 523 阅读 · 0 评论 -
分页
<!DOCTYPE html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery前端分页</title> <style> #page_navigation a {原创 2018-05-29 09:47:23 · 156 阅读 · 0 评论 -
拖动面板
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div st原创 2018-05-29 09:53:07 · 300 阅读 · 0 评论 -
前端搜索功能（一）
前端搜索功能整理了五个，大家根据需要自取<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>前端搜索功能</title> </head> <body&原创 2018-05-29 09:58:45 · 2578 阅读 · 3 评论 -
前端搜索功能（二）
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>实时查询城市通过姓名或拼音简写</title> </head> <body> &原创 2018-05-29 10:03:57 · 1123 阅读 · 0 评论 -
前端搜索功能（三）
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>实时查询城市通过姓名或拼音简写</title> </head> <body> &原创 2018-05-29 10:05:40 · 2099 阅读 · 0 评论 -
前端搜索功能（四）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--查询输入框--> <div原创 2018-05-29 10:06:37 · 881 阅读 · 0 评论 -
jQuery单行文字滚动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .swiper_wr原创 2018-12-06 10:38:18 · 722 阅读 · 0 评论