![](https://img-blog.csdnimg.cn/8ed9824d38bb4b888fa13bcb1922ef91.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
jquery
文章平均质量分 79
基本jq逻辑代码案例
耶啵奶膘
做一个快乐的小孩
展开
-
jq——点击显示隐藏来回切换、图片来回切换
jq——点击显示隐藏来回切换、图片来回切换原创 2023-08-29 19:01:40 · 804 阅读 · 0 评论 -
jquery案例17——手机端监听点击、长按、移动事件
jq监听点击、长按、移动事件原创 2022-06-24 16:21:48 · 1341 阅读 · 0 评论 -
jquery案例16——电梯导航
jq电梯导航原创 2022-06-10 15:07:54 · 1634 阅读 · 0 评论 -
jquery案例15——jq回到顶部
jq回到顶部原创 2022-05-17 20:33:28 · 2165 阅读 · 0 评论 -
jquery案例14——ajax、请求接口、处理接口返回数据
一、图片请求1.案例描述利用jq中的ajax去请求接口,获取数据,并对数据进行渲染显示到页面上。2.案例效果演示说明:目前我只请求了4条数据。3.案例局部代码css代码:<style> .imgSrc img { width: 100px; height: 80px; object-fit: contain; } table { text-align: center; }<原创 2022-05-17 09:27:36 · 3130 阅读 · 0 评论 -
jquery案例13——jq简易购物车、加减计算、删除
一、案例效果演示二、案例整体代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2022-05-17 08:50:19 · 1500 阅读 · 0 评论 -
jquery案例12——动态添加输入内容、创建元素、插入元素、删除元素
一、案例描述创建元素动态插入元素删除元素二、案例效果演示三、案例整体代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,原创 2022-05-17 08:49:58 · 450 阅读 · 0 评论 -
jquery案例11——模拟小说阅读器
一、案例效果二、案例完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2022-05-16 22:40:09 · 377 阅读 · 0 评论 -
jquery案例10——下拉列表显示、二级菜单
一、案例效果二、案例完成代码(方法多种)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&原创 2022-05-16 22:36:31 · 990 阅读 · 0 评论 -
jquery案例9——网站品牌列表展开收起效果
一、案例效果二、案例完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=\, initial-scale=1.0"> <title原创 2022-05-16 22:30:01 · 1123 阅读 · 0 评论 -
jquery案例8——王者手风琴
一、案例效果二、案例完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2022-05-16 22:27:20 · 133 阅读 · 0 评论 -
jquery案例7——王者显示与隐藏、淡入、淡出、遮罩层、fadeIn、fadeOut
一、案例描述鼠标经过模块显示遮罩层,离开恢复原样。二、案例效果演示三、案例局部代码四、案例整体代码五、总结原创 2022-05-16 22:23:26 · 166 阅读 · 0 评论 -
jquery案例6—— jq聚焦失焦、普通元素获取文本、表单获取元素
一、案例描述聚焦失焦事件,当input聚焦时,添加阴影聚焦效果。输入内容,当失焦后,会将输入的内容进行显示。二、案例效果演示三、案例局部代码css代码: <style> input { width: 250px; border: none; outline: none; border: 1px solid green; border-radius: 5px; height: 40p原创 2022-05-16 22:08:40 · 1449 阅读 · 0 评论 -
jquery案例5——tab栏切换、菜单栏切换、选项卡、来回切换
一、案例描述鼠标经过菜单栏,切换内容模块。二、案例效果演示三、案例局部代码css代码: <style> * { margin: 0; padding: 0; } #conten { padding: 40px; } ul { overflow: hidden; width: 400px; background-color: #ccc原创 2022-05-16 22:02:44 · 2011 阅读 · 1 评论 -
jquery案例4——jq动画、jq显示与隐藏(规定时间)滑动下拉slideDown,滑动上拉slideUp
一、案例描述一打开页面,内容缓慢出现。二、案例效果演示三、案例局部代码css代码: <style> div { width: 300px; height: 300px; border: 1px solid red; display: none; } img { width: 100%; height: 100%; } </原创 2022-05-16 21:53:19 · 442 阅读 · 0 评论 -
jquery案例3——jq隔行换色
一、案例描述隔行换色二、案例效果演示三、案例整体代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca原创 2022-05-16 21:45:30 · 880 阅读 · 0 评论 -
jquery案例2——点击事件添加样式、鼠标经过事件、鼠标离开事件、一组、多组样式
一、鼠标点击添加样式(一)案例描述鼠标点击li,添加盒子阴影。(二)案例效果演示(三)代码:引入jq文件:<script src="http://code.jquery.com/jquery-latest.js"></script>css代码:<style> ul li { margin-bottom: 10px; padding: 10px; width: 400px; borde原创 2022-05-16 21:41:45 · 1684 阅读 · 0 评论 -
jquery案例1——jq倒计时、5秒倒计时
一、案例描述倒计时,以5秒倒计时为例。二、案例效果演示三、案例整体代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, in原创 2022-05-15 19:11:21 · 877 阅读 · 0 评论