jQuery菜鳥教程04

時間 2019-12-05

標籤 jquery 菜鳥教程欄目 JQuery 简体版

原文原文鏈接

jquery框架中包含了不少jquery插件

jQuery其餘

jQuery - noConflict() 方法 css

如何在頁面上同時使用 jQuery 和其餘框架？html

這個方法可讓你的jQuery中$符號與頁面的中$區分，就是與jQuery中特有的字符區別開來。jquery

jQuery JSONP

JSON - 轉換爲 JavaScript 對象

JSON 文本格式在語法上與建立 JavaScript 對象的代碼相同。json

因爲這種類似性，無需解析器，JavaScript 程序可以使用內建的 eval() 函數，用 JSON 數據來生成原生的 JavaScript 對象。(變成JavaScript對象，就能夠操做對象的方法和屬性啦)跨域

JSON 比 XML 更小、更快，更易解析。瀏覽器

爲何使用 JSON？

對於 AJAX 應用程序來講，JSON 比 XML 更快更易使用：安全

使用 XML

讀取 XML 文檔
使用 XML DOM 來循環遍歷文檔
讀取值並存儲在變量中

使用 JSON

讀取 JSON 字符串
用 eval() 處理 JSON 字符串

可使用方法讓 JavaScript 對象轉換爲 JSON 字符串cookie

JSON 解析器

eval() 函數可編譯並執行任何 JavaScript 代碼。這隱藏了一個潛在的安全問題。框架

使用 JSON 解析器將 JSON 轉換爲 JavaScript 對象是更安全的作法。JSON 解析器只能識別 JSON 文本，而不會編譯腳本。jquery插件

在瀏覽器中，這提供了原生的 JSON 支持，並且 JSON 解析器的速度更快。

較新的瀏覽器和最新的 ECMAScript (JavaScript) 標準中均包含了原生的對 JSON 的支持。

JSONP 教程

本章節咱們將向你們介紹 JSONP 的知識。

Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。

爲何咱們從不一樣的域（網站）訪問數據須要一個特殊的技術(JSONP )呢？這是由於同源策略。

同源策略，它是由Netscape提出的一個著名的安全策略，如今全部支持JavaScript 的瀏覽器都會使用這個策略。

jQuery插件

jQuery Validate 插件爲表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定製選項，知足應用程序各類需求。該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。全部的捆綁方法默認使用英語做爲錯誤信息，且已翻譯成其餘 37 種語言。

1:jQuery Cookie

jQuery 能夠經過 jquery.cookie.js 插件來操做 Cookie。

2:jQuery Accordion

jQuery Accordion 插件用於建立摺疊菜單。它一般與嵌套的列表、定義列表或嵌套的 div 一塊兒使用。選項用於指定結構、激活的元素和定製的動畫。

3:jQuery Autocomplete

jQuery Autocomplete插件根據用戶輸入值進行搜索和過濾，讓用戶快速找到並從預設值列表中選擇。經過給 Autocomplete 字段焦點或者在其中輸入字符，插件開始搜索匹配的條目並顯示供選擇的值的列表。經過輸入更多的字符，用戶能夠過濾列表以得到更好的匹配。

這個是至關於輸入框時的提示

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 
 
</body>
</html>

4:jQuery Growl

jQuery Growl 插件(消息提醒) 容許您很容易地在一個覆蓋層顯示反饋消息。消息會在一段時間後自動消失，不須要單擊"肯定"按鈕等。用戶也能夠經過移動鼠標或點擊關閉按鈕加快隱藏信息。

5:jQuery Password Validation（密碼驗證）

jQuery Password Validation（密碼驗證）插件擴展了 jQuery Validate 插件，提供了兩種組件：
一種評價密碼的相關因素的功能：好比大小寫字母的混合狀況、字符（數字、特殊字符）的混合狀況、長度、與用戶名的類似度（可選的）。
一種使用評價功能顯示密碼強度的驗證插件自定義方法。顯示的文本能夠被本地化。

您能夠簡單地自定義強度顯示的外觀、本地化消息顯示，並集成到已有的表單中。

6:jQuery Prettydate

jQuery Prettydate插件爲表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定製選項，知足應用程序各類需求。該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。全部的捆綁方法默認使用英語做爲錯誤信息，且已翻譯成其餘 37 種語言。

7:jQuery Tooltip

jQuery Tooltip 插件取代了原生的工具提示框，讓它們可自定義，您只須要調整它們的內容、位置和外觀便可。

8:jQuery 樹型菜單插件(Treeview)

jQuery Treeview 提供了一個無序靈活的可摺疊的樹形菜單。適用於一些菜單的導航，支持基於 cookie 的持久性菜單。