整合營銷服務(wù)商

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

          免費咨詢熱線:

          JQuery之JavaScript相關(guān)概念

          JQuery之JavaScript相關(guān)概念

          包:是指有權(quán)訪問另外一個函數(shù)作用域中的變量的函數(shù).JavaScript創(chuàng)建閉包的常見方式就是在一個函數(shù)內(nèi)部創(chuàng)建另外一個函數(shù).

          JavaScript的閉包類似于Java類中使用get/set方法操作類的私有變量,JavaScript閉包是函數(shù)的嵌套,內(nèi)部的函數(shù)可以操作上一層的變量屬性,同時此函數(shù)可以被外部所調(diào)用.

          在javascript中沒有塊級作用域,一般為了給某個函數(shù)申明一些只有該函數(shù)才能使用的局部變量時,我們就會用到閉包,這樣我們可以很大程度上減少全局作用域中的變量,凈化全局作用域。閉包是一種設(shè)計原則,它通過分析上下文,來簡化用戶的調(diào)用,讓用戶在不知曉的情況下,達(dá)到他的目的。使用閉包有好處,也有壞處,濫用閉包會造成內(nèi)存的大量消耗。

          代碼示例

          代碼1:

          function foo(x) {

          var tmp=3;

          return function (y) {

          alert(x + y + (++tmp));

          }

          }

          var bar=foo(2); // bar 現(xiàn)在是一個閉包

          bar(10);

          代碼2:

          var add=(function () {

          var counter=0;

          return function () {return counter +=1;}

          })();

          add();

          add();

          add();

          // 計數(shù)器為 3

          代碼3:

          var App=function() {

          var isRTL=false;

          var isIE8=false;

          var isIE9=false;

          var isIE10=false;

          return {

          init: function() {},

          initAjax: function() {}

          }

          }();

          jQuery(document).ready(function() {

          App.init(); // init

          });

          apply()方法和call()方法

          1. 每個函數(shù)都包含兩個非繼承而來的方法:apply()和call()。

          2. 它們的用途相同,都是在特定的作用域中調(diào)用函數(shù)。

          3. 接收參數(shù)方面不同,apply()接收兩個參數(shù),一個是函數(shù)運行的作用域(this),另一個是參數(shù)數(shù)組。call()方法第一個參數(shù)與apply()方法相同,但傳遞給函數(shù)的參數(shù)必須列舉出來。

          代碼示例

          代碼1:

          function sum(num1, num2) {

          return num1 + num2;

          }

          console.log(sum.call(window, 10, 10)); //20

          console.log(sum.apply(window,[10,20])); //30

          代碼2:

          window.firstName="diz";

          window.lastName="song";

          var myObject={ firstName: "my", lastName: "Object" };

          function HelloName() {

          console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!");

          }

          HelloName.call(window); //或 .call(this);

          HelloName.call(myObject);

          運行結(jié)果為:

          Hello diz song glad to meet you!

          Hello my Object glad to meet you!

          從示例中可以看出apply()和call()能夠擴充函數(shù)賴以運行的作用域

          方法的覆蓋和重寫

          JavaScript中沒有方法的重載這種概念,只有覆蓋,不管方法的參數(shù)個數(shù)多少,同名的最后一個方法會將前面的方法覆蓋掉.

          <script type="text/javascript">

          function sayHello() {

          console.log("Hello----1");

          }

          function sayHello() {

          console.log("Hello----2");

          }

          function sayHello() {

          console.log("Hello----3");

          }

          sayHello();

          </script>

          如果要實現(xiàn)重載,可采用此種方法

          <script type="text/javascript">

          function sayHi() {

          if (arguments.length==1) {

          console.log(arguments[0] + "sayHi---1");

          } else if (arguments.length==2) {

          console.log(arguments[0] + "," + arguments[1] + "sayHi---2");

          } else if (arguments.length==3) {

          console.log(arguments[0] + "," + arguments[1]+","+arguments[2] + "sayHi---3");

          }

          }

          sayHi("Tom");

          sayHi("Tom", "lucy");

          sayHi("Tom","lucy","jame");

          </script>

          回調(diào)函數(shù)

          回調(diào)函數(shù)示例

          <script language="javascript" type="text/javascript">

          // 2.傳入要回調(diào)的方法名

          function main(callBack) {

          console.log("I am main function");

          console.log("Invoke callback function..");

          // 3.參數(shù)名稱和此處的方法名稱對應(yīng)

          callBack();

          }

          function b() {

          console.log("function:b");

          }

          function c() {

          console.log("function:c");

          }

          // 1.要回調(diào)的函數(shù)作為參數(shù)

          main(b);

          main(c);

          </script>

          protocol 屬性

          定義和用法

          protocol 屬性是一個可讀可寫的字符串,可設(shè)置或返回當(dāng)前 URL 的協(xié)議。

          圖示

          代碼示例

          <script type="text/javascript">

          document.write(location.protocol);

          </script>

          輸出:

          http:

          兩個等號和三個等號的區(qū)別

          ===規(guī)則:

          1. 如果類型不同,就[不相等]

          2. 如果兩個都是數(shù)值,并且是同一個值,那么[相等];(!例外)的是,如果其中至少一個是NaN,那么[不相等]。(判斷一個值是否是NaN,只能用isNaN()來判斷)

          3. 如果兩個都是字符串,每個位置的字符都一樣,那么[相等];否則[不相等]。

          4. 如果兩個值都是true,或者都是false,那么[相等]。

          5. 如果兩個值都引用同一個對象或函數(shù),那么[相等];否則[不相等]。

          6. 如果兩個值都是null,或者都是undefined,那么[相等]。

          ==規(guī)則:

          1. 如果兩個值類型相同,進行===比較。

          2. 如果兩個值類型不同,他們可能相等。根據(jù)下面規(guī)則進行類型轉(zhuǎn)換再比較:

            a. 如果一個是null. 一個是undefined,那么[相等]。

            b. 如果一個是字符串,一個是數(shù)值,把字符串轉(zhuǎn)換成數(shù)值再進行比較。

            c. 如果任一值是 true,把它轉(zhuǎn)換成 1 再比較;如果任一值是 false,把它轉(zhuǎn)換成 0 再比較。

            d. 如果一個是對象,另一個是數(shù)值或字符串,把對象轉(zhuǎn)換成基礎(chǔ)類型的值再比較。對象轉(zhuǎn)換成基礎(chǔ)類型,利用它的toString或者valueOf方法。 js核心內(nèi)置類,會嘗試valueOf先于toString;例外的是Date,Date利用的是toString轉(zhuǎn)換。非js核心的對象,令說(比較麻 煩,我也不大懂)

            e. 任何其他組合,都[不相等]。

          其他瑣碎

          1. window.parent和window.opener

          window.parent針對frame

          window.opener針對的是打開子窗口的父窗口

          可操作響應(yīng)頁面的屬性和調(diào)用相關(guān)方法

          2. instanceof 運算符

          在 JavaScript 中,判斷一個變量的類型嘗嘗會用 typeof 運算符,在使用 typeof 運算符時采用引用類型存儲值會出現(xiàn)一個問題,無論引用的是什么類型的對象,它都返回 “object”。

          判斷是否為數(shù)組

          if(dataList instanceof Array){}console.log(Object instanceof Object);//true

          console.log(Function instanceof Function);//true

          console.log(Number instanceof Number);//false

          console.log(String instanceof String);//false

          console.log(Function instanceof Object);//true

          console.log(Foo instanceof Function);//true

          console.log(Foo instanceof Foo);//false

          3. 判斷是否為空對象

          function isEmptyObject(obj) { for (var key in obj) { return false; } return true;}


          TML即一切,所有打算進行Web編程的人都應(yīng)該熟悉HTML,并了解如何解析HTML。尤其對前端工程師來說這更是基礎(chǔ),本文我們就來介紹一下JS下常見的HTML解析庫。

          DOMParser

          JavaScript和jQuery的DOM操作功能非常適合簡單HTML片段的解析。在實際編程中,如果要以編程方式解析DOM完整HTML或XML,則需要一個更好的解決方案,那就是DOMParser,它是所有現(xiàn)代數(shù)瀏覽器都支持的功能。

          通過使用DOMParser,可以輕松解析HTML文檔。但是,一般需要通過欺騙瀏覽器來實現(xiàn)解析,比如,通過向當(dāng)前文檔添加新元素。

          DOMParser的用法非常簡單明了:

          let domParser=new DOMParser();
          let doc=domParser.parseFromString(stringContainingXMLSource, "application/xml");
          domParser=new DOMParser();
          doc=domParser.parseFromString(stringContainingSVGSource, "image/svg+xml");
          domParser=new DOMParser();
          doc=domParser.parseFromString(stringContainingHTMLSource, "text/html");


          Cheerio

          專為服務(wù)器設(shè)計的核心jQuery的快速,靈活和精致的實現(xiàn)。

          Cheerio看起來像jQuery,但是不支持瀏覽器。Cheerio可以解析HTML并使其易于操作,但不會像瀏覽器中那樣解釋HTML,解析出與瀏覽器不同的內(nèi)容,并且解析的結(jié)果不會直接發(fā)送給用戶。

          Cheerio實現(xiàn)了jQuery子集,去掉了jQuery中所有與DOM不一致或者是用來填補瀏覽器的東西,重現(xiàn)了jQuery最美妙的API

          由于使用了極其簡潔而又標(biāo)準(zhǔn)的DOM模型, Cheerio對文檔的轉(zhuǎn)換,操作,渲染都極其的高效。

          JavaScript開發(fā)人員都應(yīng)該熟悉Cheerio的語法和用法:

          var chro=require('cheerio'),
          $=chio.load('<h1 class="title">Hello World!</h1>');
          $('h1.title').text('Hello Chongchong!');
          $('h1').attr('id', 'welcome');
          $.html();
          結(jié)果:
          <h1 class="title" id=" welcome ">Hello Chongchong!</h1>

          jsdom

          jsdom是很多Web標(biāo)準(zhǔn)(尤其是WHATWG DOM和 HTML 標(biāo)準(zhǔn))純JavaScript實現(xiàn),可與Node.js結(jié)合使用。jsdom項目的目標(biāo)是模擬Web瀏覽器的子集,從而滿足測試和抓取實際的Web應(yīng)用程序。

          jsdom不僅僅是HTML解析器,它還可以當(dāng)成瀏覽器。在解析的上下文中,如果要解析的數(shù)據(jù)中省略了必要的標(biāo)記,它會自動添加必要的標(biāo)記。例如,如果沒有html標(biāo)簽,它將像瀏覽器一樣隱式地添加它。

          還可以選擇指定一些屬性,例如文檔,引薦來源網(wǎng)址或用戶代理的URL。如果需要解析包含本地URL的鏈接,則該URL特別有用。

          由于它實際上與解析無關(guān),因此只提到j(luò)sdom具有(虛擬)控制臺,對cookie的支持等。總之,需要模擬瀏覽器環(huán)境

          它還可以處理外部資源。如有需求jsdom可以用來加載并執(zhí)行JS腳本。

          const jsdom=require("jsdom");
          const { JSDOM }=jsdom;
          const dom=new JSDOM('<!DOCTYPE html><p>Hello, Chongchong!</p>');
          console.log(dom.window.document.querySelector("p").textContent);

          結(jié)果:

          "Hello, Chongchong!"


          parse5

          parse5提供了處理HTML時所需的幾乎所有內(nèi)容。Parse5庫,目標(biāo)是構(gòu)建其他工具,但也可以實現(xiàn)HTML解析以完成簡單任務(wù)。Parse5易于使用,但是并不提供瀏覽器為提供的操作DOM的方法(例如getElementById)。

          parse5衍生出了一系列采用它的令人印象深刻的項目:jsdom,Angular2和Polymer。如果需求為對HTML的高級操作或解析的可靠基礎(chǔ),那么顯然這是一個不錯的選擇。

          const parse5=require('parse5');

          const document=parse5.parse('<!DOCTYPE html><html><head></head><body>Hello Chongchong!</body></html>');

          console.log(document.childNodes[1].tagName);

          總結(jié)

          本文我們介紹幾個JS下常見的Html解析庫。根據(jù)標(biāo)準(zhǔn),實際的HTML格式語法格式是需要容錯的。當(dāng)時這在庫很難簡單完美的實現(xiàn)。如果你有更好的推薦,歡迎和大家一起分享。

          :jQuery 對HTML操作

          1、jQuery 提供一系列與 DOM 相關(guān)的方法,這使訪問和操作元素和屬性變得很容易

          1、獲得內(nèi)容

          1、text() - 設(shè)置或返回所選元素的文本內(nèi)容

          2、html() - 設(shè)置或返回所選元素的內(nèi)容(包括 HTML 標(biāo)記)

          3、val() - 設(shè)置或返回表單字段的值

          4、獲取屬性

          2、設(shè)置內(nèi)容和屬性

          1、text() - 設(shè)置或返回所選元素的文本內(nèi)容

          2、html() - 設(shè)置或返回所選元素的內(nèi)容(包括 HTML 標(biāo)記)

          3、val() - 設(shè)置或返回表單字段的值

          4、設(shè)置屬性 - attr()

          3、添加元素

          1、通過 jQuery,可以很容易地添加新元素/內(nèi)容

          2、append() - 在被選元素的結(jié)尾插入內(nèi)容

          3、prepend() - 在被選元素的開頭插入內(nèi)容

          4、after() - 在被選元素之后插入內(nèi)容

          5、before() - 在被選元素之前插入內(nèi)容

          4、 刪除元素

          1、通過 jQuery,可以很容易地刪除已有的 HTML 元素

          2、remove() - 刪除被選元素(及其子元素)

          3、empty() - 從被選元素中刪除子元素


          主站蜘蛛池模板: AA区一区二区三无码精片| 濑亚美莉在线视频一区| 色屁屁一区二区三区视频国产| 中文字幕一区精品| 久久中文字幕无码一区二区| 亚洲av综合av一区| 波霸影院一区二区| 冲田杏梨AV一区二区三区| 日本不卡一区二区三区视频| 国产一区二区影院| 国产一区二区在线| 国内精品一区二区三区东京| 国产精品毛片一区二区三区| 在线精品国产一区二区三区 | 亚洲一区二区三区播放在线| 中文字幕一区二区视频| 国产一区二区三区亚洲综合| 日韩欧美一区二区三区免费观看| 日产精品久久久一区二区| 国产日韩AV免费无码一区二区| 一区二区三区高清视频在线观看 | 免费高清在线影片一区| 无码国产精品一区二区免费虚拟VR| 久久高清一区二区三区| 一夲道无码人妻精品一区二区| 狠狠色婷婷久久一区二区| 国产激情精品一区二区三区| 精品在线视频一区| 精品女同一区二区三区在线| 香蕉久久ac一区二区三区| 国产一区二区草草影院| 亚洲AV成人一区二区三区观看 | 农村乱人伦一区二区| 无码日韩精品一区二区三区免费 | 久久国产午夜一区二区福利| 日本免费电影一区二区 | 成人免费一区二区无码视频| 亚洲av无码一区二区三区天堂古代| 一区二区三区日韩精品| 美女一区二区三区| 无码国产精品一区二区免费模式|