百度前端学院task16总结

最新推荐文章于 2024-07-14 09:37:06 发布

sunyueru

最新推荐文章于 2024-07-14 09:37:06 发布

阅读量263

点赞数

分类专栏： javascript 文章标签：前端

本文链接：https://blog.csdn.net/sunyueru/article/details/76695237

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

task16:
代码地址：https://github.com/sunyueru/IFE/tree/master/task16
demo：https://sunyueru.github.io/IFE/task16/task16.html

task16的总结
task16是要实现一个动态添加和删除的功能。操作的对象是一个aqiData对象。先说一下两个操作：
为对象添加属性：直接赋值aqiData[strCity]=strValue;
为对象删除属性：使用delete delete aqiData[strCity];
可以参考这部分的操作：

var xiaoming = {
    name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一个age属性
xiaoming.age; // 18
delete xiaoming.age; // 删除age属性
xiaoming.age; // undefined
delete xiaoming['name']; // 删除name属性
xiaoming.name; // undefined
delete xiaoming.school; // 删除一个不存在的school属性也不会报错

本任务的注意点：

正则表达式的使用（简单总结）
如何渲染一个表格（for in的使用）
addEventListener及dom2级事件处理程序的相关知识

1、正则表达式的使用：
语法：正则表达式主体/修饰符
不同的修饰符意义不一样，不同格式的表达式主体意义也不一样。这里先不总结那么多，之后单独写一个正则表达式吧。
字符串方法：search（）和replace（）方法。
举例子：

<body>
<p>搜索字符串 "Runoob", 并显示匹配的起始位置：</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
    var str = "Visit Runoob!"; 
    var n = str.search("Runoob");
    document.getElementById("demo").innerHTML = n;
}
</script>
</body>

<body>
<p>替换 "microsoft" 为 "Runoob" :</p>
<button onclick="myFunction()">点我</button>
<p id="demo">请访问 Microsoft!</p>
<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace(/microsoft/i,"Runoob");
    document.getElementById("demo").innerHTML = txt;
}
</script>
</body>

着重强调
RegExp对象的方法：
test（）和exec（）
什么叫对象方法，简单的说就是：
正则对象.test（字符串）
正则对象.exec（字符串）
其中，test的返回值是true/false；exec的返回值是一个数组。具体用法这里不赘述了。
还想说一下match和exec的区别。百度了一下说，match是字符串方法，也就是说：字符串.match（正则表达式）
match的用法：http://www.w3school.com.cn/jsref/jsref_match.asp
本任务中需要判断输入的字符串是否是中英文，是否是数字：
这里使用的是match方法，具体代码：

 if(!strCity.match( /^[A-Za-z\u4E00-\u9FA5]+$/)){
      alert("城市名称必须为中英文字符！");
      return;
   }
   if(!strValue.match(/^\d+$/)){
      alert("空气质量指数必须为整数！");
      return;

简单解释一下下：
/^[ ….] + $/形如这个的意思： ^:表示以什么开头 +：表示匹配一个或多个字符$ :表示以什么结尾
\d表示匹配一个数字
所以（/^[\d]+$/）意思就是以数字开头，以数字结尾，含有一个或者多个数字的表达式。
注意一下，/^[…]/和/[^…]/不一样哦。
关于正则表达式的详细介绍，可以参考：
http://www.jb51.net/article/43190.htm

有关正则表达式就先说到这里。

2、如何渲染一个表格

function renderAqiList() {
   table.innerHTML="<tr><td>城市</td><td>空气质量</td><td>操作</td></tr>";
   for(strCity in aqiData){
    var tr=document.createElement("tr");
    var td1=document.createElement("td");
    td1.innerHTML=strCity;
    tr.appendChild(td1);
    var td2=document.createElement("td");
    // td2.innerHTML=strValue;//有问题
    td2.innerHTML=aqiData[strCity];
    tr.appendChild(td2);
    var td3=document.createElement("td");
    td3.innerHTML="<button>删除</button>";
    tr.appendChild(td3);
    table.appendChild(tr);
   }
}

首先就是给table的innerHTML设置初值，然后使用for循环，不断的新增子节点，同时使用appendChild把子节点添加到父元素上。
要注意的有两点（只有我才会犯的弱智错误）：
①for key in object,注意哪个是key，不要写成value了。
②错误代码：

    // td2.innerHTML=strValue;//有问题

正确代码：

    td2.innerHTML=aqiData[strCity];

3、addEventListener

语法：

element.addEventListener(event, function, useCapture)

其中，useCapture可以取true或者false。
默认是false，即冒泡。如果是true就是捕获。
btn.addEventListener(“click”,handler,false);
此外还有IE事件处理程序，与之相似：
btn.attachEvent（“onclick”，handler）
注意的是
一个是click，一个是onclick。
所以要兼容不同的浏览器的话，可以这样写：

function addListener(element, eventName, handler) {
    if (element.addEventListener) {
        element.addEventListener(eventName, handler, false);
    }
    else if (element.attachEvent) {
        element.attachEvent('on' + eventName, handler);
    }
    else {
        element['on' + eventName] = handler;
    }
}

function removeListener(element, eventName, handler) {
    if (element.addEventListener) {
        element.removeEventListener(eventName, handler, false);
    }
    else if (element.detachEvent) {
        element.detachEvent('on' + eventName, handler);
    }
    else {
        element['on' + eventName] = null;
    }
}