分类：JQuery

2022
10-31

jQuery中的CSS样式属性css()及width()系列大全

jQuery中的CSS样式属性css()及width()系列大全 目录1.css()基本使用： 1.1获取css属性1.2设置css属性2.width()系列基本使用(height()系列同理) 2.1width()2.2innerWidth()与outerWidth()3.offset()与position()3.1取值对比3.2设置值对比4.scrollLeft()与scrollTop()4.1取值4.2设置值4.3小demo1.css()基本使用： 1.1获取css属性1.1.1获取单个属性值（传入字符串）div{width:100px;height:100px;background:red;}<div>div1</div><scrip... 继续阅读 >
2022
10-31

jQuery中的CSS样式属性css()及width()系列大全

jQuery中的CSS样式属性css()及width()系列大全 目录1.css()基本使用： 1.1获取css属性1.2设置css属性2.width()系列基本使用(height()系列同理) 2.1width()2.2innerWidth()与outerWidth()3.offset()与position()3.1取值对比3.2设置值对比4.scrollLeft()与scrollTop()4.1取值4.2设置值4.3小demo1.css()基本使用： 1.1获取css属性1.1.1获取单个属性值（传入字符串）div{width:100px;height:100px;background:red;}<div>div1</div><scrip... 继续阅读 >
2022
10-31

jquery标签选择器应用示例详解

本文实例为大家分享了jquery标签选择器应用的具体代码，供大家参考，具体内容如下1、统一设置div内容可以用标签选择器来选择所有的div元素;<!DOCTYPEhtml><html><head><title></title><scriptsrc="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>functionsetdiv(){$("div").html('统一设置内容；');}</script></head><body><h1></h1><divid="div1"style="border:1pxsolid... 继续阅读 >
2022
05-30

利用jQuery实现轮播图效果

今天给大家带来的就是使用jQuery实现一个简单的轮播图，实现的原理就是：1、在一个区域内，设置宽高，超出这部分区域就要实现一个隐藏2、获取图片的大小为300，索引从0开始3、当你点击右边的按钮时候，就要实现你点击的按钮的索引加1让索引加一乘以图片的大小+px4、当他实现滑动的时候，加一个animate动画的效果，就欧了5、右边的效果和左边的一样，都是同理<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">... 继续阅读 >
2022
05-20

jquery实现全屏滚动效果

本文实例为大家分享了jquery实现全屏滚动的具体代码，供大家参考，具体内容如下效果图思路1.要全屏,给父级、body、html、高度设置为100%，自己的宽度也100%，还要给html、body设置溢出隐藏html,body{height:100%;/*实现全屏*/overflow:hidden;}.wrap{position:relative;top:0;left:0;/*实现全屏*/height:100%;}div.wrap>div{width:100%;height:100%;}2.引入mousewheel在引入min.js之... 继续阅读 >
2022
05-17

ajax在js中和jQuery中的用法实例详解

目录原生JS怎么发送一个get请求怎么发送一个post请求发送一个带有参数的get请求发送一个带有参数的post请求jQuery$.get几个参数，怎么使用$.post几个参数，怎么使用$.ajax几个参数，怎么使用JSONP$.ajax怎么发送jaonp请求总结原生JS怎么发送一个get请求创建一个ajax对象varxhr=newXMLHttpRequest()设置请求方式和请求地址[，是否异步]xhr.open('get','/ajax'[,... 继续阅读 >
2022
05-15

jQuery实现弹幕效果案例

本文实例为大家分享了jQuery实现弹幕效果的具体代码，供大家参考，具体内容如下效果：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>吐槽弹幕</title><scripttype="text/javascript"src="jquery-3.2.1.min.js"></script><style>h... 继续阅读 >
2022
05-03

jQuery实现图片跟随效果

本文实例为大家分享了jQuery实现图片跟随效果的具体代码，供大家参考，具体内容如下实现效果要实现的功能：*鼠标进来，显示大图片；*鼠标出去，隐藏大图片；*鼠标在大图片里边动，大图片跟着动。代码<html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>Inserttitlehere</title><styletype="text/css">body{text-align:center;}#small{margin-top:150px;}#showBig{posi... 继续阅读 >
2022
04-30

jquery自定义放大镜效果

本文实例为大家分享了jquery自定义放大镜效果的具体代码，供大家参考，具体内容如下jquery定义插件：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><scriptsrc="js/jquery3.6.0.js"></script><styletype="text/css">div{width:200px;height:200px;}</style></head><body><div></div><div></div><script>//1、jquery的插件，定义在jquery.fn的基础上的//2、命名... 继续阅读 >
2022
04-30

用jquery实现轮播图效果

本文实例为大家分享了用jquery实现轮播图的具体代码，供大家参考，具体内容如下（带小圆点和左右箭头切换效果的）原理：定义索引，定时任务实现轮播切换，切换时同样需要切换小圆点的样式varj=0;//定义索引，图片和小圆点共用varcusTimer;//定义定时函数$('.cons-middle.cons-mid').eq(0).show().siblings().hide();//定义默认的显示图片，也就是索引为0的那张图片cusStart();//开始实现图片轮播，... 继续阅读 >
2022
04-16

jquery+h5实现九宫格抽奖特效(前后端代码)

jquery+h5实现九宫格抽奖特效(前后端代码) 前言：前端：jq+h5实现九宫格动效后端：thinkphp3.2.3实现中奖概率算法功能：支持读取数据库预设的中奖率及奖品池，中奖率可以自定义，必须是整数最终效果如下：代码：choujiang.html代码如下：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/ht... 继续阅读 >
2022
02-21

jQuery实现全选反选操作案例

jQuery实现全选反选操作案例 本文实例为大家分享了jQuery实现全选反选操作的具体代码，供大家参考，具体内容如下全选+反选可根据控制台结合查看结果<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>过滤选择器</title><scriptsrc="jquery-3.2.1.min.js"></script></head><body><t... 继续阅读 >
2022
02-12

Bootstrap+Jquery实现日历效果

Bootstrap+Jquery实现日历效果 本文实例为大家分享了Bootstrap+Jquery实现日历效果的具体代码，供大家参考，具体内容如下一、效果图二、代码本案例中用到了Bootstrap和Jquery，除此之外还有其他的ls和css文件。dateTime.css如下：@charset"utf-8";*{margin:0;padding:0;}body,htmlbody{color:#262626;font:12px/1.5MicrosoftYaHei,tahoma,arial,HiraginoSansGB,sans-serif;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,... 继续阅读 >
2022
02-10

jQuery实现淡入淡出效果

jQuery实现淡入淡出效果 用jQuery完成淡入淡出效果前，我们先来认识几个代码：淡入fadeIn([speed,[easing],[fn]])，参数都可不写淡出fadeOut([speed,[easing],[fn]])，参数都可不写淡入淡出切换fadeToggle([speed,[easing],[fn]])，参数都可不写修改透明度fadeTo([[speed],opacity,[easing],[fn]])，注意，这里速度和透明度一定要写其中speed是速度easing是切换效果fn是回调函数那我们把上... 继续阅读 >
2022
01-17

jQuery实现滑动tab选项卡

jQuery实现滑动tab选项卡 本文实例为大家分享了jQuery实现滑动tab选项卡的具体代码，供大家参考，具体内容如下先上最终效果:需求分析:1.选项卡菜单数量不固定，菜单内容不固定，导致了单个菜单和整体的宽度都是未知的，2.第一个需求导致滑块宽度也是不固定的3.为了让交互效果更好，滑块需要添加过度动画对滑块的需求导致滑块和菜单的html结构必须分离，并使用了jQuery的offset方法获取并设置位置，所有的div都使用了相对定位。本案例的TAB选项卡可以比较方... 继续阅读 >