JQuery
文章平均质量分 65
JQuery
林中明月间。
努力又平庸 ,自卑又内敛 。
展开
-
jQuery常见方法汇总
语法:父元素jQuery对象.append(新创建的jQuery对象)语法:新创建jQuery对象.appendTo(‘父元素选择器’/父元素jQuery对象)转载 2023-03-10 16:13:26 · 2823 阅读 · 0 评论 -
Jquery 校验手机号、邮箱、身份证号、中文校验等
Jquery 校验手机号、邮箱、身份证号转载 2022-07-03 18:45:17 · 2701 阅读 · 0 评论 -
Js、jQuery、Vue浏览器改变可视区域触发事件,监听浏览器窗口大小的变化事件
https://www.jianshu.com/p/922da4e4105ehttps://blog.csdn.net/u012172536/article/details/51832061window.onresize=function(){ //改变可视区域触发 location=location; //页面刷新}用JS或者jQuery监听浏览器窗口大小的变化事件$(window).resize(function () { //当浏览器大小变化时转载 2020-06-08 10:14:35 · 1790 阅读 · 0 评论 -
js、jq点击返回顶部(vue)、window.scrollTo
<div id="return" style="display: block;"> <a href="" onclick="document.documentElement.scrollTop=document.body.scrollTop=0;return false;"> <img src="./images/return.gif&quo原创 2018-05-18 10:56:32 · 2614 阅读 · 1 评论 -
原生js、jq切换选项卡
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> ul,li{ list-sty原创 2018-04-10 16:02:08 · 420 阅读 · 0 评论 -
jq判断 checkbox 是否选中以及设置checkbox选中
jquery判断checked的三种方法:.attr('checked) ;//看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false.prop('checked') ;//16+:true/false.is(':checked') ; //所有版本:true/false//别忘记冒号哦jquery赋值checked的几种写法:所有的jquer...转载 2018-03-01 15:26:47 · 2021 阅读 · 0 评论 -
jquery 全选与全不选
代码自己换:<body><input type="checkbox" id="all" />全选<br /> <input type="checkbox" name="sub" />image1.jpg<br /> <input type="check转载 2018-03-01 15:42:09 · 1318 阅读 · 0 评论 -
拍照、上传图片身份证,电话验证表单提交
FileReader+Ajax+PHP实现异步上传图片和预览:https://blog.csdn.net/fdipzone/article/details/37974511原理:1.使用FileReader 读取图片的base64编码2.使用ajax,把图片的base64编码post到服务器。3.根据接收到post的数据分析图片的类型(jpg,gif,png),并把bas...原创 2019-03-13 18:41:26 · 3027 阅读 · 0 评论 -
JQ图片伸缩展示特效
<!DOCTYPE html><html><meta http-equiv="content-type" content="text/html;charset=utf-8" /><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content...原创 2019-03-26 17:28:39 · 500 阅读 · 0 评论 -
前端提示框插件sweetalert
sweetalert是一款前端提示框插件,使用也非常简单,而且还内置了许多参数,他可以替代alert()本站即采用的该款插件提示,今天把使用方法提供给大家!1、引入JS和CSS文件可以直接进入官网下载然后到头部进入或者直接从CDN引入,需要引用jq<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1....转载 2019-03-28 20:44:56 · 1380 阅读 · 2 评论 -
HTML中关于表单的提交和输入的值是否为空
文章出处:http://blog.csdn.net/lvhuiyang/article/details/53192277//未填写的input 边框变红色$('input[type=text]').each(function(i,v){ $(v).blur(function(){ if($(v).val() == ''){ ...转载 2018-01-26 15:29:18 · 14653 阅读 · 0 评论 -
jq 判断是否为空 是否为电话 数字
判断是否为汉字:<input type="text" id="id"/>var v = $("input").val();if( v.match( /^[\u4E00-\u9FA5]{1,}$/) ){ alert('汉字');}else{ alert('其他');} 判断是否为字母: var val = $("input").v...转载 2018-01-26 14:59:37 · 1022 阅读 · 0 评论 -
js、jq验证银行卡账号
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><met原创 2018-03-05 14:29:58 · 2623 阅读 · 1 评论 -
js正则函数match、exec、test、search、使用介绍集合 检验身份证
<script type="text/javascript"> var obj = '11010519491231002X'; var rg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;//match 方法alert(obj.match(r...原创 2018-03-19 11:52:11 · 594 阅读 · 0 评论 -
jq mouseover、out 与 mouseenter、leave的区别 hover
<script type="text/javascript" src="jquery-1.9.1.min.js"></script><style>*{margin: 0;padding: 0;}#div1{ width: 100px; height: 100px; background: red; position: relative;...原创 2018-08-30 15:27:23 · 1029 阅读 · 0 评论 -
加载动画Loading插件spin.js以及element-loading的使用\Loading加载\Vue 前端加载效果(this.$loading)
转自:https://www.cnblogs.com/dreamsqin/p/6856535.html很坑啊spin.js 报错,需要找到spin.min.js才有用点击这里下载spin.min.js http://www...转载 2019-03-28 21:45:41 · 3302 阅读 · 1 评论 -
JS事件委托
转自:https://www.cnblogs.com/zhoushengxiu/p/5703095.html一:什么是事件委托? 事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件。二:为什么要用事件委托? 1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运行性能。为什么呢?因为,每个事件处理函数都是对象,对象会占用内...转载 2019-03-29 10:27:43 · 195 阅读 · 0 评论 -
JS、H5调用手机相册摄像头以及文件夹
转自:https://blog.csdn.net/qq_37610423/article/details/84319410效果图:Html代码:<div class="file-box clearboth" id="fileBox"> <label class="clone-dom" style="display:none;...转载 2018-03-09 16:20:04 · 9419 阅读 · 0 评论 -
购物车计算价格功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>购物车</title></head><script type="text/javascript" src="tbrem.js"></sc...原创 2019-03-15 22:24:33 · 989 阅读 · 0 评论 -
js事件冒泡机制,以及如何阻止冒泡
事件冒泡:当一个元素接收到事件的时候,会把他接受到的所有传播给他的父级;一直到 window 为事件冒泡(该发生还是会发生)js阻止冒泡:当前要阻止冒泡的事件函数中调用 。必须要同一个事件才行。例如:mousedown,不能用onclick浏览器的默认行为:右键、按住左键选中、a标签是html默认点击事件,取消:<a href="javascript:;"></a&g...原创 2018-05-11 22:01:25 · 1601 阅读 · 0 评论 -
jq实现星星评价
参考:https://www.jianshu.com/p/02969846f1edhttps://www.cnblogs.com/baixuemin/p/6492257.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met...转载 2019-07-02 22:55:26 · 1272 阅读 · 0 评论 -
鼠标悬停表格上显示这一格的全部内容
转自:https://www.jb51.net/article/86347.htm<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/jav...转载 2019-06-12 16:22:09 · 6361 阅读 · 0 评论 -
jq鼠标悬浮小图弹出大图效果详解
<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery的鼠标悬停时放大图片的效果制作</title><script src="https://code.jquery.com/jquery-3.1.1.min.js"></scri...转载 2019-05-22 21:32:12 · 981 阅读 · 0 评论 -
jq、js 动态循环100个div
js:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>div100</title> <style> div{ width: ...转载 2019-05-17 17:41:41 · 4031 阅读 · 0 评论 -
密码眼睛 password 文字显示隐藏
input密码输入框显示为“*”<script type="text/javascript"> // 这里使用最原始的js语法实现,可对应换成jquery语法进行逻辑控制 var demoImg = document.getElementById("demo_img"); var demoInput = document.getElementById("demo_in...转载 2019-05-13 13:54:54 · 2846 阅读 · 0 评论 -
左侧滑动侧边栏 slideout.js 简单
<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <title>Slideout Demo</title> <meta http-equiv="cleartype" content="on"> <...转载 2019-04-12 22:50:34 · 685 阅读 · 0 评论 -
左侧滑动侧边栏 slideou.js
<!doctype html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=de...转载 2019-04-12 22:24:42 · 320 阅读 · 0 评论 -
jq左侧滑动侧边栏
<!DOCTYPE html><!-- saved from url=(0025)http://mobile.disney.cn/# --><html lang="zh-CN" style="font-size: 12.9375px;"> <head> <meta http-equiv="Content-Type" content=...转载 2019-04-12 22:10:17 · 857 阅读 · 0 评论 -
jq 全屏切换效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><met原创 2018-08-29 16:07:11 · 936 阅读 · 0 评论 -
jquery获取元素各种宽高及页面宽高(总结)
转载:https://www.cnblogs.com/goloving/p/7113567.htmlhttps://www.jianshu.com/p/5009153e0c33$(function(){ var a = $("#div").width(),//width()返回元素的宽高,不包括padding/border/margin b = $("#div"...转载 2018-08-29 15:13:27 · 4875 阅读 · 1 评论 -
appendChild、insertBefore、cloneNode添加元素,点击更换元素位置
js:添加到指定位置父级.appendChild(要添加的元素)方法 追加(创建的标签)子元素oUl.appendChild(oLi);//后面添加父级.insertBefore(新的元素,被插入元素)oUl.insertBefore(oLi,oUl.children[0]);//前面插入父级.replaceChild(新节点,被替换的节点)document.body.replac...原创 2018-08-24 21:48:49 · 3539 阅读 · 0 评论 -
jq点击显示隐藏二级菜单的几种方法
转自:http://blog.csdn.net/supercoooooder/article/details/50755427<!DOCTYPE html><html> <head> <title>Dropdown</title> <meta charset="utf-8" /> &转载 2018-03-20 16:43:26 · 6073 阅读 · 0 评论 -
jQuery放大镜效果
<!doctype html><html><head><meta charset="utf-8"><title>jQuery放大镜效果</title><script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"&a转载 2018-03-13 17:08:16 · 284 阅读 · 0 评论 -
div模拟下拉框
<!doctype html><html><head><meta charset="utf-8"><title>div模拟下拉框</title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"&g转载 2018-03-13 16:59:38 · 1578 阅读 · 0 评论 -
用js或者jquery动态给div追加内容,不覆盖之前的内容
效果:js<div id="append">ss</div><script>var divA = document.getElementById("append"); divA.innerHTML = divA.innerText+'追加的内容s'; //divA.innerHTML +='追加的内容s'; divA.inn...原创 2018-03-19 15:51:02 · 95701 阅读 · 5 评论 -
hover给图片加遮罩
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title&a原创 2017-12-13 10:38:12 · 2396 阅读 · 0 评论 -
jQuery弹出层效果 弹出div窗口
转自:http://blog.csdn.net/u013239233/article/details/52292763<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>jQuery弹出层效果</title><meta content="转载 2018-03-02 13:25:47 · 13482 阅读 · 0 评论 -
jq 二级下拉并把值添加到input框
css:.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; display: none; overflow: auto; -webkit-overflow-scrolling: touch; backgrou...原创 2018-03-08 13:05:31 · 2292 阅读 · 0 评论 -
js、jq、点击改变字体颜色背景色
js:css:.zhuantai{width: 90%;height: 70px;border-top: 1px solid #bdbcbc; border-bottom: 1px solid #bdbcbc; margin: 10px auto;}.yinye{display: inline-block;height: 70px;width: 30%;float: left;color: #ff...原创 2018-03-01 15:01:14 · 8822 阅读 · 0 评论 -
jQuery左侧固定导航栏点击滑动对应页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><me转载 2018-03-07 16:21:21 · 5308 阅读 · 1 评论