![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
DOM实例
搞前端的小菜
热爱前端的小菜,低代码方向的爱好者
展开
-
JQuery实现表格内容过滤(附代码)
效果显示:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> th原创 2020-08-15 13:48:18 · 854 阅读 · 0 评论 -
JQuery实现单行变色表格(附代码)
效果展示:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> th {原创 2020-08-15 13:27:44 · 535 阅读 · 0 评论 -
JQuery实现一个提交框(附代码)
效果显示:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {原创 2020-08-14 18:36:54 · 277 阅读 · 0 评论 -
JQuery实现轮播图(附代码)
之前有写过一篇用原生dom写的轮播图实现代码:宝贝点进来吧,有你想要的而这次用JQuery写的,还是用之前的html结构和css样式,只是改变了js的代码部分。所以这次就把用JQuery写的js代码写下来。。。。。代码: <script src="./jquery-3.5.1.min.js"></script> <script> var currentIndex = 0; var timer; //图片滑动原创 2020-08-14 14:11:48 · 626 阅读 · 0 评论 -
JQuery实现选项卡( 附代码)
样式:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {原创 2020-08-14 10:37:20 · 2803 阅读 · 0 评论 -
DOM经典例子(轮播图)
效果显示:功能:1、每两秒自动换页;2、可以进行1,2,。。翻页;3、可以通过>或者<进行翻页;图片资源:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2020-08-12 20:22:11 · 279 阅读 · 0 评论 -
DOM经典例子(选项卡2)
效果:方法2:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *原创 2020-08-12 18:19:47 · 153 阅读 · 0 评论 -
DOM经典例子(选项卡1)
实现效果:方法1:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>原创 2020-08-12 18:09:36 · 220 阅读 · 0 评论 -
DOM经典例子(放大镜)
首先声明一下,我的两张图片是400 300和800 600的,所以代码中的div大小设置也是依赖于这个的。如果图片大小更换,代码中的div的大小也要改变,而且如果两张图片要求是1:2的。我把我的图片页拿出来了。。。OK,代码附上。。。。。。。。。。。。。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" co原创 2020-08-11 15:18:03 · 363 阅读 · 0 评论 -
DOM经典例子(元素拖拽)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {原创 2020-08-11 14:13:09 · 165 阅读 · 0 评论