jQuery系统的学习（七）

最新推荐文章于 2022-11-29 13:58:04 发布

飞鸿酱

最新推荐文章于 2022-11-29 13:58:04 发布

阅读量181

点赞数

分类专栏： front-end-jqurey

本文链接：https://blog.csdn.net/weixin_38465623/article/details/80426707

版权

front-end-jqurey 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

jQuery - noConflict() 方法

jquery和其他javascript框架

jquery使用$符号作为jquery的简写

其他一些js框架：mootools、backbone、sammy、cappuccino、knockout、javascript mvc、google web toolkit、google closure、ember、batman以及ext js

其中某些框架也是用$符号作为简写（就像jquery），如果用里的两种不同的框架正在使用的简写符号，有可能导致脚本停止运行。

jquery的团队考虑到了这个问题，并实现了noconflict（）方法。

jquery noconflict（）方法

该方法会释放对$标识符的控制，这样其他脚本就可以使用他了。

当然，也可以通过全名替代简写的方式来使用jquery

<!DOCTYPE html>
<html>
	<head>
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<meta charset="UTF-8">
<script>
	$.noConflict();
	jQuery(document).ready(function(){
		jQuery("button").click(function(){
			jQuery("p").text("jquery");
		});
	});
</script>
	</head>
	<body>
		<p>好的</p>
		<button>确定</button>
	</body>
</html>

您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。请看这个例子：

<!DOCTYPE html>
<html>
	<head>
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<meta charset="UTF-8">
<script>
var jq=$.noConflict();
	jq(document).ready(function(){
		jq("button").click(function(){
			jq("p").text("jquery");
		});
	});
</script>
	</head>
	<body>
		<p>好的</p>
		<button>确定</button>
	</body>
</html>

如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"：

<!DOCTYPE html>
<html>
	<head>
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<meta charset="UTF-8">
<script>
//var jq=$.noConflict();
$.noConflict();
	jQuery(document).ready(function($){
		$("button").click(function(){
			$("p").text("jquery");
		});
	});
</script>
	</head>
	<body>
		<p>好的</p>
		<button>确定</button>
	</body>
</html>

JSONP 教程

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。

同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。

JSONP 应用

1. 服务端JSONP格式数据

callback function

回调函数

生动的描述

你到一个商店买东西，刚好你要的东西没有货，于是你在店员那里留下了你的电话，过了几天店里有货了，店员就打了你的电话，然后你接到电话后就到店里去取了货。在这个例子里，你的电话号码就叫回调函数，你把电话留给店员就叫登记回调函数，店里后来有货了叫做触发了回调关联的事件，店员给你打电话叫做调用回调函数，你到店里去取货叫做响应回调事件。（by常溪玲）

<?php
//	Content-Type是返回消息中非常重要的内容，表示后面的文档属于什么MIME类型。
header('Content-type: application/json');
//获取回调函数名,把字符转化为html
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>

出现了问题，我换成自己的php地址就无法显示。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
	</head>

	<body>
		<div id="div1"></div>
		<script type="text/javascript">
			function callbackFunction(r, name) {
				var html = '<ul>';
				for(var i = 0; i < r.length; i++) {
					html += '<li>' + r[i] + '</li>';
				}
				html += '</ul>';
				document.getElementById('div1').innerHTML = html;
			}
		</script>
		<script type="text/javascript" src="http://127.0.0.1:8020/jquery/jsonp.php?jsoncallback=callbackFunction"></script>
	</body>
</html>

用jquery来写

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
	</head>

	<body>
		<div id="div1"></div>
		<script type="text/javascript">
			$.getJSON("http://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>';

				$('#div1').html(html);
			});
		</script>
	</body>

</html>

效果都如下图