分类：JQuery

2022
01-12

jQuery实现嵌套选项卡功能

jQuery实现嵌套选项卡功能 本文实例为大家分享了jQuery实现嵌套选项卡功能的具体代码，供大家参考，具体内容如下知识点总结：1.siblings()：兄弟元素，获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。2.removeClass()：方法从被选元素移除一个或多个类。3.addClass()：方法向被选元素添加一个或多个类。4.eq()：方法将匹配元素集缩减值指定index上的一个。5.hide()和show()：隐藏和显示特效。6.parent()：获得当前匹配元素集合中每个元素的父... 继续阅读 >
2021
10-17

JavaScript与JQuery框架基础入门教程

目录一，JS对象二，DOM?1，作用?2，测试三，Jquery?1，概述?2，使用步骤?3，入门案例?4，jQuery的文档就绪四，JQuery的语法?1，选择器?2,常用函数?3,常用事件?4,练习总结一，JS对象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>测试js的创建对象</title><script>//2.创建对象方式2：varp2={//绑定了属性name:"张三",age:19,//绑定了函数eat:function(a){console.l... 继续阅读 >
2021
09-07

jQuery实现表单验证

jQuery实现表单验证 使用jQuery实现表单验证，供大家参考，具体内容如下register.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>注册</title><!--导入jQuery--><scriptsrc="js/jquery-3.3.1.js"></script><!--进行表单校验--><script>/*表单校验：1.用户名：单词字符，长度8到20位2.密码：单词字符，长度8到20位3.email：邮件格式4.姓名：非空5.手机号：手... 继续阅读 >
2021
09-06

jquery+Ajax实现简单分页条效果

jquery+Ajax实现简单分页条效果 本文实例为大家分享了jquery+Ajax实现分页条效果的具体代码，供大家参考，具体内容如下一、如果是jsp页面的话，可以用EL表达式和JSTL标签制作一个分页条，没有什么难度。用EL表达式和JSTL标签实现的缺点就是无法实现异步效果，整个页面是重新刷新了一遍的。二、如果是普通的html页面，当然是无法使用EL表达式和JSTL标签的，这时只能通过异步Ajax的方式去实现。当然了，JSP页面两种方式都是可以使用的。三、分页条，这里我是用Ajax... 继续阅读 >
2021
07-22

JS实现jQuery的append功能

目录ShowMeTheCode测试下效果效果PS另一种方法ShowMeTheCodeHTMLElement.prototype.appendHTML=function(html){letdivTemp=document.createElement("div");letnodes=null;letfragment=document.createDocumentFragment();divTemp.innerHTML=html;nodes=divTemp.childNodes;nodes.forEach(item=>{fragment.appendChild(item.cloneNode(true));})//插入到最后appendthis.appendChild(fragment)... 继续阅读 >
2021
07-04

jQuery轮播图功能实现方法

jQuery轮播图功能实现方法 本文实例为大家分享了jQuery轮播图功能的实现代码，供大家参考，具体内容如下jQuery轮播（无animation）html布局<!--整个轮播区域--><divclass="container"><!--轮播图--><ulclass="items"style="left:-200px"><!--实际上只轮播5张图，将实际上的第一张放在最后一张，实际上的最后一张放在第一张，障眼法--><li>5</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>1</... 继续阅读 >
2021
07-01

jquery插件实现鼠标隐藏

jquery插件实现鼠标隐藏 本文实例为大家分享了jquery插件实现鼠标隐藏的具体代码，供大家参考，具体内容如下鼠标悬浮在某个dom上的时候，自动给你隐藏，效果图因为录屏软件的问题，作用不出来效果如下代码部分<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>做久置隐藏</title><scriptsrc="js/jquery-3.4.1.min.js"></script><style>*{margin:0;padding:0;}.box{border:1pxsolidlightgray;width:100p... 继续阅读 >
2021
06-19

到底该抛不抛弃JQuery

前言我以前很喜欢jQuery，而且说实话，我是先学jQuery，再学JavaScript的。所以我写这篇文章有点像是在背叛jQuery。我知道，关于为什么不应该用jQuery的文章已经汗牛充栋，但我只是想说下自己的亲身体验。不用jQuery用什么？随着web的发展，新技术长江后浪推前浪，前浪死在沙滩上。就像有些编程语言曾经辉煌过，现在也消失不见了。我认为jQuery也不例外，是时候跟它说再见了，虽然它曾经给我们带来过美妙的编程体验。... 继续阅读 >
2021
06-13

详解jQuery的animate动画方法及动画排队问题解决

animate（）动画方法作用：执行css属性集的自定义动画语法：$(selector).animate(styles,speed,easing,callback)•参数1：css的属性名和运动结束位置的属性值的集合。•参数2：可选，规定动画的速度，默认是"normal"。其他值，“slow”、“normal”、“fast”，数字格式，单位为毫秒。•参数3：可选，规定在不同的动画点中设置动画速度的easing函数，值包含swing（变速）和linear（匀速）。̶... 继续阅读 >
2021
06-12

详解jQuery 链式调用

链式调用jQuery对象调用任何方法(除了节点关系方法)执行完后,方法都会有一个返回值,返回值就是jQuery对象自己,这个现象给我们提供了便利,可以对执行结果继续打点调用jQuery的方法和属性。即——可以使用jQuery对象进行连续打点调用console.log($(this).css("background-color","pink").html("hello"));jQuery对象调用除了节点关系的方法之外，其他的方法执行后，返回值就是对象自己，可以继续链式调用其他的jQuery对象的方法和属... 继续阅读 >
2021
06-05

jquery插件实现图片对比

jquery插件实现图片对比 本文实例为大家分享了jquery插件实现图片对比的具体代码，供大家参考，具体内容如下很常见的一个效果，做起来不难效果如下代码部分<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>做图片对比</title><scriptsrc="js/jquery-3.4.1.min.js"></script><style>*{margin:0px;padding:0px;user-select:none;}.div{border:1pxsolidlightgray;width:400px;height:200px;... 继续阅读 >
2021
05-26

jquery模拟picker实现滑动选择效果

jquery模拟picker实现滑动选择效果 本文实例为大家分享了jquery模拟picker实现滑动选择效果的具体代码，供大家参考，具体内容如下代码：<!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/><title></title><styletype="text/css">html,body{width:100%;height:100%;}div{box-sizing:border-box;}.... 继续阅读 >
2021
05-26

jquery实现时间选择器

jquery实现时间选择器 本文实例为大家分享了jquery实现时间选择器的具体代码，供大家参考，具体内容如下效果图：代码：<!DOCTYPEhtml><html><head><metacharset="utf-8"/><metaname="renderer"content="webkit"><metahttp-equiv="X-UA-Compatible"content="IE=Edge,chrome=1"><metaname="flexible"content="initial-dpr=2"/><metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1... 继续阅读 >