在这篇文章中，我们将为您详细介绍使用jQuery的MediaWikiAPI没有响应的内容，并且讨论关于jquery.media.js的相关问题。此外，我们还会涉及一些关于(原创)jQueryMedia
在这篇文章中，我们将为您详细介绍使用jQuery的MediaWiki API没有响应的内容，并且讨论关于jquery.media.js的相关问题。此外，我们还会涉及一些关于(原创)jQuery Media Plugin-jQuery的网页媒体播放器插件的使用心得、CSS3 media queries结合jQuery实现响应式导航、CSS3 Media Query的使用方法、jQuery上传文件使用jQuery的ajax方法(没有插件)的知识，以帮助您更全面地了解这个主题。
本文目录一览：- 使用jQuery的MediaWiki API没有响应（jquery.media.js）
- (原创)jQuery Media Plugin-jQuery的网页媒体播放器插件的使用心得
- CSS3 media queries结合jQuery实现响应式导航
- CSS3 Media Query的使用方法
- jQuery上传文件使用jQuery的ajax方法(没有插件)
使用jQuery的MediaWiki API没有响应（jquery.media.js）
我试图从Wikipedia中获取一些内容作为JSON：
$.getJSON("http://en.wikipedia.org/w/api.php?action=query&prop=revisions&rvprop=content&titles="+title+"&format=json", function(data) { doSomethingWith(data);});但是我没有任何回应。如果我粘贴到浏览器的地址栏，类似
http://en.wikipedia.org/w/api.php?action=query&prop=revisions&rvprop=content&titles=jQuery&format=json我得到了预期的内容。怎么了？
答案1
小编典典您需要$.getJSON()通过添加&callback=?查询字符串来触发JSONP行为，如下所示：
$.getJSON("http://en.wikipedia.org/w/api.php?action=query&prop=revisions&rvprop=content&titles="+title+"&format=json&callback=?", function(data) { doSomethingWith(data);});您可以在这里进行测试。
如果不使用JSONP，您将遇到同源策略，该策略阻止XmlHttpRequest取回任何数据。
(原创)jQuery Media Plugin-jQuery的网页媒体播放器插件的使用心得
jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件，它支持大部分的网络多媒体播放器和多媒体格式，比如：Flash, Windows Media Player, Real Player, Quicktime, MP3,Silverlight, PDF。它根据当前的脚本配置，自动将a标签替换成div，并生成object, embed甚至是iframe代码，至于生成object还是embed，jQuery Media会根据当前平台自动判别，因此兼容性方面非常出色下面这段代码是jQuery Media生成后的。
网址：http://jquery.malsup.com/，官网资料，大家一看就能看懂。下面是我将本插件用于我网站简历展示的截图，下面截图中的简历是2014年写的，等最新简历整理好之后，会将访问地址提供出来给大家。
部门代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>media</title>
<script src="jquery-1.6.min.js" type="text/javascript">
</script>
<script src="jquery.media.js" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
$(function() {
$(''a.media'').media({width:980, height:400});
});
//]]>
</script>
</head>
<body>
<div>
<div>
pdf<a href="1.pdf"></a>
</div>
</div>
</body>
</html>
CSS3 media queries结合jQuery实现响应式导航
这篇文章主要为大家详细介绍了css3 media queries结合jquery实现响应式导航,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
目的：
实现一个响应式导航，当屏幕宽度大于700px时，效果如下：
当屏幕宽度小于700px时，导航变成一个小按钮，点击之后有一个菜单慢慢拉下来：
思路：
立即学习“前端免费学习笔记（深入）”；
1.为了之后在菜单上绑定事件，并且不向DOM中添加多余的节点，在大屏幕中出现的导航和小屏幕中的下拉导航必须是一个。
所以我选择了将导航绝对定位。
2.默认导航列表是出现的，当屏幕宽度小于700px时它隐藏，并且设置position，当屏幕宽度大于700px时，它出现。或者，默认导航列表是隐藏的，当屏幕宽度大于700px时它出现在右侧，小于时隐藏。
问题：
开始的时候，我选择了默认他出现，然后出现了一个问题——只要按过了按钮，屏幕放大之后导航列表就再也不会出现了。
代码如下：
<p>
<ul>
<li><a href="javascript:void(0);">Home</a></li>
<li><a href="javascript:void(0);">Portfolio</a></li>
<li><a href="javascript:void(0);">Contact</a></li>
</ul>
<a href="javascript:void(0);">...</a>
</p>.nav-box {
position: relative;
}
.nav-btn {
display: none;
color: #DE6B73;
float: right;
line-height: 20px;
margin: 35px 0;
}
.nav {
display: block ;
border-top: none;
position: absolute;
right: 0;
}
@media(max-width:700px){
.nav-btn{
display: inline-block;
}
}
@media(max-width:700px){
.nav {
display: none;
top: 80px;
background-color: #F79C9C;
border-top: 1px solid #FFF;
line-height: 60px;
}
}window.onload=function(){
$(".nav-btn").click(function(){
$(".nav").slideToggle(500);
});
}于是我以为是我的思路出现了问题，我换成了默认他隐藏的方式。结果还是一样，只要按过了按钮，他就再也不会出现了。于是我开始怀疑jQuery。
解决：
然后我在F12中发现,我按过按钮之后，他会出现这样一个样式：
原来这一切都是slideToggle搞的鬼，他是通过设置元素的内联样式让元素隐藏，这种方法设置的样式的优先级是三种方式中最高的，所以在CSS中设置的block根本没有用了。
要解决这个问题，可以使用js，也可以用一个优先级更高的方式：!important.
如果选择用!important的话，就需要设置导航列表是默认隐藏的，不然他永远都无法隐藏了。
最后的CSS代码如下：
.nav {
display: none;
position: absolute;
right: 10%;
top: 80px;
background-color: #F79C9C;
border-top: 1px solid #FFF;
line-height: 60px;
}
.nav-btn {
display: none;
color: #DE6B73;
float: right;
line-height: 20px;
margin: 35px 0;
}
@media(max-width:700px){
.nav-btn{
display: inline-block;
}
}
@media(min-width:700px){
.nav {
display: block !important;
border-top: none;
top: 15px;
right: 0;
}
}总结：
不真正理解一个框架的原理就去用，是很危险的。
我之后试了一个jQuery的.css()方法，他同样是用内联的方式改变的元素的样式。
看样子需要研究一个jQuery是如何工作的了，这样应用的时候才能理解他的行为。
CSS3 Media Query的使用方法
响应小实例看这：简单的响应式页面小示例
现在移动优先的站点越来越多，响应式网站的设计也越来越普及，更多的前端框架被开发出来，比如众所周知的bootstrap，国产的拼图也挺不错，但貌似上了1.0版本就没在更新，其实响应式的机理就是media query。
下面展示几个最基本的使用方法
1、在header中进行媒体查询来判定引入哪个css样式表
使用media做查询
<link rel="stylesheet" type="text/css" media="screen and (max-width: 400px)" href="small.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:401) and (max-width:800px)" href="middle.css">或者使用import命令：
<style type="text/css">
@import url(''small.css'') screen and (max-width: 400px);
@import url(''middle.css'') screen and (min-width: 401px) and (max-width: 800px);
</style>或者直接在style标签里写内联样式，其实就和普通css一样，写在css文件里引入做外联，直接写在style里做内联
<style type="text/css">
@media screen and and (max-width: 400px) {
//when the width lower to 400px
body {
background: #cccccc;
}
}
@media screen and (min-width: 401px) and (max-width: 800px) {
//when the width between 401px and 800px
body {
background: #ffffff;
}
}
</style>以上将会实现当屏幕宽度小于400px时引入small.css，当大于400px小于800px时则引入middle.css
2、在css文件中进行媒体查询
media，在css文件中也可直接编写media query样式
//
@media screen and and (max-width: 400px) {
//when the width lower to 400px
body {
background: #cccccc;
}
}
@media screen and (min-width: 401px) and (max-width: 800px) {
//when the width between 401px and 800px
body {
background: #ffffff;
}
}import，你可以建立一个全局的样式文件，style.css，将响应模块的样式做如下导入即可
//当小于400px时导入small.css
@import url(''small.css'') screen and (max-width: 400px);
//当大于400px小于800px时导入middle.css
@import url(''middle.css'') screen and (min-width: 401px) and (max-width: 800px);其实查询就是两种方式，import是用来做导入判断的，media既可以做导入，也可以直接做查询。
jQuery上传文件使用jQuery的ajax方法(没有插件)
我的上传表单看起来像这样
<form action="/Member/UploadPicture" enctype="multipart/form-data" id="uploadform" method="post">
<span>
<divid="imgUpl">
<h3>Upload profile picture</h3>
<div></div>
<input type="file" name="file" id="file" />
<buttonid="upComplete"><span>Upload</span></button>
</div>
</span>
</form>
而我的jQuery代码是：
$('#upComplete').click(function () {
$('#up').hide();
$('#upRes').show();
var form = $("#uploadform");
$.ajax({
type: "POST",url: "/Member/UploadPicture",data: form.serialize(),success: function (data) {
alert(data);
}
});
$.fancybox.close();
return false;
});
如果我打开firebug,我可以看到ajax()方法做简单的表单(不是多部分),POST内容是空的
是否可以使用jQuery ajax()方法进行文件上传,还是以其他方式进行上传？
非常感谢你
解决方法
当然,你可以随时查看插件的源代码,看看如果你不想包含它,它是如何实现的(它使用一个隐藏的iFrame,因为文件不能用AJAX上传),但是为什么要这样做呢？它直接:-)
以下是您的代码可能如下所示的示例：
$(function() {
$('#uploadform').ajaxForm();
});
也使上传按钮一个提交按钮：
<buttonid="upComplete" type="submit">
<span>Upload</span>
</button>
今天关于使用jQuery的MediaWiki API没有响应和jquery.media.js的分享就到这里，希望大家有所收获，若想了解更多关于(原创)jQuery Media Plugin-jQuery的网页媒体播放器插件的使用心得、CSS3 media queries结合jQuery实现响应式导航、CSS3 Media Query的使用方法、jQuery上传文件使用jQuery的ajax方法(没有插件)等相关知识，可以在本站进行查询。
本文标签：
