整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          在線文檔:JavaScript,Jquery,css

          雪峰

          http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

          MDN-JavaScript

          https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

          前端開發(fā)筆記

          https://li-xinyang.gitbooks.io/frontend-notebook/content/

          菜鳥教程

          http://www.runoob.com/

          Jquery在線手冊

          http://hemin.cn/jq/

          在線文檔-Jquery

          http://tool.oschina.net/apidocs/apidoc?api=jquery

          CSS參考手冊

          http://css.doyoe.com/

          CSS3動畫手冊

          http://isux.tencent.com/css3/index.html

          CSS3-html5在線測試

          http://zaole.net/

          CSS3樣式生成器

          http://www.css88.com/tool/css3Preview/

          CSS小工具集合

          http://linxz.github.io/tianyizone/

          CSS3 UI 庫

          http://css3lib.alloyteam.com/#animation/AnimatedButtons

          JavaScript標(biāo)準(zhǔn)參考手冊

          http://www.kancloud.cn/kancloud/javascript-standards-reference/46532

          李炎恢 HTML CSS JavaScript PHP Bootstrap 教程

          http://www.kancloud.cn/wizardforcel/liyanhui-tutorials/154224

          微信關(guān)注公眾號:馨客棧,也可以加QQ群:65202496 來共同學(xué)習(xí)交流,分享資源(前端,PS,軟件,電影等學(xué)習(xí)相關(guān)的資源)

          Query就對javascript的一個擴(kuò)展, 封裝, 就是讓javascript更好用, 更簡單。

          人家怎么說的來著, jQuery就是要用更少的代碼, 漂亮的完成更多的功能。

          javascript與jQuery常用方法比較

          1 加載DOM區(qū)別

          javascript: window.onload

          實(shí)例

          function first(){
          alert('first');
          }
          function second(){
          alert('second');
          }
          window.onload = first;
          window.onload = second;
          //只會執(zhí)行第二個window.onload;不過可以通過以下方法來進(jìn)行改進(jìn):
          window.onload = function(){
          first();
          second();
          }

          jQuery: $(document).ready() 簡化為$(function(){ //... })

          實(shí)例1:

          $(document).ready(){
          function first(){
          alert('first');
          }
          function second(){
          alert('second');
          }}

          實(shí)例2:

          $(document).ready(function(){
          first();
          } )
          $(document).ready(function(){
          second();
          } ) //兩條均會執(zhí)行

          可以簡化為:

          $(function(){
          first();
          });
          $(function(){
          second();
          });

          jQuery加載與普通加載區(qū)別

          方法 window.onload $(document).ready()

          執(zhí)行時機(jī) 必須等待網(wǎng)頁中的所有內(nèi)容加載完畢后 網(wǎng)頁中的所有DOM結(jié)構(gòu)繪制完畢后就執(zhí)行,

          (包括圖片才能執(zhí)行) 可能DOM元素關(guān)聯(lián)的東西并沒有加載完

          編寫個數(shù) 不能同時編寫多個(后者會"覆蓋"前者) 能同時編寫多個

          簡化寫法 無 $()


          2 獲取ID

          javascript: document.getElementById('idName')

          jQuery: $('#idName')


          3 獲取name和class

          javascript: document.getElementsByName('name') name屬性

          jQuery: $('.className') class屬性


          4 獲取TagName

          javascript: document.getElementsByTagName('tagName')

          jQuery: $('tagName')

          js中元素不存在使用它會報錯

          var div = document.getElementsByTagName("div")[0];

          div.onclick = function(){

          console.log("javascript");

          }

          jQuery不會報錯

          var $div = $("div");

          $div.click(function(){

          console.log("jQuery");

          })


          5 創(chuàng)建對象并加入文檔中

          javascript:

          var para=document.createElement("p");
          var node=document.createTextNode("這是新段落。");
          para.appendChild(node);
          var element=document.getElementById("div1");
          element.appendChild(para);
          //將p元素追加為Id為div1的lastchild子節(jié)點(diǎn),如果想將新創(chuàng)建的p元素插入到已存在的某個元素之前,可以使用insertBefore()方法

          jQuery:

          jQuery提供了4種將新元素插入到已有元素(內(nèi)部)之前或者之后的方法:

          append()、appendTo(目標(biāo))、prepend()、prependTo(目標(biāo))。 (prepend()、prependTo(目標(biāo))插在子元素之前)

          格式:$(html);

          HTML代碼:

          <p>World!</p>

          jQuery代碼:

          $('p').append('<b>Hello!</b>'); //輸出:<p>World!<b>Hello!</b></p>
          $('<b>Hello!</b>').appendTo('p'); //輸出:同上
          $('p').prepend('<b>Hello!</b>'); //輸出:<p><b>Hello!</b>World! </p>
          $('<b>Hello!</b>').prependTo('p'); //輸出:同上


          6 插入新元素

          javascript:

          insertBefore() 語法格式:

          parentElement.insertBefore(newElement,targetElement)

          將一個img元素插入一個段落之前。

          HTML代碼:

          <img src="image.jpg" id="imgs" />

          <p>這是一段文字</p>

          javascript代碼:

          var imgs = document.getElementById('imgs');
          var para = document.getElementsByTag('p');
          para.parenetNode.insertBefore(imgs,para);

          jQuery:

          jQuery提供了4種將新元素插入到已有元素(外部)之前或者之后的方法:before()、insertBefore(目標(biāo))、after()、insertAfter(目標(biāo))。

          格式:$('html');

          HTML代碼:

          <p>World!</p>

          jQuery代碼

          $('p').after('<b>Hello!</b>'); //輸出:<p>World! </p><b>Hello!</b>
          $('<b>Hello!</b>').insertAfter ('p'); //輸出:同上
          $('p').before('<b>Hello!</b>'); //輸出:<b>Hello!</b><p>World! </p>
          $('<b>Hello!</b>').insertBefore('p'); //輸出:同上


          7 復(fù)制節(jié)點(diǎn)

          javascript:

          reference = node.cloneNode(bool)

          這個方法只有一個布爾型的參數(shù), 它的可取值只能是true或者false。該參數(shù)決定是否把被復(fù)制節(jié)點(diǎn)的子節(jié)點(diǎn)也一同復(fù)制到新建節(jié)點(diǎn)里去。

          jQuery:

          clone() //復(fù)制節(jié)點(diǎn)后,被復(fù)制的新元素并不具有任何行為 ,默認(rèn)值false,也復(fù)制子節(jié)點(diǎn)

          clone(true) //復(fù)制節(jié)點(diǎn)內(nèi)容及其綁定的事件

          備注:該方法通常與appendTo()、prependTo()等方法結(jié)合使用。


          8 刪除節(jié)點(diǎn)

          javascript:

          reference = element.removeChild(node)

          removeChild()方法將一個給定元素里刪除一個子節(jié)點(diǎn)

          jQuery:

          remove();

          remove()方法作用就是從DOM中刪除所有匹配的元素,remove()方法還可以與其他的過濾選擇器結(jié)合使用,非常方便。

          將ul li下的title不是"Hello"的li移除:

          $('ul li').remove(li[title!='Hello']);

          empty(); 刪除匹配的元素集合中所有的子節(jié)點(diǎn)。


          從DOM中把所有段落刪除

          HTML 代碼:

          <p>Hello</p> how are <p>you?</p>

          jQuery 代碼:

          $("p").remove();

          把所有段落的子元素(包括文本節(jié)點(diǎn))刪除

          HTML 代碼:

          <p>Hello, <span>Person</span> <a href="#">and person</a></p>

          jQuery 代碼:

          $("p").empty();結(jié)果:

          <p></p>


          9 包裹節(jié)點(diǎn)

          javascript: javascript暫無

          jQuery:

          wrap() //將匹配元素用其他元素的結(jié)構(gòu)化標(biāo)記單獨(dú)包裹起來

          wrapAll() //將所有匹配的元素用一個元素包裹起來

          wrapInner() //將匹配元素的子內(nèi)容用其他結(jié)構(gòu)化的標(biāo)記包裹起來

          把所有的段落用一個新創(chuàng)建的div包裹起來

          jQuery 代碼:

          $("p").wrap("<div class='wrap'></div>");

          用一個生成的div將所有段落包裹起來

          jQuery 代碼:

          $("p").wrapAll("<div></div>");

          把所有段落內(nèi)的每個子內(nèi)容加粗

          jQuery 代碼:

          $("p").wrapInner("<b></b>");


          10 屬性操作:設(shè)置屬性節(jié)點(diǎn)、查找屬性節(jié)點(diǎn)

          javascript:

          document.getElementsByTagName('tagName').title
          document.getElementsByTagName('tagName').title="My title";
          document.getElementsByTagName('tagName')['title']="My title";
          document.getElementsByTagName('tagName').getAttribute('My title');
          document.getElementsByTagName('tagName').setAttribute('title','My title');
          document.getElementsByTagName('tagName').removeAttribute('title','My title');

          jQuery:

          jQuery中設(shè)置和查找屬性節(jié)點(diǎn)都是:attr() 。

          $('p').attr('title'); //獲取p元素的title屬性
          $('p').attr('title','My title'); //設(shè)置p元素的title屬性
          $('p').removeAttr('title') //刪除p元素的title屬性
          $('p').attr('title':'My title','class':'myClass'); //當(dāng)需要添加多個屬性時, 可以用"屬性":"值"對的形式, 中間用逗號隔開。


          11 替換節(jié)點(diǎn)

          javascript:

          var reference = element.replaceChild(newChild,oldChild)

          該方法是將一個給定父元素里的一個子節(jié)點(diǎn)替換為另外一個節(jié)點(diǎn)。

          jQuery:

          replaceWith()、replaceAll()

          replaceWith() 與 replaceAll() 作用相同。差異在于語法:內(nèi)容和選擇器的位置, 以及 replaceAll() 無法使用函數(shù)進(jìn)行替換。

          $(selector).replaceWith(content) 用指定的HTML內(nèi)容或元素替換被選元素

          $(content).replaceAll(selector) 用指定的HTML內(nèi)容或元素替換被選元素。


          <p>hello</p> 想替換為: <h2>Hi</h2>

          jQuery代碼:

          $('p') .replaceWith('<h2>Hi</h2>');

          或者可以寫成:

          $('<h2>Hi</h2>').replaceAll('p');


          12 刪除節(jié)點(diǎn)

          javascript:removeChild()

          var list=document.getElementById("myList");

          list.removeChild(list.childNodes[0]);

          jQuery:

          $("p").remove();


          13 CSS操作

          javascript:

          格式:element.style.property

          CSS-DOM能夠讀取和設(shè)置style對象的屬性, 其不足之處是無法通過它來提取外部CSS設(shè)置的樣式信息, 而jQuery的css()方法是可以的。

          document.body.style.backgroundColor="red";

          jQuery:

          格式:$(selector).css()

          css()方法獲取元素的樣式屬性

          此外, jQuery還提供了height()和width()分別用來獲取元素的高度和寬度(均不帶單位), 而css(height)、css(width)返回高寬, 且?guī)挝弧?/p>

          $("p").css({color: "#ff0011", background: "blue", "font-size":"16px" });

          $("p").css({color: "#ff0011", background: "blue", fontSize:"16px" }); jQuery也支持

          注意點(diǎn):CSS中的如"font-size"這樣有"-"的屬性, 要使用首字母小寫的駝峰式表示, 如fontSize。

          jQuery中的css()的帶橫線的屬性可以原樣輸出, 但需帶引號, 也可以使用首字母小寫的馱峰式表示。



          javascript:

          className屬性

          DOM對象.className = "className";

          DOM對象.className += " claaaName";

          DOM對象.className = "";

          jQuery:

          addClass(class|fn)

          removeClass(class|fn)

          toggleClass(class|fn)


          14 表單value值的操作

          javascipt:

          formNode.value

          formNode.attr('value');

          formNode.attr('value',信息值);

          jQuery:

          val([val|fn|arr])

          $().val(); //獲得value屬性值

          $().val(value值); //設(shè)置value屬性的值(文本框)

          $().val([,,]); //設(shè)置value屬性的值(單選框、復(fù)選框、下拉式列表)

          該val()方法在復(fù)選框、單選按鈕、下拉列表的使用有凸出表現(xiàn)。


          15 事件的屬性

          相同之處

          altKey Alt鍵是否被按下. 按下返回true

          ctrlKey ctrl鍵是否被按下, 按下返回true

          shiftKey Shift鍵是否被按下, 按下返回true

          screenX/Y 對于鼠標(biāo)事件, 獲取事件相對于屏幕原點(diǎn)的水平/垂直坐標(biāo)

          type 事件的名稱,如click、mouseover等

          以上為javascript和jQuery相同的屬性

          不同之處

          javascript:

          clientX/Y 鼠標(biāo)指針在客戶端區(qū)域的坐標(biāo), 不包括工具欄、滾動條

          jQuery:

          pageX/Y 鼠標(biāo)指針在客戶端區(qū)域的坐標(biāo), 不包括工具欄,滾動條;



          16 事件的兼容性

          事件目標(biāo):

          javascript:

          IE:srcElement 標(biāo)準(zhǔn)DOM:targe

          jQuery:

          target 引起事件的元素/對象

          keyCode和CharCode:

          javascript:

          charcode keycode(keypress) keycode(keydown、keyup)

          IE 無 按鍵的Unicode值 按鍵的數(shù)字代碼

          標(biāo)準(zhǔn)DOM 按鍵的Unicode值 按鍵的數(shù)字代碼 按鍵的數(shù)字代碼

          jQuery:

          keyCode 對于keyup和keydown事件返回被按下的鍵。不區(qū)分大小寫, a和A都返回65;

          鼠標(biāo)事件,值對應(yīng)按下的鼠標(biāo)鍵

          javascript:

          button IE中的按鍵 Firefox中的按鍵

          0 未按下案件 左鍵

          1 左鍵 中鍵(滑輪)

          2 右鍵 右鍵

          3 同時按下左、右鍵 不支持組合鍵,未按下任何鍵時button值為undefined

          4 中鍵(滑輪)

          5 同時按下左、中鍵

          6 同時按下右、中鍵

          7 同時按下左、中、右鍵

          jQuery:

          which 對于鍵盤事件, 返回觸發(fā)事件的鍵的數(shù)字編碼。對于鼠標(biāo)事件, 返回鼠標(biāo)按鍵號(1左,2中,3右);


          15 事件設(shè)置

          DOM1級事件設(shè)置

          <input type="text" onclick="過程性代碼" value=’tom’ />

          <input type="text" onclick="函數(shù)()" />

          node.onclick = function(){}

          node.onclick = 函數(shù);

          DOM2級事件設(shè)置

          node.addEventListener(類型,處理,事件流);

          node.removeEventListener(類型,處理,事件流);

          node.attachEvent();

          node.detachEvent();

          jquery事件設(shè)置

          $().事件類型(事件處理函數(shù)fn); //設(shè)置事件

          $().事件類型(); //觸發(fā)事件執(zhí)行

          $().bind('事件類型',fn); //綁定事件

          $().one('事件類型',fn); //綁定事件(一次)

          $().live('事件類型',fn); //綁定事件(委派)


          16 處理頁面中的元素

          javascript:

          使用javascript腳本獲取頁面內(nèi)容的方式主要有兩種, 第一種是通過表單獲取表單元素的value值。格式為:

          表單名稱.元素名.value;

          該方式只能獲取表單中的元素值,對于其他標(biāo)簽元素則無能為力。

          第二種方式通過id名來獲取頁面中任意標(biāo)簽的內(nèi)容。格式為:

          document.getElementById('id'). value;

          document.getElementById ('id').innerText;

          使用第二種方式時要注意, 標(biāo)簽的id名必須存在且唯一, 否則就會出現(xiàn)錯誤。

          為標(biāo)簽內(nèi)容賦值時, 則使用如下格式:

          id.innerHTML ='要顯示的內(nèi)容';

          jQuery:

          html([val|fn]) 返回值:String

          取得第一個匹配元素的html內(nèi)容。這個函數(shù)不能用于XML文檔。但可以用于XHTML文檔。

          在一個 HTML 文檔中, 我們可以使用html()方法來獲取任意一個元素的內(nèi)容。

          如果選擇器匹配多于一個的元素, 那么只有第一個匹配元素的 HTML 內(nèi)容會被獲取。

          val String

          function(index, html) Function

          此函數(shù)返回一個HTML字符串。接受兩個參數(shù), index為元素在集合中的索引位置, html為原先的HTML值。

          text()

          text([val|fn]) 返回值:String

          val String 用于設(shè)定HTML內(nèi)容的值

          function(index, html) Function 此函數(shù)返回一個HTML字符串。接受兩個參數(shù),index為元素在集合中的索引位置,html為原先的HTML值。


          17 事件對象

          javascript:

          node.onclick = function(oEvent){
          if(window.event) oEvent = window.event; //兼容性寫法
          }

          在IE瀏覽器中事件對象是window對象的一個屬性window.event;

          在標(biāo)準(zhǔn)的DOM中規(guī)定event對象必須作為唯一的參數(shù)傳給事件處理函數(shù)。

          因此, javascript要處理好各瀏覽器的事件對象的兼容性。

          jQuery:

          $().bind('click',function(evt){ window.event });
          $().click(function(evt){});
          $().bind('mouseover',f1);
          function f1(evt){}

          事件對象:就直接使用的evt即可, 在jQuery框架內(nèi)部對各瀏覽器的事件對象作出了兼容處理。


          18 阻止瀏覽器默認(rèn)動作、阻止事件冒泡

          javascript:

          DOM2級瀏覽器默認(rèn)動作阻止:

          事件對象.preventDefault(); 主流瀏覽器

          事件對象.returnValue = false; IE(6,7,8)瀏覽器

          DOM2級事件冒泡阻止:

          事件對象.stopPropagation(); 主流瀏覽器

          事件對象.cancelBubule = true; IE(6,7,8)瀏覽器


          jQuery:

          $().bind('click',function(evt){
          evt.preventDefault();
          evt.stopPropagation();
          });

          preventDefault()方法是jQuery的方法, 名字與javascript底層代碼的名字一致, 并且對各瀏覽器作出了兼容處理。

          stopPropagation()方法是jQuery的方法, 名字與javascript底層代碼的名字一致, 并且對各瀏覽器作出了兼容處理。

          return false 與event.preventDefault()區(qū)別

          1. return false 實(shí)際上執(zhí)行了三種操作

          event.preventDefault()

          event.stopPropation()

          終止函數(shù)執(zhí)行并立即執(zhí)行

          2 .為了避免對程序執(zhí)行過多的隱式操作造成的Bug,建議

          只需要阻止事件默認(rèn)行為時,應(yīng)該使用event.preventDefault()

          只需要阻止事件冒泡時,應(yīng)該使用event.stopPropagation()

          只有當(dāng)同時阻止事件冒泡和阻止事件默認(rèn)行為時,才使用return false


          19 頁面滾動

          javascript:

          scrollBy() 按照指定的像素值來滾動內(nèi)容。

          scrollTo() 把內(nèi)容滾動到指定的坐標(biāo)。

          <script>
          function scrollWindow(){
          window.scrollTo(100,500);
          }
          </script>
          <input type="button" onclick="scrollWindow()" value="滾動條" />

          jQuery:

          offset([coordinates]) 獲取匹配元素在當(dāng)前視口的相對偏移。

          返回的對象包含兩個整型屬性: top 和 left, 以像素計。此方法只對可見元素有效。

          $("p:last").offset({ top: 10, left: 30 });

          <html>
          <head>
          <script type="text/javascript" src="/jquery/jquery.js"></script>
          <script type="text/javascript">
          $(document).ready(function(){
          $("button").click(function(){
          x=$("p").offset();
          $("#span1").text(x.left);
          $("#span2").text(x.top);
          });
          });
          </script>
          </head>
          <body>
          <p>本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p>
          <button>獲得 offset</button>
          </body>
          </html>

          輸出結(jié)果: 本段落的偏移是 8 left 和 8 top。

          scrollLeft() 設(shè)置或返回匹配元素相對滾動條左側(cè)的偏移。

          scrollTop() 設(shè)置或返回匹配元素相對滾動條頂部的偏移。

          在各種類庫滿天飛,說jQuery有多快多快,可是對前端大牛來說,更定不會止步于jQuery,因而常常聽到高級的前端工程師追求原生js,為何?答案是原生JS要更快,原因是JQuery這樣的庫必須要兼容各種瀏覽器和低版本和許多其他的東西,考慮通用性必然會導(dǎo)致性能的損耗。

          當(dāng)然,我不是提倡寫代碼純用原生JS實(shí)現(xiàn),請記住:“框架能夠讓我們走的更快,但只有了解原生的JS才能讓我們走的更遠(yuǎn)”。


          下面直接用代碼示例:流行的常用的JQuery功能用原生JS實(shí)現(xiàn)。

          選擇器

          JQuery選擇器的強(qiáng)大無需贅言,然而在大多數(shù)的情況下,我們可以使用相同的代碼量用原生JS輕易實(shí)現(xiàn)。

          1.獲取頁面所有的div

          /* jQuery */
          $("div")
          /* native equivalent */
          document.getElementsByTagName("div")

          2.獲取某類名相同的一群元素

          /* jQuery */
          $(".my-class")
          /* native equivalent */
          document.querySelectorAll(".my-class")
          /* FASTER native equivalent */
          document.getElementsByClassName("my-class")

          3.更復(fù)雜的一些選擇器

          /* jQuery */
          $(".my-class li:first-child")
          /* native equivalent */
          document.querySelectorAll(".my-class li:first-child")
          /* jQuery */
          $(".my-class").get(0)
          /* native equivalent */
          document.querySelector(".my-class")


          DOM操作
          JQuery頻繁功能就是操作DOM元素,諸如插入或刪除一個元素。當(dāng)然,如果使用原生JS實(shí)現(xiàn)這些功能,代碼量肯定是會有所增加的,不過我們也可以將這些功能封裝成函數(shù),下面是一些常用的DOM操作的原生JS實(shí)現(xiàn)。

          1.插入HTML元素

          /* jQuery */
          $(document.body).append("<div id='myDiv'><img src='im.gif'/></div>");
          /* CRAPPY native equivalent */
          document.body.innerHTML += "<div id='myDiv'><img src='im.gif'/></div>";
          /* MUCH BETTER native equivalent */
          var frag = document.createDocumentFragment();
          var myDiv = document.createElement("div");
          myDiv.id = "myDiv";
          var im = document.createElement("img");
          im.src = "im.gif";
          myDiv.appendChild(im);
          frag.appendChild(myDiv);
          document.body.appendChild(frag);

          CSS操作

          在JQuery中可以輕松實(shí)現(xiàn)對css的操作,增加屬性、刪除屬性或是檢測是否存在某個類。那么你是否覺得使用原生JS實(shí)現(xiàn)會很麻煩呢?其實(shí)不然,因?yàn)橛衏lassList。下面是一些關(guān)于JQuery css操作的JS原生實(shí)現(xiàn)。

          // get reference to DOM element
          var el = document.querySelector(".main-content");
          //----Adding a class------
          /* jQuery */
          $(el).addClass("someClass");
          /* native equivalent */
          el.classList.add("someClass");
          //----Removing a class-----
          /* jQuery */
          $(el).removeClass("someClass");
          /* native equivalent */
          el.classList.remove("someClass");
          //----Does it have class---
          /* jQuery */
          if($(el).hasClass("someClass"))
          /* native equivalent */
          if(el.classList.contains("someClass"))

          當(dāng)我們簡單地逐個設(shè)置Css的屬性,而并非將它們?nèi)總鬟f給JQuery的Css函數(shù)時,性能明顯會快很多。而且,真的不會添加什么額外的代碼。

          // get reference to a DOM element
          var el = document.querySelector(".main-content");
          //----Setting multiple CSS properties----
          /* jQuery */
          $(el).css({
          background: "#FF0000",
          "box-shadow": "1px 1px 5px 5px red",
          width: "100px",
          height: "100px",
          display: "block"
          });
          /* native equivalent */
          el.style.background = "#FF0000";
          el.style.width = "100px";
          el.style.height = "100px";
          el.style.display = "block";
          el.style.boxShadow = "1px 1px 5px 5px red";

          show與hide
          show()與hide()應(yīng)該也是JQuery中十分常用的方法,原生JS實(shí)現(xiàn)同樣輕松。

          // get reference to a DOM element
          var el = document.querySelector(".main-content");
          //----show() or hide()----
          /* jQuery */
          $(el).show();
          $(el).hide();
          /* native equivalent */
          el.style.display = '';
          el.style.display = 'none';

          事件綁定

          // get reference to a DOM element
          var el = document.querySelector(".main-content");
          //----Event Listener off----
          /* jQuery */
          $(el).off(eventName, eventHandler);
          /* native equivalent */
          el.removeEventListener(eventName, eventHandler);
          //----Event Listener on----
          /* jQuery */
          $(el).on(eventName, eventHandler);
          /* native equivalent */
          el.addEventListener(eventName, eventHandler);

          jQuery的確是個了不起的庫,如果同樣輕松的使用JS實(shí)現(xiàn)jQuery,盡量使用JS。即使優(yōu)化有點(diǎn)吹毛求疵,由于html5游戲的迅速崛起,這點(diǎn)優(yōu)化就顯得格外的寶貴。

          文/丁向明

          做一個有博客的web前端自媒體人,專注web前端開發(fā),關(guān)注用戶體驗(yàn),加我qq/微信交流:6135833

          http://dingxiangming.com


          主站蜘蛛池模板: 久久久国产一区二区三区 | 国产在线一区二区| 亚洲一区在线观看视频| 本免费AV无码专区一区| 理论亚洲区美一区二区三区 | 亚洲国产精品一区二区三区在线观看 | 日本不卡一区二区视频a| 亚洲AV网一区二区三区| 91久久精品国产免费一区| 手机看片一区二区| 精品成人一区二区三区四区| 日美欧韩一区二去三区| 无码精品不卡一区二区三区 | 国产亚洲无线码一区二区 | 天堂一区二区三区在线观看| 91久久精品一区二区| 精品欧洲av无码一区二区| 亚洲视频在线一区二区三区| 91福利视频一区| 亚洲a∨无码一区二区| 中文乱码字幕高清一区二区| 在线成人一区二区| 日本在线视频一区二区| 精品福利一区二区三区免费视频 | 国产精品一区二区久久不卡| 在线观看免费视频一区| 国产熟女一区二区三区四区五区| 香蕉视频一区二区| 国99精品无码一区二区三区| 无码免费一区二区三区免费播放| 亚洲国产一区二区三区青草影视| 精品乱码一区二区三区四区| 海角国精产品一区一区三区糖心| 国产成人精品亚洲一区| 一区国严二区亚洲三区| 美女啪啪一区二区三区| 久久伊人精品一区二区三区 | 天天看高清无码一区二区三区| 日本精品一区二区三区在线视频 | 狠狠色婷婷久久一区二区| 日本免费一区二区久久人人澡|