jquery
酷jjs
追求卓越,激流勇进!
展开
-
jq小图标抖动效果
<!doctype html><html> <head> <title>Rotate</title> <script src="./jquery.js"></script> <script> $(function() { function state1() { ...原创 2020-03-16 17:51:06 · 579 阅读 · 0 评论 -
jquery插件——cookie
记住用户名效果:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jquery插件cookie</title> <script src="js/jquery.min.js"></script> <script src="js/jquery.cookie.js"></script>原创 2017-04-06 11:22:45 · 477 阅读 · 0 评论 -
jq ajax表单获取
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery1.1.1.min.js"></script></head><body><table border="1" id="table"> <tr> <原创 2017-03-15 17:01:45 · 487 阅读 · 0 评论 -
jq ajax成绩单获取显示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>分数表</title> <script src="jquery1.1.1.min.js"></script> <style> .red{background:red;} .gray1{backgro原创 2017-04-26 11:38:00 · 573 阅读 · 0 评论 -
不显示播放器的音频添加(兼容各浏览器)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.11.1.js"></script> <script src="js/myBrowser.js"></script></head><body>不显示原创 2017-01-05 14:30:28 · 643 阅读 · 0 评论 -
模拟下拉框效果
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>模拟下拉框</title> <script src="js/jquery.min.js"></script> <style> *{padding:0;margin:0;} li{list-style:原创 2017-04-17 13:10:36 · 419 阅读 · 0 评论 -
jquery的loading动画插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link charset="utf-8" href="css/r原创 2018-04-10 09:37:06 · 2148 阅读 · 0 评论 -
摇一摇效果
<style> .r1{transform:rotate(-4deg);-moz-transform:rotate(-4deg);-webkit-transform:rotate(-4deg);-o-transform:rotate(-4deg);} .r2{transform:rotate(3deg);-moz-transform:rotate...原创 2018-04-03 10:30:47 · 128 阅读 · 0 评论 -
jquery点击事件奇偶次控制效果
$(function(){ var num=1; $("#agreeIco").click(function () { if(num==1){ $("#agreeIco").addClass("ico_active"); num=2; ...原创 2018-03-28 13:13:25 · 3290 阅读 · 0 评论 -
数量增减控制效果
<div class="numiptbox"> <a class="lbtn" id="lbtn">-</a> <input class="numipt" id="numipt" type="number" value="1" min=&quo原创 2018-04-11 13:17:21 · 372 阅读 · 0 评论 -
jquery自动获取光标在字符串后,清空输入框文本再聚焦
jquery自动获取光标在字符串后 var str=$("#callnumber").val(); $("#callnumber").val("").focus().val(str);jquery点击按钮自动清空输入框文本再聚焦 $(".close").click(function () { $("#callnumber").val(""原创 2018-04-17 09:36:19 · 1710 阅读 · 0 评论 -
jquery定时器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery.min.js"&g原创 2018-03-29 10:24:58 · 14239 阅读 · 0 评论 -
jquery限制输入框字符串长度为10
<input type="text" class="ipt" placeholder="最长不超过10个字符" id="nameIpt"/> //限制字符串长度为10(事件监听) $("#nameIpt").bind("input propertychange", function() { var text = $原创 2018-04-18 10:57:00 · 6796 阅读 · 1 评论 -
jq回到顶部效果
在很多地方,我们都会用到“返回顶部”按钮。那么这个要怎么实现呢?1、html代码[html] view plain copy<button class="back_to_top">返回顶部</button> 2、css代码[css] view plain copy.back_to_top{ position: fixed; bottom:30px; ...原创 2018-05-03 15:24:52 · 3883 阅读 · 0 评论 -
jquery插件——cookie
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jquery插件cookie</title> <script src="js/jquery.min.js"></script> <script src="js/jquery.cookie.js"></script> <st原创 2017-04-06 11:24:26 · 448 阅读 · 0 评论 -
jquery事件命名空间
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jquery事件命名空间</title> <script src="js/jquery.min.js"></script> <style> .btn{height:50px;width:50px;border:1px原创 2017-04-05 17:32:54 · 306 阅读 · 1 评论 -
jquery插件2
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jquery插件</title> <script src="js/jquery.min.js"></script> <script src="extend/replace.js"></script> <!--插件的引入-->原创 2017-04-05 14:07:12 · 266 阅读 · 0 评论 -
jquery表格动态添加及各行变色效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格动态添加及各行变色效果</title> <script src="js/jquery-1.11.1.js"></script> <style type="text/css"> *{padding: 0;marg原创 2016-11-10 16:21:53 · 1617 阅读 · 0 评论 -
jquery模拟select下拉框
<!DOCTYPE html><html lang="en"><head> <title>jquery模拟SELECT框</title> <meta charset="utf-8"> <style> body{padding:0;margin:0;font-size:12px;} ul,li{list-style:none;padding:原创 2016-11-10 15:58:22 · 607 阅读 · 0 评论 -
加载动画、提示框动态添加(普通提示框、确认提示框、消息提示框)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css.css"> <script src="jquery-1.11.1.js"></script> <script src="js.j原创 2016-12-05 16:11:29 · 916 阅读 · 0 评论 -
Jquery提示框效果(确认提示框)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>普通提示框和确认提示框</title> <script src="js/jquery-1.11.1.js"></script> <style type="text/css"> *{margin: 0;padding原创 2016-11-23 09:49:34 · 8689 阅读 · 0 评论 -
jq给元素动态添加id
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jq给元素动态添加id</title> <script src="js/jquery-1.11.1.js"></script></head><body><ul> <li class="box"></li> <li cl原创 2016-12-22 17:26:29 · 11366 阅读 · 0 评论 -
jq节点的克隆添加
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>jq节点的克隆添加</title> <script src="js/jquery-1.11.1.js"></script> <style> .boxBox1{overflow:hidden;} .b原创 2016-12-23 14:20:49 · 1816 阅读 · 0 评论 -
分页效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="src/jquery-1.11.1.js"></script> <script src="src/jquery.pagebar.1.0.0.js"></script> <link转载 2017-01-16 16:10:34 · 642 阅读 · 0 评论 -
提示框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="src/jquery-1.11.1.js"></script> <script src="js/Xprompt.js"></script> <link rel="sty原创 2017-01-16 16:36:17 · 310 阅读 · 0 评论 -
鼠标滚动事件:回到顶部按钮
<!doctype html><html><head><script src="jquery.js"></script><style>body{height:10000px;}.top{width:60px;height:30px;background-color:black;color:white;position:fixed;bottom:10px;right:10px;}</sty原创 2017-01-16 17:04:53 · 905 阅读 · 0 评论 -
jq/css鼠标经过图片放大效果
<!doctype html><html><head><style>img{display:block;}.box{width:200px;border:solid 2px gray;height:160px;overflow:hidden;}.box img{width:200px;height:160px;position:relative;}</style><script sr原创 2017-01-16 17:11:24 · 11657 阅读 · 0 评论 -
超链接提示效果(jq模拟title属性)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>超链接提示效果(模拟title属性)</title> <script src="jquery1.1.1.min.js"></script> <style> .box{width:200px;height:40px;li原创 2017-03-12 12:32:09 · 1499 阅读 · 0 评论 -
jq鼠标按键、键值获取
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>鼠标按键、键值获取</title> <script src="jquery1.1.1.min.js"></script></head><body><div class="btn">按钮</div><input type="text原创 2017-03-12 13:36:29 · 886 阅读 · 0 评论 -
$.each
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title> $.each</title> <script src="js/jquery.min.js"></script> <style> </style></head><body><ul id="box1"></ul><ul原创 2017-04-17 18:01:23 · 277 阅读 · 0 评论 -
jquery插件1
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>第一个jquery插件</title> <script src="js/jquery.min.js"></script> <script src="extend/color.js"></script> <!--插件的引入-->原创 2017-04-05 11:44:05 · 591 阅读 · 0 评论 -
jquery根据数据显示不同背景图效果
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <script src="js/jquery-1.11.1.js"></script> <style type="text/css"> *{margin:0;padding: 0;} li{list-style: n原创 2016-11-10 16:34:08 · 2214 阅读 · 0 评论