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.mzph.cn/news/278727.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是WLIDSVC.EXE和WLIDSVCM.EXE,它们为什么运行?

You’re no doubt reading this article because you’re wondering what those two processes are doing cluttering up Task Manager, and also wondering why they are in capital letters. You’ve come to the right place. 毫无疑问&#xff0c;您阅读本文是因为您想知道…

linux压缩和解压缩_Linux QuickTip:一步下载和解压缩

linux压缩和解压缩Most of the time, when I download something it’s a file archive of some kind – usually a tarball or a zip file. This could be some source code for an app that isn’t included in Gentoo’s Portage tree, some documentation for an internal …

Spark架构与作业执行流程简介

2019独角兽企业重金招聘Python工程师标准>>> Spark架构与作业执行流程简介 博客分类&#xff1a; spark Local模式 运行Spark最简单的方法是通过Local模式&#xff08;即伪分布式模式&#xff09;。 运行命令为&#xff1a;./bin/run-example org.apache.spark.exam…

Spring boot整合Mongodb

最近的项目用了Mongodb&#xff0c;网上的用法大多都是七零八落的没有一个统一性&#xff0c;自己大概整理了下&#xff0c;项目中的相关配置就不叙述了&#xff0c;由于spring boot的快捷开发方式&#xff0c;所以spring boot项目中要使用Mongodb&#xff0c;只需要添加依赖和…

nodejs和Vue和Idea

文章目录Vue环境搭建Idea安装Idea中配置Vue环境Node.js介绍npm介绍Vue.js介绍[^3]Idea介绍Vue环境搭建 概述&#xff1a;vue环境搭建&#xff1a;需要npm&#xff08;cnpm&#xff09;&#xff0c;而npm内嵌于Node.js&#xff0c;所以需要下载Node.js。 下载Node.js&#xff1…

Spring MVC上下文父子容器

2019独角兽企业重金招聘Python工程师标准>>> Spring MVC上下文父子容器 博客分类&#xff1a; java spring 在Spring MVC的启动依赖Spring框架&#xff0c;有时候我们在启动Spring MVC环境的时候&#xff0c;如果配置不当的话会造成一些不可预知的结果。下面主要介绍…

12.7 Test

目录 2018.12.7 TestA 序列sequence(迭代加深搜索)B 轰炸bomb(Tarjan DP)C 字符串string(AC自动机 状压DP)考试代码AC2018.12.7 Test题目为2018.1.4雅礼集训。 时间&#xff1a;4.5h期望得分&#xff1a;010010实际得分&#xff1a;010010 A 序列sequence(迭代加深搜索) 显然可…

word文档中统计总页数_如何在Google文档中查找页数和字数统计

word文档中统计总页数Whether you’ve been given an assignment with a strict limit or you just like knowing how many words you’ve written, Google Docs has your back. Here’s how to see exactly how many words or pages you’ve typed in your document. 无论您是…

vue 入门notes

文章目录vue一、js基础二、封装缓存三、组件1、组件创建、引入、挂载、使用2、组件间的传值- 父组件主动获取子组件的数据和方法&#xff08;子组件给父组件传值&#xff09;&#xff1a;- 子组件主动获取父组件的数据和方法&#xff08;父组件给子组件传值&#xff09;&#x…

spring集成 JedisCluster 连接 redis3.0 集群

2019独角兽企业重金招聘Python工程师标准>>> spring集成 JedisCluster 连接 redis3.0 集群 博客分类&#xff1a; 缓存 spring 客户端采用最新的jedis 2.7 1. maven依赖&#xff1a; <dependency> <groupId>redis.clients</groupId> <artifact…

火狐浏览器复制网页文字_从Firefox中的网页链接的多种“复制”格式中选择

火狐浏览器复制网页文字Tired of having to copy, paste, and then format links for use in your blogs, e-mails, or documents? Then see how easy it is to choose a click-and-go format that will save you a lot of time and effort with the CoLT extension for Firef…

vscode配置、使用git

文章目录一、下载、配置git二、vscode配置并使用git三、记住密码一、下载、配置git 1、git-win-x64点击下载后安装直接安装&#xff08;建议复制链接用迅雷等下载器下载&#xff0c;浏览器太慢&#xff0c;记住安装位置&#xff09;。 2、配置git环境变量&#xff1a; 右键 此…

BTrace功能

2019独角兽企业重金招聘Python工程师标准>>> BTrace功能 一、背景 在生产环境中可能经常遇到各种问题&#xff0c;定位问题需要获取程序运行时的数据信息&#xff0c;如方法参数、返回值、全局变量、堆栈信息等。为了获取这些数据信息&#xff0c;我们可以…

.NET(c#) 移动APP开发平台 - Smobiler(1)

原文&#xff1a;https://www.cnblogs.com/oudi/p/8288617.html 如果说基于.net的移动开发平台&#xff0c;目前比较流行的可能是xamarin了&#xff0c;不过除了这个&#xff0c;还有一个比xamarin更好用的国内的.net移动开发平台&#xff0c;smobiler&#xff0c;不用学习另外…

如何在Vizio电视上禁用运动平滑

Vizio维齐奥New Vizio TVs use motion smoothing to make the content you watch appear smoother. This looks good for some content, like sports, but can ruin the feel of movies and TV shows. 新的Vizio电视使用运动平滑来使您观看的内容显得更平滑。 这对于某些内容(例…

无服务器架构 - 从使用场景分析其6大特性

2019独角兽企业重金招聘Python工程师标准>>> 无服务器架构 - 从使用场景分析其6大特性 博客分类&#xff1a; 架构 首先我应该提到&#xff0c;“无服务器”技术肯定有服务器涉及。 我只是使用这个术语来描述这种方法和技术&#xff0c;它将任务处理和调度抽象为与…

Enable Authentication on MongoDB

1、Connect to the server using the mongo shell mongo mongodb://localhost:270172、Create the user administrator Change to the admin database: use admindb.createUser({user: "Admin",pwd: "Admin123",roles: [ { role: "userAdminAnyDataba…

windows驱动程序编写_如何在Windows中回滚驱动程序

windows驱动程序编写Updating a driver on your PC doesn’t always work out well. Sometimes, they introduce bugs or simply don’t run as well as the version they replaced. Luckily, Windows makes it easy to roll back to a previous driver in Windows 10. Here’s…

在Windows 7中的Windows Media Player 12中快速预览歌曲

Do you ever wish you could quickly preview a song without having to play it? Today we look at a quick and easy way to do that in Windows Media Player 12. 您是否曾经希望无需播放就可以快速预览歌曲&#xff1f; 今天&#xff0c;我们探讨一种在Windows Media Play…

Vue.js中的8种组件间的通信方式;3个组件实例是前6种通信的实例,组件直接复制粘贴即可看到运行结果

文章目录一、$children / $parent二、props / $emit三、eventBus四、ref五、provide / reject六、$attrs / $listeners七、localStorage / sessionStorage八、Vuex实例以element ui为例。例子从上往下逐渐变复杂&#xff08;后面例子没有删前面的无用代码&#xff0c;有时间重新…