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 插件

jQuery杂项进阶（四）相关推荐

JavaScript进阶(四)
JavaScript进阶(四) 2019版黑马程序员javaScript进阶面向对象ES6 122集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1Kt411w ...
jQuery——入门（四）JQuery 事件
jQuery--入门(四)JQuery 事件一.事件初探加载文档完成触发: window.onload = function(){} //js $(window).load(function( ...
jQuery学习（四）— jQuery的ready事件和原生JS的load事件的区别
jQuery学习(四)- jQuery的ready事件和原生JS的load事件的区别 jQuery的ready事件和原生JS的load事件的区别: 页面中可以有多个ready事件,而load事件会出现 ...
[jQuery学习系列四 ]4-Jquery学习四-事件操作
[jQuery学习系列四 ]4-Jquery学习四-事件操作前言: 今天看知乎偶然看到中国有哪些类似于TED的节目, 回答中的一些推荐我给记录下来了, 顺便也在这里贴一下: 一席云集听道推酷 ...
jquery获取元素四种方式。
jquery获取元素四种方式. 当你成功引入jquery插件之后,就可以用jquery的语法来获取html元素. js获取只有document.getElementById或者通过名称来获取. 而jq ...
AngularJS进阶(四十)创建模块、服务
AngularJS进阶(四十)创建模块.服务学习要点使用模块构架应用创建和使用服务为什么要使用和创建服务与模块? 服务允许你打包可重用的功能,使之能在此应用中使用. 模块允许你打包可重用的功能 ...
Mysql进阶四：常见函数-日期函数
进阶四:日期函数作者:alicomon 寄语读者: 博客为学习记录,目的有二: 记录知识点,方便温故知新: 为读者提供帮助,用于交流,共同提高. 1.now 返回当前系统日期+时间 SELECT N ...
跨平台应用开发进阶(四十六)webview方式嵌套H5应用加载慢解决方案
文章目录一.前言二.优化建议三.实施方案 3.1 优化项目结构,减小项目组包体积 3.2 去除项目冗余字体文件 3.2.1 字体筛选 3.2.2 字体压缩 3.3 gzip压缩 3.4 ETag ...
HTML导航栏的四种制作方法,jQuery+CSS3实现四种应用广泛的导航条制作实例详解
导航条的使用很广,每个网站都会做出具有自己特色的导航条.最近特地去了解了各种类型的导航条,比如具有高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,甚至是具有摩擦运动动画的导航条(文字下 ...