URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9 </head>
10 
11 <body>
12     <ul>
13         <li class="diyi">
14             <a href="">第1个li</a>
15         </li>
16         <li>
17             <a href="">第2个li</a>
18         </li>
19         <li>
20             <a href="">第3个li</a>
21         </li>
22         <li>
23 
24             
25             <a href="">第4个li</a>
26         </li>
27     </ul>
28     <input type="button" value="点击增加第一个">
29     <input id="dier" type="button" value="点击减少第一个">
30     <input id="disan" type="button" value="点击增加最后一个">
31     <input id="disi" type="button" value="点击减少最后一个">
32     <script>
33         let i = 0;
34         let j = 0;
35         let ul = document.querySelector('ul');//找到ul
36         let input = document.querySelector('input');//找到第一个input
37         input.onclick = function () {
38             let first = ul.firstElementChild;//将元素第一个子节点存入first中
39             let n = document.createElement('li');//创建元素li
40             ul.insertBefore(n, first);//将创建的元素li放入ul中
41             i++;
42             n.innerHTML = `<a href="#">增加第${i}个li</a>`;
43         }
44         let dier = document.querySelector('#dier');//找到第二个input
45         dier.onclick = function () {
46             let first = ul.firstElementChild;
47             let n = document.createElement('li');
48             ul.removeChild(first);//删除节点
49             i--;
50             n.innerHTML = `<a href="#">减少第${i}个li</a>`;
51         }
52         let disan = document.querySelector('#disan');//找到第三个input
53         disan.onclick = function () {
54             let n1 = document.createElement('li');
55             ul.appendChild(n1);
56             j++;
57             n1.innerHTML = `<a href="#">增加最后第${j}个li</a>`;
58         }
59         let disi = document.querySelector('#disi');//找到第四个input
60         disi.onclick = function () {
61             let last = ul.lastElementChild;
62             let n = document.createElement('li');
63             ul.removeChild(last);//删除节点
64             j--;
65             n.innerHTML = `<a href="#">增加第${i}个li</a>`;
66         }
67     </script>
68 </body>
69 
70 </html>

前言

在JavaScript中任何一个DOM元素都有其自身存在的事件对象,事件对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置和鼠标按钮的状态等。事件通常与函数结合使用,函数不会在事件发生前被执行。在JavaScript中常见的事件句柄(Event
Handlers)主要有:

属性名 描述(对应事件发生在何时…)
onabort 图像的加载被中断
onchange 域的内容被改变
ondblclick 当用户双击某个对象时调用的事件句柄
onfocus 元素获得焦点
onkeypress 某个键盘按键被按下并松开
onload 一张页面或一幅图像完成加载
onmousemove 鼠标被移动
onmouseover 鼠标移动到某元素之上
onreset 重置按钮被点击
onselect 文本被选中
onunload 用户退出页面
onblur 元素失去焦点
onclick 当用户点击某个对象时调用的事件名柄
onerror 在加载文档或图像时发生错误
onkeydown 某个键盘按键被按下
onkeyup 某个键盘按键被松开
onmousedown 鼠标按钮被按下
onmouseout 鼠标从某个元素移开
onmouseup 鼠标铵键被松开
onsubmit 提交按钮被点击
onresize 窗口或框架被重新调整大小

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

URLSearchParams()是个构造函数,将返回一个可以操作查询字符串的对象。

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注