day049--jQuery文档操作示例
DOM操作(CRUD增改查删)
创建元素
$('span') // 创建一个span标签
后置插入操作 append(), appendTo()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text"> <button id="append">追加</button> <ul class="comment"> </ul> <script src="./libs/jquery-3.3.1.js"></script> <script> $(function () { $('#append').click(function () { let content = $('input[type=text]').val(); $('.comment').append(`<li>${content}</li>`); //清空 $('input[type=text]').val(''); }) }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text"> <button id="append">追加</button> <ul class="comment"> <li>吴老板</li> </ul> <script src="libs/jquery-3.3.1.js"></script> <script> $(function () { //追加字符串 $('.comment').append(`<li id="item">alex</li>`); $('#item').click(function () { alert($(this).text()); }); //追加js对象 var li = document.createElement('li'); li.innerText = 'wusir'; $('.comment').append(li); //如果是jQuery对象,相当于移动操作,把原对象移动到指定位置,不会重新创建对象 setTimeout(function () { $('.comment').append($('li').eq(0)); },2000); clearTimeout(); $('<li>你好</li>').appendTo('.comment').click(function () { alert($(this).html()); }); $('button').click(function () { $('.comment').append($('<li>呵呵呵</li>')); }) }) </script> </body> </html>
前置插入 prepend(), prenpendTo()
兄弟插入(后) after(), insertAfter()
兄弟插入(前) before(), insertBefore()
删除 remove(), detach()
清空 empty(), text(''), html('')
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text"> <button id="append">后置追加</button> <button id="prepend">前置追加</button> <button id="after">兄弟追加后</button> <button id="replace">替换</button> <button id="del">删除</button> <button id="detach">删除2</button> <button id="empty">清空</button> <ul class="comment"> <li id="item">alex</li> <li><a href="#">sb</a></li> <li><a href="#">sb2</a></li> </ul> <script src="./libs/jquery-3.3.1.js"></script> <script> $('#append').click(function () { //1.后置追加 console.log($('input[type=text]').val()); // 变量不能在全局声明,否则值为空,因为初始化的时候没有值.写在事件内部,在事件发生时获取值. let content = $('input[type=text]').val(); if (!content){ //如果内容为空不执行操作 return; } $('.comment').append(`<li>${content}</li>`); //清空 添加后把输入框中的内容清空 $('input[type=text]').val(''); }) //2. 前置 $('#prepend').click(function () { let content = $('input[type=text]').val(); if (!content){ return; } // $('.comment').prepend('<li>'+content+'</li>'); //推荐使用`` //prepend()方法 前置添加 父.prepend(子) // $('.comment').prepend(`<li>${content}</li>`); //prependTo()方法 前置添加 子.prependTo(父) $(`<li>${content}</li>`).prependTo($('.comment')); $('input[type=text]').val(''); }) //3.兄弟追加 后置追加 $('#after').click(function () { let content = $('input[type=text]').val(); if (!content){ return; } // 目标.after.新内容 // $('#item').after(`<li>${content}</li>`); // 新内容.after.目标 $(`<li>${content}</li>`).insertAfter($('#item')); $('input[type=text]').val(''); }); // 4. 替换 $('#replace').click(function () { let content = $('input[type=text]').val(); if (!content){ return; } $('.comment li a').replaceWith(`<span>${content}</span>`); $('input[type=text]').val(''); }); //5.remove() 删除 表示整个标签都删除(事件也删除) $('#del').click(function () { alert(1); // $('ul').remove(); var dBtn = $(this).remove(); console.log(dBtn); $('.comment #item').append(dBtn); }); //删除标签 事件不删除 $('#detach').click(function () { alert(1); var dBtn = $(this).detach(); console.log(dBtn); $('.comment #item').append(dBtn); }); //清空父级元素的子内容 三种方法 $('#empty').click(function () { // $('.comment').empty(); // $('.comment').html(''); $('.comment').text(''); }) </script> </body> </html>
事件
事件监听 addEventListener(事件,fn,boolen)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件流</title> <script> window.onload = function () { var oBtn = document.getElementById('btn'); //1 document.addEventListener('click', function () { console.log('document处于事件捕获阶段'); }, true); //2 document.documentElement.addEventListener('click', function () { console.log('html处于事件捕获阶段'); }, true); //3 document.body.addEventListener('click', function () { console.log('body处于事件捕获阶段'); }, true); //4 oBtn.addEventListener('click', function () { console.log('btn处于事件捕获阶段'); }, true); //4 oBtn.addEventListener('click', function () { console.log('btn处于事件冒泡阶段'); }, false); //5 false 表示冒泡 document.body.addEventListener('click', function () { console.log('body处于事件冒泡阶段'); }, false); // //6 document.documentElement.addEventListener('click', function () { console.log('html处于事件冒泡阶段'); }, false); //7 document.addEventListener('click', function () { console.log('document处于事件冒泡阶段'); }, false); }; </script> </head> <body> <a href="javascript:void(0);" id="btn">按钮</a> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 100px; height: 200px; background-color: red; } </style> </head> <body> <div class="box"> <p>alex</p> <button id="btn">按钮</button> </div> <script src="./libs/jquery-3.3.1.js"></script> <script> $(function () { //jquery中没有捕获阶段 只有冒泡阶段 //每一个事件的回调函数 都会有一个事件对象(js) $('#btn').click(function (e) { console.log(e); //阻止冒泡 e.stopPropagation(); $('.box p').css({ fontSize:20 }) }); $('.box').click(function (e) { e.stopPropagation(); alert(1); $(this).css({ backgroundColor:'green' }) }); $('body').click(function () { $(this).css({ backgroundColor:'yellow' }) }) }) </script> </body> </html>
数据驱动视图(双向的数据绑定)
oninput 定义和用法
oninput 事件在用户输入时触发。 该事件在 <input> 或 <textarea> 元素的值发生改变时触发。 提示： 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" value="alex"> <p></p> <script src="./libs/jquery-3.3.1.js"></script> <script> //初始化操作 $('p').html($('input[type=text]').val()); // oninput监听事件, 事件在用户输入时触发 $('input[type=text]')[0].oninput = function (e) { console.log(e); var val = e.target.value; console.log(val); $('p').html(val); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .title{ color: red; } </style> </head> <body> <ul> </ul> <script src="./libs/jquery-3.3.1.js"></script> <script> $(function () { var data = { status:200, lists:[ { title:'完美世界222', author:'辰东', status:'连载中', addr:'起点中文网' }, { title:'蛮荒记', author:'我吃西红柿', status:'已完结', addr:'起点中文网' }, { title:'辟邪剑谱', author:'吴老板', status:'连载中ing', addr:'起点中文网' } ] }; if (data.status == 200){ data.lists.forEach(function (item,index) { $(`<li> <p class="title">${item.title}</p> <p class="author">${item.author}</p> <p class="stats">${item.status}</p> <p class="addr">${item.addr}</p> </li>`).appendTo('ul'); }) } }) </script> </body> </html>
事件对象(event)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text"> <script src="./libs/jquery-3.3.1.js"></script> <script> $(function () { function enter() { alert(1); } $('input[type=text]').keydown(function (e) { console.log(e.keyCode); console.log(e.target); //jsdom对象 console.log(e.currentTarget); //jsdom对象 console.log(this); //jsdom对象 switch (e.keyCode){ case 13: //回车键 enter(); break; } }) }) </script> </body> </html>
e.target(), e.currentTarget(), this
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 100px; height: 200px; background-color: red; } </style> </head> <body> <div class="box"> <p>alex</p> <button id="btn">按钮</button> </div> <script src="./libs/jquery-3.3.1.js"></script> <script> $(function () { //jquery中没有捕获阶段 只有冒泡阶段 //每一个事件的回调函数 都会有一个事件对象(js) $('#btn').click(function (e) { console.log(this); console.log(e.target); e.stopPropagation(); console.log(e.currentTarget); }); $('.box').click(function (e) { console.log(this); console.log(e.target); //传递事件的对象, 事件源 e.stopPropagation(); console.log(e.currentTarget); // this和currentTarget的对象相同 }); $('body').click(function (e) { console.log(this); console.log(e.target); console.log(e.currentTarget); }); }) </script> </body> </html>
键盘事件
1.键盘事件：完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。
keydown：按键按下
keyup：按键抬起
keypress：按键按下抬起
js 里面的键盘事件经常用到，所以收集了键盘事件对应的键码来分享下：
keyCode 8 = BackSpace BackSpace
keyCode 9 = Tab Tab
keyCode 12 = Clear
keyCode 13 = Enter
keyCode 16 = Shift_L
keyCode 17 = Control_L
keyCode 18 = Alt_L
keyCode 19 = Pause
keyCode 20 = Caps_Lock
keyCode 27 = Escape Escape
keyCode 32 = space
keyCode 33 = Prior
keyCode 34 = Next
keyCode 35 = End
keyCode 36 = Home
keyCode 37 = Left
keyCode 38 = Up
keyCode 39 = Right
keyCode 40 = Down
keyCode 41 = Select
keyCode 42 = Print
keyCode 43 = Execute
keyCode 45 = Insert
keyCode 46 = Delete
keyCode 47 = Help
keyCode 48 = 0 equal braceright
keyCode 49 = 1 exclam onesuperior
keyCode 50 = 2 quotedbl twosuperior
keyCode 51 = 3 section threesuperior
keyCode 52 = 4 dollar
keyCode 53 = 5 percent
keyCode 54 = 6 ampersand
keyCode 55 = 7 slash braceleft
keyCode 56 = 8 parenleft bracketleft
keyCode 57 = 9 parenright bracketright
keyCode 65 = a A
keyCode 66 = b B
keyCode 67 = c C
keyCode 68 = d D
keyCode 69 = e E EuroSign
keyCode 70 = f F
keyCode 71 = g G
keyCode 72 = h H
keyCode 73 = i I
keyCode 74 = j J
keyCode 75 = k K
keyCode 76 = l L
keyCode 77 = m M mu
keyCode 78 = n N
keyCode 79 = o O
keyCode 80 = p P
keyCode 81 = q Q at
keyCode 82 = r R
keyCode 83 = s S
keyCode 84 = t T
keyCode 85 = u U
keyCode 86 = v V
keyCode 87 = w W
keyCode 88 = x X
keyCode 89 = y Y
keyCode 90 = z Z
keyCode 96 = KP_0 KP_0
keyCode 97 = KP_1 KP_1
keyCode 98 = KP_2 KP_2
keyCode 99 = KP_3 KP_3
keyCode 100 = KP_4 KP_4
keyCode 101 = KP_5 KP_5
keyCode 102 = KP_6 KP_6
keyCode 103 = KP_7 KP_7
keyCode 104 = KP_8 KP_8
keyCode 105 = KP_9 KP_9
keyCode 106 = KP_Multiply KP_Multiply
keyCode 107 = KP_Add KP_Add
keyCode 108 = KP_Separator KP_Separator
keyCode 109 = KP_Subtract KP_Subtract
keyCode 110 = KP_Decimal KP_Decimal
keyCode 111 = KP_Divide KP_Divide
keyCode 112 = F1
keyCode 113 = F2
keyCode 114 = F3
keyCode 115 = F4
keyCode 116 = F5
keyCode 117 = F6
keyCode 118 = F7
keyCode 119 = F8
keyCode 120 = F9
keyCode 121 = F10
keyCode 122 = F11
keyCode 123 = F12
keyCode 124 = F13
keyCode 125 = F14
keyCode 126 = F15
keyCode 127 = F16
keyCode 128 = F17
keyCode 129 = F18
keyCode 130 = F19
keyCode 131 = F20
keyCode 132 = F21
keyCode 133 = F22
keyCode 134 = F23
keyCode 135 = F24
keyCode 136 = Num_Lock
keyCode 137 = Scroll_Lock
keyCode 187 = acute grave
keyCode 188 = comma semicolon
keyCode 189 = minus underscore
keyCode 190 = period colon
keyCode 192 = numbersign apostrophe
keyCode 210 = plusminus hyphen macron
keyCode 211 =
keyCode 212 = copyright registered
keyCode 213 = guillemotleft guillemotright
keyCode 214 = masculine ordfeminine
keyCode 215 = ae AE
keyCode 216 = cent yen
keyCode 217 = questiondown exclamdown
keyCode 218 = onequarter onehalf threequarters
keyCode 220 = less greater bar
keyCode 221 = plus asterisk asciitilde
keyCode 227 = multiply division
keyCode 228 = acircumflex Acircumflex
keyCode 229 = ecircumflex Ecircumflex
keyCode 230 = icircumflex Icircumflex
keyCode 231 = ocircumflex Ocircumflex
keyCode 232 = ucircumflex Ucircumflex
keyCode 233 = ntilde Ntilde
keyCode 234 = yacute Yacute
keyCode 235 = oslash Ooblique
keyCode 236 = aring Aring
keyCode 237 = ccedilla Ccedilla
keyCode 238 = thorn THORN
keyCode 239 = eth ETH
keyCode 240 = diaeresis cedilla currency
keyCode 241 = agrave Agrave atilde Atilde
keyCode 242 = egrave Egrave
keyCode 243 = igrave Igrave
keyCode 244 = ograve Ograve otilde Otilde
keyCode 245 = ugrave Ugrave
keyCode 246 = adiaeresis Adiaeresis
keyCode 247 = ediaeresis Ediaeresis
keyCode 248 = idiaeresis Idiaeresis
keyCode 249 = odiaeresis Odiaeresis
keyCode 250 = udiaeresis Udiaeresis
keyCode 251 = ssharp question backslash
keyCode 252 = asciicircum degree
keyCode 253 = 3 sterling
keyCode 254 = Mode_switch
使用event对象的keyCode属性判断输入的键值
eg：if(event.keyCode==13)alert(“enter!”);
键值对应表
A 0X65 U 0X85
B 0X66 V 0X86
C 0X67 W 0X87
D 0X68 X 0X88
E 0X69 Y 0X89
F 0X70 Z 0X90
G 0X71 0 0X48
H 0X72 1 0X49
I 0X73 2 0X50
J 0X74 3 0X51
K 0X75 4 0X52
L 0X76 5 0X53
M 0X77 6 0X54
N 0X78 7 0X55
O 0X79 8 0X56
P 0X80 9 0X57
Q 0X81 ESC 0X1B
R 0X82 CTRL 0X11
S 0X83 SHIFT 0X10
T 0X84 ENTER 0XD
如果要使用组合键，则可以判断是否同时按下了这几个键，比如ctrl键、shift键以及alt键的组合使用就可以判断是否多按下了ctrl键、shift键以及alt键
jQuery的事件
鼠标移入和移出 (冒泡)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } ul { list-style: none; } ul li{ float: right; margin-right: 100px; width: 80px; height: 32px; font-size: 14px; position: relative; background-color: red; line-height: 32px; text-align: center; } ul li .list{ display: none; width: 200px; height: 300px; background-color: green; position: absolute; right: 0; } </style> </head> <body> <ul> <li> <a href="#">alex</a> <div class="list"> <p>个人中心</p> <p>账号设置</p> <p>意见反馈</p> <p>退出</p> </div> </li> </ul> <script src="./libs/jquery-3.3.1.js"></script> <script> $(function () { // 冒泡导致了问题 // 鼠标穿过备选元素 或者是被选的子元素 // $('ul li').mouseover(function () { // console.log('进来了') // $('ul li .list').show(); // }) // $('ul li').mouseout(function () { // console.log('出去了') // $('ul li .list').hide(); // }) $('ul li').mouseenter(function () { console.log('进来了') $('ul li .list').show(); }) $('ul li ').mouseleave(function () { console.log('出去了') $('ul li .list').hide(); }) }) </script> </body> </html>
双击的问题 dblclick
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>按钮</button> <script src="./libs/jquery-3.3.1.js"></script> <script> $(function () { $('button').click(function () { console.log('单击了'); }); $('button').dblclick(function () { console.log('双击了'); }) }) </script> </body> </html>
解决单双击事件冲突
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>按钮</button> <script src="./libs/jquery-3.3.1.js"></script> <script> // 双击时候 出现两次单击（干掉） var time = null; //双击 ---》（ 1次单击+（小于200ms）1次单击） $('button').click(function () { // 取消上次延时未执行的方法 clearTimeout(time); //执行延时 time = setTimeout(function () { //do function在此处写单击事件要执行的代码 console.log('单机') }, 300); }); $('button').dblclick(function(){ clearTimeout(time) console.log('双击了') }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>按钮</button> <script src="./libs/jquery-3.3.1.js"></script> <script> // 双击时候 出现两次单击（干掉） var timer = null; //双击 ---》（ 1次单击+（小于500ms）1次单击） $('button').click(function () { //取消上次延时未执行的方法 clearTimeout(timer); //执行延时 timer = setTimeout(function () { //do function在此处写单击事件要执行的代码 console.log('单击了'); },500); }); $('button').dblclick(function () { clearTimeout(timer); console.log('双击了') }) </script> </body> </html>
单双击 冲突的解决
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>按钮</button> <script src="./libs/jquery-3.3.1.js"></script> <script> // 双击时候 出现两次单击（干掉） var time = null; //双击 ---》（ 1次单击+（小于200ms）1次单击） $('button').click(function () { // 取消上次延时未执行的方法 clearTimeout(time); //执行延时 time = setTimeout(function () { //do function在此处写单击事件要执行的代码 console.log('单机') }, 300); }); $('button').dblclick(function(){ clearTimeout(time) console.log('双击了') }) </script> </body> </html>
冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } .fuBox { width: 100%; height: 300px; background-color: red; position: fixed; top: 0; left: 0; display: none; } .fuBox .container { width: 1000px; margin: 0 auto; position: relative; } .fuBox .container span { position: absolute; right: 0; top: 30px; cursor: pointer; color: #0086b3; font-weight: bold; } </style> </head> <body style="height: 2000px;"> <button class="changefu">换肤</button> <div class="fuBox"> <div class="container"> <ul> <li>热门</li> <li>热门</li> <li>热门</li> </ul> <span>收起</span> </div> </div> <script src="./libs/jquery-3.3.1.js"></script> <script> $(function () { changeFu(); function changeFu() { $('.changefu').click(function (e) { e.stopPropagation(); $('.fuBox').stop().slideDown(400); }); $('.fuBox .container span, body').click(function (e) { $('.fuBox').stop().slideUp(400); }); $('.fuBox').click(function (e) { e.stopPropagation(); }); $('.fuBox .container ul li').click(function (e) { e.stopPropagation(); alert(1); }) } }) </script> </body> </html>
