jQuery雜項進階（四）

文章目錄

- 一、$ 的替換
- 二、使用JSONP實現跨域
- 三、jQuery 雜項方法、實用工具、回調對象、延遲對象參考 ☆
- 四、jQuery 自身屬性參考 ☆
- 五、jQuery 插件介紹和參考 ☆
- - - - jQuery 樹型菜單插件(Treeview)
      - jQuery Validate表單驗證，jQuery Password Validation（密碼驗證）
      - jQuery Cookie 插件
      - jQuery Autocomplete
      - jQuery Growl 插件(消息提醒)
      - jQuery Tooltip
      - 參考

一、$ 的替換

$ 符合發生沖突時，可以用noConflict() 方法取消 $ 的作用，或者用其他變量代替 $ 的作用，或者直接用jQuery替代（本身 $ == jQuery）

// 用 jq 替代
var jq = $.noConflict();
jq(document).ready(function(){jq("button").click(function(){jq("p").text("jQuery 仍然在工作!");});
});// 用jQuery替代
$.noConflict();
jQuery(document).ready(function($){$("button").click(function(){$("p").text("jQuery 仍然在工作!");});
});

二、使用JSONP實現跨域

需求：
如客戶想訪問 : https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction。
假設客戶期望返回數據：[“customername1”,“customername2”]。
真正返回到客戶端的數據顯示為: callbackFunction([“customername1”,“customername2”])。

服務端JSONP 格式數據

<?php
header('Content-type: application/json');
//獲取回調函數名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json數據
$json_data = '["customername1","customername2"]';
//輸出jsonp格式的數據
echo $jsoncallback . "(" . $json_data . ")";
?>

客戶端頁面完整代碼

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JSONP 實例</title><script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>    
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {var html = '<ul>';for(var i = 0; i < data.length; i++){html += '<li>' + data[i] + '</li>';}html += '</ul>';$('#divCustomers').html(html); 
});
</script>
</body>
</html>

三、jQuery 雜項方法、實用工具、回調對象、延遲對象參考 ☆

菜鳥教程 - 雜項方法

四、jQuery 自身屬性參考 ☆

菜鳥教程 - jQuery 屬性

五、jQuery 插件介紹和參考 ☆

jQuery 樹型菜單插件(Treeview)

在這里插入圖片描述

jQuery Validate表單驗證，jQuery Password Validation（密碼驗證）

為表單提供了強大的驗證功能

jQuery Cookie 插件

通過jQuery操作Cookie

jQuery Autocomplete

搜索、過濾值，一般用在輸入框提示中

jQuery Growl 插件(消息提醒)

顯示反饋消息，消息會在一段時間后自動消失

jQuery Tooltip

鼠標移動在某元素出現提示框，該插件目前版本是 1.3，已經很長時間沒有更新，推薦使用 jQuery UI 工具提示框（Tooltip）

參考

菜鳥教程 - jQuery 插件

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/278727.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/278727.shtml
英文地址，請注明出處：http://en.pswp.cn/news/278727.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！