随笔分类 -  jQuery

event.target.dataset
摘要：1、event.target.dataset https://www.cnblogs.com/aichihuamei/p/6417268.html 2、HTMLElement.dataset https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLE 阅读全文
posted @ 2020-07-16 15:13 全情海洋 阅读(956) 评论(0) 推荐(0) 编辑
jquery获得焦点和失去焦点
摘要：前端网站中如果存在一些让用户填写内容的表单元素的话，我们可以使用JQ中获得焦点事件和失去焦点事件，来给用户作出一些提示的内容。今天我们就说一说JQuery下获得焦点和失去焦点的事件的使用方法。 jquery focus()获得焦点事件 focus()方法：当通过鼠标点击选中元素或通过 tab 键定位 阅读全文
posted @ 2020-06-19 09:28 全情海洋 阅读(19668) 评论(0) 推荐(1) 编辑
选项卡切换练习
摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>02_多Tab点击切换</title> 6 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 } 阅读全文
posted @ 2020-05-24 20:35 全情海洋 阅读(147) 评论(0) 推荐(0) 编辑
添加功能todolist练习
摘要：css 1 /*base*/ 2 body { 3 background: #fff; 4 } 5 6 .btn { 7 display: inline-block; 8 padding: 4px 12px; 9 margin-bottom: 0; 10 font-size: 14px; 11 li 阅读全文
posted @ 2020-05-24 20:30 全情海洋 阅读(298) 评论(0) 推荐(0) 编辑
添加删除练习
摘要：1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-Type" con 阅读全文
posted @ 2020-05-24 20:20 全情海洋 阅读(212) 评论(0) 推荐(0) 编辑
爱好选择器练习
摘要：1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content 阅读全文
posted @ 2020-05-24 20:18 全情海洋 阅读(314) 评论(0) 推荐(0) 编辑
回到顶部练习
摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .toTop{ 8 width: 40px; 9 height: 40px; 10 ba 阅读全文
posted @ 2020-05-24 20:11 全情海洋 阅读(122) 评论(0) 推荐(0) 编辑
jQuery(4)
摘要：事件委托 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li>11111</li> 10 <li>2 阅读全文
posted @ 2020-05-24 11:23 全情海洋 阅读(278) 评论(0) 推荐(0) 编辑
jq轮播图功能
摘要：html 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>焦点轮播图</title> 7 <style type="text/css"> 8 /*去除内边距,没有链接下划线*/ 9 * { 10 marg 阅读全文
posted @ 2020-05-23 00:47 全情海洋 阅读(152) 评论(0) 推荐(0) 编辑
jQuery(3)
摘要：元素的尺寸 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>14_元素的尺寸</title> 6 </head> 7 <style> 8 div { 9 width: 100px; 10 height: 15 阅读全文
posted @ 2020-05-21 00:15 全情海洋 阅读(489) 评论(0) 推荐(0) 编辑
jQuery(练习)
摘要：隔行变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01__表格隔行变色</title> <style> div, span, p { width: 140px; height: 140px; marg 阅读全文
posted @ 2020-05-21 00:09 全情海洋 阅读(165) 评论(0) 推荐(0) 编辑
jQuery (2)
摘要：过滤选择器 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>07_过滤选择器</title> 7 </head> 8 9 <body> 10 11 <div id="div1" class="box">c 阅读全文
posted @ 2020-05-21 00:02 全情海洋 阅读(224) 评论(0) 推荐(0) 编辑
jQuery (1)
摘要：初识jQuery 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>01_初识jQuery</title> 7 8 <!--使用原生DOM--> 9 <script type="text/javascrip 阅读全文
posted @ 2020-05-20 23:48 全情海洋 阅读(209) 评论(0) 推荐(0) 编辑