JQuery
Z0o1010
这个作者很懒,什么都没留下…
展开
-
利用JQuery对节点进行增加、删除、复制、替换
<body> <button>添加节点</button> <div> <ul> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li> </ul> </div> </body>JQuery.js$("button").click(func.原创 2020-11-18 20:11:43 · 385 阅读 · 0 评论 -
轮播图
<body> <div> <ul> <!-- 图片路径按照实际路径进行更改 --> <li><img src="./img/Red.png" alt=""></li> <li><img src="./img/Yellow.png" alt=""></li> <li><img src="./img/Blue.png" alt=".原创 2020-11-18 19:34:51 · 62 阅读 · 0 评论 -
使用animate进行自定义动画
<body> <button>操作属性</button> <button>累加属性</button> <button>关键字</button> <div class="one"></div> <div class="two"></div> </body>Test.css* { margin: 0; padding: 0;}di.原创 2020-11-18 13:50:46 · 711 阅读 · 0 评论 -
show/hide和fadeIn/fadeOut的区别
show隐藏的效果是从上至下或从左上到右下慢慢折叠缩小fadeIn的淡出效果是整体淡化直至出现hide隐藏的效果是从下至上或从右下到左上慢慢折叠缩小fadeOut的淡出效果是整体淡化直至消失原创 2020-11-16 10:22:59 · 682 阅读 · 0 评论 -
实现图片的淡入淡出
<body> <button>淡入</button> <button>淡出</button> <button>切换</button> <button>淡入到</button> <div></div> </body>Test.css* { margin: 0; padding: 0;}div { width: 300px; .原创 2020-11-16 10:19:04 · 136 阅读 · 0 评论 -
实现下拉菜单
<body> <ul class="nav"> <li>一级菜单 <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> .原创 2020-11-16 09:50:19 · 100 阅读 · 0 评论 -
实现折叠菜单
<body> <ul class="nav"> <li>一级菜单 <ul class="sub"> <li>二级</li> <li>二级</li> <li>二级</li> </ul> </li> <li>一级菜单 <ul class="sub"> <.原创 2020-11-16 09:30:13 · 132 阅读 · 0 评论 -
渐入渐出小练习
<body> <img src="img/Red.png" class="left"> <img src="img/Blue.png" class="right"> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <b.原创 2020-11-16 09:03:41 · 60 阅读 · 0 评论 -
实现动画切换渐进渐出效果
<body> <button>显示</button> <button>隐藏</button> <button>切换</button> </body>Test.css* { margin: 0; padding: 0;}div { width: 200px; height: 200px; background-color: red; display: none;}JQu.原创 2020-11-16 08:52:18 · 563 阅读 · 0 评论 -
使用JQuery实现图片与标签的绑定切换
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="./css/Test.css"/> </head> <body> <div class="box"> <ul class=原创 2020-11-15 20:30:02 · 134 阅读 · 0 评论 -
事件委托初了解
<body> <ul> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li> </ul> <button>新增一个li</button> </body>JQuery.js$("button").click(function(){ $("ul").append("<li&g.原创 2020-11-15 14:26:11 · 64 阅读 · 0 评论 -
创建自定义事件
<body> <div class="div1"></div> </body>JQuery.js$(".div1").on("myClick", function(){ alert("这是自定义事件")});$(".div1").trigger("myClick");原创 2020-11-15 14:06:26 · 177 阅读 · 1 评论 -
trigger和triggerHandler的区别
trigger: 会触发事件冒泡和默认行为triggerHandler: 不会触发事件冒泡和默认行为原创 2020-11-15 14:01:30 · 300 阅读 · 0 评论 -
了解及阻止事件冒泡和默认行为
<body> <div class="father"> <div class="son"></div> </div> <a href="https://www.baidu.com">我是百度</a> </body>JQuery.js/* 1、什么是事件冒泡2、如何阻止事件冒泡3、什么是默认行为4、如何阻止默认行为 */$(".son").click(function(ev.原创 2020-11-15 13:47:36 · 101 阅读 · 0 评论 -
获取及设置指定标签的位置
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="./css/Test.css"/> </head> <body> <button>123</button> <b原创 2020-11-14 22:08:40 · 239 阅读 · 0 评论 -
利用JQuery对CSS进行操作
<body> <div></div> </body>JQuery.js// 1、逐个设置$("div").css("width", "100px");$("div").css("height", "100px");$("div").css("background", "red");// 2、链式设置(尽量不要超过三个)$("div").css("width", "100px").css("height", "100px").css(".原创 2020-11-14 21:10:28 · 191 阅读 · 0 评论 -
attr小练习
<body> <input type="text"> <button>切换图片</button> <br> <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt=""></body>JQuery.js/* 1、给按钮添加单击事件2、获取输入框输入的内容3、修改img的src属性节点的值 */原创 2020-11-14 20:38:06 · 58 阅读 · 0 评论 -
attr和prop的使用时机
官方推荐:在操作属性节点时,具有true和false两个属性的属性节点,使用prop(),其它的使用attr()原创 2020-11-14 20:29:09 · 84 阅读 · 0 评论 -
简单了解JQuery中的prop及removeProp
<!DOCTYpE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="./css/Test.css"/> </head> <body> <span class="span1" name="it666">&原创 2020-11-14 20:25:06 · 190 阅读 · 0 评论 -
简单了解JQuery中的attr及removeAttr
<body> <span class="span1" name="it1"></span> <span class="span2" name="it2"></span> </body>````javascript/* attr(name|pro|key,val|fn) 作用:获取或设置属性节点的值 传递一个参数,获取属性节点的值 传递两个参数,设置属性节点的值 注意: 获取:无论找到多少个元素,都只会.原创 2020-11-12 17:01:20 · 836 阅读 · 0 评论