[TOC] # 1. 兼容性 try{} catch（err){} ~~~ <a href="https://www.baidu.com" id="test">hello world</a> <script> /* 场景 a，form 阻止默认行为 return false / event.preventDefault(); */ var a = document.getElementById("test"); //在ie9以下 event事件作为window的默认属性 window.event //chrome,event作为事件的参数 a.onclick = function(event){ var event try{ //chrome event = event; }catch(err){ //ie9以下 event = window.event(); } window.location.href="https://wwww.sogou.com/"; //return false event.preventDefault(); } </script> ~~~ # 2. 页面优化 ## 2.1 文档碎片 fragment ``` <ul id="parent"></ul> <script> // fragment --> 优化页面渲染 var parent = document.getElementById("parent"); var fragment = document.createDocumentFragment(); for(let i = 0 ;i < 10; i++){ let li = document.createElement("li"); li.innerHTML = i ; fragment.appendChild(li); parent.appendChild(fragment); } </script> ``` # 3. 如何将jQuery对象转为JavaScript对象 ``` <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <style> div{ width: 100px; height: 100px; border: 10px solid #333; padding: 20px; } </style> ***** <div id="parent"> </div> <script> /* jquery append,prepend,before,after */ /* 如何将jQuery对象转为JavaScript对象 $("#parent")[0] $("#parent").get(0) */ $(function(){ $("#parent").append("<p>hello world <p>") $("#parent").prepend("<h1>1<h1>") $("#parent").before("<p>hello world dingmeili<p>") $("#parent").after("<p>hello world dingmeili<p>") }) $(function(){ }) </script> ```