最近在學百度前端學院斌斌的課程
查漏補缺,收獲不少,做個總結
題目:
將提供的空氣質量數據數組,按照某種邏輯(比如空氣質量大于60)進行過濾篩選,最后將符合條件的數據按照一定的格式要求顯示在網頁上
我的提交:https://github.com/MJingv/baiduFE--jsproject/blob/master/task2.html
1.二維數組的排序
我們都知道數組排序直接寫函數就可以
二維數組,也很簡單
2.dom操作
發現自己原生jsdom操作基礎不扎實,總結一下
一、JS中innerHTML、outerHTML、innerText 、outerText、value的區別與聯系?
jS中設置或者獲取所選內容的值:
①innerHTML :屬性設置或返回該標簽內的HTML。也就是從對象的起始位置到終止位置的全部內容,包括Html標簽。
②outerHTML:屬性設置或返回該標簽及標簽內的HTML。也就是從對象的該標簽起始到終止位置的全部內容,包括Html標簽。
如果要輸出不含HTML標簽的內容,可以使用innerHTML取得包含HTML標簽的內容后,再用正則表達式去除HTML標簽,
③inneText:從起始位置到終止位置的內容,但它去除html標簽。(只能在IE和chrome下使用)
④outerText 設置(包括標簽)或獲取(不包括標簽)對象的文本
⑤value:屬性可設置或返回密碼域的默認值。獲取文本框的值
二、jQuery中的text()、html()和val()
jQuery中設置或者獲取所選內容的值:
①text();設置或者獲取所選元素的文本內容;
②html();設置或者獲取所選元素的內容(包括html標記);
③val();設置或者獲取表單字段的值(前提是表單設置了value屬性);
舉個??
創建節點createElement()
var node = document.createElement(“div”);
這個節點不會被自動添加到文檔(document)里(初始沒有)
創建文本節點createTextNode()
var value = document.createTextNode(“text”);
這個節點不會被自動添加到文檔(document)里(初始沒有)
如果插入的內容不帶HTML格式,用createTextNode比innerHTML安全,而innerText又有瀏覽器不兼容的問題,因此用createTextNode很好使。
插入節點到最后appendChild()
node.appendChild(value);
將節點插入到最后,上面兩個創建的節點不會自動添加到文檔里,所以就要使appendChild來插入了。
如果是新的節點是插入到最后,而如果是已經存在的節點則是移動到最后
插入節點到目標節點的前面insertBefore()
在節點前面插入,其中第二個參數是可選,如果第二個參數不寫,將默認添加到文檔的最后,相當于appendChild。
同樣,appendChild和insertBefore,如果是已存在節點,他們都會自動先刪除原節點,然后移動到你指定的地方。
復制節點cloneNode(boolean)
node.cloneNode(true);
node.cloneNode(false);
復制上面的div節點,參數true,復制整個節點和里面的內容;false,只復制節點不要里面的內容,復制后的新節點,也不會被自動插入到文檔,需要用到3和4的方法去插入。
刪除節點removeChild()
不過一般情況下,不知道要刪除的節點的父節點是什么,因此一般這么使:node.parentNode.removeChild(node);
替換節點repalceChild(newNode, oldNode)
設置節點屬性setAttribute()
node.setAttribute("title","abc");
用這個方法設置節點屬性兼容好,但class屬性不能這么設置。
獲取節點屬性getAttribute()
node.getAttribute("title");
判斷元素是否有子節點hasChildNodes
node.hasChildNodes;
返回boolean類型,因此將新節點插入到最前面的技巧: